feat: port BanMember, KickMember modals

src/controllers/modals/ModalController.tsx

@@ -16,6 +16,7 @@ import { getApplicationState } from "../../mobx/State";
 import { history } from "../../context/history";
 
 import AddFriend from "./components/AddFriend";
+import BanMember from "./components/BanMember";
 import Changelog from "./components/Changelog";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
@@ -28,6 +29,7 @@ import CustomStatus from "./components/CustomStatus";
 import DeleteMessage from "./components/DeleteMessage";
 import Error from "./components/Error";
 import ImageViewer from "./components/ImageViewer";
+import KickMember from "./components/KickMember";
 import LinkWarning from "./components/LinkWarning";
 import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
@@ -236,6 +238,7 @@ class ModalControllerExtended extends ModalController<Modal> {
 
 export const modalController = new ModalControllerExtended({
     add_friend: AddFriend,
+    ban_member: BanMember,
     changelog: Changelog,
     channel_info: ChannelInfo,
     clipboard: Clipboard,
@@ -256,6 +259,7 @@ export const modalController = new ModalControllerExtended({
     delete_message: DeleteMessage,
     error: Error,
     image_viewer: ImageViewer,
+    kick_member: KickMember,
     link_warning: LinkWarning,
     mfa_flow: MFAFlow,
     mfa_recovery: MFARecovery,

src/controllers/modals/components/BanMember.tsx

@@ -0,0 +1,46 @@
+import { Text } from "preact-i18n";
+
+import { Column, ModalForm } from "@revoltchat/ui";
+
+import UserIcon from "../../../components/common/user/UserIcon";
+import { ModalProps } from "../types";
+
+/**
+ * Ban member modal
+ */
+export default function BanMember({
+    member,
+    ...props
+}: ModalProps<"ban_member">) {
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id={`app.context_menu.ban_member`} />}
+            schema={{
+                member: "custom",
+                reason: "text",
+            }}
+            data={{
+                member: {
+                    element: (
+                        <Column centred>
+                            <UserIcon target={member.user} size={64} />
+                            <Text
+                                id="app.special.modals.prompt.confirm_kick"
+                                fields={{ name: member.user?.username }}
+                            />
+                        </Column>
+                    ),
+                },
+                reason: {
+                    field: (
+                        <Text id="app.special.modals.prompt.confirm_ban_reason" />
+                    ) as React.ReactChild,
+                },
+            }}
+            callback={async ({ reason }) =>
+                void (await member.server!.banUser(member._id.user, { reason }))
+            }
+        />
+    );
+}

src/controllers/modals/components/KickMember.tsx

@@ -0,0 +1,38 @@
+import { Text } from "preact-i18n";
+
+import { Column, ModalForm } from "@revoltchat/ui";
+
+import UserIcon from "../../../components/common/user/UserIcon";
+import { ModalProps } from "../types";
+
+/**
+ * Kick member modal
+ */
+export default function KickMember({
+    member,
+    ...props
+}: ModalProps<"kick_member">) {
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id={`app.context_menu.kick_member`} />}
+            schema={{
+                member: "custom",
+            }}
+            data={{
+                member: {
+                    element: (
+                        <Column centred>
+                            <UserIcon target={member.user} size={64} />
+                            <Text
+                                id="app.special.modals.prompt.confirm_kick"
+                                fields={{ name: member.user?.username }}
+                            />
+                        </Column>
+                    ),
+                },
+            }}
+            callback={() => member.kick()}
+        />
+    );
+}