Move onboarding to auth layout for consistent setup experience
The onboarding wizard was wrapped in the dashboard layout (sidebar + topbar), which felt jarring when coming from the clean workspace-setup page. Moved it to the (auth) layout so the entire setup flow stays in the same centered, chrome-free experience. Widened the auth layout to max-w-3xl and added max-w-md to each narrow auth page individually. Made-with: Cursor
This commit is contained in:
parent
150ec3524d
commit
1bceeb0418
7 changed files with 20 additions and 22 deletions
|
|
@ -29,7 +29,7 @@ export default function InvitePage() {
|
||||||
|
|
||||||
if (status === "loading") {
|
if (status === "loading") {
|
||||||
return (
|
return (
|
||||||
<div className="glass-card flex flex-col items-center rounded-2xl p-8">
|
<div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8">
|
||||||
<Loader2 className="size-8 animate-spin text-muted-foreground" />
|
<Loader2 className="size-8 animate-spin text-muted-foreground" />
|
||||||
<p className="mt-4 text-sm text-muted-foreground">Verifying invitation...</p>
|
<p className="mt-4 text-sm text-muted-foreground">Verifying invitation...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -38,7 +38,7 @@ export default function InvitePage() {
|
||||||
|
|
||||||
if (status === "invalid") {
|
if (status === "invalid") {
|
||||||
return (
|
return (
|
||||||
<div className="glass-card flex flex-col items-center rounded-2xl p-8 text-center">
|
<div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8 text-center">
|
||||||
<XCircle className="mb-4 size-12 text-destructive" />
|
<XCircle className="mb-4 size-12 text-destructive" />
|
||||||
<h1 className="text-xl font-bold">Invalid Invitation</h1>
|
<h1 className="text-xl font-bold">Invalid Invitation</h1>
|
||||||
<p className="mt-2 text-sm text-muted-foreground">
|
<p className="mt-2 text-sm text-muted-foreground">
|
||||||
|
|
@ -56,7 +56,7 @@ export default function InvitePage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass-card flex flex-col items-center rounded-2xl p-8 text-center">
|
<div className="glass-card mx-auto flex w-full max-w-md flex-col items-center rounded-2xl p-8 text-center">
|
||||||
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
||||||
<ScanLine className="size-7 text-white" />
|
<ScanLine className="size-7 text-white" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ export default function AuthLayout({
|
||||||
return (
|
return (
|
||||||
<div className="relative flex min-h-screen items-center justify-center">
|
<div className="relative flex min-h-screen items-center justify-center">
|
||||||
<div className="gradient-mesh pointer-events-none fixed inset-0 z-0" />
|
<div className="gradient-mesh pointer-events-none fixed inset-0 z-0" />
|
||||||
<div className="relative z-10 w-full max-w-md p-4">{children}</div>
|
<div className="relative z-10 w-full max-w-3xl p-4">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ function LoginForm() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass-card w-full rounded-2xl p-8">
|
<div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
|
||||||
<div className="mb-8 flex flex-col items-center">
|
<div className="mb-8 flex flex-col items-center">
|
||||||
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
||||||
<ScanLine className="size-7 text-white" />
|
<ScanLine className="size-7 text-white" />
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState, useCallback } from "react";
|
import { useEffect, useState, useCallback } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import {
|
import {
|
||||||
Building2,
|
Building2,
|
||||||
MapPin,
|
MapPin,
|
||||||
|
|
@ -60,7 +59,6 @@ const TIMEZONES = [
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function OnboardingPage() {
|
export default function OnboardingPage() {
|
||||||
const router = useRouter();
|
|
||||||
const [currentStep, setCurrentStep] = useState(0);
|
const [currentStep, setCurrentStep] = useState(0);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [submitting, setSubmitting] = useState(false);
|
const [submitting, setSubmitting] = useState(false);
|
||||||
|
|
@ -97,14 +95,14 @@ export default function OnboardingPage() {
|
||||||
.then((r) => r.json())
|
.then((r) => r.json())
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.onboardingComplete) {
|
if (data.onboardingComplete) {
|
||||||
router.replace("/");
|
window.location.href = "/";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setCurrentStep(data.currentStep || 0);
|
setCurrentStep(data.currentStep || 0);
|
||||||
})
|
})
|
||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
.finally(() => setLoading(false));
|
.finally(() => setLoading(false));
|
||||||
}, [router]);
|
}, []);
|
||||||
|
|
||||||
const submitStep = useCallback(
|
const submitStep = useCallback(
|
||||||
async (step: number, data: Record<string, unknown>) => {
|
async (step: number, data: Record<string, unknown>) => {
|
||||||
|
|
@ -141,7 +139,7 @@ export default function OnboardingPage() {
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[router]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
function handleOrgSubmit(e: React.FormEvent) {
|
function handleOrgSubmit(e: React.FormEvent) {
|
||||||
|
|
@ -943,8 +941,8 @@ export default function OnboardingPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid gap-3 text-left sm:grid-cols-3">
|
<div className="grid gap-3 text-left sm:grid-cols-3">
|
||||||
<button
|
<a
|
||||||
onClick={() => router.push("/cards")}
|
href="/cards"
|
||||||
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
|
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
|
||||||
>
|
>
|
||||||
<Upload className="size-5 text-primary" />
|
<Upload className="size-5 text-primary" />
|
||||||
|
|
@ -954,9 +952,9 @@ export default function OnboardingPage() {
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
Scan and process a response card
|
Scan and process a response card
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</a>
|
||||||
<button
|
<a
|
||||||
onClick={() => router.push("/settings/users")}
|
href="/settings/users"
|
||||||
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
|
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
|
||||||
>
|
>
|
||||||
<Building2 className="size-5 text-primary" />
|
<Building2 className="size-5 text-primary" />
|
||||||
|
|
@ -966,9 +964,9 @@ export default function OnboardingPage() {
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
Add reviewers and editors
|
Add reviewers and editors
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</a>
|
||||||
<button
|
<a
|
||||||
onClick={() => router.push("/")}
|
href="/"
|
||||||
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
|
className="flex flex-col gap-1.5 rounded-xl border border-border/50 p-4 text-left transition-colors hover:border-primary/50 hover:bg-primary/5"
|
||||||
>
|
>
|
||||||
<PartyPopper className="size-5 text-primary" />
|
<PartyPopper className="size-5 text-primary" />
|
||||||
|
|
@ -978,7 +976,7 @@ export default function OnboardingPage() {
|
||||||
<span className="text-xs text-muted-foreground">
|
<span className="text-xs text-muted-foreground">
|
||||||
See your workspace overview
|
See your workspace overview
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -117,7 +117,7 @@ export default function SetupPage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass-card w-full max-w-lg rounded-2xl p-8">
|
<div className="glass-card mx-auto w-full max-w-lg rounded-2xl p-8">
|
||||||
<div className="mb-8 flex flex-col items-center">
|
<div className="mb-8 flex flex-col items-center">
|
||||||
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
||||||
<ScanLine className="size-7 text-white" />
|
<ScanLine className="size-7 text-white" />
|
||||||
|
|
|
||||||
|
|
@ -81,7 +81,7 @@ function SignupForm() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass-card w-full rounded-2xl p-8">
|
<div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
|
||||||
<div className="mb-8 flex flex-col items-center">
|
<div className="mb-8 flex flex-col items-center">
|
||||||
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
||||||
<ScanLine className="size-7 text-white" />
|
<ScanLine className="size-7 text-white" />
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export default function WorkspaceSetupPage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="glass-card w-full rounded-2xl p-8">
|
<div className="glass-card mx-auto w-full max-w-md rounded-2xl p-8">
|
||||||
<div className="mb-8 flex flex-col items-center">
|
<div className="mb-8 flex flex-col items-center">
|
||||||
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
<div className="mb-4 flex size-14 items-center justify-center rounded-2xl gradient-banner shadow-lg">
|
||||||
<ScanLine className="size-7 text-white" />
|
<ScanLine className="size-7 text-white" />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue