Personal accounts

src/app/[locale]/register/page.tsx

@@ -7,6 +7,13 @@ import { Card } from "@/components/ui/card";
 
 type FormState = "idle" | "submitting" | "success" | "error";
 
+/**
+ * Slice 4: a "Register as individual" toggle distinguishes personal
+ * accounts from company registrations. When the toggle is on:
+ *   - the company name field is hidden (and not sent)
+ *   - the server skips the duplicate-domain check
+ *   - the ZITADEL org is named "{givenName} {familyName} (Personal)"
+ */
 export default function RegisterPage() {
   const t = useTranslations("register");
   const tCommon = useTranslations("common");
@@ -18,6 +25,7 @@ export default function RegisterPage() {
     familyName: "",
     email: "",
   });
+  const [isPersonal, setIsPersonal] = useState(false);
   const [state, setState] = useState<FormState>("idle");
   const [error, setError] = useState("");
 
@@ -31,15 +39,23 @@ export default function RegisterPage() {
     setState("submitting");
 
     try {
+      // Build the request body explicitly. For personals we omit
+      // companyName so the server knows to derive the org name from
+      // the user's full name. The Zod schema accepts the omission.
+      const body: Record<string, unknown> = {
+        givenName: form.givenName,
+        familyName: form.familyName,
+        email: form.email,
+        isPersonal,
+      };
+      if (!isPersonal) {
+        body.companyName = form.companyName;
+      }
+
       const res = await fetch("/api/register", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          companyName: form.companyName,
-          givenName: form.givenName,
-          familyName: form.familyName,
-          email: form.email,
-        }),
+        body: JSON.stringify(body),
       });
 
       if (!res.ok) {
@@ -104,21 +120,41 @@ export default function RegisterPage() {
 
         <Card className="animate-in animate-in-delay-1">
           <form onSubmit={handleSubmit} className="space-y-4">
-            {/* Company name */}
-            <div>
-              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
-                {t("companyName")}
-              </label>
+            {/* Personal-account toggle */}
+            <label className="flex items-start gap-3 cursor-pointer select-none p-3 rounded-lg border border-border bg-surface-2 hover:border-accent/40 transition-colors">
               <input
-                name="companyName"
-                type="text"
-                required
-                value={form.companyName}
-                onChange={handleChange}
-                placeholder={t("companyNamePlaceholder")}
-                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                type="checkbox"
+                checked={isPersonal}
+                onChange={(e) => setIsPersonal(e.target.checked)}
+                className="mt-0.5 h-4 w-4 rounded border-border bg-surface-1 text-accent focus:ring-1 focus:ring-accent focus:ring-offset-0"
               />
-            </div>
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium text-text-primary">
+                  {t("individualToggle")}
+                </div>
+                <div className="text-xs text-text-muted mt-0.5">
+                  {t("individualHint")}
+                </div>
+              </div>
+            </label>
+
+            {/* Company name — hidden for personal */}
+            {!isPersonal && (
+              <div>
+                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                  {t("companyName")}
+                </label>
+                <input
+                  name="companyName"
+                  type="text"
+                  required
+                  value={form.companyName}
+                  onChange={handleChange}
+                  placeholder={t("companyNamePlaceholder")}
+                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                />
+              </div>
+            )}
 
             {/* Name row */}
             <div className="grid grid-cols-2 gap-3">
@@ -161,7 +197,7 @@ export default function RegisterPage() {
                 required
                 value={form.email}
                 onChange={handleChange}
-                placeholder="you@company.ch"
+                placeholder={isPersonal ? "you@example.ch" : "you@company.ch"}
                 className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
               />
             </div>