ui(login): forgot-password link under the password field (no wrap at 375 px)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1 changed file +10 −9
modified
frontend/src/features/auth/login-page.tsx
+10 −9
@@ -103,15 +103,16 @@ export function LoginPage() { | |||||
| 103 | </span> | 103 | </span> | ||
| 104 | </label> | 104 | </label> | ||
| 105 | {mode === 'password' && ( | 105 | {mode === 'password' && ( | ||
| 106 | − <label className="block"> | 106 | + <div> | ||
| 107 | − <span className="flex items-baseline justify-between text-sm font-medium">Mot de passe | 107 | + <label className="block"> | ||
| 108 | − <button type="button" onClick={() => { setMode('forgot'); setError(null); }} className="text-xs font-normal text-uqo-blue underline min-h-[24px]">Première connexion ou mot de passe oublié ?</button> | 108 | + <span className="text-sm font-medium">Mot de passe</span> | ||
| 109 | − </span> | 109 | + <span className="mt-1 flex items-center rounded-xl border border-neutral-line focus-within:border-uqo-blue"> | ||
| 110 | − <span className="mt-1 flex items-center rounded-xl border border-neutral-line focus-within:border-uqo-blue"> | 110 | + <Lock size={18} className="ml-3 text-neutral-muted" /> | ||
| 111 | − <Lock size={18} className="ml-3 text-neutral-muted" /> | 111 | + <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" className="h-12 flex-1 bg-transparent px-3 outline-none" /> | ||
| 112 | − <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" className="h-12 flex-1 bg-transparent px-3 outline-none" /> | 112 | + </span> | ||
| 113 | − </span> | 113 | + </label> | ||
| 114 | − </label> | 114 | + <button type="button" onClick={() => { setMode('forgot'); setError(null); }} className="mt-1.5 text-sm text-uqo-blue underline min-h-[32px] text-left">Première connexion ou mot de passe oublié ?</button> | ||
| 115 | + </div> | ||||
| 115 | )} | 116 | )} | ||
| 116 | {mode === 'password' && ( | 117 | {mode === 'password' && ( | ||
| 117 | <label className="flex items-start gap-2 text-sm"> | 118 | <label className="flex items-start gap-2 text-sm"> | ||
| 118 | 119 | ||||