feat: add logout page

i18n/en_US.yaml

@@ -534,6 +534,7 @@ ui:
     http_404: HTTP Error 404
     http_50X: HTTP Error 500
     http_403: HTTP Error 403
+    logout: Log Out
   notifications:
     title: Notifications
     inbox: Inbox

ui/src/components/Header/components/NavItems/index.tsx

@@ -30,7 +30,7 @@ import { userCenterStore } from '@/stores';
 interface Props {
   redDot: Type.NotificationStatus | undefined;
   userInfo: Type.UserInfoRes;
-  logOut: () => void;
+  logOut: (e) => void;
 }
 
 const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
@@ -111,7 +111,7 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
             {t('header.nav.setting')}
           </Dropdown.Item>
           <Dropdown.Divider />
-          <Dropdown.Item onClick={logOut}>
+          <Dropdown.Item href="/users/logout" onClick={(e) => logOut(e)}>
             {t('header.nav.logout')}
           </Dropdown.Item>
         </Dropdown.Menu>

ui/src/components/Header/index.tsx

@@ -94,7 +94,8 @@ const Header: FC = () => {
     navigate(searchUrl);
   };
 
-  const handleLogout = async () => {
+  const handleLogout = async (evt) => {
+    evt.preventDefault();
     await logout();
     clearUserStore();
     window.location.replace(window.location.href);
@@ -167,7 +168,11 @@ const Header: FC = () => {
           {/* mobile nav */}
           <div className="d-flex lg-none align-items-center flex-lg-nowrap">
             {user?.username ? (
-              <NavItems redDot={redDot} userInfo={user} logOut={handleLogout} />
+              <NavItems
+                redDot={redDot}
+                userInfo={user}
+                logOut={(e) => handleLogout(e)}
+              />
             ) : (
               <>
                 <Button

ui/src/pages/Users/Logout/index.tsx

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { Spinner } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+
+import { usePageTags } from '@/hooks';
+import { logout } from '@/services';
+import { loggedUserInfoStore } from '@/stores';
+import Storage from '@/utils/storage';
+import { RouteAlias } from '@/router/alias';
+import { REDIRECT_PATH_STORAGE_KEY } from '@/common/constants';
+
+const Index = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'page_title' });
+  const { user: loggedUserInfo, clear: clearUserStore } = loggedUserInfoStore();
+
+  usePageTags({
+    title: t('logout'),
+  });
+
+  useEffect(() => {
+    if (loggedUserInfo.username) {
+      logout().then(() => {
+        clearUserStore();
+        const redirect =
+          Storage.get(REDIRECT_PATH_STORAGE_KEY) || RouteAlias.home;
+        Storage.remove(REDIRECT_PATH_STORAGE_KEY);
+        window.location.replace(`${window.location.origin}${redirect}`);
+      });
+    }
+    // auto height of container
+    const pageWrap = document.querySelector('.page-wrap') as HTMLElement;
+    if (pageWrap) {
+      pageWrap.style.display = 'contents';
+    }
+
+    return () => {
+      if (pageWrap) {
+        pageWrap.style.display = 'block';
+      }
+    };
+  }, []);
+  return (
+    <div className="d-flex flex-column flex-shrink-1 flex-grow-1 justify-content-center align-items-center">
+      <Spinner variant="secondary" />
+    </div>
+  );
+};
+
+export default Index;

ui/src/router/routes.ts

@@ -243,6 +243,13 @@ const routes: RouteNode[] = [
           return notLogged;
         },
       },
+      {
+        path: 'users/logout',
+        page: 'pages/Users/Logout',
+        guard: () => {
+          return guard.loggedRedirectHome();
+        },
+      },
       {
         path: 'users/account-recovery',
         page: 'pages/Users/AccountForgot',

ui/src/utils/guard.ts

@@ -163,6 +163,16 @@ export const logged = () => {
   return gr;
 };
 
+export const loggedRedirectHome = () => {
+  const gr: TGuardResult = { ok: true };
+  const us = deriveLoginState();
+  if (!us.isLogged) {
+    gr.ok = false;
+    gr.redirect = RouteAlias.home;
+  }
+  return gr;
+};
+
 export const notLogged = () => {
   const gr: TGuardResult = { ok: true };
   const us = deriveLoginState();