Release v0.1.3

webui/src/features/auth/LoginModal.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useId, useState } from "react";
 import type { ApiSettings, LoginResponse } from "../../types";
 import { login } from "../../api/auth";
 import Button from "../../components/Button";
+import Dialog from "../../components/Dialog";
 import FormField from "../../components/FormField";
 import PasswordField from "../../components/PasswordField";
 import DismissibleAlert from "../../components/DismissibleAlert";
@@ -23,6 +24,7 @@ export default function LoginModal({
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [busy, setBusy] = useState(false);
+  const formId = useId();
 
   async function submit(event: React.FormEvent) {
     event.preventDefault();
@@ -40,27 +42,27 @@ export default function LoginModal({
   }
 
   return (
-    <div className="overlay-backdrop" role="dialog" aria-modal="true">
-      <form className="modal-panel" onSubmit={submit}>
-        <header className="modal-header">
-          <h2>{title}</h2>
-          <button className="modal-close" type="button" onClick={onClose}>×</button>
-        </header>
-        <div className="modal-body form-grid">
-          {message && <DismissibleAlert tone="info" dismissible={false}>{message}</DismissibleAlert>}
-          {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">
-            <PasswordField value={password} autoComplete="current-password" onValueChange={setPassword} />
-          </FormField>
-        </div>
-        <footer className="modal-footer">
+    <Dialog
+      open
+      title={title}
+      onClose={onClose}
+      footer={(
+        <>
           <Button type="button" onClick={onClose}>Cancel</Button>
-          <Button type="submit" variant="primary" disabled={busy}>{busy ? "Signing in…" : "Sign in"}</Button>
-        </footer>
+          <Button type="submit" form={formId} variant="primary" disabled={busy}>{busy ? "Signing in…" : "Sign in"}</Button>
+        </>
+      )}
+    >
+      <form id={formId} className="form-grid" onSubmit={submit}>
+        {message && <DismissibleAlert tone="info" dismissible={false}>{message}</DismissibleAlert>}
+        {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">
+          <PasswordField value={password} autoComplete="current-password" onValueChange={setPassword} />
+        </FormField>
       </form>
-    </div>
+    </Dialog>
   );
 }