Merge pull request #159 from Snazzah/bots-look-cool

src/context/intermediate/Intermediate.tsx

@@ -16,6 +16,7 @@ import { Action } from "../../components/ui/Modal";
 
 import { Children } from "../../types/Preact";
 import Modals from "./Modals";
+import { Bot } from "revolt-api/types/Bots";
 
 export type Screen =
     | { id: "none" }
@@ -24,6 +25,7 @@ export type Screen =
     | { id: "signed_out" }
     | { id: "error"; error: string }
     | { id: "clipboard"; text: string }
+    | { id: "token_reveal"; token: string; username: string }
     | { id: "external_link_prompt"; link: string }
     | {
           id: "_prompt";
@@ -89,6 +91,7 @@ export type Screen =
     | { id: "channel_info"; channel: Channel }
     | { id: "pending_requests"; users: User[] }
     | { id: "modify_account"; field: "username" | "email" | "password" }
+    | { id: "create_bot"; onCreate: (bot: Bot) => void }
     | {
           id: "server_identity";
           server: Server;

src/context/intermediate/Modals.tsx

@@ -10,6 +10,7 @@ import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
 import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
+import { TokenRevealModal } from "./modals/TokenReveal";
 
 export interface Props {
     screen: Screen;
@@ -33,6 +34,8 @@ export default function Modals({ screen, openScreen }: Props) {
             return <SignedOutModal onClose={onClose} {...screen} />;
         case "clipboard":
             return <ClipboardModal onClose={onClose} {...screen} />;
+        case "token_reveal":
+            return <TokenRevealModal onClose={onClose} {...screen} />;
         case "onboarding":
             return <OnboardingModal onClose={onClose} {...screen} />;
         case "external_link_prompt":

src/context/intermediate/Popovers.tsx

@@ -8,6 +8,7 @@ import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
 import { ChannelInfo } from "./popovers/ChannelInfo";
+import { CreateBotModal } from "./popovers/CreateBot";
 import { ImageViewer } from "./popovers/ImageViewer";
 import { ModifyAccountModal } from "./popovers/ModifyAccount";
 import { PendingRequests } from "./popovers/PendingRequests";
@@ -42,6 +43,9 @@ export default function Popovers() {
         case "modify_account":
             // @ts-expect-error someone figure this out :)
             return <ModifyAccountModal onClose={onClose} {...screen} />;
+        case "create_bot":
+            // @ts-expect-error someone figure this out :)
+            return <CreateBotModal onClose={onClose} {...screen} />;
         case "special_prompt":
             // @ts-expect-error someone figure this out :)
             return <SpecialPromptModal onClose={onClose} {...screen} />;

src/context/intermediate/modals/TokenReveal.tsx

@@ -0,0 +1,32 @@
+import { Text } from "preact-i18n";
+
+import Modal from "../../../components/ui/Modal";
+
+interface Props {
+    onClose: () => void;
+    token: string;
+    username: string;
+}
+
+export function TokenRevealModal({ onClose, token, username }: Props) {
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={
+                <Text
+                    id={"app.special.modals.token_reveal"}
+                    fields={{ name: username }}
+                />
+            }
+            actions={[
+                {
+                    onClick: onClose,
+                    confirmation: true,
+                    children: <Text id="app.special.modals.actions.close" />,
+                },
+            ]}>
+            <code style={{ userSelect: "all" }}>{token}</code>
+        </Modal>
+    );
+}

src/context/intermediate/popovers/CreateBot.tsx

@@ -0,0 +1,81 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+import { Bot } from "revolt-api/types/Bots";
+
+import { Text } from "preact-i18n";
+import { useContext, useState } from "preact/hooks";
+
+import Modal from "../../../components/ui/Modal";
+import Overline from "../../../components/ui/Overline";
+
+import FormField from "../../../pages/login/FormField";
+import { AppContext } from "../../revoltjs/RevoltClient";
+import { takeError } from "../../revoltjs/util";
+
+interface Props {
+    onClose: () => void;
+    onCreate: (bot: Bot) => void;
+}
+
+interface FormInputs {
+    name: string;
+}
+
+export function CreateBotModal({ onClose, onCreate }: Props) {
+    const client = useContext(AppContext);
+    const { handleSubmit, register, errors } = useForm<FormInputs>();
+    const [error, setError] = useState<string | undefined>(undefined);
+
+    const onSubmit: SubmitHandler<FormInputs> = async ({ name }) => {
+        try {
+            const { bot } = await client.bots.create({ name });
+            onCreate(bot);
+            onClose();
+        } catch (err) {
+            setError(takeError(err));
+        }
+    };
+
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={<Text id="app.special.popovers.create_bot.title" />}
+            actions={[
+                {
+                    confirmation: true,
+                    contrast: true,
+                    accent: true,
+                    onClick: handleSubmit(onSubmit),
+                    children: <Text id="app.special.modals.actions.create" />,
+                },
+                {
+                    plain: true,
+                    onClick: onClose,
+                    children: <Text id="app.special.modals.actions.cancel" />,
+                },
+            ]}>
+            {/* Preact / React typing incompatabilities */}
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSubmit(
+                        onSubmit,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    )(e as any);
+                }}>
+                <FormField
+                    type="username"
+                    name="name"
+                    register={register}
+                    showOverline
+                    error={errors.name?.message}
+                />
+                {error && (
+                    <Overline type="error" error={error}>
+                        <Text id="app.special.popovers.create_bot.error" />
+                    </Overline>
+                )}
+            </form>
+        </Modal>
+    );
+}