P1 flow fix: register makes a solo user by default, collective creation is an opt-in flag, post-login menu for collective-less accounts

This commit is contained in:
glass beadian 2026-10-12 16:19:08 +00:00
parent 2665f43cc4
commit 2a3a1d79a1
15 changed files with 614 additions and 24 deletions

View file

@ -12,7 +12,8 @@ import type { MemberMutationResult } from "../../../lib/api-types";
import type { ConnectProvider } from "../../../lib/connections-client";
import { useAuth } from "../../../lib/auth-store";
const STEPS = ["Create workspace", "Invite team", "Connect accounts"];
// Step labels for the collective flow; solo accounts skip this wizard entirely.
const STEPS = ["Name your collective", "Invite team", "Connect accounts"];
const MIN_PASSWORD = 10;
const INVITE_ROLE_CHOICES = ["Owner", "Editor", "Viewer"] as const;
const DEFAULT_INVITE_ROLE = "Editor";
@ -67,6 +68,8 @@ export default function OnboardingPage(): React.ReactElement {
const [mode, setMode] = useState<"register" | "signin">("register");
const [step, setStep] = useState(0);
const [name, setName] = useState("");
// Collectives opt-in (operator reorder #2): default OFF = solo account.
const [creatingCollective, setCreatingCollective] = useState(false);
const [displayName, setDisplayName] = useState("");
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
@ -88,20 +91,26 @@ export default function OnboardingPage(): React.ReactElement {
async function createWorkspace(): Promise<void> {
if (offline) {
setStep(1);
if (!creatingCollective) window.location.assign("/streams");
else setStep(1);
return;
}
setBusy(true);
setError(null);
try {
await register({
workspaceName: name.trim(),
// Solo default: omitting workspaceName registers a personal workspace.
...(creatingCollective ? { workspaceName: name.trim() } : {}),
username: username.trim(),
password,
...(displayName.trim() === "" ? {} : { displayName: displayName.trim() }),
...(email.trim() === "" ? {} : { email: email.trim() }),
});
setStep(1);
// Solo accounts skip the team-invite wizard: there is no collective to
// invite anyone into yet. They land straight in the app (which shows the
// "no collectives" home menu until they create or join one).
if (!creatingCollective) window.location.assign("/streams");
else setStep(1);
} catch (err) {
setError(errorMessage(err));
} finally {
@ -134,7 +143,7 @@ export default function OnboardingPage(): React.ReactElement {
const usernameValid = /^[a-z0-9][a-z0-9_.-]{1,31}$/.test(username.trim());
const registerReady =
name.trim().length >= 2 && (offline || (usernameValid && password.length >= MIN_PASSWORD));
(!creatingCollective || name.trim().length >= 2) && (offline || (usernameValid && password.length >= MIN_PASSWORD));
// Signed-in visitors who land here (e.g. from the sidebar) get a way out rather than a second registration form.
if (status === "authenticated" && session !== null && step === 0) {
@ -221,9 +230,34 @@ export default function OnboardingPage(): React.ReactElement {
<p className="mt-1 text-2xs text-text-faint">Your platform. Their feeds. No algorithm in between.</p>
</div>
</div>
<h2 className="mb-1 text-base font-semibold">Name your workspace</h2>
<p className="mb-4 text-xs text-text-faint">The tenant boundary for accounts, drafts, and audit.</p>
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your collective, your studio…" autoFocus />
{/*
Operator reorder #1/#2: registration makes a USER by default —
a solo account with no collective. Creating a collective is an
explicit opt-in that reveals the name field and the classic
workspace flow (provisioner mints rooms once a collective is
actually created from inside the app).
*/}
<label className="mb-4 flex cursor-pointer items-start gap-2.5 rounded-lg border border-border bg-surface-2 p-3">
<input
type="checkbox"
checked={creatingCollective}
onChange={(e) => setCreatingCollective(e.target.checked)}
className="mt-0.5 h-4 w-4 accent-[#FF1610]"
/>
<span>
<span className="block text-sm font-medium">I am creating a new collective</span>
<span className="block text-xs text-text-faint">Voy a crear un colectivo — with its own rooms and members.</span>
</span>
</label>
{creatingCollective ? (
<>
<h2 className="mb-1 text-base font-semibold">Name your collective</h2>
<p className="mb-4 text-xs text-text-faint">The tenant boundary for accounts, drafts, and audit.</p>
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your collective, your studio…" autoFocus />
</>
) : (
<h2 className="mb-4 text-base font-semibold">Create your account</h2>
)}
{!offline && (
<div className="mt-4 space-y-2">
<p className="text-xs text-text-faint">Your owner account</p>