Fix login button — useRef for input, window.location redirect. Add logout to settings.

app/login/page.tsx

@@ -1,15 +1,14 @@
 'use client';
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useRef } from 'react';
 
 export default function LoginPage() {
-  const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const router = useRouter();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   async function handleLogin() {
+    const password = inputRef.current?.value || '';
     if (!password || loading) return;
     setLoading(true);
     setError('');
@@ -21,39 +20,31 @@ export default function LoginPage() {
         body: JSON.stringify({ password }),
       });
       if (!res.ok) throw new Error('Invalid password');
-      router.push('/');
-      router.refresh();
+      window.location.href = '/';
     } catch {
       setError('Invalid password');
       setLoading(false);
     }
   }
 
-  function handleKeyDown(e: React.KeyboardEvent) {
-    if (e.key === 'Enter') handleLogin();
-  }
-
   return (
-    <div
-      style={{
+    <div style={{
       minHeight: '100dvh',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       padding: '16px',
       background: '#faf9f6',
-      }}
-    >
-      <div
-        style={{
+      fontFamily: 'system-ui, sans-serif',
+    }}>
+      <div style={{
         width: '100%',
         maxWidth: '360px',
         background: '#f0ede6',
         border: '1px solid #dddad2',
         borderRadius: '16px',
         padding: '32px',
-        }}
-      >
+      }}>
         <div style={{ textAlign: 'center', marginBottom: '32px' }}>
           <div style={{ fontSize: '22px', fontWeight: 500, color: '#1a1a18', marginBottom: '4px' }}>
             Aaron AI
@@ -64,13 +55,12 @@ export default function LoginPage() {
         </div>
 
         <input
+          ref={inputRef}
           type="password"
-          value={password}
-          onChange={e => setPassword(e.target.value)}
-          onKeyDown={handleKeyDown}
           placeholder="Password"
           autoFocus
           autoComplete="current-password"
+          onKeyDown={e => e.key === 'Enter' && handleLogin()}
           style={{
             width: '100%',
             background: '#faf9f6',
@@ -94,7 +84,6 @@ export default function LoginPage() {
 
         <button
           onClick={handleLogin}
-          disabled={loading}
           style={{
             width: '100%',
             background: '#2d5a3d',
@@ -103,8 +92,7 @@ export default function LoginPage() {
             borderRadius: '10px',
             padding: '12px',
             fontSize: '15px',
-            cursor: loading ? 'not-allowed' : 'pointer',
-            opacity: loading ? 0.5 : 1,
+            cursor: 'pointer',
             display: 'block',
             boxSizing: 'border-box',
           }}

components/SettingsPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useStore } from '@/lib/store';
-import { api } from '@/lib/api';
+import { api, auth } from '@/lib/api';
 import type { Status } from '@/lib/api';
 
 export default function SettingsPanel() {
@@ -50,6 +50,11 @@ export default function SettingsPanel() {
     a.click();
   }
 
+  async function logout() {
+    await auth.logout();
+    window.location.href = '/login';
+  }
+
   async function clearAll() {
     if (!confirm('Delete all conversations permanently?')) return;
     await api.clearAllConversations();