Keep tooltip open if password field is in focus

Author: ruiqi7

frontend/src/components/ChangePasswordModal/index.tsx

@@ -108,12 +108,9 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
               {...register("confirmPassword", {
                 setValueAs: (value: string) => value.trim(),
                 validate: {
-                  matchPassword: (value) => {
-                    return (
-                      watch("newPassword") === value ||
-                      PASSWORD_MISMATCH_ERROR_MESSAGE
-                    );
-                  },
+                  matchPassword: (value) =>
+                    watch("newPassword") === value ||
+                    PASSWORD_MISMATCH_ERROR_MESSAGE,
                 },
               })}
               error={!!errors.confirmPassword}

frontend/src/components/PasswordTextField/index.tsx

@@ -29,10 +29,7 @@ const TooltipMessage: React.FC<{
         <ListItem
           key={index}
           sx={(theme) => ({
-            paddingLeft: theme.spacing(0.2),
-            paddingRight: theme.spacing(0.2),
-            paddingTop: 0,
-            paddingBottom: 0,
+            padding: theme.spacing(0, 0.2),
             alignItems: "flex-start",
           })}
         >
@@ -63,7 +60,7 @@ const TooltipMessage: React.FC<{
               <Clear
                 sx={(theme) => ({
                   fontSize: theme.spacing(2.5),
-                  color: "#9A2A2A",
+                  color: "error.main",
                 })}
               />
             )}
@@ -79,11 +76,31 @@ const PasswordTextField = forwardRef<
   HTMLInputElement,
   TextFieldProps & { displayTooltip?: boolean; input?: string }
 >((props, ref) => {
-  const [showPassword, setShowPassword] = useState<boolean>(false);
   const { displayTooltip = false, input = "", ...rest } = props;
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [openTooltip, setOpenTooltip] = useState<boolean>(false);
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+
+  const handleMouseEnter = () => {
+    setOpenTooltip(true);
+  };
+  const handleMouseLeave = () => {
+    if (!isFocused) {
+      setOpenTooltip(false);
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    setOpenTooltip(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    setOpenTooltip(false);
+  };
 
   return (
     <Tooltip
+      open={openTooltip}
       title={displayTooltip && <TooltipMessage input={input} />}
       arrow
       placement="right"
@@ -116,6 +133,10 @@ const PasswordTextField = forwardRef<
             ),
           },
         }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
       />
     </Tooltip>
   );

frontend/src/contexts/AuthContext.tsx

@@ -37,20 +37,25 @@ const AuthContext = createContext<AuthContextType | null>(null);
 const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
   const { children } = props;
   const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const navigate = useNavigate();
 
   useEffect(() => {
     const accessToken = localStorage.getItem("token");
-    userClient
-      .get("/auth/verify-token", {
-        headers: { Authorization: `Bearer ${accessToken}` },
-      })
-      .then((res) => setUser(res.data.data))
-      .catch(() => setUser(null))
-      .finally(() => {
-        setTimeout(() => setLoading(false), 500);
-      });
+    if (accessToken) {
+      setLoading(true);
+      userClient
+        .get("/auth/verify-token", {
+          headers: { Authorization: `Bearer ${accessToken}` },
+        })
+        .then((res) => setUser(res.data.data))
+        .catch(() => setUser(null))
+        .finally(() => {
+          setTimeout(() => setLoading(false), 500);
+        });
+    } else {
+      setUser(null);
+    }
   }, []);
 
   const signup = (
@@ -71,7 +76,7 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       .then(() => login(email, password))
       .catch((err) => {
         setUser(null);
-        toast.error(err.response.data.message);
+        toast.error(err.response?.data.message || err.message);
       });
   };
 
@@ -89,7 +94,7 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
       })
       .catch((err) => {
         setUser(null);
-        toast.error(err.response.data.message);
+        toast.error(err.response?.data.message || err.message);
       });
   };
 

frontend/src/contexts/ProfileContext.tsx

@@ -68,7 +68,7 @@ const ProfileContextProvider: React.FC<{ children: React.ReactNode }> = ({
       })
       .catch((err) => {
         const message =
-          err.response.data.message || FAILED_PROFILE_UPDATE_MESSAGE;
+          err.response?.data.message || FAILED_PROFILE_UPDATE_MESSAGE;
         toast.error(message);
       });
   };
@@ -89,7 +89,7 @@ const ProfileContextProvider: React.FC<{ children: React.ReactNode }> = ({
       )
       .then(() => toast.success(SUCCESS_PW_UPDATE_MESSAGE))
       .catch((err) => {
-        const message = err.response.data.message || FAILED_PW_UPDATE_MESSAGE;
+        const message = err.response?.data.message || FAILED_PW_UPDATE_MESSAGE;
         toast.error(message);
       });
   };

frontend/src/reducers/questionReducer.ts

@@ -112,7 +112,7 @@ export const createQuestion = async (
     .catch((err) => {
       dispatch({
         type: QuestionActionTypes.ERROR_CREATING_QUESTION,
-        payload: err.response.data.message,
+        payload: err.response?.data.message || err.message,
       });
       return false;
     });
@@ -130,7 +130,7 @@ export const getQuestionCategories = (dispatch: Dispatch<QuestionActions>) => {
     .catch((err) =>
       dispatch({
         type: QuestionActionTypes.ERROR_FETCHING_QUESTION_CATEGORIES,
-        payload: err.response.data.message,
+        payload: err.response?.data.message || err.message,
       })
     );
 };
@@ -162,7 +162,7 @@ export const getQuestionList = (
     .catch((err) =>
       dispatch({
         type: QuestionActionTypes.ERROR_FETCHING_QUESTION_LIST,
-        payload: err.response.data.message,
+        payload: err.response?.data.message || err.message,
       })
     );
 };
@@ -182,7 +182,7 @@ export const getQuestionById = (
     .catch((err) =>
       dispatch({
         type: QuestionActionTypes.ERROR_FETCHING_SELECTED_QN,
-        payload: err.response.data.message,
+        payload: err.response?.data.message || err.message,
       })
     );
 };
@@ -218,7 +218,7 @@ export const updateQuestionById = async (
     .catch((err) => {
       dispatch({
         type: QuestionActionTypes.ERROR_UPDATING_QUESTION,
-        payload: err.response.data.message,
+        payload: err.response?.data.message || err.message,
       });
       return false;
     });