feat: add full project - backend, frontend, docker, specs and configs

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,107 @@
+import { useState, type FormEvent } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+
+export default function LoginPage() {
+    const { login } = useAuth()
+    const navigate = useNavigate()
+    const location = useLocation()
+    const from =
+        (location.state as { from?: { pathname: string } })?.from?.pathname ||
+        '/area-do-cliente'
+
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(false)
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault()
+        setError('')
+        setLoading(true)
+        try {
+            await login({ email, password })
+            navigate(from, { replace: true })
+        } catch (err: unknown) {
+            const axiosErr = err as { response?: { status?: number } }
+            if (axiosErr.response?.status === 401) {
+                setError('E-mail ou senha incorretos.')
+            } else {
+                setError('Erro de conexão. Tente novamente.')
+            }
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-canvas px-4">
+            <div className="w-full max-w-sm">
+                <div className="mb-8 text-center">
+                    <h1 className="text-2xl font-semibold text-textPrimary">Entrar</h1>
+                    <p className="mt-1 text-sm text-textSecondary">Acesse sua conta</p>
+                </div>
+
+                <form
+                    onSubmit={handleSubmit}
+                    className="rounded-xl border border-borderSubtle bg-panel p-6 space-y-4"
+                >
+                    {error && (
+                        <div className="rounded-lg bg-red-500/10 border border-red-500/20 px-3 py-2 text-sm text-red-400">
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="space-y-1">
+                        <label className="text-xs font-medium text-textSecondary uppercase tracking-wide">
+                            E-mail
+                        </label>
+                        <input
+                            type="email"
+                            required
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            className="form-input"
+                            placeholder="seu@email.com"
+                        />
+                    </div>
+
+                    <div className="space-y-1">
+                        <label className="text-xs font-medium text-textSecondary uppercase tracking-wide">
+                            Senha
+                        </label>
+                        <input
+                            type="password"
+                            required
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            className="form-input"
+                            placeholder="••••••••"
+                        />
+                    </div>
+
+                    <button
+                        type="submit"
+                        disabled={loading}
+                        className="w-full rounded-lg bg-brand py-2.5 text-sm font-medium text-white transition hover:bg-accentHover disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                    >
+                        {loading && (
+                            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+                        )}
+                        {loading ? 'Entrando...' : 'Entrar'}
+                    </button>
+                </form>
+
+                <p className="mt-4 text-center text-sm text-textTertiary">
+                    Não tem conta?{' '}
+                    <Link
+                        to="/cadastro"
+                        className="text-accent hover:text-accentHover transition"
+                    >
+                        Cadastre-se
+                    </Link>
+                </p>
+            </div>
+        </div>
+    )
+}