menui_web/src/components/Dialogs/LoginDialog.js

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import Dialog from "@material-ui/core/Dialog";
import Divider from "@material-ui/core/Divider";
import ButtonSecondary from "../Input/ButtonSecondary";
import IconButton from "@material-ui/core/IconButton";
import TextField from "@material-ui/core/TextField";
import CloseIcon from "@material-ui/icons/Close";
import { useDispatch } from "react-redux";
import Link from "@material-ui/core/Link";
import LockIcon from "@material-ui/icons/Lock";
import validator from "validator";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import { tryLogin, notification } from "../../actions";
import { useHistory } from "react-router-dom";

export default function LoginDialog(props) {
  const initialData = {
    email: "",
    password: "",
    emailError: false,
    passwordError: false,
  };
  const [loginData, setLoginData] = useState(initialData);
  const dispatch = useDispatch();
  const history = useHistory();

  const loginStyles = makeStyles((theme) => ({
    root: {
      textAlign: "center",
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
      },
    },
    closeButton: {
      color: "#bbbbbb",
      position: "absolute",
      right: theme.spacing(1),
      top: theme.spacing(1),
    },
    textInput: {
      marginTop: "20px",
      marginBottom: "10px",
      width: "90%",
      "& .MuiInputBase-root": {
        color: "#01c3a9",
      },
      "& .MuiInputLabel-root": {
        color: "#bbbbbb",
      },
    },
    link: {
      fontSize: "0.9rem",
    },
  }));

  const loginClass = loginStyles();

  const validateLogin = () => {
    var valid;
    var validation = {
      email: validator.isEmail(loginData.email),
      password: !validator.isEmpty(loginData.password),
    };
    setLoginData({
      ...loginData,
      emailError: !validation.email,
      passwordError: !validation.password,
    });
    valid = validation.email && validation.password;

    return valid;
  };

  const handleLogin = () => {
    if (validateLogin()) {
      dispatch(tryLogin(loginData.email, loginData.password));
    } else {
      dispatch(notification("Podaj poprawne dane logowania.", "error"));
    }
  };

  // CODE

  return (
    <div>
      <Dialog
        className={loginClass.root}
        onClose={() => history.push("/")}
        open={true}
        aria-labelledby="login-title"
      >
        <DialogTitle id="login-title">Logowanie</DialogTitle>
        <IconButton
          className={loginClass.closeButton}
          onClick={() => history.push("/")}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Divider />
        <DialogContent>
          <TextField
            className={loginClass.textInput}
            required
            id="email"
            label="Email"
            type="email"
            variant="outlined"
            error={loginData.emailError}
            onChange={(event) => (loginData.email = event.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle color="primary" />
                </InputAdornment>
              ),
            }}
          />
          <TextField
            className={loginClass.textInput}
            required
            id="password"
            label="Hasło"
            type="password"
            variant="outlined"
            error={loginData.passwordError}
            onChange={(event) => (loginData.password = event.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <LockIcon color="primary" />
                </InputAdornment>
              ),
            }}
          />
          <div className="login-dialog-buttons">
            <ButtonSecondary onClick={() => handleLogin()} text="Zaloguj" />
          </div>
          <Link
            className={loginClass.link}
            href="#"
            onClick={() => history.push("/forgotpassword")}
          >
            Nie pamiętam hasła.
          </Link>
          <p>
            Nie masz konta?{" "}
            <span>
              <Link href="#" onClick={() => history.push("/register")}>
                Zarejestruj się.
              </Link>
            </span>
          </p>
        </DialogContent>
      </Dialog>
    </div>
  );
}