From e99613e7678a1792ebc77bac286f52414acf5905 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sat, 27 Jan 2024 21:04:09 +0100
Subject: [PATCH] your sessions

---
 public/locales/de/translation.json |  12 ++-
 public/locales/en/translation.json |  12 ++-
 src/Pages/UserProfile/index.js     | 114 ++++++++++++++++++++++++++++-
 src/utils.js                       |   8 ++
 4 files changed, 140 insertions(+), 6 deletions(-)

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
index b26785e..6d2cb02 100644
--- a/public/locales/de/translation.json
+++ b/public/locales/de/translation.json
@@ -270,7 +270,17 @@
       "buttonInfo": "Nachdem Sie Ihr Passwort geändert haben, werden Sie abgemeldet und müssen sich erneut anmelden."
     },
     "yourSessions": {
-      "cardTitle": "Ihre Sitzungen"
+      "cardTitle": "Ihre Sitzungen",
+      "tagCurrentSession": "Aktuelle Sitzung",
+      "tableColumns": {
+        "device": "Gerät",
+        "browser": "Browser",
+        "lastUsed": "Zuletzt verwendet"
+      },
+      "popconfirm": {
+        "title": "Sitzung abmelden",
+        "description": "Möchten Sie diese Sitzung wirklich abmelden?"
+      }
     },
     "deleteAccount": {
       "cardTitle": "Konto löschen"
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index d46db48..6a2b669 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -279,7 +279,17 @@
       }
     },
     "yourSessions": {
-      "cardTitle": "Your sessions"
+      "cardTitle": "Your sessions",
+      "tagCurrentSession": "Current session",
+      "tableColumns": {
+        "device": "Device",
+        "browser": "Browser",
+        "lastUsed": "Last used"
+      },
+      "popconfirm": {
+        "title": "Delete session",
+        "description": "Are you sure you want to delete this session?"
+      }
     },
     "deleteAccount": {
       "cardTitle": "Delete account"
diff --git a/src/Pages/UserProfile/index.js b/src/Pages/UserProfile/index.js
index cc6b1b5..35d4755 100644
--- a/src/Pages/UserProfile/index.js
+++ b/src/Pages/UserProfile/index.js
@@ -2,15 +2,18 @@ import {
   Button,
   Card,
   Form,
+  Popconfirm,
   Select,
   Skeleton,
   Space,
   Switch,
   Tabs,
+  Tag,
   notification,
 } from "antd";
 import {
   EncodeStringToBase64,
+  FormatDatetime,
   handleLogout,
   myFetch,
   showInputsInvalidNotification,
@@ -29,6 +32,7 @@ import {
 } from "../../Components/MyFormInputs";
 import { MySupsenseFallback } from "../../Components/MySupsenseFallback";
 import { useSideBarContext } from "../../Contexts/SideBarContext";
+import MyTable from "../../Components/MyTable";
 
 const globalRequestStatePreview = {
   global: RequestState.INIT,
@@ -472,11 +476,113 @@ function ChangePassword({
 }
 
 function YourSessions() {
-  useEffect(() => {
-    console.log("your sessions");
-  }, []);
+  const { t } = useTranslation();
 
-  return <h1>Test</h1>;
+  const [isRequesting, setIsRequesting] = useState(true);
+  const [requestData, setRequestData] = useState({
+    sessions: [],
+    currentSession: "",
+  });
+
+  const getTableColumns = () => {
+    return [
+      {
+        title: t("userProfile.yourSessions.tableColumns.device"),
+        dataIndex: "device",
+        key: "device",
+      },
+      {
+        title: t("userProfile.yourSessions.tableColumns.browser"),
+        dataIndex: "browser",
+        key: "browser",
+      },
+      {
+        title: t("userProfile.yourSessions.tableColumns.lastUsed"),
+        dataIndex: "last_used",
+        key: "last_used",
+      },
+      {
+        title: t("common.action"),
+        dataIndex: "actions",
+        key: "actions",
+      },
+    ];
+  };
+
+  const getTableItems = () => {
+    return requestData.sessions.map((item) => {
+      return {
+        key: item.id,
+        device: item.os,
+        browser: item.browser,
+        last_used: (
+          <Space>
+            {FormatDatetime(item.last_used)}
+            {requestData.currentSession === item.id && (
+              <Tag color="green">
+                {t("userProfile.yourSessions.tagCurrentSession")}
+              </Tag>
+            )}
+          </Space>
+        ),
+        actions: (
+          <Popconfirm
+            title={t("userProfile.yourSessions.popconfirm.title")}
+            description={t("userProfile.yourSessions.popconfirm.description")}
+            onConfirm={() => {
+              setIsRequesting(true);
+
+              myFetch({
+                url: `/user/profile/sessions/${item.id}`,
+                method: "DELETE",
+              })
+                .then(() => {
+                  setIsRequesting(false);
+
+                  // If the current session is deleted, reload the page
+                  if (item.id === requestData.currentSession) {
+                    window.location.reload();
+                  }
+
+                  requestSessions();
+                })
+                .catch(() => setIsRequesting(false));
+            }}
+            okText={t("common.button.logout")}
+            cancelText={t("common.button.cancel")}
+          >
+            <Button type="link">{t("common.button.delete")}</Button>
+          </Popconfirm>
+        ),
+      };
+    });
+  };
+
+  const requestSessions = () => {
+    setIsRequesting(true);
+
+    myFetch({
+      url: "/user/profile/sessions",
+      method: "GET",
+    })
+      .then((res) => {
+        setIsRequesting(false);
+        setRequestData(res);
+      })
+      .catch(() => setIsRequesting(false));
+  };
+
+  useEffect(() => requestSessions(), []);
+
+  return (
+    <MyTable
+      props={{
+        loading: isRequesting,
+        columns: getTableColumns(),
+        dataSource: getTableItems(),
+      }}
+    />
+  );
 }
 
 function DeleteAccount() {
diff --git a/src/utils.js b/src/utils.js
index 0c9c8fe..df90e1b 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -251,3 +251,11 @@ export function handleLogout({ setUserSession }) {
   setUserSession();
   window.location.href = "/";
 }
+
+export function FormatDatetime(datetime) {
+  if (datetime === undefined || datetime === "0001-01-01T00:00:00Z") {
+    return Constants.TEXT_EMPTY_PLACEHOLDER;
+  }
+
+  return new Date(datetime).toLocaleString("de-DE");
+}