Bladeren bron

user dashboard

amenpunk 3 jaren geleden
bovenliggende
commit
0b3468f9be
4 gewijzigde bestanden met toevoegingen van 166 en 12 verwijderingen
  1. 15 0
      src/Components/Routes.js
  2. 133 0
      src/Components/User.jsx
  3. 7 8
      src/Pages/Login.jsx
  4. 11 4
      src/Pages/Logincs.jsx

+ 15 - 0
src/Components/Routes.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { Routes, Route, Navigate } from "react-router-dom";
 
 import { Dashboard } from "./Dashboard";
+import { User } from "./User";
 import { Login } from '../Pages/Login'
 import { LoginCs } from '../Pages/Logincs'
 import { Register } from '../Pages/Register'
@@ -32,6 +33,20 @@ export default function MyRoutes () {
             <Route path="logincd" element={<LoginCs/>} />
             <Route path="password/recuperar" element={<RestorePassword/>} />
             <Route path="register" element={<Register/>} />
+
+
+
+            <Route 
+                path="user" 
+                element={
+                    <RequireAuth>
+                        <User/>
+                    </RequireAuth>
+                }
+            >
+            </Route>
+
+
             <Route 
                 path="dashboard" 
                 element={

+ 133 - 0
src/Components/User.jsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import CssBaseline from '@mui/material/CssBaseline';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MailIcon from '@mui/icons-material/Mail';
+import MenuIcon from '@mui/icons-material/Menu';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+const drawerWidth = 240;
+
+export function User(props) {
+    const { window } = props;
+    const [mobileOpen, setMobileOpen] = React.useState(false);
+
+    const handleDrawerToggle = () => {
+        setMobileOpen(!mobileOpen);
+    };
+
+    const drawer = (
+        <div>
+            <Toolbar />
+            <Divider />
+            <List>
+                {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+                    <ListItem key={text} disablePadding>
+                        <ListItemButton>
+                            <ListItemIcon>
+                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                            </ListItemIcon>
+                            <ListItemText primary={text} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+            <Divider />
+            <List>
+                {['All mail', 'Trash', 'Spam'].map((text, index) => (
+                    <ListItem key={text} disablePadding>
+                        <ListItemButton>
+                            <ListItemIcon>
+                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                            </ListItemIcon>
+                            <ListItemText primary={text} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+        </div>
+    );
+
+    const container = window !== undefined ? () => window().document.body : undefined;
+
+    return (
+        <Box sx={{ display: 'flex' }}>
+            <CssBaseline />
+            <AppBar
+                position="fixed"
+                sx={{
+                    width: { sm: `calc(100% - ${drawerWidth}px)` },
+                    ml: { sm: `${drawerWidth}px` },
+                }}
+            >
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        edge="start"
+                        onClick={handleDrawerToggle}
+                        sx={{ mr: 2, display: { sm: 'none' } }}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" noWrap component="div">
+                        Responsive drawer
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+            <Box
+                component="nav"
+                sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+                aria-label="mailbox folders"
+            >
+                {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+                <Drawer
+                    container={container}
+                    variant="temporary"
+                    open={mobileOpen}
+                    onClose={handleDrawerToggle}
+                    ModalProps={{
+                        keepMounted: true, // Better open performance on mobile.
+                    }}
+                    sx={{
+                        display: { xs: 'block', sm: 'none' },
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+                    }}
+                >
+                    {drawer}
+                </Drawer>
+                <Drawer
+                    variant="permanent"
+                    sx={{
+                        display: { xs: 'none', sm: 'block' },
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+                    }}
+                    open
+                >
+                    {drawer}
+                </Drawer>
+            </Box>
+            <Box
+                component="main"
+                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+            >
+                <Toolbar />
+                <Typography paragraph>
+                    Bienvenido User
+                </Typography>
+            </Box>
+        </Box>
+    );
+}
+

+ 7 - 8
src/Pages/Login.jsx

@@ -52,8 +52,7 @@ export function Login() {
 
             let { email, password } = values
             setOpen(true)
-
-            let request = new Service(`/user?user=${email}&password=${password}`)
+            let request = new Service(`/user?user=${email}&password=${password}&typeusr=isreclutador`)
             request
             .post({})
             .then( response => {
@@ -62,10 +61,11 @@ export function Login() {
                 let { token, nombre, apelidos, empresa } = response;
                 toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
                 token = token.replace("Bearer ", "")
-                    console.log(token);
+                console.log(token);
 
-                let { exp } = jwt_decode(token);
-                let timestamp = exp * 1000;
+                let body_token = jwt_decode(token);
+                console.log(body_token)
+                let timestamp = body_token.exp * 1000;
                 let restante = timestamp - Date.now();
 
                 setTimeout(() => alert("Token Expirado") , restante )
@@ -90,7 +90,7 @@ export function Login() {
     React.useEffect(() => {
         if(auth.isLogged()){
             return navigate('/dashboard/home')
-        }    
+        }
     }, [auth,navigate])
 
 
@@ -121,8 +121,7 @@ export function Login() {
                             flexDirection: 'column',
                             alignItems: 'center',
                             marginTop : '25%'
-                        }}
-                    >
+                        }}>
                         <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
                             <PersonIcon />
                         </Avatar>

+ 11 - 4
src/Pages/Logincs.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom'
 import jwt_decode from "jwt-decode";
 
 import {
@@ -37,7 +38,7 @@ const theme = createTheme();
 export function LoginCs() {
 
     let auth = useAuth();
-    // let navigate = useNavigate()
+    let navigate = useNavigate()
 
     const [open, setOpen] = React.useState(false);
     const handleClose = () => false
@@ -53,13 +54,13 @@ export function LoginCs() {
             let { email, password } = values
             setOpen(true)
 
-            let request = new Service(`/user?user=${email}&password=${password}`)
+            let request = new Service(`/user?user=${email}&password=${password}&typeusr=iscandidato`)
             request
                 .post({})
                 .then(response => {
 
                     console.log("Service Response :: ", response)
-                    let { token, nombre, apelidos, empresa } = response;
+                    let { token, nombre, apelidos } = response;
                     toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
                     token = token.replace("Bearer ", "")
                     console.log(token);
@@ -69,7 +70,7 @@ export function LoginCs() {
                     let restante = timestamp - Date.now();
 
                     setTimeout(() => alert("Token Expirado"), restante)
-                    auth.setProfile(empresa)
+                    // auth.setProfile(empresa)
 
                     setTimeout(() => {
                         setOpen(false)
@@ -86,6 +87,12 @@ export function LoginCs() {
         },
     });
 
+    
+    React.useEffect(() => {
+        if(auth.isLogged()){
+            return navigate('/user')
+        }
+    }, [auth,navigate])
 
     return (
         <ThemeProvider theme={theme}>