From ae2e5cb1f43a4ae7824aedaa5e4ea8fda0e366f1 Mon Sep 17 00:00:00 2001
From: commanderxgr <thugspiros1@gmail.com>
Date: Sat, 5 Sep 2026 16:28:11 +0300
Subject: [PATCH] feat(auth): add toggle password visibility button with eye
 icon on login

---
 src/components/auth/LoginPage.jsx            | 31 ++++++++++++++------
 src/components/scheduler/AdminLoginModal.jsx | 14 +++++++--
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/components/auth/LoginPage.jsx b/src/components/auth/LoginPage.jsx
index 500c3d6..7f442f2 100644
--- a/src/components/auth/LoginPage.jsx
+++ b/src/components/auth/LoginPage.jsx
@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 import { authRepository } from '../../repositories';
 import { createTenantAuthTicketRedirect } from '../../firebase/authBrokerService';
 import {
@@ -23,6 +24,7 @@ export default function LoginPage() {
   const returnTo = useMemo(getReturnToParam, []);
   const [email, setEmail] = useState(authRepository.getConfiguredAdminEmail?.() || '');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [rememberDevice, setRememberDevice] = useState(true);
   const [status, setStatus] = useState('idle');
   const [message, setMessage] = useState('');
@@ -174,15 +176,26 @@ export default function LoginPage() {
 
           <label className="block text-sm font-black text-slate-700">
             Password
-            <input
-              type="password"
-              value={password}
-              onChange={(event) => setPassword(event.target.value)}
-              className="mt-1.5 w-full rounded-2xl border border-slate-200 bg-white px-3 py-3 text-slate-950 outline-none transition focus:border-cyan-400 focus:ring-4 focus:ring-cyan-100"
-              required
-              maxLength={MAX_PASSWORD_LENGTH}
-              autoComplete="current-password"
-            />
+            <div className="relative mt-1.5">
+              <input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(event) => setPassword(event.target.value)}
+                className="w-full rounded-2xl border border-slate-200 bg-white py-3 pl-3 pr-11 text-slate-950 outline-none transition focus:border-cyan-400 focus:ring-4 focus:ring-cyan-100"
+                required
+                maxLength={MAX_PASSWORD_LENGTH}
+                autoComplete="current-password"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((prev) => !prev)}
+                className="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-700 transition"
+                aria-label={showPassword ? 'Απόκρυψη κωδικού' : 'Εμφάνιση κωδικού'}
+                title={showPassword ? 'Απόκρυψη κωδικού' : 'Εμφάνιση κωδικού'}
+              >
+                {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+              </button>
+            </div>
           </label>
 
           <div className="flex items-center justify-between gap-3 text-sm">
diff --git a/src/components/scheduler/AdminLoginModal.jsx b/src/components/scheduler/AdminLoginModal.jsx
index beceb6d..25cef97 100644
--- a/src/components/scheduler/AdminLoginModal.jsx
+++ b/src/components/scheduler/AdminLoginModal.jsx
@@ -1,4 +1,4 @@
-import { KeyRound, LockKeyhole, Mail, X } from 'lucide-react';
+import { Eye, EyeOff, KeyRound, LockKeyhole, Mail, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -15,6 +15,7 @@ export default function AdminLoginModal({
     email: defaultEmail,
     password: '',
   });
+  const [showPassword, setShowPassword] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSendingReset, setIsSendingReset] = useState(false);
   const [submitError, setSubmitError] = useState('');
@@ -139,7 +140,7 @@ export default function AdminLoginModal({
             <div className="input-glass mt-1 flex items-center gap-2 rounded-lg border border-slate-300 px-3 py-2 dark:border-cyan-300/45">
               <KeyRound size={14} className="text-slate-600 dark:text-slate-300" />
               <input
-                type="password"
+                type={showPassword ? 'text' : 'password'}
                 value={credentials.password}
                 onChange={(event) => setCredentials((prev) => ({ ...prev, password: event.target.value }))}
                 placeholder="Κωδικός"
@@ -147,6 +148,15 @@ export default function AdminLoginModal({
                 required
                 disabled={!isFirebaseConfigured}
               />
+              <button
+                type="button"
+                onClick={() => setShowPassword((prev) => !prev)}
+                className="rounded text-slate-400 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition"
+                aria-label={showPassword ? 'Απόκρυψη κωδικού' : 'Εμφάνιση κωδικού'}
+                title={showPassword ? 'Απόκρυψη κωδικού' : 'Εμφάνιση κωδικού'}
+              >
+                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
             </div>
           </label>