瀏覽代碼

logincd route

amenpunk 2 年之前
父節點
當前提交
1ddad233dc
共有 3 個文件被更改,包括 181 次插入1 次删除
  1. 8 1
      src/Auth/AuthProvider.js
  2. 2 0
      src/Components/Routes.js
  3. 171 0
      src/Pages/Logincs.jsx

+ 8 - 1
src/Auth/AuthProvider.js

@@ -42,7 +42,14 @@ export function AuthProvider({ children }) {
42 42
             }
43 43
         },
44 44
         setProfile: (obj) => Cookies.set('profile', JSON.stringify(obj) ),
45
-        getProfile: () => JSON.parse( Cookies.get('profile') )
45
+        getProfile: () => {
46
+            let CookieProfile = Cookies.get('profile');
47
+            if(CookieProfile){
48
+                return JSON.parse(CookieProfile);
49
+            }else{
50
+                return {}
51
+            }
52
+        } 
46 53
     }
47 54
 
48 55
     return (

+ 2 - 0
src/Components/Routes.js

@@ -3,6 +3,7 @@ import { Routes, Route, Navigate } from "react-router-dom";
3 3
 
4 4
 import { Dashboard } from "./Dashboard";
5 5
 import { Login } from '../Pages/Login'
6
+import { LoginCs } from '../Pages/Logincs'
6 7
 import { Register } from '../Pages/Register'
7 8
 import { Home } from '../Pages/Home'
8 9
 import { Puestos } from '../Pages/Puestos'
@@ -28,6 +29,7 @@ export default function MyRoutes () {
28 29
 
29 30
             <Route path="/" element={<Navigate to='/login'/>} />
30 31
             <Route path="login" element={<Login/>} />
32
+            <Route path="logincd" element={<LoginCs/>} />
31 33
             <Route path="password/recuperar" element={<RestorePassword/>} />
32 34
             <Route path="register" element={<Register/>} />
33 35
             <Route 

+ 171 - 0
src/Pages/Logincs.jsx

@@ -0,0 +1,171 @@
1
+import * as React from 'react';
2
+import toast, { Toaster } from 'react-hot-toast';
3
+import jwt_decode from "jwt-decode";
4
+
5
+import {
6
+    Paper, Box, Grid, Typography,
7
+    TextField, Button, Avatar,
8
+    Backdrop, CircularProgress,
9
+} from '@mui/material'
10
+
11
+import { createTheme, ThemeProvider } from '@mui/material/styles';
12
+
13
+import PersonIcon from '@mui/icons-material/Person';
14
+// import { useNavigate } from 'react-router-dom'
15
+import { Copyright } from '../Components/Footer.js'
16
+// import { Link } from 'react-router-dom'
17
+import useAuth from '../Auth/useAuth';
18
+
19
+import { useFormik } from 'formik';
20
+import * as Yup from 'yup';
21
+
22
+import { Service } from '../Utils/HTTP.js'
23
+
24
+const LoginSchema = Yup.object().shape({
25
+    email: Yup
26
+        .string()
27
+        .email('El correo debe ser válido')
28
+        .required('El correo o usuario es requerido'),
29
+    password: Yup
30
+        .string()
31
+        .required('El campo contraseña es requerido')
32
+        .min(5, 'La contraseña debe contener mínimo 5 caracteres')
33
+})
34
+
35
+const theme = createTheme();
36
+
37
+export function LoginCs() {
38
+
39
+    let auth = useAuth();
40
+    // let navigate = useNavigate()
41
+
42
+    const [open, setOpen] = React.useState(false);
43
+    const handleClose = () => false
44
+
45
+    const formik = useFormik({
46
+        initialValues: {
47
+            email: '',
48
+            password: '',
49
+        },
50
+        validationSchema: LoginSchema,
51
+        onSubmit: async (values) => {
52
+
53
+            let { email, password } = values
54
+            setOpen(true)
55
+
56
+            let request = new Service(`/user?user=${email}&password=${password}`)
57
+            request
58
+                .post({})
59
+                .then(response => {
60
+
61
+                    console.log("Service Response :: ", response)
62
+                    let { token, nombre, apelidos, empresa } = response;
63
+                    toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
64
+                    token = token.replace("Bearer ", "")
65
+                    console.log(token);
66
+
67
+                    let { exp } = jwt_decode(token);
68
+                    let timestamp = exp * 1000;
69
+                    let restante = timestamp - Date.now();
70
+
71
+                    setTimeout(() => alert("Token Expirado"), restante)
72
+                    auth.setProfile(empresa)
73
+
74
+                    setTimeout(() => {
75
+                        setOpen(false)
76
+                        auth.login(token)
77
+                    }, 2000)
78
+
79
+                })
80
+                .catch(err => {
81
+                    setOpen(false)
82
+                    toast.error("Ups! usuario o contraseña incorrectos")
83
+                    console.log("ERROR ", err)
84
+                })
85
+
86
+        },
87
+    });
88
+
89
+
90
+    return (
91
+        <ThemeProvider theme={theme}>
92
+            <Grid container component="main" sx={{ height: '100vh' }}>
93
+                <Grid item xs={12} sm={12} md={12} component={Paper} elevation={6} square>
94
+
95
+                    <Box
96
+                        sx={{
97
+                            my: 8,
98
+                            mx: 4,
99
+                            marginTop:25,
100
+                            display: 'flex',
101
+                            flexDirection: 'column',
102
+                            // alignItems:true?'flex-start': 'center',
103
+                            alignItems:'center'
104
+                        }}
105
+                    >
106
+                        <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
107
+                            <PersonIcon />
108
+                        </Avatar>
109
+                        <Typography component="h1" variant="h5">
110
+                            Ingresar
111
+                        </Typography>
112
+
113
+                        <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
114
+                            <TextField
115
+                                value={formik.values.email}
116
+                                onChange={formik.handleChange}
117
+                                error={formik.touched.email && Boolean(formik.errors.email)}
118
+                                helperText={formik.touched.email && formik.errors.email}
119
+                                margin="normal"
120
+                                required
121
+                                fullWidth
122
+                                id="email"
123
+                                name="email"
124
+                                label="Correo Electrónico"
125
+                                autoComplete="email"
126
+                                autoFocus
127
+                            />
128
+                            <TextField
129
+                                value={formik.values.password}
130
+                                onChange={formik.handleChange}
131
+                                error={formik.touched.password && Boolean(formik.errors.password)}
132
+                                helperText={formik.touched.password && formik.errors.password}
133
+                                margin="normal"
134
+                                required
135
+                                fullWidth
136
+                                label="Contraseña"
137
+                                name="password"
138
+                                type="password"
139
+                                id="password"
140
+                                autoComplete="current-password"
141
+                            />
142
+                            <Button
143
+                                id="login_btn_fn"
144
+                                type="submit"
145
+                                fullWidth
146
+                                variant="contained"
147
+                                sx={{ mt: 3, mb: 2, bgcolor: 'var(--main)' }}
148
+                            >
149
+                                Ingresar
150
+                            </Button>
151
+                            <Copyright sx={{ mt: 5 }} />
152
+                        </Box>
153
+                    </Box>
154
+                </Grid>
155
+            </Grid>
156
+            <Toaster
157
+                position="top-left"
158
+                reverseOrder={false}
159
+            />
160
+            <Backdrop
161
+                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
162
+                open={open}
163
+                onClick={handleClose}
164
+            >
165
+                <CircularProgress color="inherit" />
166
+            </Backdrop>
167
+
168
+        </ThemeProvider>
169
+
170
+    );
171
+}