Compare commits

...

2 Commits

Author SHA1 Message Date
49d81190d4 Group C fixes
All checks were successful
Build and Push / build (push) Successful in 1m47s
2026-04-29 17:20:58 +02:00
eeef108f7e Group B fixes
All checks were successful
Build and Push / build (push) Successful in 1m24s
2026-04-29 15:43:12 +02:00
23 changed files with 1149 additions and 346 deletions

View File

@@ -3,6 +3,9 @@ import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
import { BackLink } from "@/components/ui/back-link";
import { listTenants } from "@/lib/k8s";
import { listActiveTenantRequestsByOrgId } from "@/lib/db";
import { personalAccountAtCapacity } from "@/lib/personal-org";
/**
* /dashboard/new — wizard for creating an additional instance for an
@@ -21,6 +24,10 @@ import { BackLink } from "@/components/ui/back-link";
* may create new instances. The server-side POST handler enforces the
* same; this redirect is purely UX so /user-role members don't land on
* a wizard that will 403 on submit.
*
* Bug 5: personal accounts that already hold a tenant or have one
* in-flight are sent back to the dashboard with the same UX rationale.
* Matching API guard lives in `/api/onboarding`.
*/
export default async function NewInstancePage() {
const user = await getSessionUser();
@@ -28,6 +35,25 @@ export default async function NewInstancePage() {
if (user.isPlatform) redirect("/dashboard");
if (!canMutate(user)) redirect("/dashboard");
if (user.isPersonal) {
const [allTenants, activeRequests] = await Promise.all([
listTenants(),
listActiveTenantRequestsByOrgId(user.orgId),
]);
const ownTenants = allTenants.filter(
(t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
);
if (
personalAccountAtCapacity(
user.isPersonal,
ownTenants.length,
activeRequests.length
)
) {
redirect("/dashboard");
}
}
const t = await getTranslations("dashboard");
return (
@@ -43,7 +69,11 @@ export default async function NewInstancePage() {
</div>
<div className="animate-in animate-in-delay-1">
<OnboardingFlow orgName={user.orgName} />
<OnboardingFlow
orgName={user.orgName}
userName={user.name}
userEmail={user.email}
/>
</div>
</div>
);

View File

@@ -8,6 +8,7 @@ import {
canSeeInflightRequests,
isUserScoped,
} from "@/lib/visibility";
import { personalAccountAtCapacity } from "@/lib/personal-org";
import { Card, CardHeader } from "@/components/ui/card";
import { StatusBadge } from "@/components/ui/status-badge";
import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
@@ -179,7 +180,17 @@ export default async function DashboardPage() {
// the admin panel anyway) see the "Create new instance" link. A
// `user`-role member sees the dashboard but not the create flow —
// they need to ask an owner.
const canCreate = canMutate(user);
//
// Bug 5: personal accounts are 1-instance by design. Once a personal
// account has either an active tenant OR an in-flight request, the
// create button must disappear. The matching server-side guard is
// in `/api/onboarding` so direct POSTs are also rejected.
const personalAtCapacity = personalAccountAtCapacity(
user.isPersonal,
orgScopedTenants.length,
inflightRequests.length
);
const canCreate = canMutate(user) && !personalAtCapacity;
// First-time / no-visibility branch.
//
@@ -262,7 +273,11 @@ export default async function DashboardPage() {
</div>
<div className="animate-in animate-in-delay-1">
<OnboardingFlow orgName={user.orgName} />
<OnboardingFlow
orgName={user.orgName}
userName={user.name}
userEmail={user.email}
/>
</div>
</div>
);

View File

@@ -6,42 +6,66 @@ import { useRouter } from "next/navigation";
import { Card } from "@/components/ui/card";
type FormState = "idle" | "submitting" | "success" | "error";
type AccountType = "personal" | "company";
/**
* 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)"
* Registration entry — Bug 1 redesign.
*
* Previously a hidden checkbox ("Register as an individual") sat on top
* of the company-flavoured form, which buried personal accounts under a
* single click that most users miss. The new layout puts a primary
* account-type chooser at the top: two large cards, one for Personal,
* one for Company. Selection is required before the form below
* appears, so the rest of the layout adapts cleanly without a
* collapsing-checkbox feel.
*
* Bug 12: per-field validation runs on submit. The native HTML required
* attribute already blocks empty submits at the browser level; the
* server-side Zod schema in `/api/register` is the authoritative
* second line of defence.
*
* Behaviour:
* - "Personal account": company-name field is hidden; on submit, the
* server generates an opaque `personal-{8hex}` org name (Bug 9).
* - "Company account": company-name field is required; the server
* additionally runs the duplicate-domain check.
* - Returning users (those who arrive here by accident) can switch
* types after picking — the choice cards stay clickable above the
* form. Field state is preserved across switches so they don't
* have to re-type their name.
*/
export default function RegisterPage() {
const t = useTranslations("register");
const tCommon = useTranslations("common");
const router = useRouter();
const [accountType, setAccountType] = useState<AccountType | null>(null);
const [form, setForm] = useState({
companyName: "",
givenName: "",
familyName: "",
email: "",
});
const [isPersonal, setIsPersonal] = useState(false);
const [state, setState] = useState<FormState>("idle");
const [error, setError] = useState("");
const isPersonal = accountType === "personal";
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!accountType) return; // Should be impossible — submit button is gated
setError("");
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.
// companyName so the server generates an opaque ZITADEL org name
// (`personal-{8hex}`); the Zod schema accepts the omission.
const body: Record<string, unknown> = {
givenName: form.givenName,
familyName: form.familyName,
@@ -60,9 +84,6 @@ export default function RegisterPage() {
if (!res.ok) {
const data = await res.json();
// Localize known structured codes; fall back to server-supplied
// English message for everything else (validation, ZITADEL errors,
// generic 500s).
if (data.code === "duplicate_domain" && data.domain) {
throw new Error(t("duplicateDomain", { domain: data.domain }));
}
@@ -118,120 +139,212 @@ export default function RegisterPage() {
<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">
{/* 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
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 className="flex-1 min-w-0">
<div className="text-sm font-medium text-text-primary">
{t("individualToggle")}
{/* Account type chooser — required first step */}
<div
role="radiogroup"
aria-label={t("accountTypeLabel")}
className="grid grid-cols-2 gap-3 mb-6 animate-in animate-in-delay-1"
>
<AccountTypeCard
selected={accountType === "personal"}
onClick={() => setAccountType("personal")}
label={t("personalCardTitle")}
description={t("personalCardDescription")}
icon={
<svg
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
}
/>
<AccountTypeCard
selected={accountType === "company"}
onClick={() => setAccountType("company")}
label={t("companyCardTitle")}
description={t("companyCardDescription")}
icon={
<svg
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3 21V7l9-4 9 4v14M9 21V11h6v10M5 21h14"
/>
</svg>
}
/>
</div>
{/* Form — only shown after a choice is made. Animation
delay-2 lines up with the cards animating in first, so
the form feels like it appears in response to selection. */}
{accountType && (
<Card className="animate-in animate-in-delay-2">
<form onSubmit={handleSubmit} className="space-y-4" noValidate>
{/* Company name — only for company accounts (Bug 2 mirror) */}
{!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>
<div className="text-xs text-text-muted mt-0.5">
{t("individualHint")}
)}
{/* 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>
</label>
{/* Company name — hidden for personal */}
{!isPersonal && (
{/* Email */}
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("companyName")}
{t("email")}
</label>
<input
name="companyName"
type="text"
name="email"
type="email"
required
value={form.companyName}
value={form.email}
onChange={handleChange}
placeholder={t("companyNamePlaceholder")}
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>
)}
{/* 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>
{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>
)}
{/* 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={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>
<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>
{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>
)}
<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>
)}
<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">
<p className="text-xs text-text-muted text-center mt-6 animate-in animate-in-delay-3">
{t("footer")}
</p>
</div>
</div>
);
}
/**
* Account-type radio card. Visually a card, semantically a radio: arrow
* keys move between cards, Space/Enter selects.
*
* Selected state is rendered with the accent ring + tinted background;
* unselected is the standard surface-2 with hover affordance. The icon
* and text colours intensify when selected to give a clear "this one
* is on" signal beyond just the border colour.
*/
function AccountTypeCard({
selected,
onClick,
label,
description,
icon,
}: {
selected: boolean;
onClick: () => void;
label: string;
description: string;
icon: React.ReactNode;
}) {
return (
<button
type="button"
role="radio"
aria-checked={selected}
onClick={onClick}
className={`text-left rounded-xl border p-4 transition-colors cursor-pointer focus:outline-none focus:ring-2 focus:ring-accent/40 ${
selected
? "border-accent bg-accent/10"
: "border-border bg-surface-2 hover:border-accent/40 hover:bg-surface-3/30"
}`}
>
<div
className={`mb-2 ${
selected ? "text-accent" : "text-text-muted"
}`}
>
{icon}
</div>
<div
className={`text-sm font-semibold mb-0.5 ${
selected ? "text-text-primary" : "text-text-primary"
}`}
>
{label}
</div>
<div className="text-xs text-text-muted leading-snug">{description}</div>
</button>
);
}

View File

@@ -21,6 +21,12 @@ export default async function TeamPage() {
const user = await getSessionUser();
if (!user) redirect("/login");
if (!canMutate(user)) redirect("/dashboard");
// Bug 8: personal accounts have no team to manage. The page is
// structurally meaningless and the invite form would create extra
// ZITADEL users in a single-user org. Redirect cleanly. The matching
// API guards in `/api/team` and `/api/team/invite` enforce the same
// rule on direct calls.
if (user.isPersonal) redirect("/dashboard");
const t = await getTranslations("team");
const tDashboard = await getTranslations("dashboard");

View File

@@ -40,6 +40,19 @@ export default async function TenantDetailPage({
// the same page but with edit controls hidden / fields read-only.
const canEdit = canMutate(user);
// Bug 7: assigned-users panel is meaningless for personal tenants
// (sole-owner by definition; the only "assignee" is the owner
// themselves). We hide the panel when EITHER the CR carries the
// `pieced.ch/personal=true` label (set at approve time for new
// personal tenants) OR the viewer is on a personal account (covers
// legacy tenants approved before the label was added; the customer
// sees their own personal tenant). Platform admins viewing a legacy
// unlabeled personal tenant are the only case where this falls
// through to "show panel" — operators can `kubectl label` to fix.
const isPersonalTenant =
tenant.metadata.labels?.["pieced.ch/personal"] === "true" ||
user.isPersonal;
const enabledPackages = tenant.spec.packages || [];
const workspaceFiles = tenant.spec.workspaceFiles || {};
const enabledChannels = enabledPackages.filter((pkg) =>
@@ -132,13 +145,16 @@ export default async function TenantDetailPage({
{/* Slice 7: Assigned users — visible to anyone who can see the
tenant, editable only by owners/platform users. The component
fetches its own data so the page doesn't need to await. */}
<section className="mt-8 animate-in animate-in-delay-4">
<h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
{t("assignedUsers")}
</h2>
<AssignedUsersPanel tenantName={name} canEdit={canEdit} />
</section>
fetches its own data so the page doesn't need to await.
Bug 7: hidden entirely for personal tenants. */}
{!isPersonalTenant && (
<section className="mt-8 animate-in animate-in-delay-4">
<h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
{t("assignedUsers")}
</h2>
<AssignedUsersPanel tenantName={name} canEdit={canEdit} />
</section>
)}
</div>
);
}

View File

@@ -123,6 +123,15 @@ export async function POST(
},
{
"pieced.ch/zitadel-org-id": tenantRequest.zitadelOrgId,
// Bug 7: stamp the personal flag on the CR so callers (notably
// the tenant detail page) can hide assignment-related UI
// without an extra DB join. Slice 4 already tracks this on the
// request row; the CR label is the same fact at the K8s layer.
// Legacy tenants approved before this change won't carry the
// label — operators can backfill with `kubectl label`.
...(tenantRequest.isPersonal
? { "pieced.ch/personal": "true" }
: {}),
}
);

View File

@@ -16,34 +16,10 @@ import {
import { sendAdminNotificationEmail } from "@/lib/email";
import { encryptSecrets } from "@/lib/crypto";
import { isPersonalOrgName } from "@/lib/personal-org";
import { onboardingSchema } from "@/lib/validation";
import type { OnboardingInput, PiecedTenant, TenantRequest } from "@/types";
import { z } from "zod";
const onboardingSchema = z.object({
instanceName: z
.string()
.trim()
.max(80)
.optional()
// Empty string from a form input → drop to undefined so the DB stores NULL
.transform((v) => (v && v.length > 0 ? v : undefined)),
agentName: z.string().min(1).max(50),
soulMd: z.string().max(10_000).optional(),
agentsMd: z.string().max(10_000).optional(),
packages: z.array(z.string()).optional(),
packageSecrets: z
.record(z.string(), z.record(z.string(), z.string()))
.optional(),
billingAddress: z.object({
company: z.string().optional(),
street: z.string().optional(),
city: z.string().optional(),
postalCode: z.string().optional(),
country: z.string().optional(),
}),
billingNotes: z.string().max(2_000).optional(),
});
/**
* Helper: shape a TenantRequest row for client consumption.
* Hides server-only fields (encryptedSecrets, internal db ids).
@@ -217,6 +193,31 @@ export async function POST(request: Request) {
// the org-name check should agree.)
const isPersonal = prior?.isPersonal ?? isPersonalOrgName(user.orgName);
// Bug 5: personal accounts are 1-instance by design. If there's
// already an active tenant or an in-flight request for this user's
// org, reject the submission outright. Server-side only check;
// matching UI guards live on /dashboard (button hidden) and
// /dashboard/new (server-redirect to /dashboard).
if (isPersonal) {
const [allTenants, activeRequests] = await Promise.all([
listTenants(),
listActiveTenantRequestsByOrgId(user.orgId),
]);
const ownTenants = allTenants.filter(
(t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
);
if (ownTenants.length > 0 || activeRequests.length > 0) {
return NextResponse.json(
{
error:
"Personal accounts are limited to one instance. Cancel your existing request or contact support to change plan.",
code: "personal_account_at_capacity",
},
{ status: 403 }
);
}
}
// Encrypt package secrets if provided
let encryptedSecrets: Buffer | undefined;
if (input.packageSecrets && Object.keys(input.packageSecrets).length > 0) {

View File

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
import { registerCustomer } from "@/lib/zitadel";
import { rateLimit } from "@/lib/rate-limit";
import { checkDuplicateDomain } from "@/lib/db";
import { generatePersonalOrgName } from "@/lib/personal-org";
import type { RegistrationInput } from "@/types";
import { z } from "zod";
@@ -13,11 +14,10 @@ import { z } from "zod";
* - `companyName` is no longer always required. It's required when
* `isPersonal` is false/absent, ignored when `isPersonal` is true.
* - `isPersonal` flag distinguishes personal accounts. The server
* derives the ZITADEL org name from `${givenName} ${familyName}
* (Personal)` for personals — the suffix is the canonical marker
* that downstream code (onboarding POST, admin views) uses to
* distinguish personal orgs from companies. Customers cannot rename
* their own org, so the suffix is stable.
* derives the ZITADEL org name from a generated opaque ID
* (`personal-{8hex}`) — see `lib/personal-org.ts` for the format
* spec. Customers cannot rename their own org, so the marker is
* stable.
* - Personal accounts skip the duplicate-domain check entirely. Their
* row is also excluded from future domain checks (see
* `lib/domain-check.ts::findDuplicateInDb`).
@@ -44,15 +44,6 @@ const registrationSchema = z
const RATE_LIMIT = 3;
const RATE_WINDOW_MS = 3_600_000; // 1 hour
/**
* Suffix appended to personal-account ZITADEL org names. Used here to
* build the org name and elsewhere (session.orgName check) to detect
* whether the current user is on a personal org.
*
* Keep this in sync with `isPersonalOrgName()` in `lib/personal-org.ts`.
*/
const PERSONAL_ORG_SUFFIX = " (Personal)";
export async function POST(request: NextRequest) {
// --- Rate limiting ---
const ip =
@@ -116,14 +107,13 @@ export async function POST(request: NextRequest) {
//
// For company: use the customer-supplied companyName (already
// validated to be present + ≥2 chars by the schema refinement).
// For personal: synthesise from full name + " (Personal)" suffix.
// The suffix is the canonical marker for personal orgs.
//
// ZITADEL does NOT enforce org-name uniqueness, so two "Hans Müller
// (Personal)" orgs can coexist; the org id is what matters for our
// labelling and lookups, the name is human-readable only.
// For personal: a fresh opaque ID like "personal-3f2a8b1c". The
// user's actual display name is per-user (`session.user.name`),
// so the GUI shows that instead — see `displayOrgNameFor()`.
// This keeps personal orgs collision-free (Bug 9: two people
// named "Eva Müller" both being able to register).
const orgName = isPersonal
? `${input.givenName.trim()} ${input.familyName.trim()}${PERSONAL_ORG_SUFFIX}`
? generatePersonalOrgName()
: input.companyName!.trim();
const result = await registerCustomer({

View File

@@ -53,6 +53,12 @@ export async function PATCH(
if (!isCustomerOwner(user)) {
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
}
if (user.isPersonal) {
return NextResponse.json(
{ error: "Personal accounts have no team roles to change." },
{ status: 403 }
);
}
const { userId } = await params;

View File

@@ -35,6 +35,16 @@ export async function POST(req: Request) {
if (!canMutate(user)) {
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
}
if (user.isPersonal) {
return NextResponse.json(
{
error:
"Personal accounts cannot invite additional members. Upgrade to a company account to add a team.",
code: "personal_account",
},
{ status: 403 }
);
}
const body = await req.json().catch(() => null);
const parsed = inviteSchema.safeParse(body);

View File

@@ -24,6 +24,12 @@ export async function GET() {
if (!canMutate(user)) {
return NextResponse.json({ error: "Forbidden" }, { status: 403 });
}
if (user.isPersonal) {
return NextResponse.json(
{ error: "Personal accounts do not have a team." },
{ status: 403 }
);
}
try {
const members = await getOrgMembers(user.orgId);

View File

@@ -128,6 +128,23 @@ export async function POST(
{ status: 500 }
);
}
// Bug 7 server-side counterpart: personal tenants are sole-owner
// by definition. Reject any assignment attempt — this matches the
// hidden panel on the detail page and stops a determined client
// (or platform user with a legacy unlabeled personal tenant) from
// creating spurious rows.
if (
tenant.metadata.labels?.["pieced.ch/personal"] === "true" ||
(!user.isPlatform && user.isPersonal)
) {
return NextResponse.json(
{
error: "Personal tenants do not support additional assignments.",
code: "personal_tenant",
},
{ status: 403 }
);
}
const body = await req.json().catch(() => null);
const parsed = assignSchema.safeParse(body);

View File

@@ -40,11 +40,14 @@ function NavBar() {
<NavLink href="/dashboard" active={pathname === "/dashboard"}>
{t("dashboard")}
</NavLink>
{/* Slice 7: /team is owner+platform only. Match server-side
gate (canMutate). The roles array carries either "owner"
or "user" for customer sessions; isPlatform covers the
platform side. */}
{/* Slice 7: /team is owner+platform only AND personal
accounts are excluded — they have no team to manage
(Bug 8). Match server-side gates (`canMutate`,
`user.isPersonal === false`). The roles array carries
either "owner" or "user" for customer sessions;
isPlatform covers the platform side. */}
{user &&
!user.isPersonal &&
(user.isPlatform ||
(Array.isArray(user.roles) && user.roles.includes("owner"))) && (
<NavLink href="/team" active={pathname === "/team"}>
@@ -62,8 +65,17 @@ function NavBar() {
{/* Right side */}
<div className="flex items-center gap-4">
{user && (
// For personal accounts the orgName is opaque
// ("personal-3f2a8b1c") or a synthetic legacy
// "Name (Personal)" — neither is what we want in the nav.
// Show the user's display name instead. The detection logic
// and fallback chain live in `lib/personal-org.ts`; keeping
// a thin inline branch here avoids importing a server-only
// helper into a client component.
<span className="hidden md:inline text-xs text-text-secondary font-mono">
{user.orgName}
{user.isPersonal
? user.name || (user.email ? user.email.split("@")[0] : user.orgName)
: user.orgName}
</span>
)}
<LanguageSwitcher />

View File

@@ -5,6 +5,13 @@ import { OnboardingWizard } from "./wizard";
interface OnboardingFlowProps {
orgName: string;
/**
* The user's display name. Forwarded to the wizard so personal
* accounts can show the user's own name where they would otherwise
* see an opaque org name. Ignored for company accounts.
*/
userName?: string;
userEmail?: string;
}
/**
@@ -18,12 +25,18 @@ interface OnboardingFlowProps {
* level (which renders one `<ProvisioningStatus>` per pending request),
* so this wrapper does just one thing: show the wizard, then navigate.
*/
export function OnboardingFlow({ orgName }: OnboardingFlowProps) {
export function OnboardingFlow({
orgName,
userName,
userEmail,
}: OnboardingFlowProps) {
const router = useRouter();
return (
<OnboardingWizard
orgName={orgName}
userName={userName}
userEmail={userEmail}
onComplete={() => {
// Navigate back to /dashboard and re-fetch on the server. The
// parent server component will see the new `pending` row and

View File

@@ -4,7 +4,15 @@ import { useState, useCallback, useEffect, useRef } from "react";
import { useTranslations } from "next-intl";
import { Card } from "@/components/ui/card";
import { PACKAGE_CATALOG, type PackageDef } from "@/lib/packages";
import { isPersonalOrgName, PERSONAL_ORG_SUFFIX } from "@/lib/personal-org";
import { isPersonalOrgName, displayOrgNameFor } from "@/lib/personal-org";
import {
configureStepSchema,
billingStepSchema,
onboardingSchema,
fieldErrors,
SUPPORTED_COUNTRIES,
type SupportedCountry,
} from "@/lib/validation";
type Step = "welcome" | "configure" | "billing" | "confirm";
@@ -48,23 +56,41 @@ const CATEGORIES = [
interface WizardProps {
orgName: string;
/**
* The user's display name. Used as the visible label for personal
* accounts (where `orgName` is an opaque ID like "personal-3f2a8b1c"
* or a synthetic legacy "{name} (Personal)" string). Ignored for
* company accounts.
*/
userName?: string;
userEmail?: string;
onComplete: () => void;
}
export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
export function OnboardingWizard({
orgName,
userName,
userEmail,
onComplete,
}: WizardProps) {
const t = useTranslations("onboarding");
const tPkg = useTranslations("packages");
const tCommon = useTranslations("common");
const tCountries = useTranslations("countries");
// Slice 4: personal accounts have an org name of the form
// "{givenName} {familyName} (Personal)". For SOUL.md and the billing
// company line, strip the suffix so the visible string is the user's
// actual name (no stray "(Personal)" leaking onto invoices or into
// the assistant's prompt).
// Personal accounts have an org name that is either the legacy
// "{givenName} {familyName} (Personal)" or the current opaque
// "personal-{8hex}" form. Either way, the customer-facing display
// should be the user's own name — never the org name. SOUL.md
// interpolation and the billing form follow the same rule so
// invoices and prompts don't leak "(Personal)" or "personal-3f2a..".
const isPersonal = isPersonalOrgName(orgName);
const displayOrgName = isPersonal
? orgName.slice(0, -PERSONAL_ORG_SUFFIX.length).trim()
: orgName;
const displayOrgName = displayOrgNameFor({
name: userName,
email: userEmail,
orgName,
isPersonal,
});
const [step, setStep] = useState<Step>("welcome");
const [submitting, setSubmitting] = useState(false);
@@ -142,11 +168,70 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
const stepIndex = STEPS.indexOf(step);
// Bug 12 — per-step validation. `errors` holds field-path → message
// for the inline labels under each input. We only populate it on
// attempted advancement; touching a field clears its own error so
// valid input doesn't keep showing stale messages.
const [errors, setErrors] = useState<Record<string, string>>({});
const clearError = useCallback((path: string) => {
setErrors((prev) => {
if (!prev[path]) return prev;
const next = { ...prev };
delete next[path];
return next;
});
}, []);
/**
* Validate the current step against its schema. On success: clear
* errors and return true. On failure: populate errors and return
* false so the caller can refuse to advance.
*
* Welcome and configure-step have no schema interaction with billing
* fields — keeping the schemas narrow means we don't surface a
* billing error when the user is still typing on the configure step.
*/
const validateStep = (s: Step): boolean => {
if (s === "welcome") return true;
if (s === "configure") {
const r = configureStepSchema.safeParse({ agentName: config.agentName });
if (r.success) {
setErrors({});
return true;
}
setErrors(fieldErrors(r.error));
return false;
}
if (s === "billing") {
const r = billingStepSchema.safeParse({
billingAddress: config.billingAddress,
});
if (r.success) {
setErrors({});
return true;
}
setErrors(fieldErrors(r.error));
return false;
}
// confirm: validate the union (defence in depth — submit handler
// also runs onboardingSchema before POST).
const r = onboardingSchema.safeParse(config);
if (r.success) {
setErrors({});
return true;
}
setErrors(fieldErrors(r.error));
return false;
};
const goNext = () => {
if (!validateStep(step)) return;
if (stepIndex < STEPS.length - 1) setStep(STEPS[stepIndex + 1]);
};
const goBack = () => {
// Going back never re-validates; the user's existing errors stay
// pinned to fields so they can fix them after navigating back.
if (stepIndex > 0) setStep(STEPS[stepIndex - 1]);
};
@@ -199,6 +284,17 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
};
const handleSubmit = async () => {
// Defence in depth: re-run the full schema before sending. The
// server schema is the authoritative gate but we save a round trip
// by catching any client-side gaps here. In practice this should
// never fail at this point — the per-step validators have already
// caught everything — but a future regression in the per-step
// schemas would otherwise let the bad payload through.
if (!validateStep("confirm")) {
setError(t("validationError"));
return;
}
setSubmitting(true);
setError("");
@@ -339,19 +435,21 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
</p>
</div>
<div>
<FieldWithError error={errors.agentName}>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("agentName")}
{t("agentName")} <RequiredMark />
</label>
<input
type="text"
required
value={config.agentName}
onChange={(e) =>
setConfig((prev) => ({ ...prev, agentName: e.target.value }))
}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
onChange={(e) => {
clearError("agentName");
setConfig((prev) => ({ ...prev, agentName: e.target.value }));
}}
className={inputClass(errors.agentName)}
/>
</div>
</FieldWithError>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
@@ -618,106 +716,131 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
</p>
<div className="space-y-4">
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingCompany")}
</label>
<input
type="text"
value={config.billingAddress.company}
onChange={(e) =>
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
company: e.target.value,
},
}))
}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
/>
</div>
{/* Bug 2: company line is meaningless for personal accounts.
Hide entirely rather than render an empty disabled field
— the latter would just suggest the customer should
fill it in. */}
{!isPersonal && (
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingCompany")}
</label>
<input
type="text"
value={config.billingAddress.company}
onChange={(e) => {
clearError("billingAddress.company");
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
company: e.target.value,
},
}));
}}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
/>
</div>
)}
<div>
<FieldWithError error={errors["billingAddress.street"]}>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingStreet")}
{t("billingStreet")} <RequiredMark />
</label>
<input
type="text"
required
value={config.billingAddress.street}
onChange={(e) =>
onChange={(e) => {
clearError("billingAddress.street");
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
street: e.target.value,
},
}))
}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
}));
}}
className={inputClass(errors["billingAddress.street"])}
/>
</div>
</FieldWithError>
<div className="grid grid-cols-3 gap-3">
<div>
<FieldWithError error={errors["billingAddress.postalCode"]}>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingPostalCode")}
{t("billingPostalCode")} <RequiredMark />
</label>
<input
type="text"
required
value={config.billingAddress.postalCode}
onChange={(e) =>
onChange={(e) => {
clearError("billingAddress.postalCode");
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
postalCode: e.target.value,
},
}))
}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
}));
}}
className={inputClass(errors["billingAddress.postalCode"])}
/>
</div>
</FieldWithError>
<div className="col-span-2">
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingCity")}
</label>
<input
type="text"
value={config.billingAddress.city}
onChange={(e) =>
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
city: e.target.value,
},
}))
}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
/>
<FieldWithError error={errors["billingAddress.city"]}>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingCity")} <RequiredMark />
</label>
<input
type="text"
required
value={config.billingAddress.city}
onChange={(e) => {
clearError("billingAddress.city");
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
city: e.target.value,
},
}));
}}
className={inputClass(errors["billingAddress.city"])}
/>
</FieldWithError>
</div>
</div>
<div>
{/* Bug 3: country was a free-text field — typos broke
invoicing. Now a fixed list of DACH+ neighbours. Add
more codes to SUPPORTED_COUNTRIES in lib/validation.ts
when expanding markets. */}
<FieldWithError error={errors["billingAddress.country"]}>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
{t("billingCountry")}
{t("billingCountry")} <RequiredMark />
</label>
<input
type="text"
<select
value={config.billingAddress.country}
onChange={(e) =>
onChange={(e) => {
clearError("billingAddress.country");
setConfig((prev) => ({
...prev,
billingAddress: {
...prev.billingAddress,
country: e.target.value,
country: e.target.value as SupportedCountry,
},
}))
}
className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
/>
</div>
}));
}}
className={inputClass(errors["billingAddress.country"])}
>
{SUPPORTED_COUNTRIES.map((code) => (
<option key={code} value={code}>
{tCountries(code)}
</option>
))}
</select>
</FieldWithError>
<div>
<label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
@@ -765,67 +888,92 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
{t("confirmDescription")}
</p>
{/* Bug 4 redesign: previously this step only showed agentName
and city — useless for actually reviewing what's about to
be submitted. Now it shows the real config: instance
name, agent name, packages, billing one-liner, contact
email, and notes. Each row uses two columns rather than
flex-justify-between so long values wrap underneath the
label rather than being squashed onto one line. */}
<div className="space-y-4">
<div className="bg-surface-2 border border-border rounded-lg p-4 space-y-3">
{config.instanceName.trim() && (
<div className="flex justify-between text-sm">
<span className="text-text-muted">{t("instanceName")}</span>
<span className="text-text-primary font-mono">
{config.instanceName.trim()}
</span>
</div>
)}
<div className="flex justify-between text-sm">
<span className="text-text-muted">{t("agentName")}</span>
<span className="text-text-primary font-mono">
{config.agentName}
</span>
</div>
{config.packages.length > 0 && (
<div className="flex justify-between text-sm">
<span className="text-text-muted">{t("packages")}</span>
<div className="flex flex-wrap gap-1 justify-end">
{config.packages.map((pkg) => (
<span
key={pkg}
className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
>
{pkg}
</span>
))}
<div className="bg-surface-2 border border-border rounded-lg p-4 divide-y divide-border">
<ReviewRow
label={t("instanceName")}
value={
config.instanceName.trim() || (
<span className="text-text-muted italic">
{t("reviewInstanceDefault")}
</span>
)
}
mono
/>
<ReviewRow
label={t("agentName")}
value={config.agentName}
mono
/>
<ReviewRow
label={t("packages")}
value={
config.packages.length === 0 ? (
<span className="text-text-muted italic">
{t("reviewNoPackages")}
</span>
) : (
<div className="flex flex-wrap gap-1 justify-end">
{config.packages.map((pkg) => (
<span
key={pkg}
className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
>
{pkg}
</span>
))}
</div>
)
}
/>
<ReviewRow
label={t("reviewBillingTo")}
value={
<div className="text-text-primary text-right">
{/* For personal: skip the company line so the
invoice rendering matches what the user actually
entered. For company: include it as the first
line. */}
{!isPersonal &&
config.billingAddress.company &&
config.billingAddress.company.trim().length > 0 && (
<div>{config.billingAddress.company}</div>
)}
<div>{config.billingAddress.street}</div>
<div>
{config.billingAddress.postalCode}{" "}
{config.billingAddress.city}
</div>
<div className="text-text-muted">
{tCountries(
config.billingAddress.country as SupportedCountry
)}
</div>
</div>
</div>
)}
{config.packages.some((id) =>
PACKAGE_CATALOG.find((p) => p.id === id)?.requiresSecrets
) && (
<div className="flex justify-between text-sm">
<span className="text-text-muted">
{t("credentialsProvided")}
</span>
<span className="text-emerald-400 text-xs font-medium">
</span>
</div>
)}
{config.billingAddress.company && (
<div className="flex justify-between text-sm">
<span className="text-text-muted">
{t("billingCompany")}
</span>
<span className="text-text-primary">
{config.billingAddress.company}
</span>
</div>
)}
{config.billingAddress.city && (
<div className="flex justify-between text-sm">
<span className="text-text-muted">{t("billingCity")}</span>
<span className="text-text-primary">
{config.billingAddress.postalCode}{" "}
{config.billingAddress.city}
</span>
</div>
}
/>
<ReviewRow
label={t("reviewContactEmail")}
value={userEmail || ""}
mono
/>
{config.billingNotes.trim().length > 0 && (
<ReviewRow
label={t("billingNotes")}
value={
<span className="text-text-primary whitespace-pre-wrap text-right">
{config.billingNotes}
</span>
}
/>
)}
</div>
@@ -838,6 +986,25 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
</div>
)}
{/* Aggregate validation errors — if any per-step schema check
missed something (it shouldn't, but defence in depth),
the user sees a consolidated list here rather than a
silent submit failure. */}
{Object.keys(errors).length > 0 && (
<div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mt-4">
<div className="font-semibold mb-1">
{t("validationErrorsTitle")}
</div>
<ul className="list-disc list-inside space-y-0.5">
{Object.entries(errors).map(([path, msg]) => (
<li key={path}>
<span className="font-mono">{path}</span>: {msg}
</li>
))}
</ul>
</div>
)}
<div className="flex justify-between mt-6">
<button
onClick={goBack}
@@ -858,3 +1025,74 @@ export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
</div>
);
}
/**
* Two-column review row used by the confirm step. Right-aligned value
* with the label as a muted prefix on the left.
*/
function ReviewRow({
label,
value,
mono,
}: {
label: string;
value: React.ReactNode;
mono?: boolean;
}) {
return (
<div className="flex justify-between gap-4 text-sm py-2 first:pt-0 last:pb-0">
<span className="text-text-muted shrink-0">{label}</span>
<span
className={`text-text-primary text-right min-w-0 break-words ${
mono ? "font-mono" : ""
}`}
>
{value}
</span>
</div>
);
}
/**
* Renders children + an inline error message if present. Children
* supply the label and input; this wrapper just appends the message.
*/
function FieldWithError({
error,
children,
}: {
error?: string;
children: React.ReactNode;
}) {
return (
<div>
{children}
{error && (
<p className="text-xs text-red-400 mt-1" role="alert">
{error}
</p>
)}
</div>
);
}
function RequiredMark() {
return (
<span aria-hidden="true" className="text-accent">
*
</span>
);
}
/**
* Tailwind class for input/select with optional error-state ring.
* Centralised here to keep the wizard's many fields visually
* consistent without repeating the long class string.
*/
function inputClass(error?: string): string {
return `w-full px-3 py-2 bg-surface-2 border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 transition-colors ${
error
? "border-red-400/60 focus:ring-red-400 focus:border-red-400"
: "border-border focus:ring-accent focus:border-accent"
}`;
}

View File

@@ -1,6 +1,7 @@
import NextAuth from "next-auth";
import type { NextAuthConfig } from "next-auth";
import type { PlatformRole, Role, SessionUser, ZitadelClaims } from "@/types";
import { isPersonalOrgName } from "@/lib/personal-org";
const PLATFORM_ROLES: PlatformRole[] = ["platform_admin", "platform_operator"];
@@ -78,16 +79,21 @@ export const authConfig: NextAuthConfig = {
},
async session({ session, token }) {
const roles = (token.roles as Role[]) ?? [];
const orgName = (token.orgName as string) ?? "";
const sessionUser: SessionUser = {
id: token.sub!,
name: session.user?.name ?? "",
email: session.user?.email ?? "",
orgId: token.orgId as string,
orgName: token.orgName as string,
orgName,
roles,
isPlatform: roles.some((r) =>
PLATFORM_ROLES.includes(r as PlatformRole)
),
// Derived from orgName — see lib/personal-org.ts. Recognises
// both legacy " (Personal)" suffix and current "personal-{8hex}"
// opaque names.
isPersonal: isPersonalOrgName(orgName),
};
(session as any).platformUser = sessionUser;
return session;

View File

@@ -1,40 +1,147 @@
/**
* Personal-account helpers.
*
* Slice 4 establishes the convention that ZITADEL org names for personal
* accounts end with the literal " (Personal)" suffix. This file
* centralises the suffix and the predicate so both registration (which
* sets the suffix) and onboarding (which reads it from the session) use
* the same canonical form.
* Two ZITADEL org-name formats may identify a personal account:
*
* Why a name suffix and not ZITADEL org metadata?
* -----------------------------------------------
* 1. The suffix is visible in ZITADEL Console, admin tools, JWT claims,
* etc. — useful debugging signal at zero cost.
* 2. Customers cannot rename their own org (requires IAM_OWNER, which
* only the SA holds), so the suffix is stable for the lifetime of
* the org.
* 3. No extra ZITADEL API calls at onboarding time to fetch metadata.
* 4. No extra portal DB tables.
* 1. Legacy (Slice 4 .. 7-pre-Bug9):
* "{givenName} {familyName} (Personal)"
* Embedded the user's name in the org name. Hit a uniqueness
* collision on common Swiss names (Bug 9: two people named "Eva
* Müller" can't both register). Suffix is detected via
* `PERSONAL_ORG_SUFFIX`.
*
* The trade-off: an admin who manually renames a personal org via
* ZITADEL Console could remove the suffix, after which onboarding
* would treat that org as a company. That's a deliberate destructive
* action and the worst outcome is a misnamed K8s CR; nothing breaks.
* 2. Current (Slice 7+):
* "personal-{8 hex chars}"
* Opaque, structurally collision-free, no PII. The user's display
* name lives only in the per-user fields (`session.user.name`),
* which is what the GUI shows wherever it would otherwise have
* shown the org name. See `displayOrgNameFor()` below.
*
* Both formats are recognised as personal by `isPersonalOrgName()`.
* Existing legacy orgs continue to work; new orgs are created in the
* opaque format.
*
* Why a name pattern and not ZITADEL org metadata?
* ------------------------------------------------
* - Visible in ZITADEL Console, JWT claims, admin tools — useful debug
* signal at zero cost.
* - Customers cannot rename their own org (requires IAM_OWNER, which
* only the SA holds), so the marker is stable for the life of the
* org.
* - No extra ZITADEL API calls at onboarding time.
* - No extra portal DB tables.
*
* Trade-off: an admin who manually renames a personal org via Console
* could remove the marker. That's a deliberate destructive action; the
* worst outcome is a misnamed K8s CR. Nothing breaks.
*/
/** Suffix used by the legacy " (Personal)" naming scheme. */
export const PERSONAL_ORG_SUFFIX = " (Personal)";
/**
* Pattern for the current opaque-id naming scheme. The hex chunk is
* generated from `crypto.randomUUID()` — eight hex digits give 4 billion
* distinct values, far more than the pilot will ever need, while
* keeping the org name short and copy-pasteable.
*/
const PERSONAL_ORG_OPAQUE_RE = /^personal-[0-9a-f]{8}$/;
/**
* Generate a fresh opaque org name for a personal account.
*
* The result is uniformly random in the form "personal-XXXXXXXX". Caller
* doesn't need a duplicate check — at 4e9 cardinality the birthday
* collision probability is negligible at pilot scale, and ZITADEL would
* reject a duplicate creation with a clean error which we let surface.
*
* `crypto.randomUUID()` is used because it's available natively in
* Node 20+ and edge runtimes. We slice the hex digits we need from
* the UUID rather than calling a separate randomBytes API; the result
* is the same.
*/
export function generatePersonalOrgName(): string {
const uuid = crypto.randomUUID(); // 8-4-4-4-12 hex digits
const hex = uuid.replace(/-/g, "").slice(0, 8);
return `personal-${hex}`;
}
/**
* Returns true when the given ZITADEL org name marks a personal account.
*
* The check is exact-suffix match (after trimming). Whitespace inside
* the suffix is significant — `" (personal)"` lowercase or `"(Personal)"`
* without the leading space are not matches and not personal orgs.
* Recognises both the legacy " (Personal)" suffix and the current
* "personal-{8hex}" opaque form. Whitespace inside the legacy suffix is
* significant — `" (personal)"` lowercase or `"(Personal)"` without the
* leading space are NOT matches and are treated as company orgs.
*
* Pass `session.orgName` from the SessionUser at the call site.
*/
export function isPersonalOrgName(orgName: string | null | undefined): boolean {
export function isPersonalOrgName(
orgName: string | null | undefined
): boolean {
if (!orgName) return false;
return orgName.trimEnd().endsWith(PERSONAL_ORG_SUFFIX);
const trimmed = orgName.trimEnd();
if (PERSONAL_ORG_OPAQUE_RE.test(trimmed)) return true;
if (trimmed.endsWith(PERSONAL_ORG_SUFFIX)) return true;
return false;
}
/**
* The label to show wherever the GUI would otherwise show the user's
* org name. For company accounts this is the org name; for personal
* accounts the org name itself is opaque (or a synthetic legacy
* "Name (Personal)" string), so we substitute the user's display name.
*
* Use this anywhere a customer-facing string would render the
* organisation: nav header, billing forms, SOUL.md interpolation, etc.
*/
export function displayOrgNameFor(user: {
name?: string | null;
email?: string | null;
orgName?: string | null;
isPersonal?: boolean;
}): string {
const orgName = user.orgName ?? "";
// Defensive: if `isPersonal` wasn't set on the session (older sessions
// pre-Slice-7-Bug-9), fall back to detecting from the name itself.
const personal = user.isPersonal ?? isPersonalOrgName(orgName);
if (!personal) return orgName;
// Legacy legacy "Name (Personal)" — strip the suffix and use what's
// left as a sensible display, since it's already the user's name.
if (orgName.trimEnd().endsWith(PERSONAL_ORG_SUFFIX)) {
return orgName.slice(0, -PERSONAL_ORG_SUFFIX.length).trim();
}
// New opaque form — show the user's display name. Fall back to email
// local-part if no display name is available, which is rare but
// possible during the brief window between user creation and the
// user setting their profile.
if (user.name && user.name.trim().length > 0) return user.name.trim();
if (user.email) return user.email.split("@")[0];
return orgName;
}
/**
* One-instance-per-account rule for personal accounts (Bug 5).
*
* Personal accounts are 1-instance by design: a single user, a single
* tenant. After the first tenant or in-flight request exists, the
* customer is over quota and any further onboarding submission must
* be blocked. Company accounts are unaffected.
*
* `tenantCount` and `requestCount` are measured against the customer's
* own org — caller is responsible for filtering before passing them
* in. Both values are non-negative integers; the predicate is true
* iff at least one of them is > 0.
*
* Used by the dashboard (hide the "+ Create new instance" button),
* /dashboard/new (server-redirect), and /api/onboarding (return 403).
* Keeping the rule in one place avoids three separate copies of the
* same boolean drifting apart.
*/
export function personalAccountAtCapacity(
isPersonal: boolean,
tenantCount: number,
requestCount: number
): boolean {
return isPersonal && (tenantCount > 0 || requestCount > 0);
}

114
src/lib/validation.ts Normal file
View File

@@ -0,0 +1,114 @@
import { z } from "zod";
/**
* Shared validation schemas for the onboarding wizard and the
* registration form. Both client and server import from here so the
* rules can't drift apart.
*
* Bug 12 motivation: until now, all wizard fields could be empty and
* still submit — the server schema in `/api/onboarding` had every
* billing field optional, and the client did no validation at all.
* Required fields are now declared once, here, and used in three
* places:
* 1. The wizard's per-step `validateStep()` to gate `goNext()`.
* 2. The wizard's submit handler to render inline errors.
* 3. The server route's `safeParse()` so the rules are also
* enforced on direct API calls.
*
* Don't mix UX-only state (e.g. "did the user touch this field yet")
* into these schemas — that belongs in the wizard's render layer.
* These schemas describe what the data has to look like, not the
* progressive-disclosure rules.
*/
// ISO-3166-1 alpha-2 codes accepted in the country dropdown. DACH+
// neighbours: Switzerland, Germany, Austria, France, Italy, plus
// Liechtenstein (Swiss customers with LI billing addresses are common
// enough to include without inflating the list). Add to this set when
// expanding into new markets.
export const SUPPORTED_COUNTRIES = ["CH", "DE", "AT", "FR", "IT", "LI"] as const;
export type SupportedCountry = (typeof SUPPORTED_COUNTRIES)[number];
/**
* Billing address — every field required at minimum non-empty length.
* Postal code rules vary too much across DACH+ to enforce a single
* regex usefully; we settle for "non-empty, ≤ 12 chars". Country is a
* fixed enum to prevent free-text typos that break invoicing.
*/
export const billingAddressSchema = z.object({
// Company line is structurally optional — personal accounts leave it
// empty by design (Bug 2). Server-side, the wizard's UI hides the
// field for personals; the schema just doesn't require it.
company: z.string().trim().max(100).optional().default(""),
street: z.string().trim().min(1, "required").max(200),
postalCode: z.string().trim().min(1, "required").max(12),
city: z.string().trim().min(1, "required").max(100),
country: z.enum(SUPPORTED_COUNTRIES, {
message: "Please choose a country from the list",
}),
});
export type BillingAddressInput = z.infer<typeof billingAddressSchema>;
/**
* Per-step schemas for progressive validation. Each step validates only
* the fields visible up to that point, so the user gets feedback at the
* step they're on rather than at the end.
*
* The `welcome` step has nothing to validate.
* The `configure` step requires a non-empty agentName.
* The `billing` step requires a complete billing address (with the
* optional company line).
* The `confirm` step is the final submission and validates the union.
*/
export const configureStepSchema = z.object({
agentName: z.string().trim().min(1, "required").max(50),
});
export const billingStepSchema = z.object({
billingAddress: billingAddressSchema,
});
/**
* Full onboarding payload. Used by the API route and by the wizard's
* submit handler. `packageSecrets` is a free-shape map that gets
* encrypted by the server before it touches the DB.
*/
export const onboardingSchema = z.object({
instanceName: z
.string()
.trim()
.max(80)
.optional()
// Empty string from a form input → undefined so the DB stores NULL.
.transform((v) => (v && v.length > 0 ? v : undefined)),
agentName: z.string().trim().min(1, "required").max(50),
soulMd: z.string().max(10_000).optional(),
agentsMd: z.string().max(10_000).optional(),
packages: z.array(z.string()).optional(),
packageSecrets: z
.record(z.string(), z.record(z.string(), z.string()))
.optional(),
billingAddress: billingAddressSchema,
billingNotes: z.string().max(2_000).optional(),
});
export type OnboardingPayload = z.infer<typeof onboardingSchema>;
/**
* Helper: flatten a Zod error into a flat field-path → message map.
* The wizard uses this to look up errors per input by their path.
*
* Returns `{}` on success (i.e. caller shouldn't call this on a parsed
* value; only on `safeParse(...).error`). Kept here rather than inline
* so both the wizard and any future field-level form (e.g. settings
* page reusing billingAddressSchema) can share it.
*/
export function fieldErrors(err: z.ZodError): Record<string, string> {
const out: Record<string, string> = {};
for (const issue of err.issues) {
const key = issue.path.join(".");
if (!(key in out)) out[key] = issue.message;
}
return out;
}

View File

@@ -24,7 +24,7 @@
},
"register": {
"title": "Konto erstellen",
"subtitle": "Registrieren Sie Ihre Firma für einen in der Schweiz gehosteten KI-Assistenten",
"subtitle": "Richten Sie Ihren Schweizer KI-Assistenten ein",
"companyName": "Firmenname",
"companyNamePlaceholder": "Muster GmbH",
"givenName": "Vorname",
@@ -38,7 +38,12 @@
"goToLogin": "Zur Anmeldung",
"duplicateDomain": "Für die E-Mail-Domain {domain} ist bereits ein Konto registriert. Bitte wenden Sie sich an Ihren Firmenadministrator, um eingeladen zu werden, oder kontaktieren Sie den PieCed-IT-Support, falls dies ein Fehler ist.",
"individualToggle": "Als Privatperson registrieren",
"individualHint": "Aktivieren Sie diese Option, wenn Sie sich nicht im Namen eines Unternehmens registrieren. Ihr Konto wird als persönlicher Arbeitsbereich eingerichtet."
"individualHint": "Aktivieren Sie diese Option, wenn Sie sich nicht im Namen eines Unternehmens registrieren. Ihr Konto wird als persönlicher Arbeitsbereich eingerichtet.",
"accountTypeLabel": "Kontotyp",
"personalCardTitle": "Privat",
"personalCardDescription": "Für Sie persönlich, ohne Firma.",
"companyCardTitle": "Unternehmen",
"companyCardDescription": "Für Ihr Unternehmen oder Team."
},
"onboarding": {
"loading": "Status wird geladen…",
@@ -89,7 +94,13 @@
"submittedAt": "Eingereicht",
"instanceName": "Instanzname",
"instanceNamePlaceholder": "z.B. Produktion, Dev, Vertrieb",
"instanceNameHint": "Optionaler lesbarer Name, um diese Instanz von anderen in Ihrem Dashboard zu unterscheiden. Leer lassen, um den Firmennamen zu verwenden."
"instanceNameHint": "Optionaler lesbarer Name, um diese Instanz von anderen in Ihrem Dashboard zu unterscheiden. Leer lassen, um den Firmennamen zu verwenden.",
"validationError": "Bitte korrigieren Sie die Fehler vor dem Absenden.",
"validationErrorsTitle": "Einige Pflichtfelder fehlen oder sind ungültig:",
"reviewInstanceDefault": "(Standard — verwendet Firmenname)",
"reviewNoPackages": "Keine ausgewählt",
"reviewBillingTo": "Rechnungsempfänger",
"reviewContactEmail": "Kontakt-E-Mail"
},
"dashboard": {
"title": "Dashboard",
@@ -304,5 +315,13 @@
"pickUser": "Benutzer auswählen…",
"assign": "Zuweisen",
"revoke": "Entfernen"
},
"countries": {
"CH": "Schweiz",
"DE": "Deutschland",
"AT": "Österreich",
"FR": "Frankreich",
"IT": "Italien",
"LI": "Liechtenstein"
}
}

View File

@@ -24,7 +24,7 @@
},
"register": {
"title": "Create your account",
"subtitle": "Register your company for a Swiss-hosted AI assistant",
"subtitle": "Set up your Swiss-hosted AI assistant",
"companyName": "Company Name",
"companyNamePlaceholder": "Acme GmbH",
"givenName": "First Name",
@@ -38,7 +38,12 @@
"goToLogin": "Go to Sign In",
"duplicateDomain": "An account for the email domain {domain} is already registered. Please contact your company administrator to be invited, or reach out to PieCed IT support if you believe this is in error.",
"individualToggle": "Register as an individual",
"individualHint": "Tick this if you're not registering on behalf of a company. Your account will be set up as a personal workspace."
"individualHint": "Tick this if you're not registering on behalf of a company. Your account will be set up as a personal workspace.",
"accountTypeLabel": "Account type",
"personalCardTitle": "Personal",
"personalCardDescription": "For yourself, no company.",
"companyCardTitle": "Company",
"companyCardDescription": "For your business or team."
},
"onboarding": {
"loading": "Loading status…",
@@ -89,7 +94,13 @@
"submittedAt": "Submitted",
"instanceName": "Instance name",
"instanceNamePlaceholder": "e.g. Production, Dev, Sales",
"instanceNameHint": "Optional human-readable name to distinguish this instance from others on your dashboard. Leave blank to use your company name."
"instanceNameHint": "Optional human-readable name to distinguish this instance from others on your dashboard. Leave blank to use your company name.",
"validationError": "Please fix the errors before submitting.",
"validationErrorsTitle": "Some required fields are missing or invalid:",
"reviewInstanceDefault": "(default — uses company name)",
"reviewNoPackages": "None selected",
"reviewBillingTo": "Billing to",
"reviewContactEmail": "Contact email"
},
"dashboard": {
"title": "Dashboard",
@@ -304,5 +315,13 @@
"pickUser": "Select a user…",
"assign": "Assign",
"revoke": "Remove"
},
"countries": {
"CH": "Switzerland",
"DE": "Germany",
"AT": "Austria",
"FR": "France",
"IT": "Italy",
"LI": "Liechtenstein"
}
}

View File

@@ -24,7 +24,7 @@
},
"register": {
"title": "Créer votre compte",
"subtitle": "Enregistrez votre entreprise pour un assistant IA hébergé en Suisse",
"subtitle": "Configurez votre assistant IA hébergé en Suisse",
"companyName": "Nom de l'entreprise",
"companyNamePlaceholder": "Exemple SA",
"givenName": "Prénom",
@@ -38,7 +38,12 @@
"goToLogin": "Aller à la connexion",
"duplicateDomain": "Un compte pour le domaine de courriel {domain} est déjà enregistré. Veuillez contacter l'administrateur de votre entreprise pour être invité, ou contactez le support PieCed IT si vous pensez qu'il s'agit d'une erreur.",
"individualToggle": "S'inscrire en tant que particulier",
"individualHint": "Cochez cette case si vous ne vous inscrivez pas au nom d'une entreprise. Votre compte sera configuré comme espace de travail personnel."
"individualHint": "Cochez cette case si vous ne vous inscrivez pas au nom d'une entreprise. Votre compte sera configuré comme espace de travail personnel.",
"accountTypeLabel": "Type de compte",
"personalCardTitle": "Particulier",
"personalCardDescription": "Pour vous, sans entreprise.",
"companyCardTitle": "Entreprise",
"companyCardDescription": "Pour votre entreprise ou équipe."
},
"onboarding": {
"loading": "Chargement du statut…",
@@ -89,7 +94,13 @@
"submittedAt": "Soumis",
"instanceName": "Nom de l'instance",
"instanceNamePlaceholder": "ex. Production, Dev, Ventes",
"instanceNameHint": "Nom lisible facultatif pour distinguer cette instance des autres sur votre tableau de bord. Laisser vide pour utiliser le nom de votre entreprise."
"instanceNameHint": "Nom lisible facultatif pour distinguer cette instance des autres sur votre tableau de bord. Laisser vide pour utiliser le nom de votre entreprise.",
"validationError": "Veuillez corriger les erreurs avant l'envoi.",
"validationErrorsTitle": "Certains champs obligatoires manquent ou sont invalides :",
"reviewInstanceDefault": "(par défaut — utilise le nom de l'entreprise)",
"reviewNoPackages": "Aucun sélectionné",
"reviewBillingTo": "Facturer à",
"reviewContactEmail": "E-mail de contact"
},
"dashboard": {
"title": "Tableau de bord",
@@ -304,5 +315,13 @@
"pickUser": "Sélectionner un utilisateur…",
"assign": "Attribuer",
"revoke": "Retirer"
},
"countries": {
"CH": "Suisse",
"DE": "Allemagne",
"AT": "Autriche",
"FR": "France",
"IT": "Italie",
"LI": "Liechtenstein"
}
}

View File

@@ -24,7 +24,7 @@
},
"register": {
"title": "Crea il tuo account",
"subtitle": "Registra la tua azienda per un assistente IA ospitato in Svizzera",
"subtitle": "Configuri il suo assistente IA ospitato in Svizzera",
"companyName": "Nome azienda",
"companyNamePlaceholder": "Esempio SA",
"givenName": "Nome",
@@ -38,7 +38,12 @@
"goToLogin": "Vai all'accesso",
"duplicateDomain": "Un account per il dominio e-mail {domain} è già registrato. Contatta l'amministratore della tua azienda per essere invitato, oppure contatta il supporto PieCed IT se ritieni che si tratti di un errore.",
"individualToggle": "Registrati come privato",
"individualHint": "Seleziona questa opzione se non ti stai registrando per conto di un'azienda. Il tuo account sarà configurato come area di lavoro personale."
"individualHint": "Seleziona questa opzione se non ti stai registrando per conto di un'azienda. Il tuo account sarà configurato come area di lavoro personale.",
"accountTypeLabel": "Tipo di account",
"personalCardTitle": "Privato",
"personalCardDescription": "Per lei, senza azienda.",
"companyCardTitle": "Azienda",
"companyCardDescription": "Per la sua azienda o team."
},
"onboarding": {
"loading": "Caricamento stato…",
@@ -89,7 +94,13 @@
"submittedAt": "Inviato",
"instanceName": "Nome istanza",
"instanceNamePlaceholder": "es. Produzione, Dev, Vendite",
"instanceNameHint": "Nome leggibile facoltativo per distinguere questa istanza dalle altre nella dashboard. Lasciare vuoto per usare il nome dell'azienda."
"instanceNameHint": "Nome leggibile facoltativo per distinguere questa istanza dalle altre nella dashboard. Lasciare vuoto per usare il nome dell'azienda.",
"validationError": "Correggere gli errori prima di inviare.",
"validationErrorsTitle": "Alcuni campi obbligatori sono mancanti o non validi:",
"reviewInstanceDefault": "(predefinito — usa il nome dell'azienda)",
"reviewNoPackages": "Nessuno selezionato",
"reviewBillingTo": "Fatturare a",
"reviewContactEmail": "Email di contatto"
},
"dashboard": {
"title": "Dashboard",
@@ -304,5 +315,13 @@
"pickUser": "Seleziona un utente…",
"assign": "Assegna",
"revoke": "Rimuovi"
},
"countries": {
"CH": "Svizzera",
"DE": "Germania",
"AT": "Austria",
"FR": "Francia",
"IT": "Italia",
"LI": "Liechtenstein"
}
}

View File

@@ -47,6 +47,23 @@ export interface SessionUser {
orgName: string;
roles: Role[];
isPlatform: boolean;
/**
* True when the user's ZITADEL org is a personal account — i.e. a
* single-user org provisioned by the registration flow with
* `isPersonal: true`. Derived from `orgName` in the session callback;
* see `lib/personal-org.ts::isPersonalOrgName` for the detection
* rules (recognises both the legacy " (Personal)" suffix and the
* current "personal-{8hex}" opaque form).
*
* Drives several customer-facing behaviours:
* - /team page is hidden (Bug 8): there's no team to manage.
* - "Create new instance" is gated to a single tenant + request
* (Bug 5): personal accounts are 1-instance by design.
* - The assigned-users panel on /tenants/[name] is hidden (Bug 7).
* - Wherever the GUI would otherwise show `orgName`, it shows the
* user's display name instead (Bug 9 — the org name is opaque).
*/
isPersonal: boolean;
}
// PiecedTenant CR (pieced.ch/v1alpha1)
@@ -112,8 +129,8 @@ export interface UsageSummary {
export interface RegistrationInput {
/**
* Required for company registrations. Ignored when `isPersonal` is true —
* the server then derives the ZITADEL org name from the user's full name
* with a "(Personal)" suffix.
* the server then generates an opaque ZITADEL org name of the form
* `personal-{8hex}` (see `lib/personal-org.ts::generatePersonalOrgName`).
*/
companyName?: string;
givenName: string;
@@ -121,10 +138,11 @@ export interface RegistrationInput {
email: string;
preferredLanguage?: string;
/**
* Slice 4: when true, registration creates a personal account (one
* person, no company). Domain-uniqueness check is skipped, ZITADEL org
* is named "{givenName} {familyName} (Personal)", subsequent tenants
* are named with the `p-{requestId[:8]}` convention.
* Slice 4 + Bug 9: when true, registration creates a personal account
* (one person, no company). Domain-uniqueness check is skipped, the
* ZITADEL org is named `personal-{8hex}` (opaque, collision-free),
* the user's display name lives only on the user record, and
* subsequent tenants are named with the `p-{requestId[:8]}` convention.
*/
isPersonal?: boolean;
}