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:
parent
2665f43cc4
commit
2a3a1d79a1
15 changed files with 614 additions and 24 deletions
91
apps/web/src/app/(main)/collectives/new/page.tsx
Normal file
91
apps/web/src/app/(main)/collectives/new/page.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { MANUAL_LANGUAGES, DEFAULT_MANUAL_LANGUAGE, type ManualLanguage } from "@tactical-media-broadcast-hub/core";
|
||||
import { Button, Card, Input } from "../../../../components/ui/primitives";
|
||||
import { api, errorMessage } from "../../../../lib/api-client";
|
||||
import type { CollectiveNode } from "../../../../lib/api-types";
|
||||
|
||||
/**
|
||||
* Create a collective (operator reorder #3: the door from the no-collectives
|
||||
* home). Posts /collectives — the provisioner mints the room set, the founder
|
||||
* membership and the onboarding manual land in one transaction, then the user
|
||||
* is dropped on the tree. Bilingual by the same Spanish-first rule as the rest
|
||||
* of the product.
|
||||
*/
|
||||
export default function NewCollectivePage(): React.ReactElement {
|
||||
const router = useRouter();
|
||||
const [name, setName] = useState("");
|
||||
const [language, setLanguage] = useState<ManualLanguage>(DEFAULT_MANUAL_LANGUAGE);
|
||||
const [description, setDescription] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const ready = name.trim().length >= 2;
|
||||
|
||||
async function create(): Promise<void> {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const collective = await api.post<CollectiveNode>("/collectives", {
|
||||
name: name.trim(),
|
||||
language,
|
||||
...(description.trim() === "" ? {} : { description: description.trim() }),
|
||||
});
|
||||
// Full navigation so the tree mounts with the new collective in place.
|
||||
router.push(`/streams?created=${encodeURIComponent(collective.name)}`);
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
<Card className="w-[520px] max-w-full p-6">
|
||||
<h1 className="text-xl font-semibold tracking-tight">Crear un colectivo</h1>
|
||||
<p className="mt-1 text-xs text-text-faint">
|
||||
Se crean tres salas — abierta (pública, nunca cifrada), cerrada (cifrada desde su creación) y de acogida
|
||||
(con el manual de participación) — y quedas como fundador/a.
|
||||
</p>
|
||||
<div className="mt-5 space-y-2">
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Nombre del colectivo"
|
||||
autoFocus
|
||||
/>
|
||||
<label className="flex items-center justify-between gap-2 rounded-md border border-border bg-surface-2 px-3 py-2 text-xs">
|
||||
Idioma del manual
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value as ManualLanguage)}
|
||||
className="rounded-md border border-border bg-surface-2 px-2 py-1 text-xs"
|
||||
>
|
||||
{MANUAL_LANGUAGES.map((code) => (
|
||||
<option key={code} value={code}>
|
||||
{code === "es" ? "Español" : "English"}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
placeholder="Descripción (opcional)"
|
||||
className="w-full resize-none rounded-md border border-border bg-surface-2 p-2 text-sm focus:border-accent focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
{error !== null && <p className="mt-2 text-xs text-danger">{error}</p>}
|
||||
<div className="mt-6 flex items-center justify-between">
|
||||
<Button variant="ghost" onClick={() => router.back()}>Cancelar</Button>
|
||||
<Button variant="primary" disabled={busy || !ready} onClick={() => void create()}>
|
||||
{busy ? "Creando…" : "Crear colectivo"}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { api, errorMessage } from "../../../lib/api-client";
|
|||
import { liveColumns, streamItemKey, streamPlatform, type FeedsResponse, type StreamItem as FeedItem } from "../../../lib/streams-data";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { NoCollectivesHome } from "../../../components/collectives/no-collectives-home";
|
||||
|
||||
interface Toast {
|
||||
id: number;
|
||||
|
|
@ -39,6 +40,15 @@ const toFeeds = (response: FeedsResponse): FeedsResponse => response;
|
|||
|
||||
export default function StreamsPage(): React.ReactElement {
|
||||
const router = useRouter();
|
||||
// Post-login router (operator reorder #3): zero collectives => home menu
|
||||
// instead of the feeds wall. Failure => assume collectives exist (never trap
|
||||
// a working user behind a failed boolean check).
|
||||
interface CollectiveCount { collectives: number; workspaceKind: "shared" | "personal" }
|
||||
const collectives = useApiResource<CollectiveCount, CollectiveCount>(
|
||||
"/collectives/mine/count",
|
||||
(r) => r,
|
||||
{ collectives: 1, workspaceKind: "shared" },
|
||||
);
|
||||
const resource = useApiResource("/feeds", toFeeds, SAMPLE_RESPONSE, { limit: 200 });
|
||||
// Mock columns only when the API is unreachable; a live workspace with zero
|
||||
// configured feeds gets an honest empty state instead of sample data.
|
||||
|
|
@ -165,6 +175,10 @@ export default function StreamsPage(): React.ReactElement {
|
|||
|
||||
const headerNote = "j/k move · r amplify · q quote";
|
||||
|
||||
if (collectives.source === "live" && !collectives.error && collectives.data.collectives === 0) {
|
||||
return <NoCollectivesHome />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-w-0 flex-col">
|
||||
<div className="flex items-center justify-between border-b border-border-subtle px-4 py-2"><span role="status" className="text-xs text-text-faint">{statusLabel}{!mock && resource.data.meta.excludedConnections.length > 0 ? ` · ${resource.data.meta.excludedConnections.length} accounts do not support feeds` : ""}</span><Button size="sm" variant="ghost" onClick={() => void refresh()}>Refresh</Button></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue