Merge pull request #52 from ChangePlusPlusVandy/Registration-error-me…

…ssage added error message on registration page
ChangePlusPlusVandy · Nov 3, 2024 · 347cbc3 · 347cbc3
2 parents 4db0bc7 + a4d24ed
commit 347cbc3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/pages/SignUpPage/SignUpPage.module.css b/src/pages/SignUpPage/SignUpPage.module.css
@@ -103,3 +103,9 @@
   margin-top: 0.25rem;
   margin-bottom: 1rem;
 }
+
+.errorMsg {
+  color: rgb(165, 56, 51);
+  margin-top: 16px;
+  text-align: center;
+}
diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx
@@ -19,6 +19,7 @@ const SignUpPage = () => {
   const navigate = useNavigate();
   const { isLoaded, signUp, setActive } = useSignUp();
   const [pendingVerification, setPendingVerification] = useState(false);
+  const [errorMsg, setErrorMsg] = useState(null);
 
   const signUpSchema = yup.object().shape({
     email: yup.string().email().required("Required"),
@@ -104,6 +105,7 @@ const SignUpPage = () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       console.error(JSON.stringify(error, null, 2));
+      setErrorMsg(error.errors[0].message);
     }
   };
 
@@ -232,6 +234,7 @@ const SignUpPage = () => {
               </div>
               <Button type="submit" text={"Sign Up"} disabled={disabled} />
             </form>
+            <p className={styles.errorMsg}>{errorMsg}</p>
           </div>
         ) : (
           <div className={styles.signUpBlock}>