trampa-frontend/src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.js

import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import {
  FormContainer,
  RegisterDescription,
} from "./FirstPartOfRegistration.styled";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import { TextField } from "../../../../components/TextFields/TextField/TextField";
import { IconButton } from "../../../../components/Buttons/IconButton/IconButton";
import { ReactComponent as VisibilityOn } from "../../../../assets/images/svg/eye.svg";
import { ReactComponent as VisibilityOff } from "../../../../assets/images/svg/eye-striked.svg";
import { PrimaryButton } from "../../../../components/Buttons/PrimaryButton/PrimaryButton";
import selectedTheme from "../../../../themes";

const FirstPartOfRegistration = (props) => {
  const [showPassword, setShowPassword] = useState(false);
  const [emailTakenStatus, setEmailTakenStatus] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    console.log(props.error);
    if (props.error.length > 0) {
      setEmailTakenStatus(true);
    }
  }, [props.error]);

  const formik = useFormik({
    initialValues: {
      mail: "",
      password: "",
    },
    validationSchema: Yup.object().shape({
      mail: Yup.string().email().required(t("login.usernameRequired")),
      password: Yup.string().required(t("login.passwordRequired")).min(8),
    }),
    onSubmit: props.handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });

  const handleClickShowPassword = () => {
    setShowPassword((prevState) => !prevState);
  };
  return (
    <FormContainer component="form" onSubmit={formik.handleSubmit}>
      <RegisterDescription component="p" variant="p">
        {t("register.descriptionFirst")}
      </RegisterDescription>

      <TextField
        name="mail"
        placeholder={t("common.labelEmail")}
        margin="normal"
        value={formik.values.mail}
        onChange={(value) =>
          formik.setFieldValue("mail", value.target.value)
        }
        error={(formik.touched.mail && Boolean(formik.errors.mail)) || emailTakenStatus}
        helperText={formik.touched.mail && formik.errors.mail}
        autoFocus
        fullWidth
      />

      <TextField
        name="password"
        placeholder={t("common.labelPassword")}
        margin="normal"
        type={showPassword ? "text" : "password"}
        value={formik.values.password}
        onChange={(value) =>
          formik.setFieldValue("password", value.target.value)
        }
        error={
          formik.touched.password &&
          Boolean(formik.errors.password)
        }
        helperText={
          formik.touched.password &&
          formik.errors.password
        }
        fullWidth
        InputProps={{
          endAdornment: (
            <IconButton onClick={handleClickShowPassword}>
              {showPassword ? <VisibilityOn /> : <VisibilityOff />}
            </IconButton>
          ),
        }}
      />

      <PrimaryButton
        type="submit"
        variant="contained"
        height="48px"
        fullWidth={true}
        buttoncolor={selectedTheme.primaryPurple}
        textcolor="white"
        disabled={
          formik.values.mail.length === 0 ||
          formik.values.password.length === 0 ||
          formik.values.mail === props.error
        }
      >
        {t("common.continue")}
      </PrimaryButton>
    </FormContainer>
  );
};

FirstPartOfRegistration.propTypes = {
  children: PropTypes.node,
  handleSubmit: PropTypes.func,
  error: PropTypes.string,
};

export default FirstPartOfRegistration;