th-263: Log out implementation (#293)

* th-263: + logout route

* th-263: + logout action and api method

* th-263: + handle log out click in burger menu

* th-263: - removed redirect

* th-263: - removed unused variable

* th-263: * updates burger menu component

* th-263: * maked label optional for button component

* th-263: * changed passwordEye background to transparent

---------

Co-authored-by: Alina Kupchyk <[email protected]>

Author: h0wter

backend/src/packages/auth/auth.controller.ts

@@ -83,6 +83,18 @@ class AuthController extends Controller {
           }>,
         ),
     });
+
+    this.addRoute({
+      path: AuthApiPath.LOGOUT,
+      method: 'GET',
+      authStrategy: AuthStrategy.VERIFY_JWT,
+      handler: (options) =>
+        this.logOut(
+          options as ApiHandlerOptions<{
+            user: UserEntityObjectWithGroupT;
+          }>,
+        ),
+    });
   }
 
   private async signUpCustomer(
@@ -131,6 +143,17 @@ class AuthController extends Controller {
       payload: await this.authService.getCurrent(options.user),
     };
   }
+
+  private async logOut(
+    options: ApiHandlerOptions<{
+      user: UserEntityObjectWithGroupT;
+    }>,
+  ): Promise<ApiHandlerResponse> {
+    return {
+      status: HttpCode.NO_CONTENT,
+      payload: await this.authService.logOut(options.user),
+    };
+  }
 }
 
 export { AuthController };

backend/src/packages/auth/auth.service.ts

@@ -223,6 +223,10 @@ class AuthService {
     return user;
   }
 
+  public async logOut(user: UserEntityObjectWithGroupT): Promise<void> {
+    return await this.userService.removeAccessToken(user.id);
+  }
+
   public async generateAccessTokenAndUpdateUser(
     userId: UserEntityT['id'],
   ): Promise<UserEntityObjectT> {

backend/src/packages/users/user.service.ts

@@ -146,6 +146,10 @@ class UserService implements IService<UserEntityObjectT> {
 
     return UserEntity.initialize(result).toObject();
   }
+
+  public async removeAccessToken(id: UserEntityT['id']): Promise<void> {
+    await this.userRepository.update(id, { accessToken: null });
+  }
 }
 
 export { UserService };

frontend/src/libs/components/burger-menu/burger-menu.tsx

@@ -1,6 +1,7 @@
-import { IconName } from '~/libs/enums/enums.js';
+import { BurgerMenuItemsName, IconName } from '~/libs/enums/enums.js';
 import { getValidClassNames } from '~/libs/helpers/helpers.js';
 import {
+  useAppDispatch,
   useCallback,
   useEffect,
   useLocation,
@@ -9,6 +10,7 @@ import {
   useState,
 } from '~/libs/hooks/hooks.js';
 import { type BurgerMenuItem } from '~/libs/types/types.js';
+import { actions as authActions } from '~/slices/auth/auth.js';
 
 import { Button, Icon } from '../components.js';
 import styles from './styles.module.scss';
@@ -21,6 +23,7 @@ const BurgerMenu: React.FC<Properties> = ({ burgerItems }: Properties) => {
   const [isOpen, setIsOpen] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
+  const dispatch = useAppDispatch();
 
   const menuReference = useRef<HTMLDivElement | null>(null);
 
@@ -29,10 +32,17 @@ const BurgerMenu: React.FC<Properties> = ({ burgerItems }: Properties) => {
   }, [isOpen]);
 
   const handleNavigate = useCallback(
-    (navigateTo: string) => () => navigate(navigateTo),
+    (navigateTo: string) => () => {
+      navigate(navigateTo);
+    },
     [navigate],
   );
 
+  const handleLogOutClick = useCallback(
+    () => dispatch(authActions.logOut()),
+    [dispatch],
+  );
+
   useEffect(() => {
     setIsOpen(false);
   }, [location]);
@@ -67,22 +77,28 @@ const BurgerMenu: React.FC<Properties> = ({ burgerItems }: Properties) => {
       {isOpen && (
         <div className={styles.menu}>
           <ul>
-            {burgerItems.map((item, index) => (
-              <li key={index}>
-                <Icon
-                  iconName={item.icon}
-                  onClick={handleNavigate(item.navigateTo)}
-                  className={styles.menuIcon}
-                />
-                <Button
-                  frontIcon={item.icon}
-                  isFullWidth
-                  label={item.name}
-                  onClick={handleNavigate(item.navigateTo)}
-                  className={styles.btn}
-                />
-              </li>
-            ))}
+            {burgerItems.map((item, index) => {
+              const clickHandler =
+                item.name === BurgerMenuItemsName.LOG_OUT
+                  ? handleLogOutClick
+                  : handleNavigate(item.navigateTo);
+
+              return (
+                <li key={index}>
+                  <Button
+                    frontIcon={item.icon}
+                    onClick={clickHandler}
+                    className={styles.menuIcon}
+                  />
+                  <Button
+                    frontIcon={item.icon}
+                    label={item.name}
+                    onClick={clickHandler}
+                    className={styles.btn}
+                  />
+                </li>
+              );
+            })}
           </ul>
         </div>
       )}

frontend/src/libs/components/burger-menu/styles.module.scss

@@ -27,18 +27,29 @@
 
   .btn {
     justify-content: start;
+    width: 100%;
     background-color: $blue-dark;
     border-radius: 0;
 
-    &:hover {
+    &:hover,
+    &:active,
+    &:focus {
       background-color: $blue;
     }
   }
 
   .menuIcon {
     width: 100%;
+    padding: 10px 20px;
     color: $white;
     font-size: 24px;
+    background-color: $blue-dark;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $blue;
+    }
   }
 }
 
@@ -50,23 +61,17 @@
     .btn {
       display: none;
     }
-
-    li {
-      padding: 10px 20px;
-
-      &:hover {
-        background-color: $blue;
-      }
-    }
   }
 }
 
 @media (width > $screen-size-lg) {
-  .btn {
-    display: inline-flex;
-  }
+  .menu {
+    .btn {
+      display: inline-flex;
+    }
 
-  .menuIcon {
-    display: none;
+    .menuIcon {
+      display: none;
+    }
   }
 }

frontend/src/libs/components/button/button.tsx

@@ -7,7 +7,7 @@ import styles from './styles.module.scss';
 
 type Properties = {
   className?: Parameters<typeof getValidClassNames>[0];
-  label: string | number;
+  label?: string | number;
   type?: 'button' | 'submit';
   size?: 'sm' | 'md';
   variant?: 'contained' | 'outlined' | 'text';
@@ -24,7 +24,7 @@ const Button: React.FC<Properties> = ({
   type = 'button',
   size = 'md',
   variant = 'contained',
-  label,
+  label = '',
   isDisabled = false,
   isFullWidth = false,
   frontIcon,

frontend/src/libs/components/input/styles.module.scss

@@ -87,7 +87,7 @@ $error-message-height: calc($error-font-size * $line-height-coefficient);
   top: 8px;
   right: 10px;
   color: $grey-dark;
-  background-color: $white;
+  background-color: transparent;
   border: 0;
   cursor: pointer;
   user-select: none;

frontend/src/libs/enums/breakpoint.ts

@@ -1,5 +1,4 @@
 export { AppRoute } from './app-route.enum.js';
-export { Breakpoint } from './breakpoint.js';
 export { BurgerMenuItemsName } from './burger-menu-items-name.enum.js';
 export { DataStatus } from './data-status.enum.js';
 export { FormLabel, FormName } from './form.enum.js';

frontend/src/libs/enums/enums.ts

@@ -77,6 +77,14 @@ class AuthApi extends HttpApi {
       CustomerSignUpResponseDto | BusinessSignUpResponseDto
     >();
   }
+
+  public async logOut(): Promise<unknown> {
+    return await this.load(this.getFullEndpoint(AuthApiPath.LOGOUT, {}), {
+      method: 'GET',
+      contentType: ContentType.JSON,
+      hasAuth: true,
+    });
+  }
 }
 
 export { AuthApi };