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)

• 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.