login component

web/src/components/Login.jsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
-import { api } from '../api.js';
 
 export default function Login({ onLogin }) {
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState('admin');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [busy, setBusy] = useState(false);
@@ -14,7 +13,7 @@ export default function Login({ onLogin }) {
     try {
       await onLogin(username, password);
     } catch (err) {
-      setError(err.message || 'Login failed');
+      setError(err.message);
     } finally {
       setBusy(false);
     }
@@ -22,13 +21,18 @@ export default function Login({ onLogin }) {
 
   return (
     <div className="login-wrap">
-      <form className="login" onSubmit={submit}>
+      <form className="login-card" onSubmit={submit}>
         <h1>Dispatch Console</h1>
-        <input placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} autoFocus />
-        <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <label>
+          Username
+          <input value={username} onChange={(e) => setUsername(e.target.value)} autoFocus />
+        </label>
+        <label>
+          Password
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+        </label>
         {error && <p className="error">{error}</p>}
-        <button disabled={busy}>{busy ? 'Signing in…' : 'Sign in'}</button>
-        <p className="muted small">First run creates admin / admin — change it.</p>
+        <button disabled={busy}>{busy ? 'Signing in…' : 'Log in'}</button>
       </form>
     </div>
   );