stage 1

2026-04-20 15:49:01 -05:00
parent 381a31d607
commit b98837a72c
46 changed files with 8883 additions and 37 deletions
@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function AdminLoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setBusy(true);
+    try {
+      const res = await fetch("/api/auth/admin/login", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setError(data.error ?? "Sign-in failed");
+        return;
+      }
+      router.push(data.redirect ?? "/admin");
+      router.refresh();
+    } catch {
+      setError("Network error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <main className="min-h-dvh flex items-center justify-center p-6 bg-slate-50">
+      <form
+        onSubmit={onSubmit}
+        className="w-full max-w-sm space-y-5 bg-white rounded-2xl border border-slate-200 p-6 shadow-sm"
+      >
+        <div>
+          <h1 className="text-2xl font-semibold">Admin sign-in</h1>
+          <p className="text-slate-500 text-sm mt-1">Use your email and password.</p>
+        </div>
+
+        <label className="block">
+          <span className="block text-sm font-medium text-slate-700 mb-1">Email</span>
+          <input
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-base outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-200"
+          />
+        </label>
+
+        <label className="block">
+          <span className="block text-sm font-medium text-slate-700 mb-1">Password</span>
+          <input
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full rounded-lg border border-slate-300 px-3 py-2 text-base outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-200"
+          />
+        </label>
+
+        {error && (
+          <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-3 py-2">
+            {error}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={busy}
+          className="w-full rounded-lg bg-slate-900 text-white py-2.5 font-medium disabled:opacity-60 hover:bg-slate-800 transition"
+        >
+          {busy ? "Signing in…" : "Sign in"}
+        </button>
+
+        <div className="text-center">
+          <Link href="/login" className="text-sm text-slate-500 hover:text-slate-900">
+            ← Back
+          </Link>
+        </div>
+      </form>
+    </main>
+  );
+}
@@ -0,0 +1,174 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+interface Operator {
+  id: string;
+  name: string;
+}
+
+export default function OperatorLoginPage() {
+  const router = useRouter();
+  const [operators, setOperators] = useState<Operator[] | null>(null);
+  const [selected, setSelected] = useState<Operator | null>(null);
+  const [pin, setPin] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/operators")
+      .then((r) => r.json())
+      .then((d) => setOperators(d.operators ?? []))
+      .catch(() => setOperators([]));
+  }, []);
+
+  function pressKey(k: string) {
+    setError(null);
+    if (k === "back") {
+      setPin((p) => p.slice(0, -1));
+      return;
+    }
+    if (k === "clear") {
+      setPin("");
+      return;
+    }
+    setPin((p) => (p.length >= 4 ? p : p + k));
+  }
+
+  async function submit() {
+    if (!selected || pin.length !== 4) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/auth/operator/login", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ operatorId: selected.id, pin }),
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        setError(data.error ?? "Sign-in failed");
+        setPin("");
+        return;
+      }
+      router.push(data.redirect ?? "/op");
+      router.refresh();
+    } catch {
+      setError("Network error");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useEffect(() => {
+    if (pin.length === 4 && !busy) {
+      void submit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pin]);
+
+  if (operators === null) {
+    return (
+      <main className="min-h-dvh flex items-center justify-center p-6 bg-slate-50">
+        <p className="text-slate-500">Loading…</p>
+      </main>
+    );
+  }
+
+  if (!selected) {
+    return (
+      <main className="min-h-dvh p-6 bg-slate-50">
+        <div className="mx-auto max-w-2xl">
+          <div className="text-center mb-6">
+            <h1 className="text-2xl font-semibold">Who are you?</h1>
+            <p className="text-slate-500 mt-1">Tap your name to sign in.</p>
+          </div>
+
+          {operators.length === 0 ? (
+            <div className="rounded-xl bg-white border border-slate-200 p-6 text-center">
+              <p className="text-slate-700">No operators exist yet.</p>
+              <p className="text-slate-500 text-sm mt-1">Ask an admin to create your account.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+              {operators.map((op) => (
+                <button
+                  key={op.id}
+                  onClick={() => setSelected(op)}
+                  className="rounded-xl bg-white border border-slate-200 px-4 py-5 text-lg font-medium hover:border-slate-900 hover:shadow-sm transition"
+                >
+                  {op.name}
+                </button>
+              ))}
+            </div>
+          )}
+
+          <div className="text-center mt-8">
+            <Link href="/login" className="text-sm text-slate-500 hover:text-slate-900">
+              ← Back
+            </Link>
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  const keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "clear", "0", "back"];
+
+  return (
+    <main className="min-h-dvh p-6 bg-slate-50">
+      <div className="mx-auto max-w-sm">
+        <div className="text-center mb-4">
+          <button
+            onClick={() => {
+              setSelected(null);
+              setPin("");
+              setError(null);
+            }}
+            className="text-sm text-slate-500 hover:text-slate-900"
+          >
+            ← Not {selected.name}?
+          </button>
+        </div>
+
+        <div className="rounded-2xl bg-white border border-slate-200 p-6 shadow-sm">
+          <h1 className="text-xl font-semibold text-center">Hi, {selected.name}</h1>
+          <p className="text-slate-500 text-sm text-center mt-1">Enter your 4-digit PIN</p>
+
+          <div className="flex justify-center gap-3 my-6">
+            {[0, 1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className={`w-4 h-4 rounded-full ${pin.length > i ? "bg-slate-900" : "bg-slate-200"}`}
+              />
+            ))}
+          </div>
+
+          {error && (
+            <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-md px-3 py-2 mb-4 text-center">
+              {error}
+            </p>
+          )}
+
+          <div className="grid grid-cols-3 gap-2">
+            {keys.map((k) => {
+              const label = k === "back" ? "⌫" : k === "clear" ? "C" : k;
+              return (
+                <button
+                  key={k}
+                  onClick={() => pressKey(k)}
+                  disabled={busy}
+                  className="h-14 rounded-lg bg-slate-100 hover:bg-slate-200 active:bg-slate-300 text-xl font-medium transition disabled:opacity-60"
+                >
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -0,0 +1,28 @@
+import Link from "next/link";
+
+export default function LoginChoicePage() {
+  return (
+    <main className="min-h-dvh flex items-center justify-center p-6 bg-slate-50">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-3xl font-semibold tracking-tight">MRP</h1>
+          <p className="text-slate-500 mt-1">Sign in to continue</p>
+        </div>
+        <div className="grid gap-3">
+          <Link
+            href="/login/operator"
+            className="block rounded-xl bg-slate-900 text-white px-5 py-4 text-center font-medium shadow-sm hover:bg-slate-800 transition"
+          >
+            I&apos;m an operator
+          </Link>
+          <Link
+            href="/login/admin"
+            className="block rounded-xl bg-white border border-slate-200 px-5 py-4 text-center font-medium text-slate-900 hover:bg-slate-100 transition"
+          >
+            Admin sign-in
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}