fix(auth): tab from the user name straight into the password field

"Passwort vergessen?" came first in the markup; it now follows the field
and keeps its place next to the label.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 11:17:50 +01:00
1 parent 0309b54a29
commit e7d5db3e24
1 file changed
+19 -19
+19 -19
View File
@@ -245,7 +245,7 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
// ============================================================================
if (authStatus.needsSetup) {
return (
<div className="min-h-screen bg-canvas text-main flex flex-col items-center justify-center p-4 font-sans">
<div className="min-h-[100dvh] bg-canvas text-main flex flex-col items-center justify-center p-4 font-sans">
<div className="w-full max-w-xl panel-surface shadow-panel overflow-hidden">
{/* Top Brand Bar */}
<div className="p-4 bg-canvas border-b border-border flex items-center justify-between">
@@ -472,7 +472,7 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
// STANDARD LOGIN / INVITE CODE / REGISTRATION VIEW
// ============================================================================
return (
<div className="min-h-screen bg-canvas text-main flex flex-col items-center justify-center p-4 font-sans">
<div className="min-h-[100dvh] bg-canvas text-main flex flex-col items-center justify-center p-4 font-sans">
<div className="w-full max-w-md panel-surface shadow-panel overflow-hidden">
{/* Top Header */}
<div className="p-4 bg-canvas border-b border-border flex items-center justify-between">
@@ -706,23 +706,8 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
/>
</div>
<div>
<div className="flex items-baseline justify-between mb-1">
<label className="block text-muted">Passwort</label>
{authStatus.passwordReset && (
<button
type="button"
onClick={() => {
setAuthTab('forgot');
setError(null);
setNotice(null);
}}
className="text-accent hover:underline text-[11px] py-1"
>
Passwort vergessen?
</button>
)}
</div>
<div className="relative">
<label className="block text-muted mb-1">Passwort</label>
<input
type="password"
value={password}
@@ -731,6 +716,21 @@ export const SetupAndAuthView: React.FC<SetupAndAuthViewProps> = ({
required
className="w-full h-8 px-2.5 input-field"
/>
{/* After the field in the markup, so Tab goes from the name straight to the password;
shown next to the label */}
{authStatus.passwordReset && (
<button
type="button"
onClick={() => {
setAuthTab('forgot');
setError(null);
setNotice(null);
}}
className="absolute right-0 -top-1 text-accent hover:underline text-[11px] py-1"
>
Passwort vergessen?
</button>
)}
</div>
<div className="pt-1">