Browse Source

user dashboard

amenpunk 2 years ago
parent
commit
0b3468f9be
4 changed files with 166 additions and 12 deletions
  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'
2 2
 import { Routes, Route, Navigate } from "react-router-dom";
3 3
 
4 4
 import { Dashboard } from "./Dashboard";
5
+import { User } from "./User";
5 6
 import { Login } from '../Pages/Login'
6 7
 import { LoginCs } from '../Pages/Logincs'
7 8
 import { Register } from '../Pages/Register'
@@ -32,6 +33,20 @@ export default function MyRoutes () {
32 33
             <Route path="logincd" element={<LoginCs/>} />
33 34
             <Route path="password/recuperar" element={<RestorePassword/>} />
34 35
             <Route path="register" element={<Register/>} />
36
+
37
+
38
+
39
+            <Route 
40
+                path="user" 
41
+                element={
42
+                    <RequireAuth>
43
+                        <User/>
44
+                    </RequireAuth>
45
+                }
46
+            >
47
+            </Route>
48
+
49
+
35 50
             <Route 
36 51
                 path="dashboard" 
37 52
                 element={

+ 133 - 0
src/Components/User.jsx

@@ -0,0 +1,133 @@
1
+import * as React from 'react';
2
+
3
+import AppBar from '@mui/material/AppBar';
4
+import Box from '@mui/material/Box';
5
+import CssBaseline from '@mui/material/CssBaseline';
6
+import Divider from '@mui/material/Divider';
7
+import Drawer from '@mui/material/Drawer';
8
+import IconButton from '@mui/material/IconButton';
9
+import InboxIcon from '@mui/icons-material/MoveToInbox';
10
+import List from '@mui/material/List';
11
+import ListItem from '@mui/material/ListItem';
12
+import ListItemButton from '@mui/material/ListItemButton';
13
+import ListItemIcon from '@mui/material/ListItemIcon';
14
+import ListItemText from '@mui/material/ListItemText';
15
+import MailIcon from '@mui/icons-material/Mail';
16
+import MenuIcon from '@mui/icons-material/Menu';
17
+import Toolbar from '@mui/material/Toolbar';
18
+import Typography from '@mui/material/Typography';
19
+
20
+const drawerWidth = 240;
21
+
22
+export function User(props) {
23
+    const { window } = props;
24
+    const [mobileOpen, setMobileOpen] = React.useState(false);
25
+
26
+    const handleDrawerToggle = () => {
27
+        setMobileOpen(!mobileOpen);
28
+    };
29
+
30
+    const drawer = (
31
+        <div>
32
+            <Toolbar />
33
+            <Divider />
34
+            <List>
35
+                {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
36
+                    <ListItem key={text} disablePadding>
37
+                        <ListItemButton>
38
+                            <ListItemIcon>
39
+                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
40
+                            </ListItemIcon>
41
+                            <ListItemText primary={text} />
42
+                        </ListItemButton>
43
+                    </ListItem>
44
+                ))}
45
+            </List>
46
+            <Divider />
47
+            <List>
48
+                {['All mail', 'Trash', 'Spam'].map((text, index) => (
49
+                    <ListItem key={text} disablePadding>
50
+                        <ListItemButton>
51
+                            <ListItemIcon>
52
+                                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
53
+                            </ListItemIcon>
54
+                            <ListItemText primary={text} />
55
+                        </ListItemButton>
56
+                    </ListItem>
57
+                ))}
58
+            </List>
59
+        </div>
60
+    );
61
+
62
+    const container = window !== undefined ? () => window().document.body : undefined;
63
+
64
+    return (
65
+        <Box sx={{ display: 'flex' }}>
66
+            <CssBaseline />
67
+            <AppBar
68
+                position="fixed"
69
+                sx={{
70
+                    width: { sm: `calc(100% - ${drawerWidth}px)` },
71
+                    ml: { sm: `${drawerWidth}px` },
72
+                }}
73
+            >
74
+                <Toolbar>
75
+                    <IconButton
76
+                        color="inherit"
77
+                        aria-label="open drawer"
78
+                        edge="start"
79
+                        onClick={handleDrawerToggle}
80
+                        sx={{ mr: 2, display: { sm: 'none' } }}
81
+                    >
82
+                        <MenuIcon />
83
+                    </IconButton>
84
+                    <Typography variant="h6" noWrap component="div">
85
+                        Responsive drawer
86
+                    </Typography>
87
+                </Toolbar>
88
+            </AppBar>
89
+            <Box
90
+                component="nav"
91
+                sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
92
+                aria-label="mailbox folders"
93
+            >
94
+                {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
95
+                <Drawer
96
+                    container={container}
97
+                    variant="temporary"
98
+                    open={mobileOpen}
99
+                    onClose={handleDrawerToggle}
100
+                    ModalProps={{
101
+                        keepMounted: true, // Better open performance on mobile.
102
+                    }}
103
+                    sx={{
104
+                        display: { xs: 'block', sm: 'none' },
105
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
106
+                    }}
107
+                >
108
+                    {drawer}
109
+                </Drawer>
110
+                <Drawer
111
+                    variant="permanent"
112
+                    sx={{
113
+                        display: { xs: 'none', sm: 'block' },
114
+                        '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
115
+                    }}
116
+                    open
117
+                >
118
+                    {drawer}
119
+                </Drawer>
120
+            </Box>
121
+            <Box
122
+                component="main"
123
+                sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
124
+            >
125
+                <Toolbar />
126
+                <Typography paragraph>
127
+                    Bienvenido User
128
+                </Typography>
129
+            </Box>
130
+        </Box>
131
+    );
132
+}
133
+

+ 7 - 8
src/Pages/Login.jsx

@@ -52,8 +52,7 @@ export function Login() {
52 52
 
53 53
             let { email, password } = values
54 54
             setOpen(true)
55
-
56
-            let request = new Service(`/user?user=${email}&password=${password}`)
55
+            let request = new Service(`/user?user=${email}&password=${password}&typeusr=isreclutador`)
57 56
             request
58 57
             .post({})
59 58
             .then( response => {
@@ -62,10 +61,11 @@ export function Login() {
62 61
                 let { token, nombre, apelidos, empresa } = response;
63 62
                 toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
64 63
                 token = token.replace("Bearer ", "")
65
-                    console.log(token);
64
+                console.log(token);
66 65
 
67
-                let { exp } = jwt_decode(token);
68
-                let timestamp = exp * 1000;
66
+                let body_token = jwt_decode(token);
67
+                console.log(body_token)
68
+                let timestamp = body_token.exp * 1000;
69 69
                 let restante = timestamp - Date.now();
70 70
 
71 71
                 setTimeout(() => alert("Token Expirado") , restante )
@@ -90,7 +90,7 @@ export function Login() {
90 90
     React.useEffect(() => {
91 91
         if(auth.isLogged()){
92 92
             return navigate('/dashboard/home')
93
-        }    
93
+        }
94 94
     }, [auth,navigate])
95 95
 
96 96
 
@@ -121,8 +121,7 @@ export function Login() {
121 121
                             flexDirection: 'column',
122 122
                             alignItems: 'center',
123 123
                             marginTop : '25%'
124
-                        }}
125
-                    >
124
+                        }}>
126 125
                         <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
127 126
                             <PersonIcon />
128 127
                         </Avatar>

+ 11 - 4
src/Pages/Logincs.jsx

@@ -1,5 +1,6 @@
1 1
 import * as React from 'react';
2 2
 import toast, { Toaster } from 'react-hot-toast';
3
+import { useNavigate } from 'react-router-dom'
3 4
 import jwt_decode from "jwt-decode";
4 5
 
5 6
 import {
@@ -37,7 +38,7 @@ const theme = createTheme();
37 38
 export function LoginCs() {
38 39
 
39 40
     let auth = useAuth();
40
-    // let navigate = useNavigate()
41
+    let navigate = useNavigate()
41 42
 
42 43
     const [open, setOpen] = React.useState(false);
43 44
     const handleClose = () => false
@@ -53,13 +54,13 @@ export function LoginCs() {
53 54
             let { email, password } = values
54 55
             setOpen(true)
55 56
 
56
-            let request = new Service(`/user?user=${email}&password=${password}`)
57
+            let request = new Service(`/user?user=${email}&password=${password}&typeusr=iscandidato`)
57 58
             request
58 59
                 .post({})
59 60
                 .then(response => {
60 61
 
61 62
                     console.log("Service Response :: ", response)
62
-                    let { token, nombre, apelidos, empresa } = response;
63
+                    let { token, nombre, apelidos } = response;
63 64
                     toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
64 65
                     token = token.replace("Bearer ", "")
65 66
                     console.log(token);
@@ -69,7 +70,7 @@ export function LoginCs() {
69 70
                     let restante = timestamp - Date.now();
70 71
 
71 72
                     setTimeout(() => alert("Token Expirado"), restante)
72
-                    auth.setProfile(empresa)
73
+                    // auth.setProfile(empresa)
73 74
 
74 75
                     setTimeout(() => {
75 76
                         setOpen(false)
@@ -86,6 +87,12 @@ export function LoginCs() {
86 87
         },
87 88
     });
88 89
 
90
+    
91
+    React.useEffect(() => {
92
+        if(auth.isLogged()){
93
+            return navigate('/user')
94
+        }
95
+    }, [auth,navigate])
89 96
 
90 97
     return (
91 98
         <ThemeProvider theme={theme}>