From 1aaacb9beccdf05672348e4dcdb66445627f78d9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 20 Apr 2026 15:26:34 +0000
Subject: [PATCH] I've updated the V2 authentication forms (Login, Signup, and
 Forgot Password) to enhance the user experience. Here is a summary of the
 improvements:

- **Visual Context**: Added Material Icons as prefix indicators to all form inputs.
- **Loading Feedback**: Standardized loading states by using `CustomPreloader` within form buttons.
- **Accessibility**: Correctly associated all labels with their respective inputs using `id` and `htmlFor`.
- **Consistency**: Added a password visibility toggle to the Signup form to match the Login form.
- **Screen Reader Optimization**: Hidden decorative icons from screen readers using `aria-hidden="true"`.
- **Alignment**: Fixed the vertical alignment of prefix icons in outlined inputs.

These micro-UX improvements make the initial onboarding and authentication flows more intuitive, accessible, and professional.

Co-authored-by: godie <227743+godie@users.noreply.github.com>
---
 .Jules/palette.md                 |  5 +++
 src/v2/pages/V2ForgotPassword.jsx | 22 ++++++++--
 src/v2/pages/V2Login.jsx          | 25 +++++++++--
 src/v2/pages/V2Signup.jsx         | 73 +++++++++++++++++++++++++++----
 4 files changed, 111 insertions(+), 14 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 7cb7097..0e467d8 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -43,6 +43,11 @@
 ## 2025-06-17 - [Dynamic Theme Feedback and Functional Branding]
 **Learning:** Converting static branding elements into functional navigation links (e.g., logo to dashboard) fulfills standard user expectations. Furthermore, synchronizing the theme toggle's icon and ARIA labels with the active theme via React state, combined with subtle CSS transitions (scale and rotation), creates a more accessible and "delightful" interaction that feels responsive to the user's current environment.
 **Action:** Always ensure branding logos are functional links and use dynamic state for theme-related UI elements to provide clear, accessible feedback.
+
+## 2025-06-18 - [Standardized Auth Visual Context and Accessibility]
+**Learning:** Adding prefix icons to authentication inputs provides immediate visual context, improving scanability. Implementing a consistent password visibility toggle across all auth forms (Login/Signup) ensures a predictable user experience. Crucially, explicitly associating labels with inputs via `id` and `htmlFor` significantly improves accessibility for screen readers and touch target size.
+**Action:** Always include relevant prefix icons in high-visibility forms and ensure strict label-input association for accessibility.
+
 ## 2025-02-03 - [Unified Loading Feedback in Buttons and Components]
 **Learning:** Moving loading logic (spinners, text, disabled state) into base components like `CustomButton` reduces boilerplate and ensures consistent UX across the app. In Spanish interfaces, using semantic icons like `check_circle` within a `valign-wrapper` in toasts provides clear, professional feedback for critical actions like saving.
 **Action:** Abstract loading states into reusable UI components and always include visual markers (icons) for status updates.
diff --git a/src/v2/pages/V2ForgotPassword.jsx b/src/v2/pages/V2ForgotPassword.jsx
index 2f6b6fa..1857d58 100644
--- a/src/v2/pages/V2ForgotPassword.jsx
+++ b/src/v2/pages/V2ForgotPassword.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import { alertSuccess, alertError } from '../../services/AlertService';
+import CustomPreloader from '../../components/custom/CustomPreloader';
 import '../styles/v2-theme.css';
 
 const V2ForgotPassword = () => {
@@ -48,19 +49,34 @@ const V2ForgotPassword = () => {
         {!submitted ? (
           <form onSubmit={handleResetRequest} style={{ display: 'flex', flexDirection: 'column', gap: '20px', textAlign: 'left' }}>
             <div className="v2-input-outlined">
-              <label>Correo Electrónico</label>
+              <label htmlFor="email">Correo Electrónico</label>
+              <i className="material-icons" aria-hidden="true" style={{
+                position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+                color: 'var(--md-sys-color-outline)', marginTop: '8px'
+              }}>mail</i>
               <input
+                id="email"
                 type="email"
                 placeholder="doctor@medical.com"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
+                style={{ paddingLeft: '48px' }}
               />
             </div>
 
             <button type="submit" className="v2-btn-filled" style={{ justifyContent: 'center', height: '56px' }} disabled={loading}>
-              {loading ? 'Procesando...' : 'Enviar Instrucciones'}
-              {!loading && <i className="material-icons">send</i>}
+              {loading ? (
+                <span className="valign-wrapper" style={{ gap: '12px' }}>
+                  <CustomPreloader size="small" />
+                  Procesando...
+                </span>
+              ) : (
+                <>
+                  Enviar Instrucciones
+                  <i className="material-icons">send</i>
+                </>
+              )}
             </button>
           </form>
         ) : (
diff --git a/src/v2/pages/V2Login.jsx b/src/v2/pages/V2Login.jsx
index 026235f..1b4a08c 100644
--- a/src/v2/pages/V2Login.jsx
+++ b/src/v2/pages/V2Login.jsx
@@ -3,6 +3,7 @@ import { useHistory, Link } from 'react-router-dom';
 import UserService from '../../services/UserService';
 import Auth from '../../modules/Auth';
 import { alertError } from '../../services/AlertService';
+import CustomPreloader from '../../components/custom/CustomPreloader';
 import '../styles/v2-theme.css';
 
 const V2Login = () => {
@@ -55,6 +56,10 @@ const V2Login = () => {
         <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '20px', textAlign: 'left' }}>
           <div className="v2-input-outlined">
             <label htmlFor="email">Correo Electrónico</label>
+            <i className="material-icons" aria-hidden="true" style={{
+              position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+              color: 'var(--md-sys-color-outline)', marginTop: '8px'
+            }}>mail</i>
             <input
               id="email"
               type="email"
@@ -62,11 +67,16 @@ const V2Login = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
+              style={{ paddingLeft: '48px' }}
             />
           </div>
 
           <div className="v2-input-outlined" style={{ position: 'relative' }}>
             <label htmlFor="password">Contraseña</label>
+            <i className="material-icons" aria-hidden="true" style={{
+              position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+              color: 'var(--md-sys-color-outline)', marginTop: '8px'
+            }}>lock</i>
             <input
               id="password"
               type={showPassword ? "text" : "password"}
@@ -74,7 +84,7 @@ const V2Login = () => {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              style={{ paddingRight: '48px' }}
+              style={{ paddingLeft: '48px', paddingRight: '48px' }}
             />
             <button
               type="button"
@@ -107,8 +117,17 @@ const V2Login = () => {
           </div>
 
           <button type="submit" className="v2-btn-filled" style={{ justifyContent: 'center', height: '56px' }} disabled={loading}>
-            {loading ? 'Iniciando sesión...' : 'Entrar'}
-            {!loading && <i className="material-icons" aria-hidden="true">arrow_forward</i>}
+            {loading ? (
+              <span className="valign-wrapper" style={{ gap: '12px' }}>
+                <CustomPreloader size="small" />
+                Iniciando sesión...
+              </span>
+            ) : (
+              <>
+                Entrar
+                <i className="material-icons" aria-hidden="true">arrow_forward</i>
+              </>
+            )}
           </button>
         </form>
 
diff --git a/src/v2/pages/V2Signup.jsx b/src/v2/pages/V2Signup.jsx
index 5305544..4856f6d 100644
--- a/src/v2/pages/V2Signup.jsx
+++ b/src/v2/pages/V2Signup.jsx
@@ -3,6 +3,7 @@ import { useHistory, Link } from 'react-router-dom';
 import UserService from '../../services/UserService';
 import Auth from '../../modules/Auth';
 import { alertError } from '../../services/AlertService';
+import CustomPreloader from '../../components/custom/CustomPreloader';
 import '../styles/v2-theme.css';
 
 const V2Signup = () => {
@@ -12,6 +13,7 @@ const V2Signup = () => {
     username: '',
     password: ''
   });
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const history = useHistory();
 
@@ -61,56 +63,111 @@ const V2Signup = () => {
 
         <form onSubmit={handleSignup} style={{ display: 'flex', flexDirection: 'column', gap: '16px', textAlign: 'left' }}>
           <div className="v2-input-outlined">
-            <label>Nombre Completo</label>
+            <label htmlFor="name">Nombre Completo</label>
+            <i className="material-icons" aria-hidden="true" style={{
+              position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+              color: 'var(--md-sys-color-outline)', marginTop: '8px'
+            }}>person</i>
             <input
+              id="name"
               type="text"
               name="name"
               placeholder="Dr. García"
               value={formData.name}
               onChange={handleChange}
               required
+              style={{ paddingLeft: '48px' }}
             />
           </div>
 
           <div className="v2-input-outlined">
-            <label>Correo Electrónico</label>
+            <label htmlFor="email">Correo Electrónico</label>
+            <i className="material-icons" aria-hidden="true" style={{
+              position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+              color: 'var(--md-sys-color-outline)', marginTop: '8px'
+            }}>mail</i>
             <input
+              id="email"
               type="email"
               name="email"
               placeholder="doctor@medical.com"
               value={formData.email}
               onChange={handleChange}
               required
+              style={{ paddingLeft: '48px' }}
             />
           </div>
 
           <div className="v2-input-outlined">
-            <label>Nombre de Usuario</label>
+            <label htmlFor="username">Nombre de Usuario</label>
+            <i className="material-icons" aria-hidden="true" style={{
+              position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+              color: 'var(--md-sys-color-outline)', marginTop: '8px'
+            }}>badge</i>
             <input
+              id="username"
               type="text"
               name="username"
               placeholder="drgarcia"
               value={formData.username}
               onChange={handleChange}
               required
+              style={{ paddingLeft: '48px' }}
             />
           </div>
 
-          <div className="v2-input-outlined">
-            <label>Contraseña</label>
+          <div className="v2-input-outlined" style={{ position: 'relative' }}>
+            <label htmlFor="password">Contraseña</label>
+            <i className="material-icons" aria-hidden="true" style={{
+              position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)',
+              color: 'var(--md-sys-color-outline)', marginTop: '8px'
+            }}>lock</i>
             <input
-              type="password"
+              id="password"
+              type={showPassword ? "text" : "password"}
               name="password"
               placeholder="••••••••"
               value={formData.password}
               onChange={handleChange}
               required
+              style={{ paddingLeft: '48px', paddingRight: '48px' }}
             />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              aria-label={showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}
+              title={showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}
+              style={{
+                position: 'absolute',
+                right: '12px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--md-sys-color-outline)',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '8px',
+                marginTop: '12px'
+              }}
+            >
+              <i className="material-icons">{showPassword ? 'visibility_off' : 'visibility'}</i>
+            </button>
           </div>
 
           <button type="submit" className="v2-btn-filled" style={{ justifyContent: 'center', height: '56px', marginTop: '8px' }} disabled={loading}>
-            {loading ? 'Creando cuenta...' : 'Registrarse'}
-            {!loading && <i className="material-icons">person_add</i>}
+            {loading ? (
+              <span className="valign-wrapper" style={{ gap: '12px' }}>
+                <CustomPreloader size="small" />
+                Creando cuenta...
+              </span>
+            ) : (
+              <>
+                Registrarse
+                <i className="material-icons">person_add</i>
+              </>
+            )}
           </button>
         </form>