Fix : UI crash in Reset Password form when username/password is invalid #7533
Fixes #7533
Before (when there was no error handling for invalid username/password) :
After (proper error handling) :
Quick gist of what I did :
The Reset Password form was crashing when the username was invalid or when the backend returned an error. This happened because UNSAFE_componentWillReceiveProps(nextProps) only handled the successful submission case. In failure cases, no error message was set, leaving error = null, which caused the UI to break when accessed.
🔧 What I changed
Added error handling inside UNSAFE_componentWillReceiveProps(nextProps) for unsuccessful form submissions.
Added both:
Personalized error messages (e.g., invalid username, bad request, etc.)
A fallback generic error message for unexpected cases.
Ensures error is always a string, preventing UI crashes.
✅ Result
The form now behaves correctly:
Success → loads normally
Failure → shows the appropriate error message
No more error is null UI crashes
Let me know , if we need addons in this @stevepiercy @mamico
[!CAUTION] The Volto Team has suspended its review of new pull requests from first-time contributors until the release of Plone 7, which is preliminarily scheduled for the second quarter of 2026. Read details.
Thanks for submitting your first pull request! You are awesome! :hugs:
If you haven't done so already, read Plone's Code of Conduct, Contributing to Plone, First-time contributors, and Contributing to Volto, as this will greatly help the review process.
Welcome to the Plone community! :tada:
@SumitSingh69 you need to sign the Plone Contributor Agreement to merge this pull request.
Learn about the Plone Contributor Agreement: https://plone.org/foundation/contributors-agreement
If you have already signed the agreement, please allow a week for your agreement to be processed.
Once it is processed, you will receive an email invitation to join the plone GitHub organization as a Contributor.
If after a week you have not received an invitation, then please contact [email protected].
i have accepted the contributor agreement, Kindly review this pull request .
Hi @mamico @plone/volto-team , it’s been about two weeks since I opened this PR. Could you please take a look when you have a moment?
@davisagli I get it, what you are talking about , you mean directly showing the error messages coming from api to the user right . Like in the below contact-form
I can do that but the reset-password api is returning null when there is an invalid username , that is the reason why the UI was breaking as there was no error handling to the null response in the frontend (that is the reason why i had to add my own user-friendly error messages) . Kindly , let me know what should I do next . Here is a image sample for your reference.
@SumitSingh69 What you did is okay for the case where the username is invalid and the API returns a 404 response, since the API is not returning a message in that case (this comes from https://github.com/plone/plone.restapi/blob/main/src/plone/restapi/services/users/add.py#L276).
But in other cases (especially 400 and 403 responses), the API does return a specific message and we should display it.
alright @davisagli , just to let you know @stevepiercy wanted to have the errorMessages more user friendly like instead of saying "bad request" , he wanted the message should be "We couldn’t process your request. Please check your input and try again.". But , as per your comment , I will proceed to remove all other errorMessages made by me except the 404 error message, and simply display the API error messages in all the other cases.
As per the changes ,
All the error status except 404 will have their own error messages coming from the API
For example:
And for 404 (null response) status , We are the showing this error message
alright @davisagli , just to let you know @stevepiercy wanted to have the errorMessages more user friendly like instead of saying "bad request" , he wanted the message should be "We couldn’t process your request. Please check your input and try again.".
@davisagli is this something that can be handled in plone.restapi? Currently the response is user-hostile.
@stevepiercy We need to take a step back here.
If this form is used by a logged in user resetting their own password, we should show them the current username (to avoid mistakes) but not allow them to edit it. Then it won't be possible to get a 404 from the API here.
For logged out users, for security reasons we have to make sure this API can't be used to find out whether a username exists in the system. So we have to pretend the password reset was successful even if it was not. Yeah, that's bad UX, but security takes priority here.
We also have to make sure there is a way for an admin user to request a password reset to be sent to another user. I don't remember if we have this already in Volto or not, or whether it uses this form vs something else.
Long story short: I need to come back to this when I have more time to take a holistic look at everything.
@davisagli Let me know , if you need any assistance from my side or any changes.