feat: disable login/signup buttons when all inputs are not filled (#141)

frontend/components/Login/Login.jsx

@@ -29,6 +29,9 @@ function Login() {
     user.login(userData)
   }
 
+  // disable submit button is any input has not been filled
+  const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
+
   if (user.user) {
     router.push('/dashboard')
   }
@@ -69,7 +72,11 @@ function Login() {
           />
         </div>
 
-        <button type="submit" className="submit-button">
+        <button
+          type="submit"
+          className="submit-button"
+          disabled={disabledSubmitBtn}
+        >
           Submit
         </button>
 

frontend/components/Reg/Reg.jsx

@@ -28,6 +28,9 @@ function Reg() {
     context.createAcc(userData)
   }
 
+  // disable submit button is any input has not been filled
+  const disabledSubmitBtn = Object.values(userData).some((val) => val === '')
+
   if (context.user) {
     router.push('/dashboard')
   }
@@ -96,7 +99,11 @@ function Reg() {
           />
         </div>
 
-        <button type="submit" className="submit-button">
+        <button
+          type="submit"
+          className="submit-button"
+          disabled={disabledSubmitBtn}
+        >
           Submit
         </button>
 

frontend/styles/globals.css

@@ -9,8 +9,8 @@ body {
   overflow-y: auto;
 }
 
-a, a:hover 
-{
+a,
+a:hover {
   color: inherit;
   text-decoration: none;
 }
@@ -50,6 +50,11 @@ body::-webkit-scrollbar-thumb {
   border-width: 2px 0 2px;
   border-radius: 10px;
 }
+
+button:disabled {
+  cursor: not-allowed;
+}
+
 .home{
   cursor: pointer;
 }