feat(auth): Enhance AuthModal with password confirmation and visibility

src/components/ui/AuthModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { X } from "lucide-react";
+import { X, Eye, EyeOff } from "lucide-react";
 import { useCurrentUser } from "@/context/CurrentUserContext";
 
 interface AuthModalProps {
@@ -16,6 +16,9 @@ export function AuthModal({ isOpen, onClose, onLoginSuccess }: AuthModalProps) {
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -25,6 +28,9 @@ export function AuthModal({ isOpen, onClose, onLoginSuccess }: AuthModalProps) {
     setUsername("");
     setEmail("");
     setPassword("");
+    setConfirmPassword("");
+    setShowPassword(false);
+    setShowConfirmPassword(false);
     setError(null);
   };
 
@@ -52,6 +58,12 @@ export function AuthModal({ isOpen, onClose, onLoginSuccess }: AuthModalProps) {
       return;
     }
 
+    if (!isLogin && password !== confirmPassword) {
+      setError("Passwords do not match.");
+      setBusy(false);
+      return;
+    }
+
     try {
       const res = isLogin
         ? await login(email, password)
@@ -96,14 +108,12 @@ export function AuthModal({ isOpen, onClose, onLoginSuccess }: AuthModalProps) {
             {isLogin ? "Welcome Back" : "Create Account"}
           </h2>
           {/* underline */}
-          <div className="w-16 h-0.5 mx-auto my-2 rounded-full 
-  bg-gradient-to-r from-orange-500 via-orange-400 to-orange-100">
-          </div>
-
+          <div
+            className="w-16 h-0.5 mx-auto my-2 rounded-full 
+  bg-gradient-to-r from-orange-500 via-orange-400 to-orange-100"
+          ></div>
         </div>
 
-
-
         <form onSubmit={handleSubmit} className="space-y-3">
           {/* subtitle */}
           <p className="text-sm text-gray-600 dark:text-gray-300">
@@ -129,19 +139,56 @@ export function AuthModal({ isOpen, onClose, onLoginSuccess }: AuthModalProps) {
             required
             className="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border-gray-300 dark:border-gray-600 transition-colors"
           />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Password"
-            required
-            className="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border-gray-300 dark:border-gray-600 transition-colors"
-          />
+          <div className="relative">
+            <Input
+              type={showPassword ? "text" : "password"}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Password"
+              required
+              className="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border-gray-300 dark:border-gray-600 transition-colors pr-10"
+            />
+            <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>
+          </div>
+
+          {!isLogin && (
+            <div className="relative">
+              <Input
+                type={showConfirmPassword ? "text" : "password"}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder="Confirm Password"
+                required={!isLogin}
+                className="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border-gray-300 dark:border-gray-600 transition-colors pr-10"
+              />
+              <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>
+            </div>
+          )}
 
           {error && <div className="text-sm text-red-600">{error}</div>}
 
           <Button type="submit" className="w-full" disabled={busy}>
-            {busy ? (isLogin ? "Logging in…" : "Signing up…") : isLogin ? "Login" : "Sign Up"}
+            {busy
+              ? isLogin
+                ? "Logging in…"
+                : "Signing up…"
+              : isLogin
+              ? "Login"
+              : "Sign Up"}
           </Button>
         </form>