feat(onboarding): replace CreateProfile/ConnectGarmin with a single deferred-commit wizard
This commit is contained in:
187
frontend/src/OnboardingWizard.tsx
Normal file
187
frontend/src/OnboardingWizard.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
import { useState } from "react";
|
||||
import { api, BASE_URL } from "./api/client";
|
||||
import "./OnboardingWizard.css";
|
||||
import type { AuthResponse } from "./types/api";
|
||||
|
||||
type Step = "name" | "garmin";
|
||||
|
||||
// Replaces the old CreateProfile.tsx + ConnectGarmin.tsx: a single wizard,
|
||||
// since nothing is persisted to the database until Garmin actually
|
||||
// connects (see
|
||||
// docs/superpowers/specs/2026-07-26-onboarding-wizard-deferred-commit-design.md).
|
||||
// Quitting partway through (closing the tab, logging out) leaves no trace
|
||||
// in the database -- there's no half-created account to clean up or
|
||||
// re-prompt for later.
|
||||
export function OnboardingWizard({ onCreated }: { onCreated: (displayName: string) => void }) {
|
||||
const [step, setStep] = useState<Step>("name");
|
||||
const [displayName, setDisplayName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [code, setCode] = useState("");
|
||||
const [auth, setAuth] = useState<AuthResponse | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
function submitName(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!displayName.trim()) {
|
||||
setError("Please enter a display name.");
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
setStep("garmin");
|
||||
}
|
||||
|
||||
async function submitGarmin(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!email.trim() || !password) {
|
||||
setError("Please enter your Garmin email and password.");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
setAuth(await api.setupGarminLogin(email.trim(), password));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function submitMFA() {
|
||||
if (!code.trim()) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
setAuth(await api.setupGarminMFA(code.trim()));
|
||||
setCode("");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function complete() {
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
const result = await api.setupComplete(displayName.trim());
|
||||
onCreated(result.display_name);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (step === "name") {
|
||||
return (
|
||||
<div className="onboarding-wizard">
|
||||
<h1>🧞♀️ Welcome to geniusrun</h1>
|
||||
<p>Let's set up your profile. You'll connect your Garmin account next.</p>
|
||||
<form onSubmit={submitName}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Display name"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
{error && <p className="onboarding-wizard-error">{error}</p>}
|
||||
<button type="submit">Next</button>
|
||||
</form>
|
||||
<form method="post" action={`${BASE_URL}/api/session/logout`}>
|
||||
<button type="submit" className="logout-link">
|
||||
Log out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="onboarding-wizard">
|
||||
<h1>🧞♀️ Connect your Garmin account</h1>
|
||||
<p>geniusrun needs your Garmin credentials to sync your activities.</p>
|
||||
|
||||
{auth?.status === "authenticated" ? (
|
||||
<>
|
||||
<p className="onboarding-wizard-message">Connected to Garmin.</p>
|
||||
<button type="button" disabled={busy} onClick={complete}>
|
||||
{busy ? "Finishing…" : "Continue to geniusrun"}
|
||||
</button>
|
||||
</>
|
||||
) : auth?.status === "mfa_required" ? (
|
||||
<div className="onboarding-wizard-mfa">
|
||||
<input
|
||||
placeholder="MFA code"
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && submitMFA()}
|
||||
disabled={busy}
|
||||
autoFocus
|
||||
/>
|
||||
{auth.message && <p className="onboarding-wizard-message">{auth.message}</p>}
|
||||
{error && <p className="onboarding-wizard-error">{error}</p>}
|
||||
<div className="onboarding-wizard-actions">
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
setAuth(null);
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button type="button" disabled={busy} onClick={submitMFA}>
|
||||
Submit code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={submitGarmin}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Garmin email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
disabled={busy}
|
||||
autoFocus
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Garmin password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={busy}
|
||||
/>
|
||||
{auth?.message && <p className="onboarding-wizard-message">{auth.message}</p>}
|
||||
{error && <p className="onboarding-wizard-error">{error}</p>}
|
||||
<div className="onboarding-wizard-actions">
|
||||
<button
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
setStep("name");
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button type="submit" disabled={busy}>
|
||||
{busy ? "Connecting…" : "Next"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<form method="post" action={`${BASE_URL}/api/session/logout`}>
|
||||
<button type="submit" className="logout-link">
|
||||
Log out
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user