feat: (client) implement protected routes (foyzulkarim#35)

aninda052 · Sep 17, 2023 · eb80736 · eb80736
1 parent 6edd50d
commit eb80736
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/client/src/pages/LoginPage.js b/client/src/pages/LoginPage.js
@@ -1,5 +1,5 @@
 import { Helmet } from 'react-helmet-async';
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 // @mui
 import { styled } from '@mui/material/styles';
 import { Container, Typography, Divider, Stack, Button } from '@mui/material';
@@ -42,6 +42,7 @@ const StyledContent = styled('div')(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function LoginPage() {
+  const location = useLocation();
   const mdUp = useResponsive('up', 'md');
 
   return (
@@ -99,7 +100,7 @@ export default function LoginPage() {
               </Typography>
             </Divider>
 
-            <LoginForm />
+            <LoginForm location={location}/>
           </StyledContent>
         </Container>
       </StyledRoot>

diff --git a/client/src/routes.js b/client/src/routes.js
@@ -1,4 +1,4 @@
-import { Navigate, useRoutes } from 'react-router-dom';
+import { Navigate, useLocation, useRoutes } from 'react-router-dom';
 // layouts
 import DashboardLayout from './layouts/dashboard';
 import SimpleLayout from './layouts/simple';
@@ -16,13 +16,17 @@ import VideoListPage from './pages/VideoListPage';
 import VideosPage from './pages/VideosPage'
 import DashboardAppPage from './pages/DashboardAppPage';
 
+
 // ----------------------------------------------------------------------
 
+
 export default function Router() {
+  const isLoggedIn = localStorage.getItem("email") ? true : false;
+  const location = useLocation();
   const routes = useRoutes([
     {
       path: '/',
-      element: <DashboardLayout />,
+      element: isLoggedIn ? <DashboardLayout /> : <Navigate to="/login" state={{ from: location }}/>,
       children: [
         { element: <Navigate to='/videos' />, index: true },
         { path: 'dashboard', element: <DashboardAppPage /> },

diff --git a/client/src/sections/auth/LoginForm.js b/client/src/sections/auth/LoginForm.js
@@ -23,7 +23,7 @@ import { API_SERVER } from '../../constants';
 // ----------------------------------------------------------------------
 
 
-export default function LoginForm() {
+export default function LoginForm({location}) {
   const navigate = useNavigate();
 
   const [showPassword, setShowPassword] = useState(false);
@@ -36,6 +36,8 @@ export default function LoginForm() {
 
   const handleSubmit = async () => {
 
+    const redirectUrl = location.state ? location.state.from.pathname : '/videos'
+
     await axios.post(`${API_SERVER}/api/login`,
       loginData,
       {
@@ -46,12 +48,11 @@ export default function LoginForm() {
       }
     )
     .then(function (response){
-      console.log(response.data.user.name)
       localStorage.setItem("name", response.data.user.name);
       localStorage.setItem("email", response.data.user.email);
       setAlertContext({type:'success', message: 'Login Successful'});
 
-      setTimeout(() => navigate('/videos'), 1000);
+      setTimeout(() => navigate(redirectUrl), 1000);
     })
     .catch(function (error){
       setAlertContext({type:'error', message: error.response.data.message});