fix: change login identity field to standard text input

packages/ui/src/components/auth/LoginView.tsx

@@ -15,7 +15,7 @@ interface LoginViewProps {
 
 const LoginView: Component<LoginViewProps> = (props) => {
     const [users, setUsers] = createSignal<UserRecord[]>([])
-    const [selectedUserId, setSelectedUserId] = createSignal<string>("")
+    const [username, setUsername] = createSignal("")
     const [password, setPassword] = createSignal("")
     const [isLoggingIn, setIsLoggingIn] = createSignal(false)
     const [isLoadingUsers, setIsLoadingUsers] = createSignal(true)
@@ -27,18 +27,16 @@ const LoginView: Component<LoginViewProps> = (props) => {
                 if (api) {
                     const userList = await api.invoke("users:list")
                     setUsers(userList)
+                    // Pre-fill first user if available
                     if (userList.length > 0) {
-                        setSelectedUserId(userList[0].id)
+                        setUsername(userList[0].name)
                     }
                 }
             } else {
-                // For web mode, we might need a different way to list users or just show a default
+                setUsername("web-explorer")
-                setUsers([{ id: "web-user", name: "Web Explorer" }])
-                setSelectedUserId("web-user")
             }
         } catch (error) {
             console.error("Failed to fetch users:", error)
-            toast.error("Failed to load user list")
         } finally {
             setIsLoadingUsers(false)
         }
@@ -46,15 +44,26 @@ const LoginView: Component<LoginViewProps> = (props) => {
 
     const handleLogin = async (e: Event) => {
         e.preventDefault()
-        if (!selectedUserId()) return
+        const name = username().trim()
+        if (!name) return
 
         setIsLoggingIn(true)
         try {
             if (isElectronHost()) {
                 const api = (window as any).electronAPI
                 if (api) {
+                    // Find user ID by name first
+                    const userList = await api.invoke("users:list")
+                    const user = userList.find((u: UserRecord) => u.name.toLowerCase() === name.toLowerCase())
+
+                    if (!user) {
+                        toast.error(`Identity "${name}" not found`)
+                        setIsLoggingIn(false)
+                        return
+                    }
+
                     const result = await api.invoke("users:login", {
-                        id: selectedUserId(),
+                        id: user.id,
                         password: password(),
                     })
 
@@ -66,9 +75,8 @@ const LoginView: Component<LoginViewProps> = (props) => {
                     }
                 }
             } else {
-                // Mock login for web mode
                 toast.success("Web mode access granted")
-                props.onLoginSuccess({ id: selectedUserId(), name: "Web Explorer" })
+                props.onLoginSuccess({ id: "web-user", name: "Web Explorer" })
             }
         } catch (error) {
             console.error("Login failed:", error)
@@ -106,25 +114,19 @@ const LoginView: Component<LoginViewProps> = (props) => {
                             <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                 <User class="w-5 h-5 text-gray-500 group-focus-within:text-blue-500 transition-colors" />
                             </div>
-                            <select
+                            <input
-                                value={selectedUserId()}
+                                type="text"
-                                onInput={(e) => setSelectedUserId(e.currentTarget.value)}
+                                placeholder="Username"
-                                class="block w-full pl-12 pr-4 py-4 bg-[#1a1a1a] border border-white/5 rounded-2xl text-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all cursor-pointer"
+                                value={username()}
-                            >
+                                onInput={(e) => setUsername(e.currentTarget.value)}
-                                <Show when={isLoadingUsers()}>
+                                class="block w-full pl-12 pr-4 py-4 bg-[#1a1a1a] border border-white/5 rounded-2xl text-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all cursor-text"
-                                    <option>Loading identities...</option>
+                                list="identity-suggestions"
-                                </Show>
+                            />
+                            <datalist id="identity-suggestions">
                                 <For each={users()}>
-                                    {(user) => (
+                                    {(user) => <option value={user.name} />}
-                                        <option value={user.id}>
-                                            {user.name} {user.isGuest ? "(Guest)" : ""}
-                                        </option>
-                                    )}
                                 </For>
-                            </select>
+                            </datalist>
-                            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
-                                <LogIn class="w-4 h-4 text-gray-600 transform rotate-90" />
-                            </div>
                         </div>
                     </div>