Merge pull request #663 from vishv96/dev

feat(components): add password visibility toggle to Input

Author: miurla

components/login-form.tsx

@@ -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
@@ -129,7 +131,7 @@ export function LoginForm({
                     Forgot password?
                   </Link>
                 </div>
-                <Input
+                <PasswordInput
                   id="password"
                   type="password"
                   placeholder="********"

components/sign-up-form.tsx

@@ -1,5 +1,4 @@
 'use client'
-
 import { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -18,6 +17,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,
@@ -92,7 +92,7 @@ export function SignUpForm({
                 <div className="flex items-center">
                   <Label htmlFor="password">Password</Label>
                 </div>
-                <Input
+                <PasswordInput
                   id="password"
                   type="password"
                   placeholder="********"
@@ -105,7 +105,7 @@ export function SignUpForm({
                 <div className="flex items-center">
                   <Label htmlFor="repeat-password">Repeat Password</Label>
                 </div>
-                <Input
+                <PasswordInput
                   id="repeat-password"
                   type="password"
                   placeholder="********"

components/ui/password-input.tsx

@@ -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 }