53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type FormEvent } from "react";
|
|
import { apiFetch, errorMessage } from "@/lib/client-api";
|
|
|
|
export default function LoginPage() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
async function submit(e: FormEvent) {
|
|
e.preventDefault();
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await apiFetch("/auth/login", { method: "POST", body: { username, password } });
|
|
const next = new URLSearchParams(window.location.search).get("next");
|
|
window.location.href = next && next.startsWith("/") && !next.startsWith("//") ? next : "/";
|
|
} catch (err) {
|
|
setError(errorMessage(err));
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<main className="login">
|
|
<form className="card" onSubmit={submit}>
|
|
<h1>Bot de Pontos</h1>
|
|
<p className="muted">Painel administrativo</p>
|
|
<label className="field">
|
|
<span>Usuário</span>
|
|
<input value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" required />
|
|
</label>
|
|
<label className="field">
|
|
<span>Senha</span>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
autoComplete="current-password"
|
|
required
|
|
/>
|
|
</label>
|
|
{error && <p className="error-text">{error}</p>}
|
|
<button className="btn primary" type="submit" disabled={busy}>
|
|
{busy ? "Entrando…" : "Entrar"}
|
|
</button>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|