menui_web/src/components/Dialogs/ResetPassword.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 validator from "validator";
import InputAdornment from "@material-ui/core/InputAdornment";
import AccountCircle from "@material-ui/icons/AccountCircle";
import { useHistory, useLocation } from "react-router-dom";
import { changePassword, notification } from "../../actions/index";

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

export default function ResetPassword(props) {
  const initialData = {
    email: "",
    emailError: false,
    password: "",
    passwordError: false,
    passwordRepeat: "",
    passwordRepeatError: false,
  };
  const [data, setData] = useState(initialData);
  const dispatch = useDispatch();
  const history = useHistory();
  const query = useQuery();
  const token = query.get("token");

  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(data.email),
      password: validator.isLength(data.password, { min: 6 }),
      passwordRepeat: data.passwordRepeat === data.password,
    };
    setData({
      ...data,
      emailError: !validation.email,
      passwordError: !validation.password,
      passwordRepeatError: !validation.passwordRepeat,
    });
    valid =
      validation.password && validation.passwordRepeat && validation.email;
    return valid;
  };

  const handleReset = () => {
    if (validateLogin()) {
      dispatch(changePassword(data.email, data.password, token));
    } else {
      dispatch(notification("Popraw dane.", "error"));
    }
  };

  // CODE

  return (
    <div>
      <Dialog
        className={loginClass.root}
        onClose={() => history.push("/")}
        open={true}
        aria-labelledby="login-title"
      >
        <DialogTitle id="login-title">Ustaw nowe hasło</DialogTitle>
        <IconButton
          className={loginClass.closeButton}
          onClick={() => history.push("/")}
          aria-label="close"
        >
          <CloseIcon />
        </IconButton>
        <Divider />
        <DialogContent>
          <p>Podaj nowe bezpieczne hasło do konta.</p>
          <TextField
            className={loginClass.textInput}
            required
            id="email"
            label="Email"
            type="email"
            variant="outlined"
            error={data.emailError}
            onChange={(event) => (data.email = event.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle color="primary" />
                </InputAdornment>
              ),
            }}
          />
          <TextField
            className={loginClass.textInput}
            required
            id="password"
            label="Nowe hasło"
            type="password"
            variant="outlined"
            error={data.passwordError}
            onChange={(event) => (data.password = event.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle color="primary" />
                </InputAdornment>
              ),
            }}
          />
          <TextField
            className={loginClass.textInput}
            required
            id="passwordRepeat"
            label="Powtórz nowe hasło"
            type="password"
            variant="outlined"
            error={data.passwordRepeatError}
            onChange={(event) => (data.passwordRepeat = event.target.value)}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle color="primary" />
                </InputAdornment>
              ),
            }}
          />
          <div className="login-dialog-buttons">
            <ButtonSecondary onClick={() => handleReset()} text="Zmień hasło" />
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}