moved logout button to user profile

public/locales/de/translation.json

@@ -394,6 +394,13 @@
           "title": "Name für den neuen API-Schlüssel",
           "okText": "Erstellen"
         }
+      },
+      "logout": {
+        "title": "Abmelden",
+        "popconfirm": {
+          "title": "Sind Sie sicher, dass Sie sich abmelden wollen?",
+          "description": "Sie werden von allen Geräten abgemeldet"
+        }
       }
     },
     "icon": { "viewApiDoc": "Api-Dokumentation anschauen" },

public/locales/en/translation.json

@@ -406,7 +406,6 @@
       "repeatNewPassword": "Repeat new password",
       "language": "Language"
     },
-
     "button": {
       "createApiKey": {
         "title": "Create New API Key",
@@ -414,6 +413,13 @@
           "title": "Name for the new API key",
           "okText": "Create"
         }
+      },
+      "logout": {
+        "title": "Logout",
+        "popconfirm": {
+          "title": "Are you sure you want to logout?",
+          "description": "You will be logged out of all sessions"
+        }
       }
     },
     "icon": { "viewApiDoc": "View API Documentation" },

src/App.js

@@ -19,6 +19,7 @@ import ScannerProvider from "./Contexts/ScannerContext";
 export default function App() {
   const [notificationApi, notificationContextHolder] =
     notification.useNotification();
+
   const { userSession, setUserSession } = UseUserSession();
   const [isWebSocketReady, setIsWebSocketReady] = useState(false);
 

src/Components/AppRoutes/index.js

@@ -48,7 +48,7 @@ function SuspenseFallback({ children }) {
   );
 }
 
-export default function AppRoutes() {
+export default function AppRoutes({ userSession, setUserSession }) {
   const appContext = useAppContext();
 
   console.info("appRoutes");
@@ -178,7 +178,10 @@ export default function AppRoutes() {
         path={Constants.ROUTE_PATHS.USER_PROFILE}
         element={
           <SuspenseFallback>
-            <UserProfile />
+            <UserProfile
+              userSession={userSession}
+              setUserSession={setUserSession}
+            />
           </SuspenseFallback>
         }
       />

src/Components/DashboardLayout/index.js

@@ -47,8 +47,6 @@ export default function DashboardLayout({ userSession, setUserSession }) {
           >
             <Content
               setIsSideMenuCollapsed={setIsSideMenuCollapsed}
-              userSession={userSession}
-              setUserSession={setUserSession}
               contentFirstRender={contentFirstRender}
             />
           </SideMenuDesktop>
@@ -59,8 +57,6 @@ export default function DashboardLayout({ userSession, setUserSession }) {
           >
             <Content
               setIsSideMenuCollapsed={setIsSideMenuCollapsed}
-              userSession={userSession}
-              setUserSession={setUserSession}
               contentFirstRender={contentFirstRender}
             />
           </SideMenuMobile>
@@ -69,6 +65,8 @@ export default function DashboardLayout({ userSession, setUserSession }) {
         <PageContent
           isSideMenuCollapsed={isSideMenuCollapsed}
           setIsSideMenuCollapsed={setIsSideMenuCollapsed}
+          userSession={userSession}
+          setUserSession={setUserSession}
         />
       </Layout>
     </Layout>

src/Components/PageContent/index.js

@@ -7,6 +7,8 @@ import { BreakpointLgWidth } from "../../utils";
 export default function PageContent({
   isSideMenuCollapsed,
   setIsSideMenuCollapsed,
+  userSession,
+  setUserSession,
 }) {
   return (
     <Layout
@@ -28,7 +30,7 @@ export default function PageContent({
           padding: 12,
         }}
       >
-        <AppRoutes />
+        <AppRoutes userSession={userSession} setUserSession={setUserSession} />
       </Content>
     </Layout>
   );

src/Components/SideMenu/index.js

@@ -5,7 +5,6 @@ import {
   DesktopOutlined,
   FileTextOutlined,
   HistoryOutlined,
-  LogoutOutlined,
   RobotOutlined,
   ScanOutlined,
   SettingOutlined,
@@ -32,8 +31,6 @@ import { useWebSocketContext } from "../../Contexts/WebSocketContext";
 import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";
 
 export function SideMenuContent({
-  userSession,
-  setUserSession,
   setIsSideMenuCollapsed,
   contentFirstRender,
 }) {
@@ -267,23 +264,6 @@ export function SideMenuContent({
         label: ` ${sideBarContext.username}`,
         icon: <MyUserAvatar avatar={sideBarContext.avatar} />,
         key: Constants.ROUTE_PATHS.USER_PROFILE,
-      },
-      {
-        label: t("sideMenu.logout"),
-        icon: <LogoutOutlined />,
-        key: "/logout",
-        onClick: () => {
-          setUserSession();
-          window.location.href = "/";
-
-          fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-              "X-Authorization": userSession,
-            },
-          }).catch(console.error);
-        },
       }
     );
 

src/Contexts/RoboticsRobot.js

@@ -1,37 +0,0 @@
-import { createContext, useContext, useState } from "react";
-
-const preview = {
-  robots: [],
-  robotsTotalPages: 0,
-  unauthorizedRobots: [],
-  unauthorizedRobotsTotalPages: 0,
-};
-
-const RoboticsRobot = createContext(preview);
-
-export const useRoboticsRobotContext = () => useContext(RoboticsRobot);
-
-export function RoboticsRobotProvider({ children }) {
-  const [robots, setRobots] = useState([]);
-  const [robotsTotalPages, setRobotsTotalPages] = useState(0);
-  const [unauthorizedRobots, setUnauthorizedRobots] = useState([]);
-  const [unauthorizedRobotsTotalPages, setUnauthorizedRobotsTotalPages] =
-    useState(0);
-
-  return (
-    <RoboticsRobot.Provider
-      value={{
-        robots,
-        setRobots,
-        robotsTotalPages,
-        setRobotsTotalPages,
-        unauthorizedRobots,
-        setUnauthorizedRobots,
-        unauthorizedRobotsTotalPages,
-        setUnauthorizedRobotsTotalPages,
-      }}
-    >
-      {children}
-    </RoboticsRobot.Provider>
-  );
-}

src/Pages/UserProfile/index.js

@@ -35,6 +35,7 @@ import {
   FileTextOutlined,
   InfoCircleOutlined,
   KeyOutlined,
+  LogoutOutlined,
   NotificationOutlined,
 } from "@ant-design/icons";
 import { MyUserAvatar } from "../../Components/MyAvatar";
@@ -49,7 +50,7 @@ import {
   MyShowHiddenIcon,
 } from "../../Components/MyIcon";
 
-export default function UserProfile() {
+export default function UserProfile({ userSession, setUserSession }) {
   const webSocketContext = useWebSocketContext();
   const appContext = useAppContext();
   const sideBarContext = useSideBarContext();
@@ -524,6 +525,33 @@ export default function UserProfile() {
               <Form.Item label={t("userProfile.telegram.title")}>
                 <TelegramNotificationSubscribedStatusItem />
               </Form.Item>
+
+              <Form.Item label={t("userProfile.button.logout.title")}>
+                <Popconfirm
+                  title={t("userProfile.button.logout.popconfirm.title")}
+                  description={t(
+                    "userProfile.button.logout.popconfirm.description"
+                  )}
+                  okText={t("common.button.confirm")}
+                  cancelText={t("common.button.cancel")}
+                  onConfirm={() => {
+                    setUserSession();
+                    window.location.href = "/";
+
+                    fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
+                      method: "DELETE",
+                      headers: {
+                        "Content-Type": "application/json",
+                        "X-Authorization": userSession,
+                      },
+                    }).catch(console.error);
+                  }}
+                >
+                  <Button block icon={<LogoutOutlined />}>
+                    {t("userProfile.button.logout.title")}
+                  </Button>
+                </Popconfirm>
+              </Form.Item>
             </Col>
           </Row>
 

src/utils.js

@@ -232,6 +232,7 @@ export function GetUuid() {
 /**
  * user session
  */
+
 export function UseUserSession() {
   const getUserSession = () => {
     return getUserSessionFromLocalStorage();