123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- import * as React from 'react';
- // import toast, { Toaster } from 'react-hot-toast';
- import { Toaster } from 'react-hot-toast';
- import {
- Paper, Box, Grid, Checkbox, FormControlLabel, Typography,
- TextField, CssBaseline, Button, Avatar
- } 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 { HTTP } from '../Utils/HTTP.js'
- const LoginSchema = Yup.object().shape({
- email : Yup
- .string()
- .email('El correo debe ser válido')
- .required('El correo es requerido'),
- password : Yup
- .string()
- .required('El campo contraseña es requerido')
- .min(6, 'La contraseña debe contener mínimo 6 caracteres')
- })
- const theme = createTheme();
- export function Login() {
- let auth = useAuth();
- let navigate = useNavigate()
- const formik = useFormik({
- initialValues: {
- email: '',
- password: '',
- },
- validationSchema: LoginSchema,
- onSubmit: (values) => {
- let { email, password } = values
- console.log(email,password);
- // let request = new HTTP('/user?' + `user=${email}&password=${password}`)
- let request = new HTTP()
- request.post()
- // toast.success('Bienvenido!!')
- // toast.error("This didn't work.")
- // return navigate('/dashboard/home')
- auth.login(values)
- },
- });
- React.useEffect(() => {
- if(auth.isLogged()){
- return navigate('/psicoadmin/dashboard/home')
- }
- }, [auth,navigate])
- return (
- <ThemeProvider theme={theme}>
- <Grid container component="main" sx={{ height: '100vh' }}>
- <CssBaseline />
- <Grid
- item
- xs={false}
- sm={4}
- md={7}
- sx={{
- backgroundImage: 'url(https://source.unsplash.com/random)',
- backgroundRepeat: 'no-repeat',
- backgroundColor: (t) => t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
- backgroundSize: 'cover',
- backgroundPosition: 'center',
- }}
- />
- <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
- <Box
- sx={{
- my: 8,
- mx: 4,
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- marginTop : '25%'
- }}
- >
- <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"
- />
- <FormControlLabel
- control={<Checkbox value="remember" sx={{
- color: '#fd4b4b',
- '&.Mui-checked': {
- color: '#fd4b4b'
- },
- }}/>}
- label="Recordarme"
- />
- <Button
- type="submit"
- fullWidth
- variant="contained"
- sx={{ mt: 3, mb: 2, bgcolor :'#fd4b4b' }}
- >
- Ingresar
- </Button>
- <Grid container>
- <Grid item xs>
- <Link className="login_link" to='/password/recuperar'>
- ¿Olvidaste tu contraseña?
- </Link>
- </Grid>
- <Grid item>
- <Link className="login_link" to='/'>
- {"¿No tienes cuenta? Regístrate"}
- </Link>
- </Grid>
- </Grid>
- <Copyright sx={{ mt: 5 }} />
- </Box>
- </Box>
- </Grid>
- </Grid>
- <Toaster
- position="top-left"
- reverseOrder={false}
- />
- </ThemeProvider>
- );
- }
|