feat(LoginScreen): add password visibility toggle and EyeIcon component

Author: Yuval

03-Client/src/app/components/LoginScreen.tsx

@@ -5,11 +5,29 @@ import { BackgroundDecorations } from "./shared/BackgroundDecorations";
 import { SocialLoginButtons } from "./shared/SocialLoginButtons";
 import { useAuth } from "../context/AuthContext";
 
+function EyeIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#626262" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    );
+  }
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#626262" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
+  );
+}
+
 export function LoginScreen() {
   const navigate = useNavigate();
   const { login } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -66,14 +84,22 @@ export function LoginScreen() {
         </div>
         <div className="relative">
           <input
-            type="password"
+            type={showPassword ? "text" : "password"}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             placeholder="סיסמא"
             dir="rtl"
             // Added: hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200
             className="w-full bg-[#f3fbfd] border-2 border-transparent hover:border-[#063c55] focus:border-[#063c55] transition-colors duration-200 rounded-[10px] py-[18px] px-[35px] text-right font-['Heebo',sans-serif] text-[#626262] text-[16px] outline-none shadow-[inset_4px_14px_16.2px_0px_rgba(0,0,0,0.04)]"
           />
+          <button
+            type="button"
+            onClick={() => setShowPassword((v) => !v)}
+            className="absolute left-[12px] top-1/2 -translate-y-1/2 p-[4px] cursor-pointer"
+            tabIndex={-1}
+          >
+            <EyeIcon open={showPassword} />
+          </button>
         </div>
       </div>