Reac front end for psicometric app

Logincs.jsx 6.4KB

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