feat: logout mechanism implemented (foyzulkarim#35)

aninda052 · Sep 13, 2023 · 5a33ea5 · 5a33ea5
1 parent b51451b
commit 5a33ea5
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 14 deletions.
diff --git a/client/src/layouts/dashboard/header/AccountPopover.js b/client/src/layouts/dashboard/header/AccountPopover.js
@@ -1,10 +1,21 @@
+// react
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
 // @mui
 import { alpha } from '@mui/material/styles';
 import { Box, Divider, Typography, Stack, MenuItem, Avatar, IconButton, Popover } from '@mui/material';
+
 // mocks_
 import account from '../../../_mock/account';
 
+// other
+import axios from 'axios';
+
+// constants
+import { API_SERVER } from '../../../constants';
+
+
 // ----------------------------------------------------------------------
 
 const MENU_OPTIONS = [
@@ -26,6 +37,7 @@ const MENU_OPTIONS = [
 
 export default function AccountPopover() {
   const [open, setOpen] = useState(null);
+  const navigate = useNavigate();
 
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
@@ -35,6 +47,25 @@ export default function AccountPopover() {
     setOpen(null);
   };
 
+
+
+  const handleLogout = async () => {
+    await axios.post(
+      `${API_SERVER}/api/logout`,
+      {},
+      {
+        withCredentials: true,
+      }
+    )
+    .then(function (response){
+      navigate('/login')
+    })
+    .catch(function (error){
+      console.log(error)
+    });
+
+  };
+
   return (
     <>
       <IconButton
@@ -97,7 +128,7 @@ export default function AccountPopover() {
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <MenuItem onClick={handleClose} sx={{ m: 1 }}>
+        <MenuItem onClick={handleLogout} sx={{ m: 1 }}>
           Logout
         </MenuItem>
       </Popover>

diff --git a/client/src/pages/VideosPage.js b/client/src/pages/VideosPage.js
@@ -1,21 +1,29 @@
+// react
 import { Helmet } from 'react-helmet-async';
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import axios from 'axios';
-
 // @mui
 import { Container, Stack, Typography } from '@mui/material';
+
 // components
 import {
   VideoSort,
   VideoList,
   ProductCartWidget,
   ProductFilterSidebar,
 } from '../sections/@dashboard/products';
-import { API_SERVER } from '../constants';
+
+// page
 import  ShowAlert  from '../pages/alert'
 
+// other
+import axios from 'axios';
+
+// constants
+import { API_SERVER } from '../constants';
+
+
 // ----------------------------------------------------------------------
 
 export default function ProductsPage() {
@@ -63,13 +71,13 @@ export default function ProductsPage() {
   return (
     <>
       <Helmet>
-        <title> Dashboard: Products | Minimal UI </title>
+        <title> Dashboard: Videos </title>
       </Helmet>
       <ShowAlert data={{alertType, alertMessage, setAlertMessage}} />
 
       <Container>
         <Typography variant='h4' sx={{ mb: 5 }}>
-          Products
+          Videos
         </Typography>
 
         <Stack

diff --git a/client/src/sections/auth/LoginForm.js b/client/src/sections/auth/LoginForm.js
@@ -50,7 +50,7 @@ export default function LoginForm() {
     .then(function (response){
       setAlertType('success');
       setAlertMessage('Login Successful');
-      setTimeout(() => navigate('/videos'), 2000);
+      setTimeout(() => navigate('/videos'), 1000);
     })
     .catch(function (error){
       setAlertType('error');

diff --git a/client/src/sections/auth/RegistrationForm.js b/client/src/sections/auth/RegistrationForm.js
@@ -52,7 +52,6 @@ export default function RegistrationForm() {
     await axios.post(`${API_SERVER}/api/registration`,
       values,
       {
-        withCredentials: true,
         headers: {
           'Content-Type': 'application/json'
         }
@@ -64,11 +63,16 @@ export default function RegistrationForm() {
       setTimeout(() => navigate('/login'), 2000);
     })
     .catch(function (errors){
-      setAlertType('error');
-      setAlertMessage('Something went wrong');
-      errors.response.data.message.details.forEach((error) => {
-        setFieldError(error.context.key, error.message)
-      })
+      if(errors.response.data.message.details){
+        errors.response.data.message.details.forEach((error) => {
+          setFieldError(error.context.key, error.message)
+        })
+      }
+      else{
+        setAlertType('error');
+        setAlertMessage('Something went wrong');
+      }
+
     });
 
   };

diff --git a/server/src/modules/authentication/controller.js b/server/src/modules/authentication/controller.js
@@ -1,6 +1,6 @@
 const { loginValidate, authenticate } = require('./request');
 const { generateJwtToken } = require('./utils');
-const { setCookie } = require('../../utils/cookie')
+const { setCookie, removeCookie } = require('../../utils/cookie')
 
 const setupRoutes = (app) => {
 
@@ -43,6 +43,15 @@ const setupRoutes = (app) => {
 
   });
 
+  app.post('/api/logout', async (req, res) => {
+
+    removeCookie(res, 'Bearer')
+    return res
+      .status(200)
+      .json({ message:'logout successful'});
+
+  });
+
 };