feat(modals): port SignedOut and SignOutSessions

src/context/intermediate/Modals.tsx

@@ -8,8 +8,6 @@ import { ExternalLinkModal } from "./modals/ExternalLinkPrompt";
 import { InputModal } from "./modals/Input";
 import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
-import { SessionsModal } from "./modals/SessionsPrompt";
-import { SignedOutModal } from "./modals/SignedOut";
 import { TokenRevealModal } from "./modals/TokenReveal";
 
 export interface Props {
@@ -30,8 +28,6 @@ export default function Modals({ screen, openScreen }: Props) {
             return <InputModal onClose={onClose} {...screen} />;
         case "error":
             return <ErrorModal onClose={onClose} {...screen} />;
-        case "signed_out":
-            return <SignedOutModal onClose={onClose} {...screen} />;
         case "clipboard":
             return <ClipboardModal onClose={onClose} {...screen} />;
         case "token_reveal":
@@ -40,8 +36,6 @@ export default function Modals({ screen, openScreen }: Props) {
             return <OnboardingModal onClose={onClose} {...screen} />;
         case "external_link_prompt":
             return <ExternalLinkModal onClose={onClose} {...screen} />;
-        case "sessions":
-            return <SessionsModal onClose={onClose} {...screen} />;
     }
 
     return null;

src/context/modals/components/Changelog.tsx

@@ -35,7 +35,7 @@ function RenderLog({ post }: { post: ChangelogPost }) {
 }
 
 /**
- * Changelog rendering modal
+ * Changelog modal
  */
 export default function Changelog({
     initial,

src/context/modals/components/OutOfDate.tsx

@@ -7,6 +7,10 @@ import { noop, noopTrue } from "../../../lib/js";
 import { APP_VERSION } from "../../../version";
 import { ModalProps } from "../types";
 
+/**
+ * Out-of-date indicator which instructs users
+ * that their client needs to be updated
+ */
 export default function OutOfDate({
     onClose,
     version,

src/context/modals/components/SignOutSessions.tsx

@@ -1,31 +1,35 @@
 import { Text } from "preact-i18n";
+import { useCallback } from "preact/hooks";
 
 import { Modal } from "@revoltchat/ui";
 
-interface Props {
+import { noopTrue } from "../../../lib/js";
-    onClose: () => void;
+
-    confirm: () => void;
+import { ModalProps } from "../types";
-}
+
+/**
+ * Confirm whether a user wants to sign out of all other sessions
+ */
+export function SignOutSessions(props: ModalProps<"sign_out_sessions">) {
+    const onClick = useCallback(() => {
+        props.onDeleting();
+        props.client.api.delete("/auth/session/all").then(props.onDelete);
+        return true;
+    }, []);
 
-export function SessionsModal({ onClose, confirm }: Props) {
     return (
         <Modal
-            onClose={onClose}
+            {...props}
             title={<Text id={"app.special.modals.sessions.title"} />}
             actions={[
                 {
-                    onClick: () => {
+                    onClick: noopTrue,
-                        onClose();
-                    },
-                    confirmation: true,
                     palette: "accent",
+                    confirmation: true,
                     children: <Text id="app.special.modals.actions.back" />,
                 },
                 {
-                    onClick: () => {
+                    onClick,
-                        confirm();
-                        onClose();
-                    },
                     confirmation: true,
                     children: <Text id="app.special.modals.sessions.accept" />,
                 },

src/context/modals/components/SignedOut.tsx

@@ -2,18 +2,21 @@ import { Text } from "preact-i18n";
 
 import { Modal } from "@revoltchat/ui";
 
-interface Props {
+import { noopTrue } from "../../../lib/js";
-    onClose: () => void;
-}
 
-export function SignedOutModal({ onClose }: Props) {
+import { ModalProps } from "../types";
+
+/**
+ * Indicate that the user has been signed out of their account
+ */
+export function SignedOut(props: ModalProps<"signed_out">) {
     return (
         <Modal
-            onClose={onClose}
+            {...props}
             title={<Text id="app.special.modals.signed_out" />}
             actions={[
                 {
-                    onClick: onClose,
+                    onClick: noopTrue,
                     confirmation: true,
                     children: <Text id="app.special.modals.actions.ok" />,
                 },

src/context/modals/index.tsx

@@ -13,6 +13,8 @@ import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
 import OutOfDate from "./components/OutOfDate";
+import { SignOutSessions } from "./components/SignOutSessions";
+import { SignedOut } from "./components/SignedOut";
 import Test from "./components/Test";
 import { Modal } from "./types";
 
@@ -142,5 +144,7 @@ export const modalController = new ModalControllerExtended({
     mfa_recovery: MFARecovery,
     mfa_enable_totp: MFAEnableTOTP,
     out_of_date: OutOfDate,
+    signed_out: SignedOut,
+    sign_out_sessions: SignOutSessions,
     test: Test,
 });

src/context/modals/types.ts

@@ -33,7 +33,13 @@ export type Modal = {
           initial?: number;
       }
     | {
-          type: "test";
+          client: Client;
+          onDelete: () => void;
+          onDeleting: () => void;
+          type: "sign_out_sessions";
+      }
+    | {
+          type: "test" | "signed_out";
       }
 );
 

src/context/revoltjs/RevoltClient.tsx

@@ -10,6 +10,7 @@ import { Preloader } from "@revoltchat/ui";
 import { useApplicationState } from "../../mobx/State";
 
 import { useIntermediate } from "../intermediate/Intermediate";
+import { modalController } from "../modals";
 import { registerEvents } from "./events";
 import { takeError } from "./util";
 
@@ -68,7 +69,7 @@ export default observer(({ children }: Props) => {
                     const error = takeError(err);
                     if (error === "Forbidden" || error === "Unauthorized") {
                         client.logout(true);
-                        openScreen({ id: "signed_out" });
+                        modalController.push({ type: "signed_out" });
                     } else {
                         setStatus(ClientStatus.DISCONNECTED);
                         openScreen({ id: "error", error });

src/pages/settings/panes/Sessions.tsx

@@ -27,7 +27,7 @@ import {
 } from "@revoltchat/ui";
 
 import { dayjs } from "../../../context/Locale";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { modalController } from "../../../context/modals";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 dayjs.extend(relativeTime);
@@ -43,8 +43,6 @@ export function Sessions() {
     const [attemptingDelete, setDelete] = useState<string[]>([]);
     const history = useHistory();
 
-    const { openScreen } = useIntermediate();
-
     function switchPage(to: string) {
         history.replace(`/settings/${to}`);
     }
@@ -217,32 +215,22 @@ export function Sessions() {
             })}
             <hr />
             <CategoryButton
-                onClick={async () => {
+                onClick={async () =>
-                    openScreen({
+                    modalController.push({
-                        id: "sessions",
+                        type: "sign_out_sessions",
-                        confirm: async () => {
+                        client,
-                            // ! FIXME: add to rAuth
+                        onDeleting: () =>
-                            const del: string[] = [];
+                            setDelete(
-                            render.forEach((session) => {
+                                render
-                                if (deviceId !== session._id) {
+                                    .filter((x) => x._id !== deviceId)
-                                    del.push(session._id);
+                                    .map((x) => x._id),
-                                }
+                            ),
-                            });
+                        onDelete: () =>
-
-                            setDelete(del);
-
-                            for (const id of del) {
-                                await client.api.delete(
-                                    `/auth/session/${id as ""}`,
-                                );
-                            }
-
                             setSessions(
                                 sessions.filter((x) => x._id === deviceId),
-                            );
+                            ),
-                        },
+                    })
-                    });
+                }
-                }}
                 icon={<LogOut size={24} color={"var(--error)"} />}
                 action={"chevron"}
                 description={