Reac front end for psicometric app

Login.jsx 6.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import * as React from 'react';
  2. // import toast, { Toaster } from 'react-hot-toast';
  3. import { Toaster } from 'react-hot-toast';
  4. import {
  5. Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
  6. TextField, CssBaseline, Button, Avatar
  7. } from '@mui/material'
  8. import { createTheme, ThemeProvider } from '@mui/material/styles';
  9. import PersonIcon from '@mui/icons-material/Person';
  10. import { useNavigate } from 'react-router-dom'
  11. import { Copyright } from '../Components/Footer.js'
  12. import { Link } from 'react-router-dom'
  13. import useAuth from '../Auth/useAuth';
  14. import { useFormik } from 'formik';
  15. import * as Yup from 'yup';
  16. import { HTTP } from '../Utils/HTTP.js'
  17. const LoginSchema = Yup.object().shape({
  18. email : Yup
  19. .string()
  20. .email('El correo debe ser válido')
  21. .required('El correo es requerido'),
  22. password : Yup
  23. .string()
  24. .required('El campo contraseña es requerido')
  25. .min(6, 'La contraseña debe contener mínimo 6 caracteres')
  26. })
  27. const theme = createTheme();
  28. export function Login() {
  29. let auth = useAuth();
  30. let navigate = useNavigate()
  31. const formik = useFormik({
  32. initialValues: {
  33. email: '',
  34. password: '',
  35. },
  36. validationSchema: LoginSchema,
  37. onSubmit: (values) => {
  38. let { email, password } = values
  39. console.log(email,password);
  40. // let request = new HTTP('/user?' + `user=${email}&password=${password}`)
  41. let request = new HTTP()
  42. request.post()
  43. // toast.success('Bienvenido!!')
  44. // toast.error("This didn't work.")
  45. // return navigate('/dashboard/home')
  46. auth.login(values)
  47. },
  48. });
  49. React.useEffect(() => {
  50. if(auth.isLogged()){
  51. return navigate('/psicoadmin/dashboard/home')
  52. }
  53. }, [auth,navigate])
  54. return (
  55. <ThemeProvider theme={theme}>
  56. <Grid container component="main" sx={{ height: '100vh' }}>
  57. <CssBaseline />
  58. <Grid
  59. item
  60. xs={false}
  61. sm={4}
  62. md={7}
  63. sx={{
  64. backgroundImage: 'url(https://source.unsplash.com/random)',
  65. backgroundRepeat: 'no-repeat',
  66. backgroundColor: (t) => t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
  67. backgroundSize: 'cover',
  68. backgroundPosition: 'center',
  69. }}
  70. />
  71. <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
  72. <Box
  73. sx={{
  74. my: 8,
  75. mx: 4,
  76. display: 'flex',
  77. flexDirection: 'column',
  78. alignItems: 'center',
  79. marginTop : '25%'
  80. }}
  81. >
  82. <Avatar sx={{ m: 1, bgcolor: '#fd4b4b' }}>
  83. <PersonIcon />
  84. </Avatar>
  85. <Typography component="h1" variant="h5">
  86. Ingresar
  87. </Typography>
  88. <Box component="form" noValidate onSubmit={formik.handleSubmit} sx={{ mt: 1 }}>
  89. <TextField
  90. value={formik.values.email}
  91. onChange={formik.handleChange}
  92. error={formik.touched.email && Boolean(formik.errors.email)}
  93. helperText={formik.touched.email && formik.errors.email}
  94. margin="normal"
  95. required
  96. fullWidth
  97. id="email"
  98. name="email"
  99. label="Correo Electrónico"
  100. autoComplete="email"
  101. autoFocus
  102. />
  103. <TextField
  104. value={formik.values.password}
  105. onChange={formik.handleChange}
  106. error={formik.touched.password && Boolean(formik.errors.password)}
  107. helperText={formik.touched.password && formik.errors.password}
  108. margin="normal"
  109. required
  110. fullWidth
  111. label="Contraseña"
  112. name="password"
  113. type="password"
  114. id="password"
  115. autoComplete="current-password"
  116. />
  117. <FormControlLabel
  118. control={<Checkbox value="remember" sx={{
  119. color: '#fd4b4b',
  120. '&.Mui-checked': {
  121. color: '#fd4b4b'
  122. },
  123. }}/>}
  124. label="Recordarme"
  125. />
  126. <Button
  127. type="submit"
  128. fullWidth
  129. variant="contained"
  130. sx={{ mt: 3, mb: 2, bgcolor :'#fd4b4b' }}
  131. >
  132. Ingresar
  133. </Button>
  134. <Grid container>
  135. <Grid item xs>
  136. <Link className="login_link" to='/password/recuperar'>
  137. ¿Olvidaste tu contraseña?
  138. </Link>
  139. </Grid>
  140. <Grid item>
  141. <Link className="login_link" to='/'>
  142. {"¿No tienes cuenta? Regístrate"}
  143. </Link>
  144. </Grid>
  145. </Grid>
  146. <Copyright sx={{ mt: 5 }} />
  147. </Box>
  148. </Box>
  149. </Grid>
  150. </Grid>
  151. <Toaster
  152. position="top-left"
  153. reverseOrder={false}
  154. />
  155. </ThemeProvider>
  156. );
  157. }