Update logout

HoaAyWK · Nov 5, 2022 · d97879b · d97879b
1 parent e676b13
commit d97879b
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 68 deletions.
diff --git a/src/components/Page.jsx b/src/components/Page.jsx
@@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet-async';
 const Page = forwardRef(({ children, title = '', meta, ...other }, ref) => (
     <>
         <Helmet>
-            <title>{`${title} | Minimal-UI`}</title>
+            <title>{`${title} | HTX Freelancer`}</title>
             {meta}
         </Helmet>
 

diff --git a/src/features/auth/authSlice.js b/src/features/auth/authSlice.js
@@ -106,7 +106,12 @@ const authSlice = createSlice({
         logout: (state, action) => {
             state.user = null;
             state.isAuthenticated = false;
-            localStorage.setItem('user', JSON.stringify(null));
+            state.status = action_status.IDLE;
+            state.updated = false;
+            state.changedPassword = false;
+            state.updateStatus = action_status.IDLE;
+            state.changedPasswordStatus = action_status.IDLE;
+            localStorage.setItem('user', null);
         }
     },
     extraReducers: (builder) => {

diff --git a/src/features/auth/login/LoginForm.jsx b/src/features/auth/login/LoginForm.jsx
@@ -1,18 +1,41 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { styled } from '@mui/material/styles';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Link, Stack, IconButton, InputAdornment  } from '@mui/material';
+import { Alert, Link, Stack, IconButton, InputAdornment  } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 import * as Yup from 'yup';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { login } from '../../../features/auth/authSlice';
 import Iconify from '../../../components/Iconify';
 import { FormProvider, RHFTextField, RHFCheckbox } from '../../../components/hook-form';
+import { clearMessage } from '../../message/messageSlice';
+import { action_status } from '../../../app/constants';
+
+const AlertStyle = styled(Alert)(({ theme }) => ({
+    paddingBlock: theme.spacing(0),
+    marginBlockStart: theme.spacing(1)
+}));
 
 const LoginForm = () => {
     const dispatch = useDispatch();
+    const [hiddenAlert, setHiddenAlert] = useState(0);
     const [showPassword, setShowPassword] = useState(false);
+    const { message } = useSelector((state) => state.message);
+    const { status } = useSelector((state) => state.auth);
+
+    useEffect(() => {
+        dispatch(clearMessage());
+    }, [dispatch])
+
+    useEffect(() => {
+        if (message && status === action_status.FAILED) {
+            setHiddenAlert(1);
+        } else {
+            setHiddenAlert(0);
+        }
+    }, [status, message])
 
     const LoginSchema = Yup.object().shape({
         email: Yup.string().email('Email must be a valid email address').required('Email is required'),
@@ -32,12 +55,9 @@ const LoginForm = () => {
 
     const {
         handleSubmit,
-        formState: { isSubmitting },
     } = methods;
 
     const onSubmit = async (data) => {
-
-        console.log(data);
         dispatch(login(data));
     };
 
@@ -61,15 +81,22 @@ const LoginForm = () => {
                     }}
                 />
             </Stack>
-
-            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
+            <AlertStyle
+                variant='filled'
+                severity='error'
+                sx={{ opacity: `${hiddenAlert}` }}
+                onClose={() => setHiddenAlert(0)}
+            >
+                {message}
+            </AlertStyle>
+            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 2 }}>
                 <RHFCheckbox name="remember" label="Remember me" />
                 <Link variant="subtitle2" underline="hover">
                     Forgot password?
                 </Link>
             </Stack>
 
-            <LoadingButton fullWidth size="large" type="submit" variant="contained" loading={isSubmitting}>
+            <LoadingButton fullWidth size="large" type="submit" variant="contained" loading={status === action_status.LOADING ? true : false}>
                 Login
             </LoadingButton>
         </FormProvider>

diff --git a/src/layouts/dashboard/AccountPopover.jsx b/src/layouts/dashboard/AccountPopover.jsx
@@ -1,9 +1,11 @@
 import React, { useState, useRef } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { alpha } from '@mui/material/styles';
 import { Box, Divider, Typography, Stack, MenuItem, Avatar, IconButton } from '@mui/material';
+import { useDispatch } from 'react-redux';
 
 import MenuPopover from '../../components/MenuPopover';
+import { logout } from '../../features/auth/authSlice';
 
 const MENU_OPTIONS = [
     {
@@ -19,9 +21,10 @@ const MENU_OPTIONS = [
 ];
 
 const AccountPopover = ({ user }) => {
-    // const { user } = useSelector((state) => state.auth);
     const anchorRef = useRef(null);
     const [open, setOpen] = useState(null);
+    const dispatch = useDispatch();
+    const navigate = useNavigate();
 
     const handleOpen = (event) => {
         setOpen(event.currentTarget);
@@ -31,6 +34,12 @@ const AccountPopover = ({ user }) => {
         setOpen(null);
     };
 
+    const handleLogout = () => {
+        dispatch(logout());
+        setOpen(null);
+        navigate('/login');
+    };
+
     return (
         <>
             <IconButton
@@ -93,7 +102,7 @@ const AccountPopover = ({ user }) => {
 
                 <Divider sx={{ borderStyle: 'dashed' }} />
 
-                <MenuItem onClick={handleClose} sx={{ m: 1 }}>
+                <MenuItem onClick={handleLogout} sx={{ m: 1 }}>
                     Logout
                 </MenuItem>
             </MenuPopover>

diff --git a/src/layouts/dashboard/DashboardSidebar.jsx b/src/layouts/dashboard/DashboardSidebar.jsx
@@ -49,7 +49,7 @@ const DashboardSidebar = ({ isOpenSidebar, onCloseSidebar, user }) => {
             </Box>
 
             <Box sx={{ mb: 5, mx: 2.5 }}>
-                <Link underline="none" component={RouterLink} to="#">
+                <Link underline="none" component={RouterLink} to="/dashboard/users/profile">
                     <AccountStyle>
                         { user?.avatar.url ? (
                                 <Avatar src={`${user?.avatar.url}`} alt={`${user.name}`} />

diff --git a/src/layouts/dashboard/index.js b/src/layouts/dashboard/index.js
@@ -46,6 +46,12 @@ export default function DashboardLayout() {
         }
     }, [user])
 
+    useEffect(() => {
+        if (!currentUser) {
+            dispatch(getCurrentUser());
+        }
+    }, [currentUser])
+
     return (
         <RootStyle>
             <DashboardNavbar user={currentUser} onOpenSidebar={() => setOpen(true)} />

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
-import { Card, Link, Container, Typography, Alert  } from '@mui/material';
+import { Card, Link, Container, Typography  } from '@mui/material';
 import { useSelector, useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
@@ -56,66 +56,19 @@ const ContentStyle = styled('div')(({ theme }) => ({
 
 const Login = () => {
     const navigate = useNavigate();
-    const dispatch = useDispatch();
-    const [hiddenAlert, setHiddenAlert] = useState(0);
+
     const { status } = useSelector((state) => state.auth);
-    const { message } = useSelector((state) => state.message);
+
     const smUp = useResponsive('up', 'sm');
 
     const mdUp = useResponsive('up', 'md');
 
-    useEffect(() => {
-        dispatch(clearMessage());
-    }, [dispatch])
-
     useEffect(() => {
         if (status === action_status.SUCCEEDED) {
             navigate('/dashboard/app', { replace: true });
         }
-
-        if (status === action_status.FAILED) {
-            setHiddenAlert(1);
-        }
     }, [status, navigate])
 
-    // if (status === action_status.SUCCEEDED) {
-    //     navigate('/dashboard/app', { replace: true });
-    // }
-
-    // if (status === action_status.LOADING) {
-    //     return (
-    //         <Page title='Login'>
-    //             <RootStyle>
-    //                 <Box 
-    //                     sx={{
-    //                         width: '100%',
-    //                         height: '100vh',
-    //                         display: 'flex',
-    //                         justifyContent: 'center',
-    //                         alignItems: 'center'
-    //                     }}
-    //                 >
-    //                     <Box 
-    //                         sx={{
-    //                             width: '100%',
-    //                             height: '100%',
-    //                             display: 'flex',
-    //                             flexDirection: 'column',
-    //                             justifyContent: 'center',
-    //                             alignItems: 'center'
-    //                         }}
-    //                     >
-    //                         <Logo />
-    //                         <Box sx={{ width: '15%' }}>
-    //                             <LinearProgress />
-    //                         </Box>
-    //                     </Box>                    
-    //                 </Box>
-    //             </RootStyle>
-    //         </Page>
-    //     )
-    // }
-
     return (
         <Page title="Login">
             <RootStyle>
@@ -144,12 +97,10 @@ const Login = () => {
                 <Container maxWidth="sm">
                     <ContentStyle>
                         <Typography variant="h4" gutterBottom>
-                            Sign in to Minimal
+                            Sign in to HTX Freelancer
                         </Typography>
 
                         <Typography sx={{ color: 'text.secondary', mb: 2 }}>Enter your details below.</Typography>
-
-                        <Alert variant='filled' severity='error' sx={{ marginBlockEnd: 2, opacity: `${hiddenAlert}` }} >{message}</Alert>
 
                         <LoginForm />