Laravel (Password reset) not working.

Hello Team,

In the latest metronic laravel there is a major mistake in the reset-password.blade

Below is wrong and needs to have a different ID an Action.
Also the JS is not loaded because it is not implemented in pages.php

<form class="form w-100 " novalidate="novalidate" id="kt_sign_up_form" action="{{ theme()->getPageUrl('register') }}">

I see 28 pull request on Github, also 1 with this error on missing data in pages.php from 2021.
Please also look at Github issues, there are the developers.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

Validation in de JS file "new-password.js" is also wrong.
No validation on Email and validation on toc that is not on the page.

Here are is the correct code, there where more mistakes than only the 2 above i'm using localization so no hardcoded text strings

reset-password.blade.php

<x-auth-layout>

<!--begin::Signup Form-->
<form class="form w-100 " novalidate="novalidate" action="{{ theme()->getPageUrl('password.update') }}">
@csrf

<!-- Password Reset Token -->
<input type="hidden" name="token" value="{{ $request->route('token') }}">

<!--begin::Heading-->
<div class="text-center mb-11">
<!--begin::Title-->
<h1 class="text-dark fw-bolder mb-3">{{__('auth.reset.password.title')}}</h1>
<!--end::Title-->
<!--begin::Subtitle-->
<div class="text-gray-500 fw-semibold fs-6">{{__('auth.reset.password.subtitle')}}</div>
<!--end::Subtitle=-->
</div>
<!--begin::Heading-->

<!--begin::Input group=-->
<div class="fv-row mb-8 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid">
<!--begin::Email-->
<input type="text" placeholder="{{__('auth.placeholder.email')}}" name="email" autocomplete="off" class="form-control bg-transparent" value="{{ $request->input('email') }}">
<!--end::Email-->
</div>
<!--begin::Input group-->
<div class="fv-row mb-8 fv-plugins-icon-container" data-kt-password-meter="true">
<!--begin::Wrapper-->
<div class="mb-1">
<!--begin::Input wrapper-->
<div class="position-relative mb-3">
<input class="form-control bg-transparent" type="password" placeholder="{{__('auth.placeholder.password')}}" name="password" autocomplete="off">
<span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2" data-kt-password-meter-control="visibility">
<i class="bi bi-eye-slash fs-2"></i>
<i class="bi bi-eye fs-2 d-none"></i>
</span>
</div>
<!--end::Input wrapper-->
<!--begin::Meter-->
<div class="d-flex align-items-center mb-3" data-kt-password-meter-control="highlight">
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2 active"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
<div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
</div>
<!--end::Meter-->
</div>
<!--end::Wrapper-->
<!--begin::Hint-->
<div class="text-muted">{{__('auth.password.help')}}</div>
<!--end::Hint-->
</div>
<!--end::Input group=-->
<!--end::Input group=-->
<div class="fv-row mb-8 fv-plugins-icon-container">
<!--begin::Repeat Password-->
<input placeholder="{{__('auth.placeholder.password.repeat')}}" name="password_confirmation" type="password" autocomplete="off" class="form-control bg-transparent">
<!--end::Repeat Password-->
</div>
<!--end::Input group=-->
<!--begin::Submit button-->
<div class="d-grid mb-10">
<button type="submit" class="btn btn-primary">
@include('partials.general._button-indicator',['label'=>__('auth.reset.password.submit')])
</button>
</div>
<!--end::Submit button-->
<div></div>
</form>
<!--end::Signup Form-->
</x-auth-layout>


new-password.js

"use strict";

// Class Definition
var KTPasswordResetNewPassword = function () {
// Elements
var form;
var submitButton;
var validator;
var passwordMeter;

var handleForm = function (e) {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'email': {
validators: {
notEmpty: {
message: '{{__('validation.required',['attribute' => __('auth.placeholder.email')])}}'
},
emailAddress: {
message: '{{__('validation.email',['attribute' => __('auth.placeholder.email')])}}'
}
}
},
'password': {
validators: {
notEmpty: {
message: '{{__('validation.required',['attribute' => __('auth.placeholder.password')])}}'
},
callback: {
message: '{{__('validation.password')}}',
callback: function (input) {
if (input.value.length > 0) {
return validatePassword();
}
}
}
}
},
'password_confirmation': {
validators: {
notEmpty: {
message: '{{__('validation.required',['attribute' => __('auth.placeholder.password.repeat')])}}'
},
identical: {
compare: function () {
return form.querySelector('[name="password"]').value;
},
message: '{{__('validation.same',['attribute'=>__('auth.placeholder.password'),'other'=>__('auth.placeholder.password.repeat')])}}'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger({
event: {
password: false
}
}),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);

submitButton.addEventListener('click', function (e) {
e.preventDefault();

validator.revalidateField('password');

validator.validate().then(function (status) {
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');

// Disable button to avoid multiple click
submitButton.disabled = true;

// Simulate ajax request
axios.post(submitButton.closest('form').getAttribute('action'), new FormData(form))
.then(function (response) {
// Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "{{__('auth.confirm.password.js.success')}}",
icon: "success",
buttonsStyling: false,
confirmButtonText: "{{__('auth.js.confirmButtonText')}}",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
window.location.href = '/login';
form.querySelector('[name="email"]').value = "";
form.querySelector('[name="password"]').value = "";
form.querySelector('[name="password_confirmation"]').value = "";
passwordMeter.reset(); // reset password meter
}
});
})
.catch(function (error) {
let dataMessage = error.response.data.message;
let dataErrors = error.response.data.errors;

for (const errorsKey in dataErrors) {
if (!dataErrors.hasOwnProperty(errorsKey)) continue;
dataMessage += "\r\n" + dataErrors[errorsKey];
}

if (error.response) {
Swal.fire({
text: dataMessage,
icon: "error",
buttonsStyling: false,
confirmButtonText: "{{__('auth.js.confirmButtonText')}}",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
})
.then(function () {
// always executed
// Hide loading indication
submitButton.removeAttribute('data-kt-indicator');

// Enable button
submitButton.disabled = false;
});
} else {
// Show error popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "{{__('auth.js.GenericError')}}",
icon: "error",
buttonsStyling: false,
confirmButtonText: "{{__('auth.js.confirmButtonText')}}",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
});

form.querySelector('input[name="password"]').addEventListener('input', function () {
if (this.value.length > 0) {
validator.updateFieldStatus('password', 'NotValidated');
}
});
}

var validatePassword = function () {
return (passwordMeter.getScore() > 50);
}

// Public Functions
return {
// public functions
init: function () {
form = document.querySelector('#kt_new_password_form');
submitButton = document.querySelector('#kt_new_password_submit');
passwordMeter = KTPasswordMeter.getInstance(form.querySelector('[data-kt-password-meter="true"]'));

handleForm();
}
};
}();

// On document ready
KTUtil.onDOMContentLoaded(function () {
KTPasswordResetNewPassword.init();
});

The problem is that they don't have it versionated on github, when you try to see what are the changes for example: Laravel, you'll have to see above all implementations, it's not practical, long time ago I told them to separate in branches everything so we can follow up the changes, but having the github repo is no sense, they don't merge anything, they don't fix anything mentioned etc.. so, if you can fix it, keep it that way, although you can mention it here so other developers facing same problems can also fix it. :D

Hi Tieme Alberts,

I appreciate your help with the issue. We will add this fix in Laravel.

Thanks

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(