From a9d7fe25614bb746596a9e8dbd34989c6cd116f5 Mon Sep 17 00:00:00 2001
From: Ivan Evans <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 30 Dec 2024 19:36:50 -0700
Subject: [PATCH] add logout all accounts button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

very well coded 👌
---
 src/assets/locales/en.json                    |  7 +++++-
 .../parts/settings/AccountActionsPart.tsx     | 25 +++++++++++++++++++
 src/pages/parts/settings/AccountEditPart.tsx  |  2 +-
 src/pages/parts/settings/DeviceListPart.tsx   | 15 ++++++++++-
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index b7b91de0..dd435377 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -535,7 +535,12 @@
           "text": "This action is irreversible. All data will be deleted and nothing can be recovered.",
           "title": "Delete account"
         },
-        "title": "Actions"
+        "title": "Actions",
+        "logoutAllDevices": {
+          "title": "End All Sessions",
+          "text": "This will sign you out from all devices linked to your account.",
+          "button": "Log Out of All Devices"
+        }
       },
       "devices": {
         "deviceNameLabel": "Device name",
diff --git a/src/pages/parts/settings/AccountActionsPart.tsx b/src/pages/parts/settings/AccountActionsPart.tsx
index f1e50dbf..801ea9b5 100644
--- a/src/pages/parts/settings/AccountActionsPart.tsx
+++ b/src/pages/parts/settings/AccountActionsPart.tsx
@@ -10,6 +10,8 @@ import { useAuthData } from "@/hooks/auth/useAuthData";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useAuthStore } from "@/stores/auth";
 
+import { signOutAllDevices } from "./DeviceListPart";
+
 export function AccountActionsPart() {
   const { t } = useTranslation();
   const url = useBackendUrl();
@@ -29,6 +31,29 @@ export function AccountActionsPart() {
   return (
     <div>
       <Heading2 border>{t("settings.account.actions.title")}</Heading2>
+
+      {/* Logout All Devices Section */}
+      <SolidSettingsCard
+        paddingClass="px-6 py-12 mb-10"
+        className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"
+      >
+        <div>
+          <Heading3>
+            {" "}
+            {t("settings.account.actions.logoutAllDevices.title")}
+          </Heading3>
+          <p className="text-type-text">
+            {t("settings.account.actions.logoutAllDevices.text")}
+          </p>
+        </div>
+        <div className="flex justify-start lg:justify-end items-center">
+          <Button theme="danger" onClick={signOutAllDevices}>
+            {t("settings.account.actions.logoutAllDevices.button")}
+          </Button>
+        </div>
+      </SolidSettingsCard>
+
+      {/* Delete Account Section */}
       <SolidSettingsCard
         paddingClass="px-6 py-12"
         className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"
diff --git a/src/pages/parts/settings/AccountEditPart.tsx b/src/pages/parts/settings/AccountEditPart.tsx
index 31cd7375..3b3bb16f 100644
--- a/src/pages/parts/settings/AccountEditPart.tsx
+++ b/src/pages/parts/settings/AccountEditPart.tsx
@@ -73,7 +73,7 @@ export function AccountEditPart(props: {
               onChange={(value) => props.setDeviceName(value)}
             />
             <div className="flex space-x-3">
-              <Button theme="danger" onClick={logout}>
+              <Button className="logout-button" theme="danger" onClick={logout}>
                 {t("settings.account.accountDetails.logoutButton")}
               </Button>
             </div>
diff --git a/src/pages/parts/settings/DeviceListPart.tsx b/src/pages/parts/settings/DeviceListPart.tsx
index c7326059..6f12d66e 100644
--- a/src/pages/parts/settings/DeviceListPart.tsx
+++ b/src/pages/parts/settings/DeviceListPart.tsx
@@ -13,6 +13,14 @@ import { Heading2 } from "@/components/utils/Text";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useAuthStore } from "@/stores/auth";
 
+export const signOutAllDevices = () => {
+  const buttons = document.querySelectorAll(".logout-button");
+
+  buttons.forEach((button) => {
+    (button as HTMLElement).click();
+  });
+};
+
 export function Device(props: {
   name: string;
   id: string;
@@ -41,7 +49,12 @@ export function Device(props: {
         <p className="text-white">{props.name}</p>
       </div>
       {!props.isCurrent ? (
-        <Button theme="danger" loading={result.loading} onClick={exec}>
+        <Button
+          theme="danger"
+          className="logout-button"
+          loading={result.loading}
+          onClick={exec}
+        >
           {t("settings.account.devices.removeDevice")}
         </Button>
       ) : null}