69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
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 bot"}>
|
|
<div className="modal-head">
|
|
<div>
|
|
<div className="eyebrow">{"Bots"}</div>
|
|
<h2>{"Create 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(/^@/, "")
|
|
})}
|
|
secretField="token"
|
|
onDone={onCreated}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|