Janady13/missionmatch / frontend/src/screens/Login.tsx

1import { useState } from 'react' 2import { Loader2, Lock, ShieldCheck } from 'lucide-react' 3import { authApi, type EnrollResult } from '../lib/auth' 4import { useAuth } from '../lib/useAuth' 5 6type Step = 'credentials' | 'verify' | 'enroll' 7 8// Login is the unauthenticated gate. Stage 1 is email and password (returns a pre MFA session cookie); 9// stage 2 is mandatory TOTP, either verifying an existing enrollment or enrolling for the first time. 10// On an active session it calls refresh, which flips the AuthProvider to show the app. 11export function Login() { 12 const { refresh } = useAuth() 13 const [step, setStep] = useState<Step>('credentials') 14 const [email, setEmail] = useState('') 15 const [password, setPassword] = useState('') 16 const [code, setCode] = useState('') 17 const [useRecovery, setUseRecovery] = useState(false) 18 const [enroll, setEnroll] = useState<EnrollResult | null>(null) 19 const [err, setErr] = useState('') 20 const [busy, setBusy] = useState(false) 21 22 async function beginEnroll() { 23 setBusy(true) 24 try { 25 setEnroll(await authApi.mfaEnroll()) 26 setStep('enroll') 27 } catch { 28 setErr('Could not start MFA enrollment. Try again.') 29 } finally { 30 setBusy(false) 31 } 32 } 33 34 async function onCredentials(e: React.FormEvent) { 35 e.preventDefault() 36 setErr('') 37 setBusy(true) 38 try { 39 const r = await authApi.login(email, password) 40 if (!r.mfa_required) { 41 // MFA is disabled for this pilot: the session is already active, go straight in. 42 await refresh() 43 setBusy(false) 44 return 45 } 46 setCode('') 47 if (r.mfa_enrolled) { 48 setStep('verify') 49 setBusy(false) 50 } else { 51 await beginEnroll() 52 } 53 } catch { 54 setErr('Invalid email or password.') 55 setBusy(false) 56 } 57 } 58 59 async function onVerify(e: React.FormEvent) { 60 e.preventDefault() 61 setErr('') 62 setBusy(true) 63 try { 64 if (useRecovery) { 65 await authApi.mfaRecover(code.trim()) 66 } else { 67 await authApi.mfaVerify(code.trim()) 68 } 69 await refresh() 70 } catch { 71 setErr(useRecovery ? 'Invalid recovery code.' : 'Invalid authentication code.') 72 } finally { 73 // Clear busy on both paths so a session that does not flip the gate (for example a refresh 74 // that returns no active session) leaves the form usable instead of a stuck disabled button. 75 setBusy(false) 76 } 77 } 78 79 async function onActivate(e: React.FormEvent) { 80 e.preventDefault() 81 setErr('') 82 setBusy(true) 83 try { 84 await authApi.mfaActivate(code.trim()) 85 await refresh() 86 } catch { 87 setErr('Invalid code. Make sure the time on your authenticator is correct.') 88 } finally { 89 setBusy(false) 90 } 91 } 92 93 return ( 94 <div className="grid min-h-screen place-items-center bg-navy-950 p-4 text-ink"> 95 <div className="w-full max-w-sm rounded-xl border border-line/70 bg-surface p-6 shadow-2xl"> 96 <div className="mb-5 flex items-center gap-2"> 97 <ShieldCheck className="text-gold" size={22} /> 98 <div className="text-lg font-extrabold tracking-tight">missionMATCH</div> 99 </div> 100 101 {step === 'credentials' && ( 102 <form onSubmit={onCredentials} className="space-y-3"> 103 <h1 className="text-sm font-bold">Sign in</h1> 104 <Field label="Email" type="email" value={email} onChange={setEmail} autoFocus /> 105 <Field label="Password" type="password" value={password} onChange={setPassword} maxLength={64} /> 106 {err && <p className="text-sm text-risk">{err}</p>} 107 <Submit busy={busy} icon={<Lock size={15} />} label="Continue" /> 108 </form> 109 )} 110 111 {step === 'verify' && ( 112 <form onSubmit={onVerify} className="space-y-3"> 113 <h1 className="text-sm font-bold">Two factor authentication</h1> 114 <p className="text-xs text-muted"> 115 {useRecovery 116 ? 'Enter one of your single use recovery codes.' 117 : 'Enter the 6 digit code from your authenticator app.'} 118 </p> 119 <Field label={useRecovery ? 'Recovery code' : 'Authentication code'} value={code} onChange={setCode} autoFocus /> 120 {err && <p className="text-sm text-risk">{err}</p>} 121 <Submit busy={busy} icon={<ShieldCheck size={15} />} label="Verify" /> 122 <button 123 type="button" 124 onClick={() => { 125 setUseRecovery(!useRecovery) 126 setCode('') 127 setErr('') 128 }} 129 className="text-[11px] text-muted hover:text-ink" 130 > 131 {useRecovery ? 'Use an authenticator code instead' : 'Use a recovery code instead'} 132 </button> 133 </form> 134 )} 135 136 {step === 'enroll' && enroll && ( 137 <form onSubmit={onActivate} className="space-y-3"> 138 <h1 className="text-sm font-bold">Set up two factor authentication</h1> 139 <p className="text-xs text-muted"> 140 Add this account to your authenticator app, then enter the 6 digit code it shows. MFA is 141 required for every account. 142 </p> 143 <div className="rounded-lg bg-navy-950/60 p-3"> 144 <div className="text-[11px] uppercase tracking-wider text-faint">Setup key</div> 145 <div className="mt-1 break-all font-mono text-sm text-blue-soft">{enroll.secret}</div> 146 <a href={enroll.otpauth_uri} className="mt-2 inline-block text-[11px] text-muted underline"> 147 Open in authenticator 148 </a> 149 </div> 150 <Field label="Authentication code" value={code} onChange={setCode} autoFocus /> 151 {err && <p className="text-sm text-risk">{err}</p>} 152 <Submit busy={busy} icon={<ShieldCheck size={15} />} label="Activate and sign in" /> 153 </form> 154 )} 155 </div> 156 </div> 157 ) 158} 159 160function Field({ 161 label, 162 value, 163 onChange, 164 type = 'text', 165 autoFocus, 166 maxLength, 167}: { 168 label: string 169 value: string 170 onChange: (v: string) => void 171 type?: string 172 autoFocus?: boolean 173 maxLength?: number 174}) { 175 return ( 176 <label className="block"> 177 <span className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted">{label}</span> 178 <input 179 type={type} 180 value={value} 181 autoFocus={autoFocus} 182 maxLength={maxLength} 183 onChange={(e) => onChange(e.target.value)} 184 className="w-full rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2 text-sm text-ink outline-none focus:border-blue/60" 185 /> 186 </label> 187 ) 188} 189 190function Submit({ busy, icon, label }: { busy: boolean; icon: React.ReactNode; label: string }) { 191 return ( 192 <button 193 type="submit" 194 disabled={busy} 195 className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50" 196 > 197 {busy ? <Loader2 className="animate-spin" size={15} /> : icon} 198 {label} 199 </button> 200 ) 201} 202