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
|
/**
* LoginPage.tsx
* Página de autenticação — ponto de entrada da aplicação.
*/
import { useState, type FormEvent } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useMutation } from '@tanstack/react-query';
import { api } from '@/lib/api';
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';
import styles from './LoginPage.module.css';
export default function LoginPage() {
const navigate = useNavigate();
const { login } = useAuth();
const { addToast } = useToast();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPass, setShowPass] = useState(false);
const { mutate, isPending, isError, error } = useMutation({
mutationFn: () => api.auth.login({ email, password }),
onSuccess: ({ token, user }) => {
login(token, user);
addToast('Login realizado com sucesso!', 'success');
navigate('/dashboard', { replace: true });
},
onError: (err: any) => {
addToast(err.message || 'Erro ao realizar login', 'error');
}
});
function handleSubmit(e: FormEvent) {
e.preventDefault();
mutate();
}
const errorMsg = isError && error instanceof Error ? error.message : null;
return (
<div className={styles.page}>
<div className={styles.card}>
{/* Logo */}
<div className={styles.logo}>
<svg width="40" height="40" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect width="32" height="32" rx="8" fill="var(--color-accent)" fillOpacity="0.2" />
<path d="M8 11h16M8 16h10M8 21h12" stroke="var(--color-accent)" strokeWidth="2.2" strokeLinecap="round" />
</svg>
<div>
<h1 className={styles.appName}>Helpdesk TI</h1>
<p className={styles.appSub}>Central de Chamados</p>
</div>
</div>
<h2 className={styles.heading}>Entrar na sua conta</h2>
<form className={styles.form} onSubmit={handleSubmit} noValidate>
<div className={styles.field}>
<label htmlFor="login-email" className={styles.label}>E-mail</label>
<input
id="login-email"
type="email"
className="input"
placeholder="seu@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
autoComplete="email"
disabled={isPending}
/>
</div>
<div className={styles.field}>
<label htmlFor="login-password" className={styles.label}>Senha</label>
<div className={styles.passwordWrapper}>
<input
id="login-password"
type={showPass ? 'text' : 'password'}
className="input"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
autoComplete="current-password"
disabled={isPending}
/>
<button
type="button"
className={styles.showPass}
onClick={() => setShowPass((v) => !v)}
aria-label={showPass ? 'Ocultar senha' : 'Mostrar senha'}
>
{showPass ? '🙈' : '👁️'}
</button>
</div>
</div>
{errorMsg && (
<div className={styles.error} role="alert">{errorMsg}</div>
)}
<button
type="submit"
className={`btn btn--primary ${styles.submitBtn}`}
disabled={isPending || !email || !password}
aria-busy={isPending}
>
{isPending ? (
<><span className="spinner" style={{ width: 16, height: 16, borderWidth: 2 }} /> Entrando...</>
) : 'Entrar'}
</button>
</form>
<p className={styles.registerLink}>
Não tem conta?{' '}
<Link to="/register">Solicite acesso ao administrador</Link>
</p>
</div>
</div>
);
}
|
