123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- import React, { useState } from "react";
- import { useDispatch, useSelector } from "react-redux";
- import { actionLogin } from "../../redux/actions/creators/auth";
- import Avatar from "@mui/material/Avatar";
- import Button from "@mui/material/Button";
- import CssBaseline from "@mui/material/CssBaseline";
- import TextField from "@mui/material/TextField";
- import { Link, Navigate } from "react-router-dom";
- import Grid from "@mui/material/Grid";
- import Box from "@mui/material/Box";
- import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
- import Typography from "@mui/material/Typography";
- import Container from "@mui/material/Container";
- import { createTheme, ThemeProvider } from "@mui/material/styles";
- import MuiAlert from "@mui/material/Alert";
- import Snackbar from "@mui/material/Snackbar";
- import { createSelector } from "reselect";
- import { useForm } from "react-hook-form";
- const theme = createTheme({
- palette: {
- mode: "dark",
- },
- });
- const Alert = React.forwardRef(function Alert(props, ref) {
- return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
- });
- const authState = createSelector(
- (state) => state.auth,
- (auth) => auth
- );
- const Login = () => {
- const dispatch = useDispatch();
- const { status, authToken } = useSelector(authState);
- const { register, handleSubmit, reset } = useForm();
- const [error, setError] = useState(false);
- const submitHandler = ({ email, password }) => {
- dispatch(actionLogin(email, password));
- reset();
- };
- const handleClose = (event, reason) => {
- if (reason === "clickaway") return;
- setError(false);
- };
- if (authToken) return <Navigate to="/" />;
- return (
- <ThemeProvider theme={theme}>
- <Snackbar
- open={error || status === "FAIL"}
- autoHideDuration={6000}
- onClose={handleClose}
- >
- <Alert
- onClose={handleClose}
- severity="error"
- sx={{ width: "100%" }}
- >
- Such user is not found OR the data is not correct!
- </Alert>
- </Snackbar>
- <Container component="main" maxWidth="xs">
- <CssBaseline />
- <Box
- sx={{
- marginTop: 8,
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- }}
- >
- <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
- <LockOutlinedIcon />
- </Avatar>
- <Typography component="h1" variant="h5">
- Login
- </Typography>
- <Box
- component="form"
- onSubmit={handleSubmit(submitHandler)}
- noValidate
- sx={{ mt: 1 }}
- >
- <TextField
- margin="normal"
- required
- fullWidth
- id="email"
- label="Email Address"
- name="email"
- autoComplete="email"
- autoFocus
- {...register("email", { required: true })}
- />
- <TextField
- margin="normal"
- required
- fullWidth
- name="password"
- label="Password"
- type="password"
- id="password"
- autoComplete="current-password"
- {...register("password", { required: true })}
- />
- <Button
- type="submit"
- fullWidth
- variant="contained"
- sx={{ mt: 3, mb: 2 }}
- >
- Sign In
- </Button>
- <Grid container>
- <Grid item>
- <Link to="/signup" variant="body2">
- {"Don't have an account? Sign Up"}
- </Link>
- </Grid>
- </Grid>
- </Box>
- </Box>
- </Container>
- </ThemeProvider>
- );
- };
- export default Login;
|