Skip to content

feat(components): add password visibility toggle to Input #663

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 28, 2025
Merged

feat(components): add password visibility toggle to Input #663

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d0c7ba4
feat(components): add password visibility toggle to Input
vishv96 Aug 23, 2025
c1d224a
refactor(components): remove password visibility toggle
vishv96 Aug 25, 2025
c7c7136
feat(components): add PasswordInput component with visibility toggle
vishv96 Aug 25, 2025
fb7fc48
refactor(components): isolate password visibility in PasswordInput
vishv96 Aug 26, 2025
b98f482
style(auth): reorder imports in sign-up form
vishv96 Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion components/login-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { IconLogo } from '@/components/ui/icons'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

import { PasswordInput } from './ui/password-input'

export function LoginForm({
className,
...props
Expand Down Expand Up @@ -129,7 +131,7 @@ export function LoginForm({
Forgot password?
</Link>
</div>
<Input
<PasswordInput
id="password"
type="password"
Comment on lines +134 to 136
Copy link
Preview

Copilot AI Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The type="password" prop is redundant since PasswordInput defaults to 'password' type. This prop should be removed for cleaner code.

Suggested change
<PasswordInput
id="password"
type="password"

Copilot uses AI. Check for mistakes.

placeholder="********"
Expand Down
7 changes: 4 additions & 3 deletions components/sign-up-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

import { createClient } from '@/lib/supabase/client'
import { cn } from '@/lib/utils/index'
Expand All @@ -18,6 +18,7 @@ import {
import { IconLogo } from '@/components/ui/icons'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { PasswordInput } from '@/components/ui/password-input'

export function SignUpForm({
className,
Expand Down Expand Up @@ -92,7 +93,7 @@ export function SignUpForm({
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
</div>
<Input
<PasswordInput
id="password"
type="password"
placeholder="********"
Expand All @@ -105,7 +106,7 @@ export function SignUpForm({
<div className="flex items-center">
<Label htmlFor="repeat-password">Repeat Password</Label>
</div>
<Input
<PasswordInput
id="repeat-password"
type="password"
Comment on lines +108 to 110
Copy link
Preview

Copilot AI Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The type="password" prop is redundant since PasswordInput defaults to 'password' type. This prop should be removed for cleaner code.

Suggested change
<PasswordInput
id="repeat-password"
type="password"

Copilot uses AI. Check for mistakes.

placeholder="********"
Expand Down
41 changes: 41 additions & 0 deletions components/ui/password-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import * as React from 'react'
import { useState } from 'react'

import { Eye, EyeOff } from 'lucide-react'

import { Input, InputProps } from '@/components/ui/input'

import { Button } from './button'

const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type = 'password', ...props }, ref) => {
const [showPassword, setShowPassword] = useState(false)
return (
<div className="relative flex">
<Input
type={showPassword ? 'text' : type}
className={className}
ref={ref}
{...props}
/>
<Button
type="button"
variant="ghost"
size="icon"
className="h-full px-3 py-2 hover:bg-transparent absolute right-0 flex items-center justify-center"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-4 w-4" />
) : (
<Eye className="h-4 w-4" />
)}
</Button>
</div>
)
}
)

PasswordInput.displayName = 'PasswordInput'

export { PasswordInput }
Loading