account settings and account creation

app/register/page.tsx

@@ -7,6 +7,8 @@ import Link from "next/link";
 import { useAuth } from "@/context/AuthContext";
 import { Button, Field, Input } from "@/components/ui/form";
 
+const TOS_VERSION = "2025-12-27";
+
 export default function RegisterPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -15,6 +17,7 @@ export default function RegisterPage() {
   const [email, setEmail] = useState("");
   const [displayName, setDisplayName] = useState("");
   const [password, setPassword] = useState("");
+  const [accepted, setAccepted] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const next = searchParams.get("next") || "/builder";
@@ -23,76 +26,125 @@ export default function RegisterPage() {
     e.preventDefault();
     setError(null);
 
+    if (!accepted) {
+      setError(
+        "You must accept the Terms and confirm you’re responsible for safe/legal assembly."
+      );
+      return;
+    }
+
     try {
-      await register({ email, password, displayName });
+      await register({
+        email,
+        password,
+        displayName,
+        acceptedTos: accepted,
+        tosVersion: TOS_VERSION,
+      });
+
       router.push(next);
     } catch (err: any) {
-      setError(err.message ?? "Failed to create account");
+      setError(
+        typeof err === "string"
+          ? err
+          : err?.message ?? "Failed to create account"
+      );
     }
   }
 
   return (
-      <main className="min-h-screen bg-black text-zinc-50">
-        <div className="mx-auto flex max-w-md flex-col px-4 py-10">
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Join the <span className="text-amber-300">Battl Builder</span> Beta
-          </h1>
-          <p className="mt-2 text-sm text-zinc-400">
-            Create an account so we can save your builds, watch price drops, and
-            roll out new features to you first.
-          </p>
+    <main className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto flex max-w-md flex-col px-4 py-10">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Join the <span className="text-amber-300">Battl Builder</span> Beta
+        </h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          Create an account so we can save your builds, watch price drops, and
+          roll out new features to you first.
+        </p>
 
-          <form onSubmit={handleSubmit} className="mt-6 space-y-4">
-            {error && (
-                <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
-                  {error}
-                </div>
-            )}
+        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+          {error && (
+            <div className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-2 text-sm text-red-200">
+              {error}
+            </div>
+          )}
 
-            <Field label="Display Name (optional)" htmlFor="displayName">
-              <Input
-                  id="displayName"
-                  type="text"
-                  value={displayName}
-                  onChange={(e) => setDisplayName(e.target.value)}
+          <Field label="Display Name (optional)" htmlFor="displayName">
+            <Input
+              id="displayName"
+              type="text"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+            />
+          </Field>
+
+          <Field label="Email" htmlFor="email">
+            <Input
+              id="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </Field>
+
+          <Field label="Password" htmlFor="password">
+            <Input
+              id="password"
+              type="password"
+              autoComplete="new-password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </Field>
+
+          <div className="rounded-md border border-zinc-800 bg-zinc-950/40 px-3 py-3">
+            <label className="flex items-start gap-2 text-[11px] text-zinc-400">
+              <input
+                type="checkbox"
+                checked={accepted}
+                onChange={(e) => setAccepted(e.target.checked)}
+                className="mt-0.5 h-4 w-4 rounded border-zinc-700 bg-zinc-950 text-amber-400 focus:ring-2 focus:ring-amber-500/40"
+                required
               />
-            </Field>
+              <span>
+                I agree to the{" "}
+                <Link
+                  href="/tos"
+                  className="text-amber-300 hover:text-amber-200 underline"
+                >
+                  Terms of Service
+                </Link>{" "}
+                and{" "}
+                <Link
+                  href="/privacy"
+                  className="text-amber-300 hover:text-amber-200 underline"
+                >
+                  Privacy Policy
+                </Link>
+                . I understand Battl Builders is informational only and I’m
+                solely responsible for legality, compatibility, and safe
+                assembly/use of any firearm or components.
+              </span>
+            </label>
+          </div>
 
-            <Field label="Email" htmlFor="email">
-              <Input
-                  id="email"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-              />
-            </Field>
+          <Button type="submit" disabled={loading || !accepted}>
+            {loading ? "Creating account…" : "Join Beta"}
+          </Button>
+        </form>
 
-            <Field label="Password" htmlFor="password">
-              <Input
-                  id="password"
-                  type="password"
-                  autoComplete="new-password"
-                  required
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-              />
-            </Field>
-
-            <Button type="submit" disabled={loading}>
-              {loading ? "Creating account…" : "Join Beta"}
-            </Button>
-          </form>
-
-          <p className="mt-4 text-xs text-zinc-500">
-            Already have an account?{" "}
-            <Link href="/login" className="text-amber-300 hover:text-amber-200">
-              Log in
-            </Link>
-            .
-          </p>
-        </div>
-      </main>
+        <p className="mt-4 text-xs text-zinc-500">
+          Already have an account?{" "}
+          <Link href="/login" className="text-amber-300 hover:text-amber-200">
+            Log in
+          </Link>
+          .
+        </p>
+      </div>
+    </main>
   );
 }