Skip to content

Add Change Password feature with form and routing#218

Merged
gangulel merged 3 commits intomasterfrom
change-password805
Aug 5, 2025
Merged

Add Change Password feature with form and routing#218
gangulel merged 3 commits intomasterfrom
change-password805

Conversation

@gangulel
Copy link
Copy Markdown
Collaborator

@gangulel gangulel commented Aug 5, 2025

This pull request implements a new "Change Password" feature for users, allowing them to request a password reset link directly from their profile. The changes include adding a dedicated password change form, updating navigation flows, and ensuring consistent styling and user experience for the password reset process.

New Password Reset Feature:

  • Added a new ChangePasswordForm component that provides a UI for users to request a password reset link. The form is pre-filled and disabled if the user's email is already known, and provides real-time feedback on submission status. The form uses Auth0's password reset endpoint and displays success and error messages as appropriate. (client/src/components/pages/ChangePassword/ChangePasswordForm.jsx, client/src/components/pages/ChangePassword/ChangePasswordForm.jsxR1-R279)
  • Created a dedicated route /changePassword in the private routes, protected for authenticated users, which renders the new password reset form. (client/src/routes/PrivateRoutes.jsx, [1] [2]
  • Added an export for the ChangePassword component for future use. (client/src/components/pages/ChangePassword/index.js, client/src/components/pages/ChangePassword/index.jsR1)

Navigation and User Experience Improvements:

  • Updated the "Change Password" button in the user profile to navigate directly to the new /changePassword route instead of logging out and redirecting to a generic password reset page. This provides a smoother and more secure user experience. (client/src/components/organisms/UserPortal/Userprofile/Userprofile.jsx, client/src/components/organisms/UserPortal/Userprofile/Userprofile.jsxL734-R741)

Styling and UI Enhancements:

Additional Notes:

  • There are two separate implementations for the password reset UI: ChangePassword.jsx (with illustration and CSS module styling) and ChangePasswordForm.jsx (with inline styles and theme support). The route uses ChangePasswordForm.jsx as the main implementation.
  • No backend logic was changed; the password reset is handled via Auth0's API.

These changes together introduce a modern, user-friendly way for users to initiate a password reset from within their account portal.

@gangulel
Copy link
Copy Markdown
Collaborator Author

gangulel commented Aug 5, 2025

This pull request introduces a new user password reset flow and improves the user experience for changing passwords. The main changes include adding a dedicated password change page and updating navigation and UI accordingly.

Password Reset Flow Improvements:

  • Added a new ChangePasswordForm component that allows users to request a password reset link via email. The form is styled for both light and dark themes and provides feedback for success and error states.
  • Integrated the new password reset page into the routing system by adding a protected route for /changePassword in PrivateRoutes.jsx. [1] [2]

UI and Navigation Updates:

  • Updated the "Change Password" button in the user profile to navigate directly to the new /changePassword route instead of logging out and redirecting to /forgotpassword.
  • Added a CSS module (ChangePassword.module.css) for the new password reset page, providing a modern and responsive design.
  • Added an index export for the new ChangePassword page for easier imports.

@gangulel gangulel merged commit cbed169 into master Aug 5, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant