From 3319412b66e954b824c7eff2a57fd65b6c694ee2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:32:48 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20V2=20Auth?=
 =?UTF-8?q?=20Forms=20Accessibility=20and=20UX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I have updated the Version 2 authentication forms (Login, Signup, and Forgot Password) to improve the overall user experience and accessibility.

Key changes:
- Corrected semantic association between labels and inputs using `id` and `htmlFor`.
- Added `aria-required="true"` to mandatory fields for better screen reader support.
- Implemented a password visibility toggle in the Signup page for consistency with the Login page.
- Added leading Material Icons to input fields to provide immediate visual context and a more delightful MD3 feel.
- Standardized visual loading feedback in form buttons using the `CustomPreloader` component.
- Verified visual changes with Playwright screenshots and confirmed that all existing unit tests continue to pass.

Co-authored-by: godie <227743+godie@users.noreply.github.com>
---
 src/v2/pages/V2ForgotPassword.jsx | 20 ++++++++--
 src/v2/pages/V2Login.jsx          | 21 ++++++++--
 src/v2/pages/V2Signup.jsx         | 65 +++++++++++++++++++++++++++----
 3 files changed, 92 insertions(+), 14 deletions(-)

diff --git a/src/v2/pages/V2ForgotPassword.jsx b/src/v2/pages/V2ForgotPassword.jsx
index 2f6b6fa..8d0e6cf 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,32 @@ 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" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">mail</i>
               <input
+                id="email"
                 type="email"
                 placeholder="doctor@medical.com"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
+                aria-required="true"
+                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">
+                  <CustomPreloader size="small" color="white" />
+                  <span style={{ marginLeft: '12px' }}>Procesando...</span>
+                </span>
+              ) : (
+                <>
+                  Enviar Instrucciones
+                  <i className="material-icons" aria-hidden="true">send</i>
+                </>
+              )}
             </button>
           </form>
         ) : (
diff --git a/src/v2/pages/V2Login.jsx b/src/v2/pages/V2Login.jsx
index 026235f..cd0a21d 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,7 @@ 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" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">mail</i>
             <input
               id="email"
               type="email"
@@ -62,11 +64,14 @@ const V2Login = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
+              aria-required="true"
+              style={{ paddingLeft: '48px' }}
             />
           </div>
 
           <div className="v2-input-outlined" style={{ position: 'relative' }}>
             <label htmlFor="password">Contraseña</label>
+            <i className="material-icons" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">lock</i>
             <input
               id="password"
               type={showPassword ? "text" : "password"}
@@ -74,7 +79,8 @@ const V2Login = () => {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              style={{ paddingRight: '48px' }}
+              aria-required="true"
+              style={{ paddingLeft: '48px', paddingRight: '48px' }}
             />
             <button
               type="button"
@@ -107,8 +113,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">
+                <CustomPreloader size="small" color="white" />
+                <span style={{ marginLeft: '12px' }}>Iniciando sesión...</span>
+              </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..b6de022 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,103 @@ 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" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">person</i>
             <input
+              id="name"
               type="text"
               name="name"
               placeholder="Dr. García"
               value={formData.name}
               onChange={handleChange}
               required
+              aria-required="true"
+              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" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">mail</i>
             <input
+              id="email"
               type="email"
               name="email"
               placeholder="doctor@medical.com"
               value={formData.email}
               onChange={handleChange}
               required
+              aria-required="true"
+              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" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">badge</i>
             <input
+              id="username"
               type="text"
               name="username"
               placeholder="drgarcia"
               value={formData.username}
               onChange={handleChange}
               required
+              aria-required="true"
+              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" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--md-sys-color-outline)', marginTop: '12px' }} aria-hidden="true">lock</i>
             <input
-              type="password"
+              id="password"
+              type={showPassword ? "text" : "password"}
               name="password"
               placeholder="••••••••"
               value={formData.password}
               onChange={handleChange}
               required
+              aria-required="true"
+              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">
+                <CustomPreloader size="small" color="white" />
+                <span style={{ marginLeft: '12px' }}>Creando cuenta...</span>
+              </span>
+            ) : (
+              <>
+                Registrarse
+                <i className="material-icons" aria-hidden="true">person_add</i>
+              </>
+            )}
           </button>
         </form>