feat(components): add password visibility toggle to Input #663
Conversation
Adds a visibility toggle button to the Input component when the type is "password". This allows users to show and hide the password they are entering, improving usability and reducing errors. The implementation uses an eye icon button that toggles the input type between "text" and "password".
|
@vishv96 is attempting to deploy a commit to the morphic Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Thank you for your contribution! While the password visibility toggle is a valuable UX improvement, modifying the base Input component with useState converts it to a Client Component, breaking Server Component compatibility throughout the codebase.
I recommend creating a dedicated PasswordInput component instead (e.g., components/ui/password-input.tsx) that wraps the existing Input. This would make it an opt-in feature without breaking changes. Also, you can import Eye and EyeOff from 'lucide-react' directly in the new component rather than adding them to icons.tsx.
Would you be willing to refactor this approach?
Sure, I can work on that |
This commit removes the password visibility toggle feature from the Input component. The following changes are included: - The eye icon button and its logic are removed from the Input component. - The unused IconEye and IconEyeOff icons are removed from icons.tsx.
This commit introduces a new PasswordInput component to improve the user experience of password fields. The PasswordInput component wraps the generic Input component and adds a button to toggle the visibility of the password. The following changes are included: - A new PasswordInput component is created in components/ui/password-input.tsx. - The Input component in components/ui/input.tsx is updated to support a rightElement prop. - The LoginForm and SignUpForm are updated to use the new PasswordInput component.
There was a problem hiding this comment.
Pull Request Overview
This PR adds password visibility toggle functionality to form inputs by creating a new PasswordInput component and updating the base Input component to support a rightElement prop. Users can now click an eye icon to show/hide their password while typing, improving usability and reducing input errors.
- Creates a new PasswordInput component with eye/eye-off toggle icons
- Modifies the Input component to support a rightElement prop for appending UI elements
- Updates existing login and sign-up forms to use the new PasswordInput component
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| components/ui/password-input.tsx | New component implementing password visibility toggle with eye icons |
| components/ui/input.tsx | Added rightElement prop support and positioning wrapper |
| components/sign-up-form.tsx | Replaced Input with PasswordInput for password fields |
| components/login-form.tsx | Replaced Input with PasswordInput for password field |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
components/ui/password-input.tsx
Outdated
| import { Button } from './button' | ||
|
|
||
| const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>( | ||
| ({ className, type = 'password', rightElement, ...props }, ref) => { |
There was a problem hiding this comment.
The component accepts a rightElement prop but always overrides it with the toggle button. This prevents users from customizing the right element. Consider removing this prop from the interface or handling the case where a custom rightElement is provided.
| ({ className, type = 'password', rightElement, ...props }, ref) => { | |
| ({ className, type = 'password', ...props }, ref) => { |
Copilot uses AI. Check for mistakes.
| <PasswordInput | ||
| id="repeat-password" | ||
| type="password" |
There was a problem hiding this comment.
The type="password" prop is redundant since PasswordInput defaults to 'password' type. This prop should be removed for cleaner code.
| <PasswordInput | |
| id="repeat-password" | |
| type="password" |
Copilot uses AI. Check for mistakes.
| <PasswordInput | ||
| id="password" | ||
| type="password" |
There was a problem hiding this comment.
The type="password" prop is redundant since PasswordInput defaults to 'password' type. This prop should be removed for cleaner code.
| <PasswordInput | |
| id="password" | |
| type="password" |
Copilot uses AI. Check for mistakes.
This commit refactors the password input functionality. Instead of having a generic `rightElement` prop in the `Input` component, the logic for toggling password visibility is now fully encapsulated within the `PasswordInput` component. This improves component modularity and simplifies the `Input` component.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary
This pull request introduces a
PasswordInputcomponent with a visibility toggle to improve the usability of password fields.Implementation
PasswordInputcomponent has been created.Inputcomponent and adds an eye icon button to toggle the password's visibility.Inputcomponent remains unchanged, and thePasswordInputhandles all the logic for the visibility toggle.LoginFormandSignUpFormhave been updated to use the newPasswordInputcomponent.