menui_web/src/components/Dialogs/RegisterDialog.js

import React, { useState, useEffect } 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 { showRegulamin } from "../../actions/toggles";
import { tryRegister, notification } from "../../actions";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import BusinessIcon from "@material-ui/icons/Business";
import EmailIcon from "@material-ui/icons/Email";
import LockIcon from "@material-ui/icons/Lock";
import Link from "@material-ui/core/Link";
import validator from "validator";
import { useHistory } from "react-router-dom";

export default function RegisterDialog(props) {
  const initialFormData = {
    firstname: "",
    lastname: "",
    companyName: "",
    adress: "",
    NIP: "",
    email: "",
    password: "",
    repeatPassword: "",
    firstnameError: false,
    lastnameError: false,
    companyNameError: false,
    adressError: false,
    NIPError: false,
    emailError: false,
    passwordError: false,
    repeatPasswordError: false,
  };
  const [formData, setFormData] = useState(initialFormData);
  const dispatch = useDispatch();
  const history = useHistory();
  useEffect(() => {
    document.title = "Menui - Rejestracja";
  });

  // STYLES

  const loginStyles = makeStyles((theme) => ({
    root: {
      textAlign: "center",
      "& .MuiPaper-root": {
        backgroundColor: "#262626",
        color: "#bbbbbb",
      },
      "& .MuiFormHelperText-root": {
        color: "#606060",
        textAlign: "center",
      },
    },
    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",
      },
    },
  }));
  const loginClass = loginStyles();

  // HANDLERS

  const handleRegulaminClick = (event) => {
    event.preventDefault();
    dispatch(showRegulamin());
  };

  const validateForm = () => {
    var valid;
    const validations = {
      firstname: !validator.isEmpty(formData.firstname),
      lastname: !validator.isEmpty(formData.lastname),
      companyName: !validator.isEmpty(formData.companyName),
      adress: !validator.isEmpty(formData.adress),
      NIP: !validator.isEmpty(formData.NIP),
      email: validator.isEmail(formData.email),
      password: validator.isLength(formData.password, {
        min: 8,
        max: 128,
      }),
      repeatPassword: formData.password === formData.repeatPassword,
    };

    setFormData({
      ...formData,
      firstnameError: !validations.firstname,
      lastnameError: !validations.lastname,
      companyNameError: !validations.companyName,
      adressError: !validations.adress,
      NIPError: !validations.NIP,
      emailError: !validations.email,
      passwordError: !validations.password,
      repeatPasswordError: !validations.repeatPassword,
    });
    valid =
      validations.firstname &&
      validations.lastname &&
      validations.email &&
      validations.password &&
      validations.repeatPassword &&
      validations.companyName &&
      validations.adress &&
      validations.NIP;

    return valid;
  };

  const sendForm = (form) => {
    if (validateForm()) {
      dispatch(tryRegister(form));
    } else {
      dispatch(notification("Proszę poprawić formularz.", "error"));
    }
  };

  // CODE

  return (
    <div>
      <Dialog
        className={loginClass.root}
        onClose={() => history.goBack()}
        open={true}
        aria-labelledby="login-title"
      >
        <DialogTitle id="login-title">Rejestracja</DialogTitle>
        <IconButton
          className={loginClass.closeButton}
          onClick={() => history.goBack()}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Divider />
        <DialogContent>
          <div>
            <TextField
              className={loginClass.textInput}
              required
              id="firstname"
              label="Imię"
              type="name"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <AccountCircle color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.firstnameError}
              onChange={(event) => (formData.firstname = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="lastname"
              label="Nazwisko"
              type="name"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <AccountCircle color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.lastnameError}
              onChange={(event) => (formData.lastname = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="companyName"
              label="Nazwa firmy"
              type="name"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <BusinessIcon color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.companyNameError}
              onChange={(event) => (formData.companyName = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="adress"
              label="Adres firmy"
              type="name"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <BusinessIcon color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.adressError}
              onChange={(event) => (formData.adress = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="NIP"
              label="NIP"
              type="name"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <BusinessIcon color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.NIPError}
              onChange={(event) => (formData.NIP = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="email"
              label="Email"
              type="email"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <EmailIcon color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.emailError}
              onChange={(event) => (formData.email = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="password"
              label="Hasło (min. 8 znaków)"
              type="password"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <LockIcon color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.passwordError}
              onChange={(event) => (formData.password = event.target.value)}
            />
            <TextField
              className={loginClass.textInput}
              required
              id="repeat-password"
              label="Powtórz hasło"
              type="password"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <LockIcon color="primary" />
                  </InputAdornment>
                ),
              }}
              error={formData.repeatPasswordError}
              onChange={(event) =>
                (formData.repeatPassword = event.target.value)
              }
            />
          </div>
          <Divider />
          <div className="register-dialog-actions">
            <p>
              Rejestracja oznacza akceptację{" "}
              <span>
                <Link href="#" onClick={(event) => handleRegulaminClick(event)}>
                  regulaminu
                </Link>
              </span>
            </p>
            <div className="register-dialog-button">
              <ButtonSecondary
                onClick={() => sendForm(formData)}
                text="Zarejestruj"
              />
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}