From 3cbe046e083de39341848f6c368393a915d3f5b5 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Thu, 21 Sep 2023 10:54:20 -0300
Subject: [PATCH] Refactor: Disable signUp button when form is invalid

---
 src/frontend/src/pages/signUpPage/index.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx
index 4b83bc07d..b151ff023 100644
--- a/src/frontend/src/pages/signUpPage/index.tsx
+++ b/src/frontend/src/pages/signUpPage/index.tsx
@@ -1,5 +1,5 @@
 import * as Form from "@radix-ui/react-form";
-import { FormEvent, useContext, useState } from "react";
+import { FormEvent, useContext, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
@@ -20,6 +20,8 @@ export default function SignUp(): JSX.Element {
   const [inputState, setInputState] =
     useState<signUpInputStateType>(CONTROL_INPUT_STATE);
 
+  const [isDisabled, setDisableBtn] = useState<boolean>(true)
+
   const { password, cnfPassword, username } = inputState;
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const navigate = useNavigate();
@@ -30,6 +32,13 @@ export default function SignUp(): JSX.Element {
     setInputState((prev) => ({ ...prev, [name]: value }));
   }
 
+  useEffect(() => {
+    if (password !== cnfPassword) return setDisableBtn(true);
+    if (password === "" || cnfPassword === "") return setDisableBtn(true);
+    if (username === "") return setDisableBtn(true);
+    setDisableBtn(false);
+  }, [password, cnfPassword, username, handleInput]);
+
   function handleSignup(): void {
     const { username, password } = inputState;
     const newUser: UserInputType = {
@@ -158,6 +167,7 @@ export default function SignUp(): JSX.Element {
           <div className="w-full">
             <Form.Submit asChild>
               <Button
+                disabled={isDisabled}
                 type="submit"
                 className="mr-3 mt-6 w-full"
                 onClick={() => {