trampa-frontend/src/pages/LoginPage/LoginPage.js

/* eslint-disable */
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { useFormik } from "formik";
import { useDispatch, useSelector } from "react-redux";
import { NavLink } from "react-router-dom";
import * as Yup from "yup";
import { useTranslation } from "react-i18next";
import {
  clearLoginErrors,
  fetchUser,
} from "../../store/actions/login/loginActions";
import { selectLoginError } from "../../store/selectors/loginSelectors";
import { FORGOT_PASSWORD_PAGE, HOME_PAGE } from "../../constants/pages";
import { ReactComponent as VisibilityOn } from "../../assets/images/svg/eye-striked.svg";
import { ReactComponent as VisibilityOff } from "../../assets/images/svg/eye.svg";
import Backdrop from "../../components/MUI/BackdropComponent";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import { LOGIN_USER_LOADING } from "../../store/actions/login/loginActionConstants";
import { TextField } from "../../components/TextFields/TextField/TextField";
import { PrimaryButton } from "../../components/Buttons/PrimaryButton/PrimaryButton";
import { IconButton } from "../../components/Buttons/IconButton/IconButton";
import Link from "../../components/Link/Link";
import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
import {
  LoginPageContainer,
  LoginTitle,
  LoginDescription,
  LoginFormContainer,
  RegisterAltText,
  RegisterTextContainer,
  ErrorMessage,
} from "./Login.styled";
import selectedTheme from "../../themes";

const LoginPage = ({ history }) => {
  const dispatch = useDispatch();
  const { t } = useTranslation();
  const error = useSelector(selectLoginError);

  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => setShowPassword(!showPassword);
  const handleMouseDownPassword = () => setShowPassword(!showPassword);

  // When user refreshes page
  // useEffect(() => {
  // 	function redirectClient() {
  // 		if (!tokens.RefreshToken && !tokens.JwtToken) {
  // 			return;
  // 		}
  // 	}

  // 	redirectClient();
  // }, [history, tokens]);

  const isLoading = useSelector(
    selectIsLoadingByActionType(LOGIN_USER_LOADING)
  );

  useEffect(() => {
    dispatch(clearLoginErrors());
  }, []);

  const handleApiResponseSuccess = () => {
    history.push({
      pathname: HOME_PAGE,
      state: {
        from: history.location.pathname,
      },
    });
  };

  const handleSubmit = (values) => {
    const { email, password: password } = values;
    dispatch(clearLoginErrors());
    dispatch(
      fetchUser({
        email,
        password,
        handleApiResponseSuccess,
      })
    );
  };

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: Yup.object().shape({
      email: Yup.string().required(t("login.mailRequired")),
      password: Yup.string()
        .required(t("login.passwordRequired"))
        .min(8, t("login.passwordLength")),
    }),
    onSubmit: handleSubmit,
    validateOnBlur: true,
    enableReinitialize: true,
  });
  useEffect(() => {
    if (error) {
      if (formik.errors.email || formik.errors.password) {
        dispatch(clearLoginErrors());
      }
    }
  }, [formik.errors.email, formik.errors.password])

  return (
    <LoginPageContainer>
      <Logo />

      <LoginTitle component="h1" variant="h5">
        {t("login.logInTitle")}
      </LoginTitle>

      <LoginDescription component="h1" variant="h6">
        {t("login.welcomeText")}
      </LoginDescription>

      <LoginFormContainer component="form" onSubmit={formik.handleSubmit}>
        <Backdrop position="absolute" isLoading={isLoading} />

        <TextField
          name="email"
          placeholder={t("common.labelEmail")}
          margin="normal"
          value={formik.values.email}
          onChange={formik.handleChange}
          error={
            (formik.touched.email && formik.errors.email) || error.length > 0
          }
          helperText={formik.touched.email && formik.errors.email}
          autoFocus
          fullWidth
        />

        <TextField
          name="password"
          placeholder={t("common.labelPassword")}
          margin="normal"
          type={showPassword ? "text" : "password"}
          value={formik.values.password}
          onChange={formik.handleChange}
          error={
            (formik.touched.password && formik.errors.password) ||
            error.length > 0
          }
          helperText={formik.touched.password && formik.errors.password}
          fullWidth
          InputProps={{
            endAdornment: (
              <IconButton
                onClick={handleClickShowPassword}
                onMouseDown={handleMouseDownPassword}
              >
                {showPassword ? <VisibilityOn /> : <VisibilityOff />}
              </IconButton>
            ),
          }}
        />
        {formik.errors.password && formik.touched.password && (
          <ErrorMessage>{formik.errors.password}</ErrorMessage>
        )}
        {error.length > 0 && !formik.errors.password && <ErrorMessage>{error}</ErrorMessage>}

        <Link
          to={FORGOT_PASSWORD_PAGE}
          textsize="12px"
          component={NavLink}
          underline="hover"
          align="right"
          style={{
            marginTop: error.length > 0 ? "0" : "18px",
            marginBottom: "18px",
          }}
        >
          {t("login.forgotYourPassword")}
        </Link>

        <PrimaryButton
          type="submit"
          variant="contained"
          height="48px"
          fullWidth
          buttoncolor={selectedTheme.primaryPurple}
          textcolor="white"
          disabled={
            formik.values.email.length === 0 ||
            formik.values.password.length === 0
          }
        >
          {t("login.logIn")}
        </PrimaryButton>

        <RegisterTextContainer>
          <RegisterAltText>
            {t("login.dontHaveAccount").padEnd(2, " ")}
          </RegisterAltText>

          <Link
            to="/register"
            component={NavLink}
            underline="hover"
            align="center"
          >
            {t("login.signUp")}
          </Link>
        </RegisterTextContainer>
      </LoginFormContainer>
    </LoginPageContainer>
  );
};

LoginPage.propTypes = {
  history: PropTypes.shape({
    replace: PropTypes.func,
    push: PropTypes.func,
    location: PropTypes.shape({
      pathname: PropTypes.string,
    }),
  }),
};
export default LoginPage;