Merge pull request #48 from ruiqi7/feature/user-authentication

Implement dynamic tooltips for password fields

Author: feliciagan

frontend/src/components/ChangePasswordModal/index.tsx

@@ -11,6 +11,11 @@ import { useForm } from "react-hook-form";
 import { useProfile } from "../../contexts/ProfileContext";
 import { passwordValidator } from "../../utils/validators";
 import PasswordTextField from "../PasswordTextField";
+import {
+  PASSWORD_MISMATCH_ERROR_MESSAGE,
+  PASSWORD_REQUIRED_ERROR_MESSAGE,
+  USE_PROFILE_ERROR_MESSAGE,
+} from "../../utils/constants";
 
 interface ChangePasswordModalProps {
   open: boolean;
@@ -26,8 +31,9 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
   const {
     register,
     handleSubmit,
-    formState: { errors, isDirty, isValid },
+    formState: { errors, dirtyFields, isDirty, isValid },
     watch,
+    trigger,
   } = useForm<{
     oldPassword: string;
     newPassword: string;
@@ -39,16 +45,18 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
   const profile = useProfile();
 
   if (!profile) {
-    throw new Error("useProfile() must be used within ProfileContextProvider");
+    throw new Error(USE_PROFILE_ERROR_MESSAGE);
   }
 
   const { updatePassword } = profile;
 
   return (
     <Dialog fullWidth open={open} onClose={onClose}>
-      <DialogTitle fontSize={24}>Change password</DialogTitle>
+      <DialogTitle fontSize={24} sx={{ paddingBottom: 0 }}>
+        Change password
+      </DialogTitle>
       <DialogContent>
-        <Container maxWidth="sm">
+        <Container maxWidth="sm" disableGutters>
           <StyledForm
             onSubmit={handleSubmit((data) => {
               updatePassword({
@@ -63,8 +71,10 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
               required
               fullWidth
               margin="normal"
+              sx={(theme) => ({ marginTop: theme.spacing(1) })}
               {...register("oldPassword", {
-                required: "Required field",
+                setValueAs: (value: string) => value.trim(),
+                required: PASSWORD_REQUIRED_ERROR_MESSAGE,
               })}
               error={!!errors.oldPassword}
               helperText={errors.oldPassword?.message}
@@ -75,8 +85,16 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
               required
               fullWidth
               margin="normal"
+              sx={(theme) => ({ marginTop: theme.spacing(1) })}
+              input={watch("newPassword", "")}
               {...register("newPassword", {
+                setValueAs: (value: string) => value.trim(),
                 validate: { passwordValidator },
+                onChange: () => {
+                  if (dirtyFields.confirmPassword) {
+                    trigger("confirmPassword");
+                  }
+                },
               })}
               error={!!errors.newPassword}
               helperText={errors.newPassword?.message}
@@ -86,10 +104,13 @@ const ChangePasswordModal: React.FC<ChangePasswordModalProps> = (props) => {
               required
               fullWidth
               margin="normal"
+              sx={(theme) => ({ marginTop: theme.spacing(1) })}
               {...register("confirmPassword", {
+                setValueAs: (value: string) => value.trim(),
                 validate: {
                   matchPassword: (value) =>
-                    watch("newPassword") === value || "Password does not match",
+                    watch("newPassword") === value ||
+                    PASSWORD_MISMATCH_ERROR_MESSAGE,
                 },
               })}
               error={!!errors.confirmPassword}

frontend/src/components/CustomTextField/index.tsx

@@ -11,6 +11,7 @@ import {
 import { useForm } from "react-hook-form";
 import { useProfile } from "../../contexts/ProfileContext";
 import { bioValidator, nameValidator } from "../../utils/validators";
+import { USE_PROFILE_ERROR_MESSAGE } from "../../utils/constants";
 
 interface EditProfileModalProps {
   onClose: () => void;
@@ -47,16 +48,18 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
   const profile = useProfile();
 
   if (!profile) {
-    throw new Error("useProfile() must be used within ProfileContextProvider");
+    throw new Error(USE_PROFILE_ERROR_MESSAGE);
   }
 
   const { updateProfile } = profile;
 
   return (
     <Dialog open={open} onClose={onClose}>
-      <DialogTitle fontSize={24}>Edit profile</DialogTitle>
+      <DialogTitle fontSize={24} sx={{ paddingBottom: 0 }}>
+        Edit profile
+      </DialogTitle>
       <DialogContent>
-        <Container maxWidth="sm">
+        <Container maxWidth="sm" disableGutters>
           <StyledForm
             onSubmit={handleSubmit((data) => {
               updateProfile(data);
@@ -68,7 +71,9 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
               required
               label="First name"
               margin="normal"
+              sx={(theme) => ({ marginTop: theme.spacing(1) })}
               {...register("firstName", {
+                setValueAs: (value: string) => value.trim(),
                 validate: { nameValidator },
               })}
               error={!!errors.firstName}
@@ -79,7 +84,9 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
               required
               label="Last name"
               margin="normal"
+              sx={(theme) => ({ marginTop: theme.spacing(1) })}
               {...register("lastName", {
+                setValueAs: (value: string) => value.trim(),
                 validate: { nameValidator },
               })}
               error={!!errors.lastName}
@@ -90,7 +97,9 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
               multiline
               label="Biography"
               margin="normal"
+              sx={(theme) => ({ marginTop: theme.spacing(1) })}
               {...register("biography", {
+                setValueAs: (value: string) => value.trim(),
                 validate: { bioValidator },
               })}
             />

frontend/src/components/EditProfileModal/index.tsx

@@ -17,6 +17,7 @@ import AppMargin from "../AppMargin";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import { useState } from "react";
+import { USE_AUTH_ERROR_MESSAGE } from "../../utils/constants";
 
 type NavbarItem = { label: string; link: string };
 
@@ -29,7 +30,7 @@ const Navbar: React.FC<NavbarProps> = (props) => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   if (!auth) {
-    throw new Error("useAuth() must be used within AuthProvider");
+    throw new Error(USE_AUTH_ERROR_MESSAGE);
   }
 
   const { logout, user } = auth;