user authentication

client/src/App.js

@@ -1,10 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 
-import {
-  Stack,
-  Alert,
-  Snackbar,
-} from "@mui/material";
 
 // routes
 import Router from "./routes";
@@ -13,19 +8,25 @@ import ThemeProvider from "./theme";
 // components
 import ScrollToTop from "./components/scroll-to-top";
 import { StyledChart } from "./components/chart";
+import  ShowAlert  from "./components/alert";
+
 
 import { useSocket } from "./contexts/SocketContext";
+import { SetAlertContext } from "./contexts/AlertContext";
+
+
 
 export default function App() {
   const socket = useSocket();
-  const [wsResponse, setWsResponse] = useState(null);
+  const setAlertContext = useContext(SetAlertContext);
 
   useEffect(() => {
     socket.on("hello", (msg) => {
       console.log("hello", msg);
-      setWsResponse(
-        `Video ${msg.title} HLS conversion completed as ${msg.originalname}`
-      );
+      setAlertContext({
+        type:'success',
+        message: `Video ${msg.title} HLS conversion completed as ${msg.originalname}`
+      });
     });
   }, [socket]);
 
@@ -34,25 +35,7 @@ export default function App() {
       <ScrollToTop />
       <StyledChart />
       <Router />
-      <Stack>
-        <Snackbar
-          open={wsResponse}
-          autoHideDuration={5000}
-          onClose={() => {
-            setWsResponse(null);
-          }}
-          anchorOrigin={{ vertical: "top", horizontal: "center" }}
-        >
-          <Alert
-            onClose={() => {
-              setWsResponse(null);
-            }}
-            severity={"success"}
-          >
-            {wsResponse}
-          </Alert>
-        </Snackbar>
-      </Stack>
+      <ShowAlert />
     </ThemeProvider>
   );
 }

client/src/components/alert/Alert.js

@@ -0,0 +1,51 @@
+// react
+import  {  useContext } from "react";
+
+// @mui
+import {
+    Stack,
+    Alert,
+    Snackbar,
+  } from "@mui/material";
+
+// Context
+import { AlertContext, SetAlertContext } from "../../contexts/AlertContext";
+
+
+// ----------------------------------------------------------------------
+
+
+export default function ShowAlert() {
+
+  const alertContext = useContext(AlertContext);
+  const setAlertContext = useContext(SetAlertContext);
+
+  return (
+      <Stack>
+        <Snackbar
+          open={alertContext.message}
+          autoHideDuration={4000}
+          onClose={() => {
+            setAlertContext({
+              type: '',
+              message: null
+            });
+          }}
+          anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        >
+          <Alert
+            onClose={() => {
+              setAlertContext({
+                type: '',
+                message: null
+              });
+            }}
+            severity={alertContext.type}
+          >
+            {alertContext.message}
+          </Alert>
+        </Snackbar>
+      </Stack>
+  );
+}
+

client/src/components/alert/index.js

@@ -0,0 +1 @@
+export { default } from './Alert';

client/src/contexts/AlertContext.js

@@ -0,0 +1,20 @@
+// react
+import React, { createContext, useState } from "react";
+
+// ----------------------------------------------------------------------
+
+
+export const AlertContext = createContext(null);
+export const SetAlertContext = createContext(null);
+
+export const AlertProvider = ({ children }) => {
+  const [alert, setAlert] = useState({type: null, message: null});
+
+  return (
+    <AlertContext.Provider value={alert}>
+      <SetAlertContext.Provider value={setAlert}>
+        {children}
+      </SetAlertContext.Provider>
+    </AlertContext.Provider>
+  );
+};

client/src/index.js

@@ -3,6 +3,7 @@ import { BrowserRouter } from "react-router-dom";
 import { HelmetProvider } from "react-helmet-async";
 
 import { SocketProvider } from "./contexts/SocketContext";
+import { AlertProvider } from "./contexts/AlertContext";
 
 //
 import App from "./App";
@@ -17,7 +18,9 @@ root.render(
   <HelmetProvider>
     <BrowserRouter>
       <SocketProvider>
-        <App />
+        <AlertProvider>
+          <App />
+        </AlertProvider>
       </SocketProvider>
     </BrowserRouter>
   </HelmetProvider>

client/src/layouts/dashboard/header/AccountPopover.js

@@ -1,10 +1,24 @@
-import { useState } from 'react';
+// react
+import { useState, useContext } 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';
 
+// Context
+import { SetAlertContext } from "../../../contexts/AlertContext";
+
+// other
+import axios from 'axios';
+
+// constants
+import { API_SERVER } from '../../../constants';
+
+
 // ----------------------------------------------------------------------
 
 const MENU_OPTIONS = [
@@ -26,6 +40,8 @@ const MENU_OPTIONS = [
 
 export default function AccountPopover() {
   const [open, setOpen] = useState(null);
+  const setAlertContext = useContext(SetAlertContext);
+  const navigate = useNavigate();
 
   const handleOpen = (event) => {
     setOpen(event.currentTarget);
@@ -35,6 +51,27 @@ export default function AccountPopover() {
     setOpen(null);
   };
 
+
+
+  const handleLogout = async () => {
+    await axios.post(
+      `${API_SERVER}/api/logout`,
+      {},
+      {
+        withCredentials: true,
+      }
+    )
+    .then(function (response){
+      localStorage.removeItem("name");
+      localStorage.removeItem("email");
+      navigate('/login')
+    })
+    .catch(function (error){
+      setAlertContext({type:'error', message: error.response.data.message});
+    });
+
+  };
+
   return (
     <>
       <IconButton
@@ -78,10 +115,10 @@ export default function AccountPopover() {
       >
         <Box sx={{ my: 1.5, px: 2.5 }}>
           <Typography variant="subtitle2" noWrap>
-            {account.displayName}
+            {localStorage.getItem('name')}
           </Typography>
           <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
-            {account.email}
+            {localStorage.getItem('email')}
           </Typography>
         </Box>
 
@@ -97,7 +134,7 @@ export default function AccountPopover() {
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <MenuItem onClick={handleClose} sx={{ m: 1 }}>
+        <MenuItem onClick={handleLogout} sx={{ m: 1 }}>
           Logout
         </MenuItem>
       </Popover>

client/src/pages/LoginPage.js

@@ -1,14 +1,15 @@
 import { Helmet } from 'react-helmet-async';
+import { Link, useLocation } from "react-router-dom";
 // @mui
 import { styled } from '@mui/material/styles';
-import { Link, Container, Typography, Divider, Stack, Button } from '@mui/material';
+import { Container, Typography, Divider, Stack, Button } from '@mui/material';
 // hooks
 import useResponsive from '../hooks/useResponsive';
 // components
 import Logo from '../components/logo';
 import Iconify from '../components/iconify';
 // sections
-import { LoginForm } from '../sections/auth/login';
+import { LoginForm } from '../sections/auth/';
 
 // ----------------------------------------------------------------------
 
@@ -41,6 +42,7 @@ const StyledContent = styled('div')(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function LoginPage() {
+  const location = useLocation();
   const mdUp = useResponsive('up', 'md');
 
   return (
@@ -75,7 +77,7 @@ export default function LoginPage() {
 
             <Typography variant="body2" sx={{ mb: 5 }}>
               Don’t have an account? {''}
-              <Link variant="subtitle2">Get started</Link>
+              <Link to="/registration">Get started</Link>
             </Typography>
 
             <Stack direction="row" spacing={2}>
@@ -98,7 +100,7 @@ export default function LoginPage() {
               </Typography>
             </Divider>
 
-            <LoginForm />
+            <LoginForm location={location}/>
           </StyledContent>
         </Container>
       </StyledRoot>