Spaces:
Paused
Paused
File size: 5,625 Bytes
c62de68 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';
import { User, Lock, ArrowRight } from 'lucide-react';
export default function Login() {
const [email, setEmail] = useState('patricia_admin@gmail.com');
const [password, setPassword] = useState('patricia2026@mtz');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const { login } = useAuth();
const handleSubmit = (e) => {
e.preventDefault();
setError('');
setLoading(true);
setTimeout(() => {
const res = login(email.trim(), password);
if (!res.success) {
setError(res.message);
setLoading(false);
}
}, 400);
};
return (
<div style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#e9eef4', // Exact light blueish background from screenshot 2
padding: '1.5rem',
fontFamily: 'system-ui, -apple-system, sans-serif'
}}>
<div style={{
width: '100%',
maxWidth: '430px',
background: '#ffffff',
borderRadius: '10px',
boxShadow: '0 10px 25px rgba(0, 0, 0, 0.08)',
padding: '3rem 2.5rem 2rem',
textAlign: 'center'
}}>
{/* Title matching exact screenshot */}
<h1 style={{
fontSize: '2rem',
fontWeight: '800',
color: '#2bb3e5', // Exact bright blue color from screenshot
marginBottom: '0.1rem',
letterSpacing: '-0.5px'
}}>
Mi Empresa
</h1>
<p style={{
fontSize: '0.75rem',
fontWeight: '700',
color: '#8da2b5',
textTransform: 'uppercase',
letterSpacing: '0.5px',
marginBottom: '2.5rem'
}}>
ACCESO AL SISTEMA
</p>
{error && (
<div style={{
padding: '0.75rem',
borderRadius: '6px',
background: '#fde8e8',
color: '#e53e3e',
fontSize: '0.85rem',
marginBottom: '1.5rem',
textAlign: 'left'
}}>
{error}
</div>
)}
<form onSubmit={handleSubmit} style={{ textAlign: 'left', display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
<div>
<label style={{ display: 'block', fontSize: '0.75rem', fontWeight: '800', color: '#55687d', marginBottom: '0.5rem', textTransform: 'uppercase' }}>
NOMBRE DE USUARIO
</label>
<div style={{ position: 'relative' }}>
<User style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)', color: '#a0aec0' }} size={16} />
<input
type="text"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Escribe tu usuario..."
style={{
width: '100%',
padding: '0.75rem 1rem 0.75rem 2.8rem',
borderRadius: '25px', // Exact pill shape inputs from screenshot
border: '1px solid #e2e8f0',
outline: 'none',
fontSize: '0.9rem',
color: '#4a5568',
backgroundColor: '#ffffff'
}}
/>
</div>
</div>
<div>
<label style={{ display: 'block', fontSize: '0.75rem', fontWeight: '800', color: '#55687d', marginBottom: '0.5rem', textTransform: 'uppercase' }}>
CONTRASEÑA
</label>
<div style={{ position: 'relative' }}>
<Lock style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)', color: '#a0aec0' }} size={16} />
<input
type="password"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
style={{
width: '100%',
padding: '0.75rem 1rem 0.75rem 2.8rem',
borderRadius: '25px', // Exact pill shape inputs from screenshot
border: '1px solid #e2e8f0',
outline: 'none',
fontSize: '0.9rem',
color: '#4a5568',
backgroundColor: '#ffffff'
}}
/>
</div>
</div>
<button
type="submit"
disabled={loading}
style={{
marginTop: '0.75rem',
width: '100%',
padding: '0.8rem',
borderRadius: '25px', // Exact pill shape button
border: 'none',
background: '#2bb3e5', // Matching exact button color
color: '#ffffff',
fontWeight: '800',
fontSize: '0.9rem',
cursor: loading ? 'not-allowed' : 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '0.5rem',
boxShadow: '0 4px 12px rgba(43, 179, 229, 0.3)',
textTransform: 'uppercase'
}}
>
{loading ? 'Cargando...' : <>INICIAR SESIÓN <ArrowRight size={18} /></>}
</button>
</form>
<div style={{ marginTop: '3rem', fontSize: '0.75rem', color: '#a0aec0' }}>
© 2026 - Mi Empresa
</div>
</div>
</div>
);
}
|