feat(ui): add password show input

app/(public)/login/form.tsx

@@ -6,9 +6,12 @@ import { Label } from '@/components/ui/label';
 import { login } from '@/app/auth/01-auth';
 import Link from 'next/link';
 import { useFormState, useFormStatus } from 'react-dom';
+import { PasswordInput } from '@/components/ui/PasswordInput ';
+import { useState } from 'react';
 
 export function LoginForm() {
   const [state, action] = useFormState(login, undefined);
+  const [password, setPassword] = useState('');
 
   return (
     <form action={action}>
@@ -32,7 +35,13 @@ export function LoginForm() {
               Forgot your password?
             </Link>
           </div>
-          <Input id="password" type="password" name="password" />
+          <PasswordInput
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            id="password"
+            name="password"
+            placeholder="******"
+          />
           {state?.errors?.password && (
             <p className="text-sm text-red-500">{state.errors.password}</p>
           )}
@@ -51,7 +60,7 @@ export function LoginButton() {
 
   return (
     <Button aria-disabled={pending} type="submit" className="mt-4 w-full">
-      {pending ? 'Submitting...' : 'Sign up'}
+      {pending ? 'Submitting...' : 'Login'}
     </Button>
   );
 }

app/(public)/signup/form.tsx

@@ -5,9 +5,12 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { signup } from '@/app/auth/01-auth';
 import { useFormState, useFormStatus } from 'react-dom';
+import { PasswordInput } from '@/components/ui/PasswordInput ';
+import { useState } from 'react';
 
 export function SignupForm() {
   const [state, action] = useFormState(signup, undefined);
+  const [password, setPassword] = useState('');
 
   return (
     <form action={action}>
@@ -28,7 +31,13 @@ export function SignupForm() {
         )}
         <div>
           <Label htmlFor="password">Password</Label>
-          <Input id="password" name="password" type="password" />
+          <PasswordInput
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            id="password"
+            name="password"
+            placeholder="******"
+          />
         </div>
         {state?.errors?.password && (
           <div className="text-sm text-red-500">
@@ -51,7 +60,7 @@ export function SignupButton() {
 
   return (
     <Button aria-disabled={pending} type="submit" className="mt-2 w-full">
-      {pending ? 'Submitting...' : 'Login'}
+      {pending ? 'Submitting...' : 'Sign up'}
     </Button>
   );
 }

app/dashboard/layout.tsx

@@ -71,31 +71,7 @@ export default async function Layout({
             <span className="sr-only">Home</span>
           </Link>
           <h1 className="md:blobk hidden text-lg font-semibold">Dashboard</h1>
-          <div className="ml-auto flex items-center gap-4">
-            <form>
-              <div className="relative">
-                <Input
-                  className="bg-gray-100/60 md:w-[200px]"
-                  placeholder="Search orders..."
-                  type="search"
-                />
-              </div>
-            </form>
-            <Button className="rounded-full" size="icon" variant="ghost">
-              <Image
-                alt="Avatar"
-                className="rounded-full"
-                height="32"
-                src="/placeholder.svg"
-                style={{
-                  aspectRatio: '32/32',
-                  objectFit: 'cover',
-                }}
-                width="32"
-              />
-              <span className="sr-only">View profile</span>
-            </Button>
-          </div>
+          <div className="ml-auto flex items-center gap-4">Welcome, {user?.name}!</div>
         </header>
         <main className="flex-1 p-4 md:p-6">{children}</main>
       </div>

components/ui/PasswordInput .tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input, InputProps } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const disabled =
+      props.value === "" || props.value === undefined || props.disabled;
+
+    return (
+      <div className="relative">
+        <Input
+          type={showPassword ? "text" : "password"}
+          className={cn("hide-password-toggle pr-10", className)}
+          ref={ref}
+          {...props}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+          onClick={() => setShowPassword((prev) => !prev)}
+          disabled={disabled}
+        >
+          {showPassword && !disabled ? (
+            <EyeIcon className="h-4 w-4" aria-hidden="true" />
+          ) : (
+            <EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+          )}
+          <span className="sr-only">
+            {showPassword ? "Hide password" : "Show password"}
+          </span>
+        </Button>
+
+        {/* hides browsers password toggles */}
+        <style>{`
+					.hide-password-toggle::-ms-reveal,
+					.hide-password-toggle::-ms-clear {
+						visibility: hidden;
+						pointer-events: none;
+						display: none;
+					}
+				`}</style>
+      </div>
+    );
+  },
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };