Untitled

// external lib dependencies
import { Dialog, DialogContent, Grid } from "@material-ui/core";
import { FC, useState, ClipboardEvent, useEffect } from "react";
import useStyles from "./styles";

// icons
import { RemoveRedEyeRounded } from "@material-ui/icons";
import { VisibilityOff } from "@material-ui/icons";
import { CheckBoxOutlineBlank } from "@material-ui/icons";
import { CheckBox } from "@material-ui/icons";

// absolute path dependencies
import Button from "components/Button";
import useScreenSize from "hooks/useScreenSize";

interface Props {
  open: boolean;
  handleClose: () => void;
  handleSubmitPassword: (password: object) => void;
}

const PasswordSetDialog: FC<Props> = ({ open, handleClose, handleSubmitPassword }) => {
  const classes = useStyles();
  const [passwordOne, setPasswordOne] = useState("");
  const [passwordTwo, setPasswordTwo] = useState("");
  const { isXS } = useScreenSize();
  const [inputType, setInputType] = useState("password");
  const [inputTypeConfirm, setInputTypeConfirm] = useState("password");

  // validations
  const [lengthValidated, setLengthValidated] = useState(false);
  const [lowerValidated, setLowerValidated] = useState(false);
  const [upperValidated, setUpperValidated] = useState(false);
  const [matchValidated, setMatchValidated] = useState(false);
  const [numberValidated, setNumberValidated] = useState(false);

  const [canSendPasswordForm, setCanSendPasswordForm] = useState(true);

  const handleSubmit = (event: any) => {
    event.preventDefault();
    const password = {
      passwordOne: passwordOne,
      passwordTwo: passwordTwo,
    };
    handleSubmitPassword(password);
  };

  // regex
  const lower = new RegExp("(?=.*[a-z])");
  const upper = new RegExp("(?=.*[A-Z])");
  const number = new RegExp("(?=.*[0-9])");
  const length = new RegExp("(?=.{8,})");

  const handlePasswordOneChange = (event: any) => {
    if (lower.test(event.target.value)) {
      setLowerValidated(true);
    } else {
      setLowerValidated(false);
    }

    if (upper.test(event.target.value)) {
      setUpperValidated(true);
    } else {
      setUpperValidated(false);
    }

    if (number.test(event.target.value)) {
      setNumberValidated(true);
    } else {
      setNumberValidated(false);
    }

    if (length.test(event.target.value)) {
      setLengthValidated(true);
    } else {
      setLengthValidated(false);
    }

    setPasswordOne(event.target.value);

    if (lowerValidated && upperValidated && numberValidated && lengthValidated && matchValidated) {
      setCanSendPasswordForm(false);
    } else {
      setCanSendPasswordForm(true);
    }
  };

  const handlePasswordTwoChange = (event: any) => {
    setPasswordTwo(event.target.value);

    if (passwordTwo === passwordOne) {
      setMatchValidated(true);
    } else {
      setMatchValidated(false);
    }

    if (lowerValidated && upperValidated && numberValidated && lengthValidated && matchValidated) {
      setCanSendPasswordForm(false);
    } else {
      setCanSendPasswordForm(true);
    }

    console.log(passwordOne);
    console.log(passwordTwo);
  };

  const preventCopyPaste = (e: ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
  };

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogContent>
        <form onSubmit={handleSubmit}>
          <Grid item className={isXS ? classes.fieldContainerXS : classes.fieldContainer}>
            <label className={classes.passwordFormLabels} htmlFor="passwordOne">
              Add Password
            </label>
            <div className={classes.buttonsContainer}>
              <input
                className={classes.fieldInput}
                type={inputType}
                onCopy={(e) => preventCopyPaste(e)}
                onPaste={(e) => preventCopyPaste(e)}
                onCut={(e) => preventCopyPaste(e)}
                name="passwordOne"
                value={passwordOne}
                onChange={handlePasswordOneChange}
              />
              {inputType === "password" ? (
                <span className={classes.eyeIcon} onClick={() => setInputType("text")}>
                  <RemoveRedEyeRounded></RemoveRedEyeRounded>
                </span>
              ) : (
                <span className={classes.eyeIcon} onClick={() => setInputType("password")}>
                  <VisibilityOff></VisibilityOff>
                </span>
              )}
            </div>
          </Grid>
          <Grid item className={isXS ? classes.fieldContainerXS : classes.fieldContainer}>
            <label className={classes.passwordFormLabels} htmlFor="passwordTwo">
              Repeat Password
            </label>
            <div className={classes.buttonsContainer}>
              <input
                className={classes.fieldInput}
                type={inputTypeConfirm}
                onCopy={(e) => preventCopyPaste(e)}
                onPaste={(e) => preventCopyPaste(e)}
                onCut={(e) => preventCopyPaste(e)}
                name="passwordTwo"
                value={passwordTwo}
                onChange={handlePasswordTwoChange}
              />
              {inputTypeConfirm === "password" ? (
                <span className={classes.eyeIcon} onClick={() => setInputTypeConfirm("text")}>
                  <RemoveRedEyeRounded></RemoveRedEyeRounded>
                </span>
              ) : (
                <span className={classes.eyeIcon} onClick={() => setInputTypeConfirm("password")}>
                  <VisibilityOff></VisibilityOff>
                </span>
              )}
            </div>
          </Grid>
          <Grid item className={isXS ? classes.fieldContainerXS : classes.fieldContainer}>
            <main>
              <div className={classes.passwordCheckContainer}>
                {lengthValidated === false ? <CheckBoxOutlineBlank /> : <CheckBox />}
                <div className={classes.passwordCheckText}>Password must be at least 8 characters long.</div>
              </div>
              <div className={classes.passwordCheckContainer}>
                {lowerValidated === false ? <CheckBoxOutlineBlank /> : <CheckBox />}
                <div className={classes.passwordCheckText}>Password must contain at least one lowercase character.</div>
              </div>
              <div className={classes.passwordCheckContainer}>
                {upperValidated === false ? <CheckBoxOutlineBlank /> : <CheckBox />}
                <div className={classes.passwordCheckText}>Password must contain at least one uppercase character.</div>
              </div>
              <div className={classes.passwordCheckContainer}>
                {numberValidated === false ? <CheckBoxOutlineBlank /> : <CheckBox />}
                <div className={classes.passwordCheckText}>Password must contain at least one number character.</div>
              </div>
              <div className={classes.passwordCheckContainer}>
                {matchValidated === false ? <CheckBoxOutlineBlank /> : <CheckBox />}
                <div className={classes.passwordCheckText}>Passwords must match.</div>
              </div>
            </main>
          </Grid>
          <Grid item className={isXS ? classes.fieldContainerXS : classes.fieldContainer}>
            <span className={classes.mediumTextSpan}>This document will be protected by this password.</span>
            <br />
            <span className={classes.mediumTextSpan}>For downloading it later, you must enter the set password.</span>
          </Grid>
          <Grid item className={isXS ? classes.fieldContainerXS : classes.fieldContainer}>
            <div className={classes.buttonsContainer}>
              <Button className={classes.sensitiveDataButtonSubmit} type="submit" disabled={canSendPasswordForm}>
                Submit
              </Button>
              <Button className={classes.sensitiveDataButtonClose} onClick={handleClose}>
                Cancel
              </Button>
            </div>
          </Grid>
        </form>
      </DialogContent>
    </Dialog>
  );
};

export default PasswordSetDialog;