initial commit after split

webui/src/features/auth/LoginModal.tsx

@@ -0,0 +1,60 @@
+import { useState } from "react";
+import type { ApiSettings, LoginResponse } from "../../types";
+import { login } from "../../api/auth";
+import Button from "../../components/Button";
+import FormField from "../../components/FormField";
+import DismissibleAlert from "../../components/DismissibleAlert";
+
+export default function LoginModal({
+  settings,
+  onClose,
+  onLogin
+}: {
+  settings: ApiSettings;
+  onClose: () => void;
+  onLogin: (response: LoginResponse) => void;
+}) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setError("");
+    setBusy(true);
+    try {
+      const response = await login(settings, { email, password });
+      onLogin(response);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="overlay-backdrop" role="dialog" aria-modal="true">
+      <form className="modal-panel" onSubmit={submit}>
+        <header className="modal-header">
+          <h2>Sign in</h2>
+          <button className="modal-close" type="button" onClick={onClose}>×</button>
+        </header>
+        <div className="modal-body form-grid">
+          {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
+          <FormField label="Email">
+            <input type="email" value={email} autoComplete="username" onChange={(e) => setEmail(e.target.value)} />
+          </FormField>
+          <FormField label="Password">
+            <input type="password" value={password} autoComplete="current-password" onChange={(e) => setPassword(e.target.value)} />
+          </FormField>
+        </div>
+        <footer className="modal-footer">
+          <Button type="button" onClick={onClose}>Cancel</Button>
+          <Button type="submit" variant="primary" disabled={busy}>{busy ? "Signing in…" : "Sign in"}</Button>
+        </footer>
+      </form>
+    </div>
+  );
+}