From 6bf95a0df06207aa6f9f81f0a66a0cc6ce83ccf9 Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Tue, 21 Apr 2026 17:54:19 +0300
Subject: [PATCH] fix: prevent username input from unmounting during typing in
 login form

The username input was conditionally hidden when it had a value, causing
the field to disappear and focus to jump to password when typing. Fixed by:
1. Always rendering the username input (removed conditional)
2. Using controlled input with value prop
3. Only auto-focus password when username is already entered

This fixes the focus-jumping bug that made it impossible to enter usernames.
---
 .claude/settings.local.json |  6 +++++-
 frontend/app/login/page.tsx | 29 ++++++++++++++---------------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 3813b0e6..9a3d8037 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -85,7 +85,11 @@
       "Bash(grep -E \"\\\\.\\(py|ts\\)$\")",
       "Bash(grep -E \"\\\\.py$\")",
       "Bash(git worktree *)",
-      "Bash(npm list *)"
+      "Bash(npm list *)",
+      "Bash(netstat -tulpn)",
+      "Bash(curl -k -v https://192.168.84.131:8918/users/)",
+      "Bash(curl -k -s https://192.168.84.131:8918/users/)",
+      "Bash(grep -E \"\\\\.\\(tsx|ts|jsx|js\\)$\")"
     ]
   }
 }
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index 776697a6..8b9810c0 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -209,21 +209,20 @@ export default function LoginPage() {
                 </div>
               </div>
               
-              {!selectedUserForLogin.username && (
-                <div className="space-y-2">
-                  <label className="text-xs font-normal text-muted px-1">Username</label>
-                  <div className="relative">
-                    <User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
-                    <input 
-                      type="text"
-                      autoFocus
-                      onChange={(e) => setSelectedUserForLogin({...selectedUserForLogin, username: e.target.value})}
-                      className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
-                      placeholder="Admin"
-                    />
-                  </div>
+              <div className="space-y-2">
+                <label className="text-xs font-normal text-muted px-1">Username</label>
+                <div className="relative">
+                  <User className="absolute left-4 top-1/2 -translate-y-1/2 text-muted" size={16} />
+                  <input
+                    type="text"
+                    autoFocus
+                    value={selectedUserForLogin.username || ""}
+                    onChange={(e) => setSelectedUserForLogin({...selectedUserForLogin, username: e.target.value})}
+                    className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
+                    placeholder="Admin"
+                  />
                 </div>
-              )}
+              </div>
               
               <div className="space-y-2">
                 <label className="text-xs font-normal text-muted px-1">Password</label>
@@ -233,7 +232,7 @@ export default function LoginPage() {
                     ref={localPassRef}
                     data-testid="local-password-input"
                     type="password"
-                    autoFocus
+                    autoFocus={!!selectedUserForLogin.username}
                     onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
                     className="w-full bg-slate-800/50 border border-slate-800 focus:border-primary rounded-2xl py-4 pl-12 pr-4 text-white/50 focus:text-white focus:outline-none transition-all placeholder:text-slate-700 font-mono"
                     placeholder="Enter password"