160 lines
7.3 KiB
TypeScript
160 lines
7.3 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { Button } from '../components/Button';
|
|
import { Input } from '../components/Input';
|
|
import { UserRole } from '../types';
|
|
|
|
interface LoginProps {
|
|
onNavigate?: (page: string) => void;
|
|
}
|
|
|
|
export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
|
|
const { login, availableUsers } = useAuth();
|
|
const [email, setEmail] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleLogin = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError('');
|
|
|
|
const success = await login(email);
|
|
if (!success) {
|
|
setError('Usuário não encontrado. Tente um dos e-mails de demonstração.');
|
|
}
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const fillCredentials = (userEmail: string) => {
|
|
setEmail(userEmail);
|
|
};
|
|
|
|
const getRoleLabel = (role: UserRole) => {
|
|
switch (role) {
|
|
case UserRole.SUPERADMIN: return "Superadmin";
|
|
case UserRole.BUSINESS_OWNER: return "Empresa";
|
|
case UserRole.PHOTOGRAPHER: return "Fotógrafo";
|
|
case UserRole.EVENT_OWNER: return "Cliente";
|
|
default: return role;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-white p-4">
|
|
<div className="w-full max-w-md space-y-8 fade-in">
|
|
{/* Logo */}
|
|
<div className="flex justify-center mb-8">
|
|
<img
|
|
src="/logo.png"
|
|
alt="Photum Formaturas"
|
|
className="h-20 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
|
|
<div className="text-center">
|
|
<span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Bem-vindo de volta</span>
|
|
<h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
|
|
<p className="mt-2 text-xs sm:text-sm text-gray-600">
|
|
Não tem uma conta?{' '}
|
|
<button
|
|
type="button"
|
|
onClick={() => onNavigate?.('cadastro')}
|
|
className="font-medium hover:opacity-80 transition-opacity"
|
|
style={{ color: '#B9CF33' }}
|
|
>
|
|
Cadastre-se
|
|
</button>
|
|
</p>
|
|
</div>
|
|
|
|
<form className="mt-6 sm:mt-8 space-y-4 sm:space-y-6" onSubmit={handleLogin}>
|
|
<div className="space-y-3 sm:space-y-4">
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
|
|
E-MAIL CORPORATIVO OU PESSOAL
|
|
</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
placeholder="nome@exemplo.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
|
|
style={{ focusRing: '2px solid #B9CF33' }}
|
|
onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
|
|
onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
|
|
/>
|
|
{error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
|
|
SENHA
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
readOnly
|
|
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
|
|
/>
|
|
<button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="w-full px-6 sm:px-10 py-3 sm:py-4 text-white font-bold text-base sm:text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
style={{ backgroundColor: '#4E345F' }}
|
|
>
|
|
{isLoading ? 'Entrando...' : 'Entrar no Sistema'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Demo Users Quick Select */}
|
|
<div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6">
|
|
<p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
|
|
<div className="space-y-2">
|
|
{availableUsers.map(user => (
|
|
<button
|
|
key={user.id}
|
|
onClick={() => fillCredentials(user.email)}
|
|
className="w-full flex items-center justify-between p-3 sm:p-4 border-2 rounded-xl hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.01] active:scale-[0.99]"
|
|
style={{ borderColor: '#e5e7eb' }}
|
|
onMouseEnter={(e) => {
|
|
e.currentTarget.style.borderColor = '#B9CF33';
|
|
e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.currentTarget.style.borderColor = '#e5e7eb';
|
|
e.currentTarget.style.boxShadow = 'none';
|
|
}}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="text-sm sm:text-base font-bold text-gray-900 truncate">{user.name}</span>
|
|
<span className="text-[10px] sm:text-xs uppercase tracking-wide font-semibold px-2 py-0.5 rounded-full whitespace-nowrap" style={{ backgroundColor: '#B9CF33', color: '#fff' }}>{getRoleLabel(user.role)}</span>
|
|
</div>
|
|
<span className="text-xs sm:text-sm text-gray-500 truncate block">{user.email}</span>
|
|
</div>
|
|
<svg className="w-5 h-5 text-gray-400 group-hover:text-[#B9CF33] transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|