feat(auth): update password reset page UI and policy - #149
Conversation
- Replace email field outline with filled/disabled style - Add password visibility toggle with eye icon - Add confirm field match indicator (empty circle / green check / red X) - Add password requirements list derived from config - Add help link below the card - Disable submit button until all requirements pass and fields match - Update card title and subheader to FN branding - Fix min password length to 10 (was 8) and add + to allowed special chars pattern - Add AUTH_PASSWORD_MIN_LENGTH, AUTH_PASSWORD_SHAPE_LIST, and AUTH_PASSWORD_ALLOWED_SPECIAL_CHARACTERS_TEXT config keys - Update local dev docs: queue drain command and config cache notes
|
Warning Review limit reached
Next review available in: 30 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe password reset flow now exposes expanded password-policy settings, provides visibility and confirmation feedback, tightens submission validation, updates styling and copy, updates password fixtures, and documents local development workflows. ChangesPassword reset experience
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Config as config/auth.php
participant ResetPage as reset.blade.php
participant ResetUI as reset_password.js
participant User
Config->>ResetPage: provide password policy settings
ResetPage->>ResetUI: pass passwordPolicy
User->>ResetUI: enter password and confirmation
ResetUI->>User: show visibility and match indicators
ResetUI->>User: enable submission only when fields are valid
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
📘 OpenAPI / Swagger preview ➡️ https://OpenStackweb.github.io/openstackid/openapi/pr-149/ This page is automatically updated on each push to this PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@config/auth.php`:
- Around line 106-109: Update the default fallback for AUTH_PASSWORD_MIN_LENGTH
in the password configuration to 10 instead of 8, preserving the existing
environment-variable override behavior.
In `@resources/js/reset_password/reset_password.js`:
- Line 211: Render passwordPolicy.allowed_special_characters_text as a normal
React child in resources/js/reset_password/reset_password.js:211, removing
dangerouslySetInnerHTML. In resources/views/auth/passwords/reset.blade.php:27,
serialize the configured value with Illuminate\Support\Js::from(...) before
embedding it in the script block.
- Around line 151-157: Update the password visibility IconButton to provide a
dynamic accessible name reflecting show versus hide state. Add
screen-reader-visible status text for the confirmation indicator covering
matching, mismatching, and empty confirmation states, while preserving the
existing visual icons and behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e0d6a357-a410-4cd2-b08b-d5afc11d090d
📒 Files selected for processing (6)
.env.exampleLOCAL_DEVELOPMENT_HOWTO.mdconfig/auth.phpresources/js/reset_password/reset_password.jsresources/js/reset_password/reset_password.module.scssresources/views/auth/passwords/reset.blade.php
💤 Files with no reviewable changes (1)
- .env.example
- Add aria-label to password visibility toggle reflecting show/hide state - Add sr-only aria-live region for confirm field match status - Replace dangerouslySetInnerHTML with plain React child for special characters text; use Js::from() in blade template to safely serialize the value without HTML entity encoding - Update password_min_length default from 8 to 10 to match policy
|
📘 OpenAPI / Swagger preview ➡️ https://OpenStackweb.github.io/openstackid/openapi/pr-149/ This page is automatically updated on each push to this PR. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@resources/js/reset_password/reset_password.module.scss`:
- Line 90: In the .sr_only style rule, replace the deprecated clip declaration
with clip-path: inset(50%) while preserving the existing visually hidden
behavior and other declarations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6e14e557-4608-46e6-b98d-6ce84565ae49
📒 Files selected for processing (4)
config/auth.phpresources/js/reset_password/reset_password.jsresources/js/reset_password/reset_password.module.scssresources/views/auth/passwords/reset.blade.php
🚧 Files skipped from review as they are similar to previous changes (3)
- config/auth.php
- resources/views/auth/passwords/reset.blade.php
- resources/js/reset_password/reset_password.js
Replace test passwords (8–9 chars) with a new one (10 chars) across TestSeeder and four test files so the suite passes against the updated auth.password_min_length default.
|
📘 OpenAPI / Swagger preview ➡️ https://OpenStackweb.github.io/openstackid/openapi/pr-149/ This page is automatically updated on each push to this PR. |
|
📘 OpenAPI / Swagger preview ➡️ https://OpenStackweb.github.io/openstackid/openapi/pr-149/ This page is automatically updated on each push to this PR. |
There was a problem hiding this comment.
Pull request overview
Updates the password reset experience and password policy defaults to match the new UX requirements (visibility toggle, live match indicator, requirements list) while aligning backend-configured password constraints (notably min length 10) with tests and seed data.
Changes:
- Revamps the reset password UI (email field styling, password visibility toggle, match indicators, requirements list, help link, submit disabling).
- Updates password policy configuration defaults and introduces additional config/env keys for UI display.
- Aligns test fixtures and seed user passwords with the new minimum-length policy; expands local development documentation.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/UserApiTest.php | Updates test password to meet new minimum length. |
| tests/PasswordChangeRevokeTokenTest.php | Updates current password values to meet new minimum length. |
| tests/OIDCProtocolTestCase.php | Updates login fixture password strings to match seeded/test policy. |
| resources/views/auth/passwords/reset.blade.php | Adds new password policy fields into the reset-password page config payload. |
| resources/js/reset_password/reset_password.module.scss | Adds styles for the new reset-password UI elements. |
| resources/js/reset_password/reset_password.js | Implements new reset-password UI behaviors and submission gating. |
| LOCAL_DEVELOPMENT_HOWTO.md | Adds frontend build/watch notes, captcha test keys guidance, queue draining, and config cache notes. |
| database/seeds/TestSeeder.php | Updates seeded test users’ passwords to satisfy new password policy. |
| config/auth.php | Raises default min length to 10 and adds new config/env keys for password policy display. |
| .env.example | Minor change in the auth password section (needs expansion to include new keys). |
Suppressed comments (2)
resources/js/reset_password/reset_password.js:21
- Typography is imported but no longer used in this component, which can cause lint/build warnings and adds unnecessary code to the bundle.
import Typography from "@material-ui/core/Typography";
resources/js/reset_password/reset_password.js:261
- There are two elements with id="email" (the disabled TextField and this hidden input). Duplicate IDs are invalid HTML and can break label associations and automated tests. Keep the hidden field for submission, but remove/rename its id.
<input type="hidden" value={initialValues.email} id="email" name="email"/>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Sync .env.example password pattern with new config default (adds +, enforces allowed-charset body) and add missing AUTH_PASSWORD_MIN_LENGTH, AUTH_PASSWORD_ALLOWED_SPECIAL_CHARACTERS_TEXT, and AUTH_PASSWORD_SHAPE_LIST keys - Harden shape_list in reset.blade.php with Js::from() to prevent JS parse errors from quotes or backslashes in the config value - Add aria-label to the disabled email field so screen readers announce its accessible name
|
📘 OpenAPI / Swagger preview ➡️ https://OpenStackweb.github.io/openstackid/openapi/pr-149/ This page is automatically updated on each push to this PR. |
Drop InfoOutlinedIcon, Typography, and the unused string import from yup — leftovers from the password hint UI refactor.
|
📘 OpenAPI / Swagger preview ➡️ https://OpenStackweb.github.io/openstackid/openapi/pr-149/ This page is automatically updated on each push to this PR. |
ref: https://app.clickup.com/t/9014802374/86b9txpuj
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Documentation