kriss/geniusrun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): split OnboardingWizard's validation vs real failures

Browse Source 
Field-validation messages ("please fill this in") stay local and
inline. Real failures (Garmin login rejected, MFA rejected, complete()
failing) now call showError. The complete()-failure Retry button's
visibility switches from the error text's presence to a new
completeFailed boolean, since the error text itself now lives only in
the (transient) banner.
This commit is contained in:
Kriss Vila
2026-07-27 10:11:18 +02:00
parent 273731442f
commit 3cf5d4b747
1 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/OnboardingWizard.tsx
View File

@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from "react";
import { api } from "./api/client";
import { showError } from "./banner";
import "./OnboardingWizard.css";
import type { AuthResponse } from "./types/api";
@@ -21,31 +22,35 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
const [code, setCode] = useState("");
const [auth, setAuth] = useState<AuthResponse | null>(null);
const [busy, setBusy] = useState(false);
const [error, setError] = useState<string | null>(null);
// Field-validation messages only ("please fill this in") -- real
// API/Garmin failures go through the shared banner system instead (see
// completeFailed below for why the Retry button no longer keys off this).
const [validationError, setValidationError] = useState<string | null>(null);
const [completeFailed, setCompleteFailed] = useState(false);
const completeTriggered = useRef(false);
function submitName(e: React.FormEvent) {
e.preventDefault();
if (!displayName.trim()) {
setError("Please enter a display name.");
setValidationError("Please enter a display name.");
return;
}
setError(null);
setValidationError(null);
setStep("garmin");
}
async function submitGarmin(e: React.FormEvent) {
e.preventDefault();
if (!email.trim() || !password) {
setError("Please enter your Garmin email and password.");
setValidationError("Please enter your Garmin email and password.");
return;
}
setBusy(true);
setError(null);
setValidationError(null);
try {
setAuth(await api.setupGarminLogin(email.trim(), password));
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong, please try again.");
showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
} finally {
setBusy(false);
}
@@ -54,12 +59,11 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
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.");
showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
} finally {
setBusy(false);
}
@@ -67,12 +71,13 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
async function complete() {
setBusy(true);
setError(null);
setCompleteFailed(false);
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.");
showError(err instanceof Error ? err.message : "Something went wrong, please try again.");
setCompleteFailed(true);
setBusy(false);
}
}
@@ -108,7 +113,7 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
✓
</button>
</div>
{error && <p className="onboarding-wizard-error">{error}</p>}
{validationError && <p className="onboarding-wizard-error">{validationError}</p>}
</form>
</div>
);
@@ -122,13 +127,10 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
{auth?.status === "authenticated" ? (
<>
<p className="onboarding-wizard-message">Connected to Garmin — finishing setup…</p>
{error && (
<>
<p className="onboarding-wizard-error">{error}</p>
<button type="button" disabled={busy} onClick={complete}>
{busy ? "Finishing…" : "Retry"}
</button>
</>
{completeFailed && (
<button type="button" disabled={busy} onClick={complete}>
{busy ? "Finishing…" : "Retry"}
</button>
)}
</>
) : auth?.status === "mfa_required" ? (
@@ -142,7 +144,6 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
autoFocus
/>
{auth.message && <p className="onboarding-wizard-message">{auth.message}</p>}
{error && <p className="onboarding-wizard-error">{error}</p>}
<button type="button" disabled={busy} onClick={submitMFA}>
Submit code
</button>
@@ -165,7 +166,7 @@ export function OnboardingWizard({ onCreated }: { onCreated: (displayName: strin
disabled={busy}
/>
{auth?.message && <p className="onboarding-wizard-message">{auth.message}</p>}
{error && <p className="onboarding-wizard-error">{error}</p>}
{validationError && <p className="onboarding-wizard-error">{validationError}</p>}
<button type="submit" disabled={busy}>
{busy ? "Connecting…" : "Login"}
</button>