Fix email-update password validation UX - #5158
Conversation
Validate the current password only on submit so typing a new email does not show "can't be blank" / mismatch errors. Keep Update disabled until a password is present, and clear prior password errors as the user continues typing. Closes OpenFn#2546
There was a problem hiding this comment.
🟡 Changes recommended
The new public validate_password option isn’t fully reflected in the function’s @doc, and the confirmation-required flow’s new live-validation UX lacks regression test coverage.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR improves the LiveView UX for updating a user’s email address by deferring current-password validation until submit, while still validating email changes live and keeping the submit button disabled until a password is entered. It does so by adding an option to the Accounts email-change validation changeset and updating both the profile form and the confirmation-required correction form to use that option during phx-change.
Changes:
- Add
validate_password:option (defaulttrue) toAccounts.validate_change_user_email/3to support “live validate without password errors”. - Update Profile and ConfirmationRequired LiveViews/templates to (a) skip password validation on change, (b) disable submit until password is present, and (c) clear prior password mismatch errors while typing.
- Add/adjust tests for the profile flow and add a changelog entry for the UX fix.
File summaries
| File | Description |
|---|---|
| test/lightning/accounts_test.exs | Adds coverage for the new validate_password: false option. |
| test/lightning_web/live/profile_live_test.exs | Adds LiveView UX regression tests and updates email-submit attrs to include current_password. |
| lib/lightning/accounts.ex | Extends validate_change_user_email with opts to conditionally require/check current_password. |
| lib/lightning_web/live/user_confirmation_required_live.html.heex | Removes password-input blur debounce and updates submit disabling logic to include password presence. |
| lib/lightning_web/live/user_confirmation_required_live.ex | Uses validate_password: false on change and adds email_form_submit_disabled?/1. |
| lib/lightning_web/live/profile_live/form_component.html.heex | Removes password-input blur debounce and updates submit disabling logic to include password presence. |
| lib/lightning_web/live/profile_live/form_component.ex | Uses validate_password: false on change and adds email_form_submit_disabled?/1. |
| CHANGELOG.md | Documents the UX fix under “Fixed”. |
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| ## Options | ||
|
|
||
| * `:validate_password` - when `true` (default), require and check | ||
| `current_password`. Set to `false` for live validation while typing so | ||
| password errors only appear on submit. |
There was a problem hiding this comment.
Accepted — docstring updated to describe validate_password: false for live validation.
| def handle_event("validate_email", %{"user" => user_params}, socket) do | ||
| changeset = | ||
| socket.assigns.current_user | ||
| |> Accounts.validate_change_user_email(user_params) | ||
| |> Accounts.validate_change_user_email(user_params, validate_password: false) | ||
| |> Map.put(:action, :validate_email) | ||
|
|
||
| {:noreply, assign(socket, :email_changeset, changeset)} |
There was a problem hiding this comment.
Accepted — added LiveView coverage on the confirmation-required form for no password errors while typing, disabled submit until password present, and clearing a prior mismatch on subsequent change.
Update the Accounts docstring for the validate_password option and add LiveView coverage on the confirmation-required email form for typing vs submit password validation.
Description
This PR fixes password validation UX on the profile email-update form.
Closes #2546
Validation steps
Additional notes for the reviewer
Accounts.validate_change_user_email/3gainsvalidate_password:(defaulttrue)AI Usage
Pre-submission checklist
/reviewwith Claude Code):owner,:admin,:editor,:viewer)