Auth: SignIn, SignUp (TODO: rewrite into react-hook-form)

frontend_reactjs/src/layouts/DashboardLayout.tsx

@@ -1,6 +1,6 @@
 // Layout for dashboard with responsive drawer
 
-import { Outlet } from "react-router-dom"
+import { Navigate, Outlet } from "react-router-dom"
 import * as React from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
@@ -17,10 +17,14 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import { Api, ExitToApp, Home, People, Settings, Shield } from "@mui/icons-material";
+import { UserData, useAuthStore } from "../store/auth";
 
 const drawerWidth = 240;
 
 export default function DashboardLayout() {
+    const authStore = useAuthStore();
+    const [userData, setUserData] = React.useState<UserData>();
+
     //const { window } = props;
     const [mobileOpen, setMobileOpen] = React.useState(false);
     const [isClosing, setIsClosing] = React.useState(false);
@@ -78,7 +82,13 @@ export default function DashboardLayout() {
 
     const drawer = (
         <div>
-            <Toolbar />
+            <Toolbar>
+                <Box>
+                    <Typography>{userData?.name} {userData?.surname}</Typography>
+                    <Divider />
+                    <Typography variant="caption">{userData?.login}</Typography>
+                </Box>
+            </Toolbar>
 
             <Divider />
 
@@ -112,8 +122,21 @@ export default function DashboardLayout() {
         </div>
     );
 
+    React.useEffect(() => {
+        if (authStore) {
+            const stored = authStore.getUserData()
+            if (stored) {
+                setUserData(stored)
+            }
+        }
+    }, [authStore])
+
     return (
-        <Box sx={{ display: 'flex' }}>
+        <Box sx={{
+            display: 'flex',
+            flexGrow: 1,
+            height: "100vh"
+        }}>
             <CssBaseline />
             <AppBar
                 position="fixed"
@@ -173,7 +196,11 @@ export default function DashboardLayout() {
 
             <Box
                 component="main"
-                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+                sx={{
+                    flexGrow: 1,
+                    p: 3,
+                    width: { sm: `calc(100% - ${drawerWidth}px)` }
+                }}
             >
                 <Toolbar />
                 <Outlet />