feat(sessions): Add confirmation prompt (#575)

Reopening of issue #572
Fixes issue #42
Translations added on PR 31 of revolt/translations

Co-authored-by: Paul Makles <paulmakles@gmail.com>

src/context/intermediate/Intermediate.tsx

@@ -24,6 +24,7 @@ export type Screen =
     | { id: "clipboard"; text: string }
     | { id: "token_reveal"; token: string; username: string }
     | { id: "external_link_prompt"; link: string }
+    | { id: "sessions", confirm: () => void }
     | {
           id: "_prompt";
           question: Children;

src/context/intermediate/Modals.tsx

@@ -9,7 +9,8 @@ import { InputModal } from "./modals/Input";
 import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
-import {ExternalLinkModal} from "./modals/ExternalLinkPrompt";
+import { ExternalLinkModal} from "./modals/ExternalLinkPrompt";
+import { SessionsModal } from "./modals/SessionsPrompt";
 import { TokenRevealModal } from "./modals/TokenReveal";
 
 export interface Props {
@@ -40,6 +41,8 @@ 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/intermediate/modals/SessionsPrompt.tsx

@@ -0,0 +1,38 @@
+import { Text } from "preact-i18n";
+
+import Modal from "../../../components/ui/Modal";
+
+interface Props {
+    onClose: () => void;
+    confirm: () => void;
+}
+
+export function SessionsModal({ onClose, confirm}: Props) {
+    return (
+        <Modal
+        visible={true}
+        onClose={onClose}
+        title={<Text id={"app.special.modals.sessions.title"} />}
+        actions={[
+            {
+                onClick: () => {
+                    onClose()
+                },
+                confirmation: true,
+                contrast: true,
+                accent: true,
+                children: <Text id="app.special.modals.actions.back"/>
+            },
+            {
+                onClick: () => {
+                    confirm()
+                    onClose()
+                },
+                confirmation: true,
+                children: <Text id="app.special.modals.sessions.accept"/>
+            }
+        ]}>
+        <Text id="app.special.modals.sessions.short" /> <br />
+        </Modal>
+    )   
+} 

src/pages/settings/panes/Sessions.tsx

@@ -20,6 +20,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import { dayjs } from "../../../context/Locale";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import Button from "../../../components/ui/Button";
 import Preloader from "../../../components/ui/Preloader";
@@ -39,6 +40,8 @@ export function Sessions() {
     const [attemptingDelete, setDelete] = useState<string[]>([]);
     const history = useHistory();
 
+    const { openScreen } = useIntermediate();
+
     function switchPage(to: string) {
         history.replace(`/settings/${to}`);
     }
@@ -212,21 +215,26 @@ export function Sessions() {
             <hr />
             <CategoryButton
                 onClick={async () => {
-                    // ! FIXME: add to rAuth
-                    const del: string[] = [];
-                    render.forEach((session) => {
-                        if (deviceId !== session._id) {
-                            del.push(session._id);
+                    openScreen({
+                        id: "sessions",
+                        confirm: async () => {
+                            // ! FIXME: add to rAuth
+                            const del: string[] = [];
+                            render.forEach((session) => {
+                                if (deviceId !== session._id) {
+                                    del.push(session._id);
+                                }
+                            });
+
+                            setDelete(del);
+
+                            for (const id of del) {
+                                await client.api.delete(`/auth/session/${id as ""}`);
+                            }
+
+                            setSessions(sessions.filter((x) => x._id === deviceId));
                         }
-                    });
-
-                    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"}
@@ -247,3 +255,4 @@ export function Sessions() {
         </div>
     );
 }
+