Session 6.3

2026-04-10 21:56:31 +02:00
parent f20d5f09ae
commit 94bfd25553
24 changed files with 2398 additions and 104 deletions
--- a/src/app/[locale]/dashboard/page.tsx
+++ b/src/app/[locale]/dashboard/page.tsx
@@ -2,9 +2,11 @@ import { getSessionUser } from "@/lib/session";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { listTenants } from "@/lib/k8s";
+import { getTenantRequestByOrgId } from "@/lib/db";
 import { Card, CardHeader } from "@/components/ui/card";
 import { StatusBadge } from "@/components/ui/status-badge";
 import { UsageDisplay } from "@/components/dashboard/usage-display";
+import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
 import Link from "next/link";

 export default async function DashboardPage() {
@@ -136,17 +138,13 @@ export default async function DashboardPage() {
    (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
  );

+  // No tenant → check for existing request, show onboarding flow
  if (!myTenant) {
+    const existingRequest = await getTenantRequestByOrgId(user.orgId);
+    const initialState = existingRequest?.status ?? "no_request";
+
    return (
      <div>
-        <details className="mt-12 text-xs text-text-muted">
-  <summary className="cursor-pointer hover:text-text-secondary transition-colors">
-    Session Debug
-  </summary>
-  <pre className="mt-3 bg-surface-2 border border-border rounded-lg p-4 overflow-auto font-mono text-[11px] text-text-secondary">
-    {JSON.stringify(user, null, 2)}
-  </pre>
-</details>
        <div className="mb-8 animate-in">
          <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
            {t("title")}
@@ -156,16 +154,11 @@ export default async function DashboardPage() {
          </p>
        </div>

-        <div className="flex flex-col items-center justify-center py-16 text-center animate-in animate-in-delay-1">
-          <div className="h-14 w-14 rounded-xl bg-accent/15 flex items-center justify-center mb-4">
-            <div className="h-8 w-8 rounded-lg bg-accent/40" />
-          </div>
-          <h2 className="font-display text-lg font-semibold text-text-primary mb-1">
-            {t("noInstance")}
-          </h2>
-          <p className="text-sm text-text-secondary mb-6 max-w-sm">
-            {t("noInstanceDescription")}
-          </p>
+        <div className="animate-in animate-in-delay-1">
+          <OnboardingFlow
+            orgName={user.orgName}
+            initialState={initialState as any}
+          />
        </div>
      </div>
    );
@@ -227,14 +220,6 @@ export default async function DashboardPage() {
      >
        <span>→</span> {t("manage")}
      </Link>
-      <details className="mt-12 text-xs text-text-muted">
-  <summary className="cursor-pointer hover:text-text-secondary transition-colors">
-    Session Debug
-  </summary>
-  <pre className="mt-3 bg-surface-2 border border-border rounded-lg p-4 overflow-auto font-mono text-[11px] text-text-secondary">
-    {JSON.stringify(user, null, 2)}
-  </pre>
-</details>
    </div>
  );
 }
--- a/src/app/[locale]/login/page.tsx
+++ b/src/app/[locale]/login/page.tsx
@@ -2,6 +2,7 @@

 import { signIn } from "next-auth/react";
 import { useTranslations } from "next-intl";
+import Link from "next/link";

 export default function LoginPage() {
  const t = useTranslations("login");
@@ -49,6 +50,16 @@ export default function LoginPage() {
          >
            {t("button")}
          </button>
+
+          <p className="text-xs text-text-muted text-center mt-5">
+            {t("noAccount")}{" "}
+            <Link
+              href="/register"
+              className="text-accent hover:text-accent-dim transition-colors"
+            >
+              {t("register")}
+            </Link>
+          </p>
        </div>

        <p className="text-center text-text-muted text-[11px] mt-6 tracking-wide uppercase">
--- a/src/app/[locale]/register/page.tsx
+++ b/src/app/[locale]/register/page.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { Card } from "@/components/ui/card";
+
+type FormState = "idle" | "submitting" | "success" | "error";
+
+export default function RegisterPage() {
+  const t = useTranslations("register");
+  const tCommon = useTranslations("common");
+  const router = useRouter();
+
+  const [form, setForm] = useState({
+    companyName: "",
+    givenName: "",
+    familyName: "",
+    email: "",
+  });
+  const [state, setState] = useState<FormState>("idle");
+  const [error, setError] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setState("submitting");
+
+    try {
+      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,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || "Registration failed");
+      }
+
+      setState("success");
+    } catch (err: any) {
+      setError(err.message);
+      setState("error");
+    }
+  };
+
+  if (state === "success") {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <Card className="max-w-md w-full text-center p-8">
+          <div className="h-14 w-14 rounded-xl bg-emerald-500/15 flex items-center justify-center mx-auto mb-4">
+            <svg
+              className="h-7 w-7 text-emerald-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 className="font-display text-lg font-semibold text-text-primary mb-2">
+            {t("successTitle")}
+          </h2>
+          <p className="text-sm text-text-secondary mb-6">
+            {t("successDescription")}
+          </p>
+          <button
+            onClick={() => router.push("/login")}
+            className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
+          >
+            {t("goToLogin")}
+          </button>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4">
+      <div className="max-w-md w-full">
+        <div className="text-center mb-8 animate-in">
+          <h1 className="font-display text-2xl font-semibold text-text-primary mb-1">
+            {t("title")}
+          </h1>
+          <p className="text-sm text-text-secondary">{t("subtitle")}</p>
+        </div>
+
+        <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>
+              <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">
+              <div>
+                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                  {t("givenName")}
+                </label>
+                <input
+                  name="givenName"
+                  type="text"
+                  required
+                  value={form.givenName}
+                  onChange={handleChange}
+                  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>
+              <div>
+                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                  {t("familyName")}
+                </label>
+                <input
+                  name="familyName"
+                  type="text"
+                  required
+                  value={form.familyName}
+                  onChange={handleChange}
+                  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>
+            </div>
+
+            {/* Email */}
+            <div>
+              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
+                {t("email")}
+              </label>
+              <input
+                name="email"
+                type="email"
+                required
+                value={form.email}
+                onChange={handleChange}
+                placeholder="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>
+
+            {error && (
+              <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+                {error}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={state === "submitting"}
+              className="w-full py-2.5 px-4 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {state === "submitting" ? tCommon("loading") : t("submit")}
+            </button>
+          </form>
+
+          <p className="text-xs text-text-muted text-center mt-4">
+            {t("hasAccount")}{" "}
+            <a
+              href="/login"
+              className="text-accent hover:text-accent-dim transition-colors"
+            >
+              {tCommon("login")}
+            </a>
+          </p>
+        </Card>
+
+        <p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-2">
+          {t("footer")}
+        </p>
+      </div>
+    </div>
+  );
+}