Add a real signup path instead of the accidental one

SAAS_PLAN.md 2.2: there was no /signup page. The only self-serve path was Google sign-in on /login, which auto-provisions a Firebase account with no role or org claim at all - previously that meant "viewer role, full read access" the moment the AuthProvider cookie logic (previous commit) let it through. That's closed now regardless; this commit is the other side of it - giving people an actual way in. app/signup/page.tsx: email/password (createUserWithEmailAndPassword) or Google, same visual language as /login. It only creates the Firebase account - org naming is deliberately not on this page, so every path that produces an account with no org (this one, and Google-via-/login) converges on the same next screen. app/onboarding/page.tsx: that screen. Shown to any signed-in user with no orgId (ChromeSwitcher's redirect, previous commit), collects an org name, calls the new c2api.signup() -> POST /auth/signup (routers/links.py, already shipped), then refreshClaims() to force-refetch the ID token so orgId picks up immediately and the same redirect effect sends them on to /dashboard - no manual reload needed. lib/c2api.ts also gained getOrg/updateOrg and the enrollment-token mint/list/revoke calls (routers/org.py, already shipped on the backend) and joinWaitlist (routers/waitlist.py) - none consumed yet, wired in ahead of the settings/legal commits that use them so this stays one add per concept rather than scattering client additions across later commits. /login gained a "Don't have an account? Sign up" link to /signup. This is signup plumbing, not marketing copy - pricing/plan copy (app/pricing, lib/billing.ts) is untouched in this pass, that's a separate, still-open decision (SAAS_PLAN.md section 6). Typecheck: clean (tsc --noEmit via the WSL-native ~/drb-frontend copy). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-18 20:34:04 -04:00
parent c7f985df42
commit 2a1d52b7af
4 changed files with 251 additions and 0 deletions
@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import { c2api } from "@/lib/c2api";
+import { Button } from "@/components/ui/Button";
+
+/**
+ * Shown to any signed-in user with no org_id claim — see ChromeSwitcher's
+ * no-claim guard (SAAS_PLAN.md B3). Two ways to land here:
+ *   1. Just created an account via /signup, org name not collected yet.
+ *   2. Signed in via Google on /login (which auto-creates a Firebase account
+ *      on first use) and was never provisioned into anything.
+ * Either way, this is the one screen an unprovisioned account can reach,
+ * and completing it is what POST /auth/signup uses to grant org_id/org_role.
+ */
+export default function OnboardingPage() {
+  const { user, loading, orgId, refreshClaims } = useAuth();
+  const router = useRouter();
+  const [orgName, setOrgName] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) {
+      router.replace("/login");
+      return;
+    }
+    if (orgId) {
+      router.replace("/dashboard");
+    }
+  }, [loading, user, orgId, router]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!orgName.trim()) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      await c2api.signup(orgName.trim());
+      // Firebase custom claims only show up in a *freshly fetched* ID token —
+      // getIdTokenResult(true) inside refreshClaims forces that fetch, then
+      // AuthProvider's own state (orgId) updates and the effect above
+      // redirects to /dashboard.
+      await refreshClaims();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not set up your organization. Try again.");
+      setSubmitting(false);
+    }
+  }
+
+  if (loading || !user || orgId) return null;
+
+  return (
+    <div className="max-w-sm mx-auto pt-16">
+      <div className="bg-gray-900 border border-gray-700 rounded-xl p-8 space-y-5 font-mono">
+        <div>
+          <h1 className="text-white text-lg font-bold">Set up your organization</h1>
+          <p className="text-gray-400 text-xs mt-2 leading-relaxed">
+            One more step — name the organization your nodes, calls, and incidents will belong to. You can change this later.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="text-xs text-gray-400 block mb-1">Organization name</label>
+            <input
+              type="text"
+              value={orgName}
+              onChange={(e) => setOrgName(e.target.value)}
+              required
+              autoFocus
+              placeholder="e.g. Riverside County Scanner"
+              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            />
+          </div>
+          {error && <p className="text-red-400 text-xs">{error}</p>}
+          <Button type="submit" disabled={submitting || !orgName.trim()} fullWidth>
+            {submitting ? "Setting up…" : "Continue"}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}