117 lines
6.8 KiB
TypeScript
117 lines
6.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { X, Loader2, GraduationCap, School, ShieldCheck, UserPlus } from 'lucide-react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { UserRole } from '../types';
|
|
|
|
interface LoginModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [name, setName] = useState('');
|
|
const [role, setRole] = useState<UserRole>('student');
|
|
const [isRegistering, setIsRegistering] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const { login, register, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleSubmit = async (event: React.FormEvent) => {
|
|
event.preventDefault();
|
|
setError('');
|
|
setIsSubmitting(true);
|
|
|
|
if (isRegistering && role !== 'student') {
|
|
setIsSubmitting(false);
|
|
setError('Contas de instrutor e administrador são liberadas pelo superadmin da plataforma.');
|
|
return;
|
|
}
|
|
|
|
const signedInUser = isRegistering
|
|
? await register(name, email, password)
|
|
: await login(email, password);
|
|
setIsSubmitting(false);
|
|
|
|
if (!signedInUser) {
|
|
setError(isRegistering
|
|
? 'Não foi possível criar sua conta. Use um e-mail válido e uma senha com pelo menos 12 caracteres.'
|
|
: 'Credenciais inválidas. Verifique seu e-mail e senha.');
|
|
return;
|
|
}
|
|
|
|
if (signedInUser.role !== role) {
|
|
logout();
|
|
setError(role === 'superadmin'
|
|
? 'Esta conta não possui acesso de administrador.'
|
|
: role === 'professor'
|
|
? 'Esta conta não possui acesso de instrutor.'
|
|
: 'Esta conta possui outro nível de acesso. Selecione a opção correspondente.');
|
|
return;
|
|
}
|
|
|
|
onClose();
|
|
navigate(signedInUser.role === 'superadmin' ? '/admin' : signedInUser.role === 'professor' ? '/gerenciar' : '/');
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/60 backdrop-blur-xl transition-opacity" onClick={onClose} />
|
|
|
|
<div className="relative w-full max-w-md bg-[#1c1c1e] rounded-[8px] shadow-xl border border-white/10 p-6 md:p-8 animate-fade-in-up">
|
|
<button onClick={onClose} className="absolute top-5 right-5 text-white/40 hover:text-white transition-colors" aria-label="Fechar">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="text-center mb-6">
|
|
<h2 className="font-display text-heading-sm font-bold text-white mb-1.5 tracking-heading-sm leading-heading-sm">Compor HUB ID</h2>
|
|
<p className="text-body-sm font-normal text-white/60 tracking-body-sm leading-body-sm">Acesse seu espaço de aprendizado e materiais</p>
|
|
</div>
|
|
|
|
<div className="flex bg-black/40 p-1 rounded-[8px] mb-6 border border-white/5 relative">
|
|
<div
|
|
className="absolute top-1 bottom-1 w-[calc(33.333%-5px)] bg-orange-500/20 rounded-[8px] transition-all duration-300 ease-out border border-orange-500/30 shadow-md"
|
|
style={{ transform: `translateX(${role === 'student' ? 0 : role === 'professor' ? 100 : 200}%)` }}
|
|
/>
|
|
<button type="button" onClick={() => setRole('student')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'student' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
|
|
<GraduationCap className="w-4 h-4" />
|
|
<span className="text-body-sm font-semibold tracking-body-sm">Aluno</span>
|
|
</button>
|
|
<button type="button" onClick={() => setRole('professor')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'professor' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
|
|
<School className="w-4 h-4" />
|
|
<span className="text-body-sm font-semibold tracking-body-sm">Instrutor</span>
|
|
</button>
|
|
<button type="button" onClick={() => setRole('superadmin')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'superadmin' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
|
|
<ShieldCheck className="w-4 h-4" />
|
|
<span className="text-body-sm font-semibold tracking-body-sm">Admin</span>
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-5">
|
|
<div className="space-y-3">
|
|
{isRegistering && <input type="text" placeholder="Seu nome" value={name} onChange={(event) => setName(event.target.value)} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required autoFocus />}
|
|
<input type="email" placeholder="Seu e-mail" value={email} onChange={(event) => setEmail(event.target.value)} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required autoFocus={!isRegistering} />
|
|
<input type="password" placeholder="Sua senha" value={password} onChange={(event) => setPassword(event.target.value)} minLength={12} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required />
|
|
</div>
|
|
|
|
{error && <div className="bg-red-500/10 border border-red-500/20 rounded-[8px] p-3"><p className="text-red-400 text-caption font-semibold tracking-caption text-center">{error}</p></div>}
|
|
|
|
<button type="submit" disabled={isSubmitting} className="w-full bg-white text-black text-body-sm font-semibold tracking-body-sm py-3.5 rounded-[980px] hover:bg-gray-200 active:scale-95 transition-all duration-200 flex items-center justify-center gap-2 shadow-xl">
|
|
{isSubmitting ? <Loader2 className="w-5 h-5 animate-spin" /> : isRegistering ? <UserPlus className="w-5 h-5" /> : null}
|
|
{isRegistering ? 'Criar conta' : 'Entrar'}
|
|
</button>
|
|
</form>
|
|
|
|
<button type="button" onClick={() => { setIsRegistering((value) => !value); setError(''); }} className="w-full mt-5 text-xs text-orange-400 hover:text-orange-300 transition-colors">
|
|
{isRegistering ? 'Já possui conta? Entrar' : 'Não possui conta? Criar acesso de aluno'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|