Spaces:
Paused
Paused
| 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> | |
| ); | |
| } | |