Added logout button

src/components/layout.js

@@ -115,43 +115,61 @@ export default function Layout({
               </a>
             </div>
             <div className="userStatus">
+              <div className="msgs">
+                <div
+                  onClick={() => {
+                    if (!userSpecificMotd) {
+                      return
+                    }
+                    setShowMotdModal(true)
+                    if (userSpecificMotd.seen) {
+                      return
+                    }
+                    fetch(constants.apiUrl + 'infos', {
+                      method: 'POST',
+                      credentials: 'include',
+                      headers: {
+                        Accept: 'application/json',
+                        'Content-Type': 'application/json',
+                      },
+                      body: JSON.stringify({
+                        userSpecificMotdSeen: true,
+                      }),
+                    })
+                      .then((resp) => {
+                        return resp.json()
+                      })
+                      .then(() => {
+                        refetchGlobalData()
+                      })
+                  }}
+                  style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
+                  title={
+                    userSpecificMotd && !userSpecificMotd.seen
+                      ? "You've got Mail!"
+                      : ''
+                  }
+                >
+                  {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
+                </div>
+                <div title="User ID">UID: {userId || '...'}</div>
+              </div>
               <div
+                className="logout"
                 onClick={() => {
-                  if (!userSpecificMotd) {
+                  fetch(constants.apiUrl + 'logout', {
-                    return
+                    method: 'GET',
-                  }
-                  setShowMotdModal(true)
-                  if (userSpecificMotd.seen) {
-                    return
-                  }
-                  fetch(constants.apiUrl + 'infos', {
-                    method: 'POST',
                     credentials: 'include',
                     headers: {
                       Accept: 'application/json',
                       'Content-Type': 'application/json',
                     },
-                    body: JSON.stringify({
-                      userSpecificMotdSeen: true,
-                    }),
                   })
-                    .then((resp) => {
+                  location.reload()
-                      return resp.json()
-                    })
-                    .then(() => {
-                      refetchGlobalData()
-                    })
                 }}
-                style={{ cursor: userSpecificMotd ? 'pointer' : 'default' }}
-                title={
-                  userSpecificMotd && !userSpecificMotd.seen
-                    ? "You've got Mail!"
-                    : ''
-                }
               >
-                {userSpecificMotd && !userSpecificMotd.seen ? '📬' : '📭'}
+                Logout
               </div>
-              <div>User ID: {userId || '...'}</div>
             </div>
             {showMotdModal ? (
               <Modal

src/defaultStyles.css

@@ -37,6 +37,11 @@ a {
   overflow: auto;
 }
 
+.content {
+  margin-left: 200px;
+  padding: 1px 16px;
+}
+
 .sidebar a {
   display: block;
   color: black;
@@ -55,26 +60,6 @@ a {
   color: white;
 }
 
-.userStatus {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-  margin-top: auto;
-}
-
-.userStatus :first-child {
-  font-size: 35px;
-}
-
-.userStatus > div {
-  margin: 3px 5px;
-}
-
-.content {
-  margin-left: 200px;
-  padding: 1px 16px;
-}
-
 .menuicon div {
   height: 5px;
   background-color: var(--bright-color);
@@ -259,3 +244,34 @@ select {
 select:hover {
   border: 1px solid #99f;
 }
+
+.userStatus {
+  display: flex;
+  margin-top: auto;
+  margin-bottom: 20px;
+
+  align-items: center;
+  justify-content: space-between;
+}
+
+.msgs {
+  display: flex;
+  align-items: center;
+}
+
+.logout {
+  padding: 7px;
+  cursor: pointer;
+}
+
+.logout:hover {
+  color: #fff;
+}
+
+.msgs :first-child {
+  font-size: 35px;
+}
+
+.msgs > div {
+  margin: 0px 5px;
+}