Skip to content

🎨 Palette: Enhance V2 Auth Forms Accessibility and UX #87

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
godie wants to merge 1 commit into
base: master
Choose a base branch
from
Open

🎨 Palette: Enhance V2 Auth Forms Accessibility and UX #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions src/v2/pages/V2ForgotPassword.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down Expand Up @@ -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>
) : (
Expand Down
21 changes: 18 additions & 3 deletions src/v2/pages/V2Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -55,26 +56,31 @@ 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"
placeholder="doctor@medical.com"
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"}
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
style={{ paddingRight: '48px' }}
aria-required="true"
style={{ paddingLeft: '48px', paddingRight: '48px' }}
/>
<button
type="button"
Expand Down Expand Up @@ -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>

Expand Down
65 changes: 57 additions & 8 deletions src/v2/pages/V2Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand All @@ -12,6 +13,7 @@ const V2Signup = () => {
username: '',
password: ''
});
const [showPassword, setShowPassword] = useState(false);
const [loading, setLoading] = useState(false);
const history = useHistory();

Expand Down Expand Up @@ -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>

Expand Down
Loading