diff --git a/web/src/components/OnboardingWizard.jsx b/web/src/components/OnboardingWizard.jsx index ef9d74e..6f589a0 100644 --- a/web/src/components/OnboardingWizard.jsx +++ b/web/src/components/OnboardingWizard.jsx @@ -25,14 +25,31 @@ export default function OnboardingWizard({ api, onComplete }) { }) const [saving, setSaving] = useState(false) const [error, setError] = useState(null) + const [requiredError, setRequiredError] = useState(false) const current = STEPS[step] const layouts = getLayoutList() const goNext = () => { - if (step < STEPS.length - 1) setStep(step + 1) + if (step < STEPS.length - 1) { + if (!canProceed) { setRequiredError(true); return } + setRequiredError(false) + setStep(step + 1) + } } + const canProceed = (() => { + switch (current.key) { + case 'welcome': return true + case 'name': return answers.name.trim().length > 0 + case 'language': return !!answers.language + case 'keyboard': return !!answers.keyboard + case 'editor': return true + case 'done': return true + default: return true + } + })() + const goPrev = () => { if (step > 0) setStep(step - 1) } @@ -103,9 +120,10 @@ export default function OnboardingWizard({ api, onComplete }) { className="onboarding-input" placeholder="Votre nom..." value={answers.name} - onChange={e => setAnswers(a => ({ ...a, name: e.target.value }))} + onChange={e => { setAnswers(a => ({ ...a, name: e.target.value })); setRequiredError(false) }} autoFocus /> + {requiredError &&
Veuillez entrer votre nom
} )} @@ -205,6 +223,11 @@ export default function OnboardingWizard({ api, onComplete }) { Suivant )} + {step === STEPS.length - 1 && !saving && !error && ( + + )} @@ -256,6 +279,9 @@ export default function OnboardingWizard({ api, onComplete }) { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--bg-surface); } + .onboarding-required { + font-size: 12px; color: var(--error); margin-top: 4px; + } `} )