chore(refactor): rename context/modals to controllers/modals

2026-03-07 17:35:28 +00:00 · 2022-06-27 17:56:06 +01:00
parent 95ebd935ed
commit 1cfcb20d4d
38 changed files with 39 additions and 31 deletions
--- a/src/controllers/modals/components/ModifyAccount.tsx
+++ b/src/controllers/modals/components/ModifyAccount.tsx
@@ -0,0 +1,155 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+
+import { Text } from "preact-i18n";
+import { useContext, useState } from "preact/hooks";
+
+import { Category, Error, Modal } from "@revoltchat/ui";
+
+import { noopTrue } from "../../../lib/js";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { takeError } from "../../../context/revoltjs/util";
+
+import FormField from "../../../pages/login/FormField";
+import { ModalProps } from "../types";
+
+interface FormInputs {
+    password: string;
+    new_email: string;
+    new_username: string;
+    new_password: string;
+
+    // TODO: figure out if this is correct or not
+    // it wasn't in the types before this was typed but the element itself was there
+    current_password?: string;
+}
+
+export default function ModifyAccount({
+    field,
+    ...props
+}: ModalProps<"modify_account">) {
+    const client = useApplicationState().client!;
+    const [processing, setProcessing] = useState(false);
+    const { handleSubmit, register, errors } = useForm<FormInputs>();
+    const [error, setError] = useState<string | undefined>(undefined);
+
+    const onSubmit: SubmitHandler<FormInputs> = async ({
+        password,
+        new_username,
+        new_email,
+        new_password,
+    }) => {
+        if (processing) return;
+        setProcessing(true);
+
+        try {
+            if (field === "email") {
+                await client.api.patch("/auth/account/change/email", {
+                    current_password: password,
+                    email: new_email,
+                });
+                props.onClose();
+            } else if (field === "password") {
+                await client.api.patch("/auth/account/change/password", {
+                    current_password: password,
+                    password: new_password,
+                });
+                props.onClose();
+            } else if (field === "username") {
+                await client.api.patch("/users/@me/username", {
+                    username: new_username,
+                    password,
+                });
+                props.onClose();
+            }
+        } catch (err) {
+            setError(takeError(err));
+            setProcessing(false);
+        }
+    };
+
+    return (
+        <Modal
+            {...props}
+            title={<Text id={`app.special.modals.account.change.${field}`} />}
+            disabled={processing}
+            actions={[
+                {
+                    confirmation: true,
+                    onClick: () => void handleSubmit(onSubmit)(),
+                    children:
+                        field === "email" ? (
+                            <Text id="app.special.modals.actions.send_email" />
+                        ) : (
+                            <Text id="app.special.modals.actions.update" />
+                        ),
+                },
+                {
+                    onClick: noopTrue,
+                    children: <Text id="app.special.modals.actions.cancel" />,
+                    palette: "plain",
+                },
+            ]}>
+            {/* Preact / React typing incompatabilities */}
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    handleSubmit(
+                        onSubmit,
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    )(e as any);
+                }}>
+                {field === "email" && (
+                    <FormField
+                        type="email"
+                        name="new_email"
+                        register={register}
+                        showOverline
+                        error={errors.new_email?.message}
+                        disabled={processing}
+                    />
+                )}
+                {field === "password" && (
+                    <FormField
+                        type="password"
+                        name="new_password"
+                        register={register}
+                        showOverline
+                        error={errors.new_password?.message}
+                        autoComplete="new-password"
+                        disabled={processing}
+                    />
+                )}
+                {field === "username" && (
+                    <FormField
+                        type="username"
+                        name="new_username"
+                        register={register}
+                        showOverline
+                        error={errors.new_username?.message}
+                        disabled={processing}
+                    />
+                )}
+                <FormField
+                    type="current_password"
+                    register={register}
+                    showOverline
+                    error={errors.current_password?.message}
+                    autoComplete="current-password"
+                    disabled={processing}
+                />
+                {error && (
+                    <Category compact>
+                        <Error
+                            error={
+                                <Text id="app.special.modals.account.failed" />
+                            }
+                        />
+                    </Category>
+                )}
+            </form>
+        </Modal>
+    );
+}