's'

app/digital/components/AuthModal.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useState, type FormEvent } from "react";
+import { pbSaveAuth } from "@/app/digital/lib/pocketbase";
+
+interface AuthModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (email: string) => void;
+}
+
+type AuthResult = {
+  ok: boolean;
+  token?: string;
+  record?: { id: string; email?: string; [key: string]: unknown };
+  error?: string;
+  message?: string;
+};
+
+export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps) {
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordConfirm, setPasswordConfirm] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      if (mode === "register") {
+        if (password !== passwordConfirm) {
+          setError("Passwords do not match");
+          setLoading(false);
+          return;
+        }
+        if (password.length < 8) {
+          setError("Password must be at least 8 characters");
+          setLoading(false);
+          return;
+        }
+      }
+
+      const endpoint = mode === "login" ? "/api/digital/auth/login" : "/api/digital/auth/register";
+      const payload =
+        mode === "login"
+          ? { identity: email, password }
+          : { email, password, passwordConfirm };
+
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include",
+        body: JSON.stringify(payload),
+      });
+      const data = (await res.json().catch(() => ({}))) as AuthResult;
+
+      if (!res.ok || !data?.ok || !data?.token || !data?.record) {
+        throw new Error(data?.error || data?.message || "Authentication failed");
+      }
+
+      pbSaveAuth(data.token, { id: data.record.id, email: data.record.email ?? email });
+      onSuccess(email);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("auth:success"));
+      }
+      onClose();
+      setEmail("");
+      setPassword("");
+      setPasswordConfirm("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Authentication failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} aria-hidden />
+      <div className="relative w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 text-slate-400 hover:text-slate-600"
+          aria-label="Close"
+        >
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+
+        <h2 className="text-xl font-bold text-slate-800">{mode === "login" ? "Login" : "Register"}</h2>
+        <p className="mt-1 text-sm text-slate-500">
+          {mode === "login" ? "Use email and password" : "Create a new account"}
+        </p>
+
+        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-700">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="your@email.com"
+              required
+              className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-slate-800 placeholder-slate-400 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-700">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="At least 8 characters"
+              required
+              minLength={mode === "register" ? 8 : 1}
+              className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-slate-800 placeholder-slate-400 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+            />
+          </div>
+          {mode === "register" && (
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-700">Confirm Password</label>
+              <input
+                type="password"
+                value={passwordConfirm}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+                placeholder="Enter password again"
+                required
+                className="w-full rounded-lg border border-slate-200 px-4 py-2.5 text-slate-800 placeholder-slate-400 focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+              />
+            </div>
+          )}
+          {error && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full rounded-lg bg-sky-500 py-3 font-semibold text-white transition-colors hover:bg-sky-600 disabled:opacity-70"
+          >
+            {loading ? "Processing..." : mode === "login" ? "Login" : "Register"}
+          </button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-slate-500">
+          {mode === "login" ? (
+            <>
+              No account?{" "}
+              <button
+                type="button"
+                onClick={() => {
+                  setMode("register");
+                  setError(null);
+                }}
+                className="font-medium text-sky-500 hover:text-sky-600"
+              >
+                Register
+              </button>
+            </>
+          ) : (
+            <>
+              Already have an account?{" "}
+              <button
+                type="button"
+                onClick={() => {
+                  setMode("login");
+                  setError(null);
+                }}
+                className="font-medium text-sky-500 hover:text-sky-600"
+              >
+                Login
+              </button>
+            </>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}