feat(auth): Enhance AuthModal with password confirmation and visibility #72
Conversation
|
Someone is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@DhanushNehru Kindly review this as well, thanks |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the authentication modal by adding password confirmation for signup and visibility toggles for both password fields. The changes improve user experience by allowing users to verify their password entries and toggle visibility when needed.
Key changes:
- Added password confirmation field for signup flow with validation
- Implemented password visibility toggles using Eye/EyeOff icons for both password fields
- Fixed formatting and removed duplicate closing div tags
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
@DhanushNehru All reviewed, kindly merge |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| <button | ||
| type="button" | ||
| onClick={() => setShowPassword(!showPassword)} | ||
| className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100" | ||
| aria-label={showPassword ? "Hide password" : "Show password"} | ||
| > | ||
| {showPassword ? <EyeOff size={16} /> : <Eye size={16} />} | ||
| </button> |
There was a problem hiding this comment.
The password visibility toggle button lacks keyboard focus styling. Add focus-visible styles to ensure keyboard users can see which element is focused, for example: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500'.
| <button | ||
| type="button" | ||
| onClick={() => setShowConfirmPassword(!showConfirmPassword)} | ||
| className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-300 dark:hover:text-gray-100" | ||
| aria-label={showConfirmPassword ? "Hide confirm password" : "Show confirm password"} | ||
| > | ||
| {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />} | ||
| </button> |
There was a problem hiding this comment.
The confirm password visibility toggle button lacks keyboard focus styling. Add focus-visible styles to ensure keyboard users can see which element is focused, for example: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500'.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
DhanushNehru
added
enhancement
Co-authored-by: Copilot <[email protected]>
|
Resolve merge conflicts @Jonniie |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
|
@DhanushNehru conflict resolved |
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
2 participants
closes #70