123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182 |
- 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 {
- Paper, Box, Grid, Typography,
- TextField, Button, Avatar,
- Backdrop, CircularProgress,
- } from '@mui/material'
- import { createTheme, ThemeProvider } from '@mui/material/styles';
- import PersonIcon from '@mui/icons-material/Person';
- // import { useNavigate } from 'react-router-dom'
- import { Copyright } from '../Components/Footer.js'
- // import { Link } from 'react-router-dom'
- import useAuth from '../Auth/useAuth';
- import { useFormik } from 'formik';
- import * as Yup from 'yup';
- import { Service } from '../Utils/HTTP.js'
- const LoginSchema = Yup.object().shape({
- email: Yup
- .string()
- .email('El correo debe ser válido')
- .required('El correo o usuario es requerido'),
- password: Yup
- .string()
- .required('El campo contraseña es requerido')
- .min(5, 'La contraseña debe contener mínimo 5 caracteres')
- })
- const theme = createTheme();
- export function LoginCs() {
- let auth = useAuth();
- let navigate = useNavigate()
- const [open, setOpen] = React.useState(false);
- const handleClose = () => false
- const formik = useFormik({
- initialValues: {
- email: '',
- password: '',
- },
- validationSchema: LoginSchema,
- onSubmit: async (values) => {
- let { email, password } = values
- setOpen(true)
- 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;
- toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
- token = token.replace("Bearer ", "")
- console.log(token);
- // let { exp } = jwt_decode(token);
- let body_token = jwt_decode(token);
- console.log("BODY TOKEN: ", body_token)
- // let timestamp = exp * 1000;
- // let restante = timestamp - Date.now();
- // setTimeout(() => alert("Token Expirado"), restante)
- auth.setProfile(empresa)
- auth.setRole(body_token)
- setTimeout(() => {
- setOpen(false)
- auth.login(token)
- }, 2000)
- })
- .catch(err => {
- setOpen(false)
- toast.error("Ups! usuario o contraseña incorrectos")
- console.log("ERROR ", err)
- })
- },
- });
-
- React.useEffect(() => {
- if(auth.isLogged()){
- return navigate('/user')
- }
- }, [auth,navigate])
- return (
- <ThemeProvider theme={theme}>
- <Grid container component="main" sx={{ height: '100vh' }}>
- <Grid item xs={12} sm={12} md={12} component={Paper} elevation={6} square>
- <Box
- sx={{
- my: 8,
- mx: 4,
- marginTop:25,
- display: 'flex',
- flexDirection: 'column',
- // alignItems:true?'flex-start': 'center',
- alignItems:'center'
- }}
- >
- <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
- <PersonIcon />
- </Avatar>
- <Typography component="h1" variant="h5">
- Ingresar
- </Typography>
- <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
- <TextField
- value={formik.values.email}
- onChange={formik.handleChange}
- error={formik.touched.email && Boolean(formik.errors.email)}
- helperText={formik.touched.email && formik.errors.email}
- margin="normal"
- required
- fullWidth
- id="email"
- name="email"
- label="Correo Electrónico"
- autoComplete="email"
- autoFocus
- />
- <TextField
- value={formik.values.password}
- onChange={formik.handleChange}
- error={formik.touched.password && Boolean(formik.errors.password)}
- helperText={formik.touched.password && formik.errors.password}
- margin="normal"
- required
- fullWidth
- label="Contraseña"
- name="password"
- type="password"
- id="password"
- autoComplete="current-password"
- />
- <Button
- id="login_btn_fn"
- type="submit"
- fullWidth
- variant="contained"
- sx={{ mt: 3, mb: 2, bgcolor: 'var(--main)' }}
- >
- Ingresar
- </Button>
- <Copyright sx={{ mt: 5 }} />
- </Box>
- </Box>
- </Grid>
- </Grid>
- <Toaster
- position="top-left"
- reverseOrder={false}
- />
- <Backdrop
- sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
- open={open}
- onClick={handleClose}
- >
- <CircularProgress color="inherit" />
- </Backdrop>
- </ThemeProvider>
- );
- }
|