Fixed bug 472

src/components/Header/Header.js

@@ -73,7 +73,9 @@ const Header = () => {
   const [openDrawer, setOpenDrawer] = useState(false);
 
   useEffect(() => {
-    dispatch(fetchMineProfile());
+    if (user && user?.length > 0) {
+      dispatch(fetchMineProfile());
+    }
   }, []);
   useEffect(() => {
     setUserPopoverOpen(false);
@@ -139,9 +141,6 @@ const Header = () => {
     ) {
       shouldShowHeader = false;
     }
-    if (location.pathname === "/" && user?.length === 0) {
-      shouldShowHeader = false;
-    }
     setShouldShow(shouldShowHeader);
   }, [location.pathname, user, routeMatch]);
 

src/components/Login/ErrorMessage/ErrorMessage.js

@@ -9,11 +9,12 @@ const ErrorMessage = (props) => {
   const error = useSelector(selectLoginError);
   return (
     <>
-      {formik.errors.password && formik.touched.password && (
-        <ErrorText>{formik.errors.password}</ErrorText>
-      )}
-      {error.length > 0 && !formik.errors.password && (
+      {error.length > 0 ? (
         <ErrorText>{error}</ErrorText>
+      ) : formik.errors.email?.length > 0 && formik.touched.email ? (
+        <ErrorText>{formik.errors.email}</ErrorText>
+      ) : formik.errors.password?.length > 0 && formik.touched.password && (
+        <ErrorText>{formik.errors.password}</ErrorText>
       )}
     </>
   );

src/components/Login/Fields/Password/PasswordField.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import IconButton from "../../../IconButton/IconButton";
 import { ReactComponent as VisibilityOn } from "../../../../assets/images/svg/eye-striked.svg";
@@ -8,30 +8,40 @@ import { selectLoginError } from "../../../../store/selectors/loginSelectors";
 import { TextField } from "../../../TextFields/TextField/TextField";
 import { useTranslation } from "react-i18next";
 
-const PasswordField = (props) => {
+const PasswordField = forwardRef((props, ref) => {
   const formik = props.formik;
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const handleMouseDownPassword = () => setShowPassword(!showPassword);
   const error = useSelector(selectLoginError);
   const {t} = useTranslation();
+  // useEffect(() => {
+  //   console.log("error", error);
+  //   console.log("formik errors password", formik.errors.password);
+  //   console.log("formik touched", formik.touched);
+  //   console.log("formik.isVaid", formik);
+  //   if (!formik.isValid) formik.setFieldValue("password", "");
+  //   // if (error?.length > 0 || formik.errors.password) {
+  //   //   formik.setFieldValue("password", "");
+  //   //   console.log(formik.errors.password)
+  //   // }
+  // }, [formik.isValid])
+
   useEffect(() => {
-    if (error?.length > 0 || formik.errors.password) {
-      formik.setFieldValue("password", "");
-      console.log(formik.errors.password)
-    }
-  }, [error, formik.errors.password])
+    console.log(error);
+  }, [error])
 
   return (
     <TextField
       name="password"
+      ref={ref}
       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
+        (formik.touched.password && formik.errors.password?.length > 0) || error.length > 0
       }
       helperText={formik.touched.password && formik.errors.password}
       fullWidth
@@ -47,7 +57,9 @@ const PasswordField = (props) => {
       }}
     />
   );
-};
+});
+
+PasswordField.displayName = "PasswordField";
 
 PasswordField.propTypes = {
   formik: PropTypes.any,

src/components/Login/Login.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { useFormik } from "formik";
 import { useDispatch, useSelector } from "react-redux";
@@ -26,6 +26,8 @@ const Login = () => {
   const dispatch = useDispatch();
   const error = useSelector(selectLoginError);
   const history = useHistory();
+  const passwordRef = useRef(null);
+  const [passwordReset, setPasswordReseted] = useState(false);
 
   useEffect(() => {
     dispatch(clearLoginErrors());
@@ -40,17 +42,42 @@ const Login = () => {
     });
   };
 
+  useEffect(() => {
+    if (passwordReset) {
+      formik.setFieldValue("password", "");
+    }
+  }, [passwordReset]);
+
+  const handleApiResponseError = () => {
+    setPasswordReseted(true);
+  };
+
+  const handleSubmitForm = (e) => {
+    e.preventDefault();
+    console.log("handle submit form");
+    if (!formik.isValid) {
+      console.log("greska");
+      formik.setFieldValue("password", "");
+    }
+    formik.handleSubmit(e);
+  };
+
   const handleSubmit = (values) => {
     const { email, password } = values;
-    dispatch(clearLoginErrors());
-    dispatch(
-      fetchLogin({
-        email,
-        password,
-        handleApiResponseSuccess,
-      })
-    );
-    console.log(values);
+    if (!formik.isValid) {
+      console.log("invalid");
+    } else {
+      dispatch(clearLoginErrors());
+      dispatch(
+        fetchLogin({
+          email,
+          password,
+          handleApiResponseSuccess,
+          handleApiResponseError,
+        })
+      );
+      console.log(values);
+    }
   };
 
   const formik = useFormik({
@@ -64,7 +91,11 @@ const Login = () => {
   useEffect(() => {
     if (error) {
       if (formik.errors.email || formik.errors.password) {
-        dispatch(clearLoginErrors());
+        if (!passwordReset) {
+          dispatch(clearLoginErrors());
+        } else {
+          setPasswordReseted(false);
+        }
       }
     }
   }, [formik.errors.email, formik.errors.password]);
@@ -74,9 +105,9 @@ const Login = () => {
       <Logo />
       <LoginTitle />
       <LoginDescription />
-      <LoginFormContainer component="form" onSubmit={formik.handleSubmit}>
+      <LoginFormContainer component="form" onSubmit={handleSubmitForm}>
         <EmailField formik={formik} />
-        <PasswordField formik={formik} />
+        <PasswordField formik={formik} ref={passwordRef} />
         <ErrorMessage formik={formik} />
         <ForgotPasswordLink />
         <LoginButton formik={formik} />

src/components/Login/LoginButton/LoginButton.js

@@ -14,7 +14,6 @@ const LoginButton = (props) => {
       height="48px"
       fullWidth
       buttoncolor={selectedTheme.primaryPurple}
-      onClick={formik.handleSubmit}
       textcolor="white"
       disabled={
         formik.values.email.length === 0 || formik.values.password.length === 0

src/store/saga/loginSaga.js

@@ -39,7 +39,6 @@ import { clearChat } from "../actions/chat/chatActions";
 
 function* fetchLogin({ payload }) {
   try {
-    console.log('barem ide')
     const { data } = yield call(attemptLogin, payload);
     if (data.token) {
       const token = data.token;