Add Confirm Password field and improve layout of password forms

[Copilot]

Summary

This PR improves the password-related forms in the multiuser UI with two sets of changes:

My Profile (UserProfile.tsx)

The password change form lacked a confirmation field, leaving users vulnerable to undetected typos. A Confirm New Password field has been added with mismatch validation that blocks submission until both new-password fields agree. All three password fields and the Generate button are laid out in a two-column grid so their left edges align neatly.

• Added confirmPassword state + show/hide toggle
• passwordsMatch: requires newPassword.length > 0 && newPassword === confirmPassword
• isPasswordChangeValid now gates on passwordsMatch
• "Generate Strong Password" populates both new-password fields simultaneously (and reveals both)
• Inline FormErrorMessage shown when fields are non-empty and mismatched
• All three password fields use Grid templateColumns={PASSWORD_GRID_COLUMNS} ('180px 1fr') so every input's left edge is aligned in a column
• "Generate Strong Password" button placed in a matching grid row (right column only) with a PiLightningFill lightning bolt icon
• PASSWORD_GRID_COLUMNS constant extracted to avoid duplication

Admin Edit/Create User modal (UserManagement.tsx)

The Display Name and Password fields in the admin user form have been given the same two-column grid treatment for visual consistency.

• Display Name and Password (and Email in create mode) use Grid templateColumns={FORM_GRID_COLUMNS} ('120px 1fr') with right-aligned labels so all input left edges align
• "Generate Strong Password" button placed in a matching grid row (right column only) with a PiLightningFill lightning bolt icon
• FORM_GRID_COLUMNS constant extracted to avoid duplication
• No confirm-password field added here — the administrator only needs to enter the new password once

en.json

• Added confirmPassword, confirmPasswordPlaceholder, passwordsDoNotMatch keys

Related Issues / Discussions

QA Instructions

My Profile:

1. Navigate to My Profile (/profile).
2. Enter current password and a valid new password — the Confirm field should appear below.
3. Type a different value in Confirm — expect "Passwords do not match" error and Save disabled.
4. Enter matching values — expect Save to become enabled.
5. Click ⚡ Generate Strong Password — both New Password and Confirm fields should be populated with the same value and revealed.
6. Verify the three password input boxes have their left edges aligned in a column and the Generate button sits underneath them.
7. Submit and verify the password change succeeds.

Admin Edit User modal:

1. Navigate to User Management and click the edit (pencil) icon for any user.
2. Verify the Display Name and New Password input boxes have their left edges aligned in a column.
3. Verify ⚡ Generate Strong Password sits underneath the New Password field, left-aligned with it.
4. Click ⚡ Generate Strong Password — the New Password field should be populated and revealed.
5. Save and verify the change is applied.

Merge Plan

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[enhancement]: Add a password change confirmation box to My Profile</issue_title>
<issue_description>### Is there an existing issue for this?

• I have searched the existing issues

Contact Details

No response

What should this feature add?

The lstein/multiuser-management-ui branch provides a My Profile interface that allows the user to change their password. It has two text fields, one for the current password and one for the new one. However, there is no guard against typographical errors when the user types in the new password.

This feature would add a "Confirm Password" field. The system won't allow the password to be changed unless the user has entered the same new password twice.

Also take this opportunity to make the three password text entry fields line up nicely on their left and right edges.

Alternatives

No response

Additional Content

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [enhancement]: Add a password change confirmation box to My Profile #109

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lstein]

Please format the "Current Password", "New Password" and "Confirm New Password" text input boxes so that their left edges line up in a nice column.

Modify the "Generate Strong Password" button to align underneath the three password fields and put a little lightning bolt icon next to it to indicate that this is a clickable user interface element.

[Copilot]

Please format the "Current Password", "New Password" and "Confirm New Password" text input boxes so that their left edges line up in a nice column.

Modify the "Generate Strong Password" button to ali...

Done in commit 460a22d. All three password fields now use a Grid with templateColumns="180px 1fr" so their left edges line up in a column. The Generate Strong Password button is placed in a matching grid row (right column only) so it sits directly underneath the inputs, and uses leftIcon={<PiLightningFill />} for the lightning bolt.

[lstein]

The last commit very much improved the look of the User Profile page. Please make similar changes to the Edit User page used by the administrator to modify the user profile:

1. Align the left margins of the Display Name and New Password text fields.
2. Align Generate Strong Password with the left side of the New Password text field.
3. Add a lightning bolt to the left of Generate Strong Password

In this case, you do not need to add a new password confirmation box. The Administrator only has to enter the new password once.

[Copilot]

The last commit very much improved the look of the User Profile page. Please make similar changes to the Edit User page used by the administrator to modify the user profile:

1. Align the left margins...

Done in commit 92d8e83. The Edit User modal now uses Grid templateColumns="120px 1fr" for Display Name and New Password so their left edges align in a column, the Generate Strong Password button is placed in a matching grid row (right column only) directly underneath the inputs, and uses leftIcon={<PiLightningFill />} for the lightning bolt.