hide create bot functionality in modal window

cmd/telesrv-admin/web/src/components/CreateBotModal.tsx

@@ -0,0 +1,68 @@
+import { Plus, X } from "lucide-react";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { toInt } from "../lib/format";
+import { ActionButton } from "./ActionButton";
+
+// CreateBotModal collects the new bot's fields, then hands off to ActionButton
+// for the usual reason/dry-run/confirm flow -- the token is shown once in
+// ActionButton's own result panel after confirmation.
+export function CreateBotModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
+  const [ownerID, setOwnerID] = useState("");
+  const [botName, setBotName] = useState("");
+  const [botUsername, setBotUsername] = useState("");
+
+  return createPortal(
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal command-modal" role="dialog" aria-modal="true" aria-label={"Create a system bot"}>
+        <div className="modal-head">
+          <div>
+            <div className="eyebrow">{"Bots"}</div>
+            <h2>{"Create a system bot"}</h2>
+          </div>
+          <button className="icon-btn" type="button" onClick={onClose} aria-label={"Close"}><X size={15} /></button>
+        </div>
+        <div className="command-body">
+          <p>{"Provision a bot account owned by the given user. The token is shown once after confirmation."}</p>
+          <div className="bot-create-fields">
+            <label className="duration-field">
+              <span>{"Owner user ID"}</span>
+              <input
+                value={ownerID}
+                onChange={(event) => setOwnerID(event.target.value)}
+                type="number"
+                min="1"
+                placeholder="123456789"
+              />
+            </label>
+            <label className="duration-field">
+              <span>{"Display name"}</span>
+              <input value={botName} onChange={(event) => setBotName(event.target.value)} placeholder={"e.g. Service Bot"} maxLength={64} />
+            </label>
+            <label className="duration-field">
+              <span>{"Username"}</span>
+              <input value={botUsername} onChange={(event) => setBotUsername(event.target.value)} placeholder="my_service_bot" />
+            </label>
+          </div>
+          <span className="bot-create-note">{"Username must be 5-32 characters and end with 'bot'."}</span>
+        </div>
+        <div className="modal-actions">
+          <button className="btn" type="button" onClick={onClose}>{"Close"}</button>
+          <ActionButton
+            label={"Create bot"}
+            icon={<Plus size={15} />}
+            tone="neutral"
+            path="/api/actions/create-bot"
+            payload={() => ({
+              owner_user_id: toInt(ownerID),
+              name: botName.trim(),
+              username: botUsername.trim().replace(/^@/, "")
+            })}
+            onDone={onCreated}
+          />
+        </div>
+      </section>
+    </div>,
+    document.body
+  );
+}