Initial commit: SKEEN Derma Experts - Sistema Integral de Gestión Clínica
- Frontend React (SKEEN Brand) con Vite, TypeScript, Tailwind - Frontend Homenest (versión alternativa) - Módulos Odoo 17 custom (citas, pacientes, monedero, pagos, ventas, inventario, whatsapp) - WACRM fork (Next.js 16 + Supabase) - Hermes + Bridge + Skills (Qwen3.6 via Nan Builders) - Scripts de migración y operación - Documentación extensiva en docs/
This commit is contained in:
119
frontend/src/pages/Login.tsx
Normal file
119
frontend/src/pages/Login.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import type { FC, FormEvent } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { LogIn } from 'lucide-react';
|
||||
import { Button, Input } from '../components/ui';
|
||||
import { useAuth } from '../lib/auth';
|
||||
import { useTheme } from '../lib/theme';
|
||||
|
||||
const LOGO_SKEEN = '/skeen-brand/logos/Logo%20Completo%20Blanco.png';
|
||||
const LOGO_HOMENEST = '/skeen-brand/logos/Logo%20Completo%20Negro.png';
|
||||
|
||||
const Login: FC = () => {
|
||||
const { login } = useAuth();
|
||||
const { theme } = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const isHomeNest = theme === 'homenest';
|
||||
const logo = isHomeNest ? LOGO_HOMENEST : LOGO_SKEEN;
|
||||
|
||||
const onSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
if (!username.trim() || !password) {
|
||||
setError('Escribe usuario y contraseña');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setSubmitting(true);
|
||||
await login(username.trim(), password);
|
||||
navigate('/', { replace: true });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'No se pudo iniciar sesión');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen flex items-center justify-center p-4 relative overflow-hidden transition-colors"
|
||||
style={{ backgroundColor: isHomeNest ? 'var(--bg)' : 'var(--color-dark)' }}
|
||||
>
|
||||
{/* Círculos decorativos de la paleta */}
|
||||
<div
|
||||
className="absolute top-[-10%] right-[-5%] w-72 h-72 rounded-full blur-3xl"
|
||||
style={{ backgroundColor: isHomeNest ? 'var(--color-coral)' : 'var(--color-coral)', opacity: isHomeNest ? 0.2 : 0.2 }}
|
||||
/>
|
||||
<div
|
||||
className="absolute bottom-[-10%] left-[-5%] w-80 h-80 rounded-full blur-3xl"
|
||||
style={{ backgroundColor: isHomeNest ? 'var(--color-mint)' : 'var(--color-mint)', opacity: isHomeNest ? 0.3 : 0.15 }}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full blur-3xl"
|
||||
style={{ backgroundColor: isHomeNest ? 'var(--color-sky)' : 'var(--color-lilac)', opacity: isHomeNest ? 0.4 : 0.1 }}
|
||||
/>
|
||||
|
||||
<div className="w-full max-w-sm relative z-10">
|
||||
<div className="text-center mb-10">
|
||||
<img
|
||||
src={logo}
|
||||
alt="SKEEN Derma Experts"
|
||||
className="h-10 w-auto object-contain mx-auto mb-6"
|
||||
/>
|
||||
<h1 className="font-display text-3xl mb-2 tracking-wide" style={{ color: isHomeNest ? 'var(--text-heading)' : '#fff' }}>Bienvenido</h1>
|
||||
<p className="text-sm" style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.6)' }}>Inicia sesión para continuar</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={onSubmit}
|
||||
className="rounded-3xl p-7 space-y-5 border"
|
||||
style={{
|
||||
backgroundColor: isHomeNest ? 'var(--surface)' : 'rgba(255,255,255,0.05)',
|
||||
borderColor: isHomeNest ? 'var(--border)' : 'rgba(255,255,255,0.1)',
|
||||
backdropFilter: isHomeNest ? 'none' : 'blur(8px)',
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
label="Usuario"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
autoFocus
|
||||
inputClassName={isHomeNest
|
||||
? 'bg-theme-bg border-theme-border-strong text-theme-heading placeholder:text-theme-muted/60 focus:border-theme-accent focus:ring-theme-accent/30'
|
||||
: 'bg-theme-surface/10 border-white/10 text-white placeholder:text-white/40 focus:border-theme-accent focus:ring-theme-accent/30'
|
||||
}
|
||||
labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
|
||||
/>
|
||||
<Input
|
||||
label="Contraseña"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autoComplete="current-password"
|
||||
inputClassName={isHomeNest
|
||||
? 'bg-theme-bg border-theme-border-strong text-theme-heading placeholder:text-theme-muted/60 focus:border-theme-accent focus:ring-theme-accent/30'
|
||||
: 'bg-theme-surface/10 border-white/10 text-white placeholder:text-white/40 focus:border-theme-accent focus:ring-theme-accent/30'
|
||||
}
|
||||
labelClassName={isHomeNest ? 'text-theme-muted' : 'text-white/70'}
|
||||
/>
|
||||
{error && <p className="text-sm" style={{ color: 'var(--color-coral)' }}>{error}</p>}
|
||||
<Button type="submit" className="w-full" loading={submitting}>
|
||||
<LogIn size={16} className="mr-2" />
|
||||
Entrar
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-xs mt-6" style={{ color: isHomeNest ? 'var(--text-muted)' : 'rgba(255,255,255,0.3)' }}>
|
||||
SKEEN Derma Experts · Playas de Rosarito, B.C.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
Reference in New Issue
Block a user