Add required error message for sign up password field

Author: ruiqi7

frontend/src/components/PasswordTextField/index.tsx

@@ -1,4 +1,10 @@
-import { Check, Clear, Visibility, VisibilityOff } from "@mui/icons-material";
+import {
+  Check,
+  Circle,
+  Clear,
+  Visibility,
+  VisibilityOff,
+} from "@mui/icons-material";
 import {
   IconButton,
   InputAdornment,
@@ -37,7 +43,16 @@ const TooltipMessage: React.FC<{
               paddingTop: theme.spacing(0.7),
             })}
           >
-            {validator.validate(input) ? (
+            {!input ? (
+              <Circle
+                sx={(theme) => ({
+                  fontSize: theme.spacing(0.8),
+                  marginTop: theme.spacing(0.8),
+                  marginLeft: theme.spacing(0.8),
+                  color: "white",
+                })}
+              />
+            ) : validator.validate(input) ? (
               <Check
                 sx={(theme) => ({
                   fontSize: theme.spacing(2.5),

frontend/src/pages/SignUp/index.tsx

@@ -12,7 +12,10 @@ import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { useForm } from "react-hook-form";
 import PasswordTextField from "../../components/PasswordTextField";
-import { USE_AUTH_ERROR_MESSAGE } from "../../utils/constants";
+import {
+  PASSWORD_REQUIRED_ERROR_MESSAGE,
+  USE_AUTH_ERROR_MESSAGE,
+} from "../../utils/constants";
 
 const SignUp: React.FC = () => {
   const navigate = useNavigate();
@@ -138,6 +141,7 @@ const SignUp: React.FC = () => {
               input={watch("password", "")}
               {...register("password", {
                 setValueAs: (value: string) => value.trim(),
+                required: PASSWORD_REQUIRED_ERROR_MESSAGE,
                 validate: { passwordValidator },
               })}
               error={!!errors.password}