feat(auth): frontend login/setup pages + auth state in App.jsx

frontend/src/components/LoginPage.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { login } from '../api.js';
+
+export default function LoginPage({ onLogin }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const user = await login(username, password);
+      onLogin(user);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-page">
+      <h1>Archivr</h1>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Username
+          <input
+            type="text"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            autoFocus
+            required
+          />
+        </label>
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+        </label>
+        {error && <p className="error">{error}</p>}
+        <button type="submit" disabled={loading}>
+          {loading ? 'Logging in\u2026' : 'Log in'}
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/components/SetupPage.jsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { doSetup } from '../api.js';
+
+export default function SetupPage({ onComplete }) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (password !== confirm) {
+      setError('Passwords do not match');
+      return;
+    }
+    if (password.length < 8) {
+      setError('Password must be at least 8 characters');
+      return;
+    }
+    setError(null);
+    setLoading(true);
+    try {
+      await doSetup(username, password);
+      onComplete();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="setup-page">
+      <h1>Welcome to Archivr</h1>
+      <p>Create your owner account to get started.</p>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Username
+          <input
+            type="text"
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+            autoFocus
+            required
+          />
+        </label>
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            required
+          />
+        </label>
+        <label>
+          Confirm password
+          <input
+            type="password"
+            value={confirm}
+            onChange={e => setConfirm(e.target.value)}
+            required
+          />
+        </label>
+        {error && <p className="error">{error}</p>}
+        <button type="submit" disabled={loading}>
+          {loading ? 'Creating account\u2026' : 'Create account'}
+        </button>
+      </form>
+    </div>
+  );
+}