trampa-frontend/src/pages/LoginPage/LoginPageMUI.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/VisibilityOn.svg";
import { ReactComponent as VisibilityOff } from "../../assets/images/svg/VisibilityOff.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";
<<<<<<< HEAD
import Link from "../../components/Link/Link";
import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
import {
  ComponentContainer,
  LoginTitle,
  LoginDescription,
  LoginFormContainer,
  RegisterAltText,
  RegisterTextContainer,
} from "./Login.styled";
=======
import { Icon } from "../../components/Icon/Icon";
import PrimaryButtonWithIcon from "../../components/Buttons/PrimaryButtonWithIcon/PrimaryButtonWithIcon";
import TextFieldWithIcon from "../../components/TextFields/TextFieldWithIcon/TextFieldWithIcon";
import DropdownList from "../../components/Dropdown/DropdownList/DropdownList";
import DropdownItem from "../../components/Dropdown/DropdownItem/DropdownItem";
import { CheckBox } from "../../components/CheckBox/CheckBox";
import selectedTheme from "../../themes";
>>>>>>> 0ab484f415ede89d54c28a177d12f746fce4da4c

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)
  );

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

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

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

  return (
    <ComponentContainer>
      <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="username"
          placeholder={t("common.labelEmail")}
          margin="normal"
          value={formik.values.username}
          onChange={formik.handleChange}
          error={formik.touched.username && Boolean(formik.errors.username)}
          helperText={formik.touched.username && formik.errors.username}
          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 && Boolean(formik.errors.password)}
          helperText={formik.touched.password && formik.errors.password}
          fullWidth={true}
          InputProps={{
            endAdornment: (
              <IconButton
                onClick={handleClickShowPassword}
                onMouseDown={handleMouseDownPassword}
              >
                {showPassword ? <VisibilityOn /> : <VisibilityOff />}
              </IconButton>
            ),
          }}
        />

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

        <PrimaryButton
          type="submit"
          variant="contained"
          height="48px"
          fullWidth={true}
          buttoncolor={PRIMARY_PURPLE_COLOR}
          textcolor="white"
          disabled={
            formik.values.username.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"
=======
          <Backdrop position="absolute" isLoading={isLoading} />
          <TextField
            name="username"
            placeholder={t("common.labelUsername")}
            margin="normal"
            value={formik.values.username}
            onChange={formik.handleChange}
            error={formik.touched.username && Boolean(formik.errors.username)}
            helperText={formik.touched.username && formik.errors.username}
            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 && Boolean(formik.errors.password)}
            helperText={formik.touched.password && formik.errors.password}
            fullWidth
            InputProps={{
              endAdornment: (
                <IconButton
                  onClick={handleClickShowPassword}
                  onMouseDown={handleMouseDownPassword}
                >
                  {showPassword ? <Visibility /> : <VisibilityOff />}
                </IconButton>
              ),
            }}
          />

          <DropdownList
            title="Naslov"
            toggleIconOpened={<Visibility />}
            toggleIconClosed={<VisibilityOff />}
            dropdownIcon={<LocationOnOutlined />}
            fullWidth
            defaultOpen={false}
          >
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
            <DropdownItem>
              <CheckBox fullWidth leftText="Kategorija" rightText="124" />
            </DropdownItem>
          </DropdownList>

          <PrimaryButtonWithIcon
            icon={<Visibility />}
            sx={{ mt: 3, mb: 2 }}
            buttonProps={{
              type: "submit",
              variant: "contained",
              height: "40px",
              fullWidth: true,
              buttoncolor: selectedTheme.primaryPurple,
              textcolor: "white",
            }}
>>>>>>> 0ab484f415ede89d54c28a177d12f746fce4da4c
          >
            {t("login.signUp")}
          </Link>

        </RegisterTextContainer>

      </LoginFormContainer>

    </ComponentContainer>
  );
};

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