Projeto bot pontos

web/app/login/page.tsx

@@ -0,0 +1,52 @@
+"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>
+  );
+}