Change password by Andrew-Ryer · Pull Request #1558 · OpenEnergyDashboard/OED

Andrew-Ryer · 2025-11-28T18:36:56Z

Description

This PR implements the full User Password Change feature in OED, enabling any authenticated user to securely change their own password via the Options → Change Password menu, without admin intervention. The work spans backend API, frontend RTK Query integration, a new modal UI component, and integration into the main application with translations.

On the backend, it adds a new POST /api/users/changePassword endpoint protected by authentication middleware that verifies the user’s JWT, validates input (including length constraints), confirms the current password with bcrypt.compare, securely hashes the new password with bcrypt.hash, and updates the database via User.updateUserPassword. On the frontend, it introduces a changePassword RTK Query mutation and a ChangePasswordModal React component that displays the current username, collects current/new/confirm password, performs real-time validation, and shows success/error notifications. The feature is fully integrated into HeaderButtonsComponent via a “Change Password” entry in the Options dropdown and wired into the translations system so all UI text is available in English, French, and Spanish.

Fixes #1526 - Allow each user to change password

Type of change

(Check the ones that apply by placing an "x" instead of the space in the [ ] so it becomes [x])

Note merging this changes the database configuration.
This change requires a documentation update

Checklist

(Note what you have done by placing an "x" instead of the space in the [ ] so it becomes [x]. It is hoped you do all of them.)

I have followed the OED pull request ideas
I have removed text in ( ) from the issue request
You acknowledge that every person contributing to this work has signed the OED Contributing License Agreement and each author is listed in the Description section.

Limitations

Password policy is limited to length-based validation (8–128 characters); there is no password strength meter or enforcement of complexity (e.g., symbols, digits, upper/lowercase mix).
Password history / reuse prevention is not implemented; users can technically reuse previous passwords as long as they meet length requirements.
No rate-limiting or lockout mechanism is added specifically for the password change endpoint; it relies on existing global protections.
Automated tests (unit/integration/e2e) for the new endpoint, RTK Query mutation, and modal component are not included as part of this PR; verification has been described and performed manually and could be formalized in follow-up test work.
Documentation and user-facing help text about the new “Change Password” option in the OED UI are not included and can be added in a separate documentation update if desired.

Contributors:
Andrew Ryer — @Andrew-Ryer — aryer@csumb.edu
Nathan Towsley — @natetowsley — natetowsley@gmail.com
Tyler Herndon — @GoKartMan89 — tylerherndon89@gmail.com
Caleb Stark — @caleb-stark — stark.caleba@gmail.com

…ranslations for "change.password" to data.ts

…o allow for the showing of more than one kind of modal. Adjusted handleClose() and handleShow() accordingly. Added a modalType to login modal and created a copy with modalType 'changePassword' as placeholder.

…alType to allow for the showing of more than one kind of modal. Adjusted handleClose() and handleShow() accordingly. Added a modalType to login modal and created a copy with modalType 'changePassword' as placeholder." This reverts commit c20bec1.

….ts, correct modal now shows when clicking change password.

…nate_tests

Co-authored-by: GoKartMan89 <tylerherndon89@gmail.com> Co-authored-by: caleb-stark <stark.caleba@gmail.com> Co-authored-by: Andrew-Ryer <aryer@csumb.edu>

…nate_tests

…into change password modal.

huss

Thanks to @Andrew-Ryer, @natetowsley, @GoKartMan89 & @caleb-stark for this contribution to OED. I'm sorry it took about a week to get back to you. Overall, it works well. I have made some comments to consider. Please let me know if anything is not clear or I can help.

src/client/app/translations/data.ts

src/server/routes/users.js

src/client/app/components/ChangePasswordModalComponent.tsx

src/client/app/components/HeaderButtonsComponent.tsx

src/server/routes/users.js

…into change_password

messages in the data.ts translation file

…ssword. Formatting and indentation fixes.

…into change_password

natetowsley · 2025-12-10T04:08:27Z

@huss Changes addressed. Please let us know if there's anything else we should do.

- The messages are also displayed to the user. - Changes information returned to mask info for security reasons. Also logs more info for security. - Minor changes in message wording for translation. - Minor formatting changes.

huss

Thanks to @Andrew-Ryer, @natetowsley, @GoKartMan89 & @caleb-stark for the updated code to address my previous comments. There are a couple of old comments that I thought should still be addressed and I added to the comment chain. I also pushed a commit to use success/failure since you indicated issues in getting it to work. It also includes other changes to address ongoing security work that was not part of what you were doing. I would welcome you looking at the code to see if you think it is correct/appropriate and verifying it works as desired. Please let me know if anything is not clear or I can help.

src/client/app/components/ChangePasswordModalComponent.tsx

src/client/app/translations/data.ts

src/server/routes/users.js

huss · 2025-12-12T22:52:00Z

For unknown reasons my recent comments are showing up twice. I'm just going to leave them to avoid any more issues. Sorry.

huss · 2026-01-13T18:05:02Z

@Andrew-Ryer, @natetowsley, @GoKartMan89 & @caleb-stark It has been about a month since my last comments. I think this is close to complete so I wanted to know the current status. Thanks.

natetowsley · 2026-01-14T05:09:42Z

@huss Apologies, I think all of us lost this is the midst of the school semester ending and the holidays coming around. I will have your changes addressed within the next week. Hope your holiday season went well.

…onsistency.

natetowsley · 2026-01-27T22:40:38Z

Changes addressed @huss

huss

Thanks to @Andrew-Ryer, @natetowsley, @GoKartMan89 & @caleb-stark for addressing the previous comments. I'm sorry it took a little while for me to look at this. It is working very well. I've made a few comments but I think they are all simple to do and then this should be ready to merge. Please let me know if you have thoughts or need anything.

huss · 2026-01-29T15:44:29Z

src/client/app/components/ChangePasswordModalComponent.tsx

+							<Col>
+								<FormGroup>
+									<Label for='currentPassword'>
+										{translate('current.password')}


Should this now be password.current?

huss · 2026-01-29T16:02:40Z

src/client/app/components/ChangePasswordModalComponent.tsx

+										id='currentPassword'
+										name='currentPassword'
+										type='password'
+										placeholder={translate('password.current.enter')}


I think this placeholder should be removed. The user creation page and other OED pages do no do this. The title is what OED uses to consistently indicate what to put in the box/item below it. The title is fine here. I also have comments in data.ts about the strings. The same applies to the other two inputs. I'm sorry I did not catch this earlier.

huss · 2026-01-29T16:05:14Z

src/client/app/translations/data.ts

 		"password.confirm": "Confirm password: ",
+		"password.confirm.enter": "Confirm new password",
+		"password.current": "Current password",
+		"password.current.enter": "Enter current password",


This key can be removed in all languages. Note all changes to items should be done in all languages but I'm only noting that here.

huss · 2026-01-29T16:05:44Z

src/client/app/translations/data.ts

+		"password.change": "Change password",
 		"password.confirm": "Confirm password: ",
+		"password.confirm.enter": "Confirm new password",
+		"password.current": "Current password",


Please put a colon (:) at the end so it is consistent with other titles.

huss · 2026-01-29T16:11:20Z

src/client/app/translations/data.ts

 		"page.user.refresh.directions": "If clicking the \"Return to Dashboard\" button does not work then please click the button below to restart your OED session",
 		"password": "Password: ",
+		"password.change": "Change password",
 		"password.confirm": "Confirm password: ",


I think this would be better as "Confirm new password" (as the enter had but note there is no trailing space) so it is very clear and parallel to "Current password". The next key can be removed.

"Change Password" is only used for the button in the menu I feel like it would be confusing to change it to "Confirm new Password" was this just a mistake you you meant to change "Confirm password" to "Confirm new password" i think it would involve a new key because confirm password is used in files separate from ours

Sorry for the delay in getting to this and that my comment was confusing. In another comment I suggested changing from "Password" to "New password". In the same way I was thinking to add "new" here so it is parallel on the web page. I also agree that it is only for that place on the web page so a new key may be needed. Does this help?

huss · 2026-01-29T16:18:46Z

src/client/app/translations/data.ts

+		"password.current": "Current password",
+		"password.current.enter": "Enter current password",
+		"password.failed.to.change": "Failed to change password with response: ",
+		"password.new.enter": "Enter new password",


This key can go.

huss · 2026-01-29T16:19:11Z

src/client/app/components/ChangePasswordModalComponent.tsx

+							<Col>
+								<FormGroup>
+									<Label for='newPassword'>
+										{translate('password')}


I think this string should be "New password:" so it is very clear and consistent with other ones. This probably requires a new key in data.ts.

huss · 2026-01-29T16:23:20Z

src/client/app/components/ChangePasswordModalComponent.tsx

+		const passwordModified = passwordDetails.currentPassword.length > 0 ||
+			passwordDetails.newPassword.length > 0 ||
+			passwordDetails.confirmPassword.length > 0;
+


This file has a number of formatting issues. If you do 'format document' in VSC they should all go away. Please let me know if you need any help with this.

natetowsley and others added 28 commits November 10, 2025 13:05

Added "Change Password" FormattedMessage to Options dropdown, added t…

3ffeecd

…ranslations for "change.password" to data.ts

Replaced previous modal state, for a new state, including ModalType t…

c20bec1

…o allow for the showing of more than one kind of modal. Adjusted handleClose() and handleShow() accordingly. Added a modalType to login modal and created a copy with modalType 'changePassword' as placeholder.

,

4cc127c

Change password modal component made, more translations added to data…

e3e2f1c

….ts, correct modal now shows when clicking change password.

update hint message

dd0e8ab

fix

38dc212

fixed placeholder text

2ec727f

starting work on the userApi process

11ce34e

added translate

c83c722

Merge branch 'nate_tests' of https://github.com/natetowsley/OED into …

ae72035

…nate_tests

Backend API Development

9ed1388

Merge branch 'nate_tests' of https://github.com/natetowsley/OED into …

1213c6b

…nate_tests

Implementation live share session.

144bdd5

Co-authored-by: GoKartMan89 <tylerherndon89@gmail.com> Co-authored-by: caleb-stark <stark.caleba@gmail.com> Co-authored-by: Andrew-Ryer <aryer@csumb.edu>

fixed terminal error for component props

517c157

Added all translations

d1ff5bf

Merge branch 'nate_tests' of https://github.com/natetowsley/OED into …

432b632

…nate_tests

fixed a merge error

f52bf39

Merge branch 'nate_tests' of https://github.com/natetowsley/OED into …

274f07a

…nate_tests

Merge branch 'nate_tests' of https://github.com/natetowsley/OED into …

eba31ac

…nate_tests

removed middleware function from users.js

fdc0760

fixed the username formgroup for change password

acd1d18

added translation for username

e4dc891

removed unused import

bc1bc4e

indentation/ format fix

b4eb802

User now remains signed in when current password incorrectly entered …

bcaf357

…into change password modal.

formatting/comments for change password files

5b7f8f0

resolved npm run check errors

8cc3b7c

huss requested changes Dec 4, 2025

View reviewed changes

Changed type ModalType into an enum for modal visibility.

07ffb52

GoKartMan89 and others added 10 commits December 6, 2025 00:41

changed HeaderButtonsComponent.tsx to update changed values in data.ts

84c61c3

Merge branch 'change_password' of https://github.com/natetowsley/OED …

ced25b3

…into change_password

changed and cleaned up the added password-related

4c7f10f

messages in the data.ts translation file

changed modal compoent error message inconsistancy

5ea9eaa

Removal of unused import. Updated validation method used in /changePa…

31fc63a

…ssword. Formatting and indentation fixes.

"parameter" -> "parameters"

408f901

Merge branch 'change_password' of https://github.com/natetowsley/OED …

b19fe13

…into change_password

Small indent fixes.

a2d7a7d

Comment format fix.

74edb87

Typo addressed, unused import removed.

eb0c16d

huss requested changes Dec 12, 2025

View reviewed changes

src/client/app/components/ChangePasswordModalComponent.tsx Show resolved Hide resolved

src/client/app/translations/data.ts Outdated Show resolved Hide resolved

src/server/routes/users.js Outdated Show resolved Hide resolved

natetowsley and others added 3 commits January 16, 2026 16:27

Merge most recent version of branch 'development' into change_password

ed9fc38

change.password and current.password.enter translations renamed for c…

39424bc

…onsistency.

added back the unsaved changes warning to change password

60f837b

huss requested changes Jan 29, 2026

View reviewed changes

Comments

Conversation

Andrew-Ryer commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist

Limitations

Uh oh!

huss left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

natetowsley commented Dec 10, 2025

Uh oh!

huss left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

huss commented Dec 12, 2025

Uh oh!

huss commented Jan 13, 2026

Uh oh!

natetowsley commented Jan 14, 2026

Uh oh!

natetowsley commented Jan 27, 2026

Uh oh!

huss left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Andrew-Ryer commented Nov 28, 2025 •

edited

Loading