From c554a337b6380ac20cb802647189a37d9f89b17f Mon Sep 17 00:00:00 2001
From: Olaleye Blessing <Olayinkablexxy@gmail.com>
Date: Thu, 21 Apr 2022 05:31:10 +0100
Subject: [PATCH] feat: disable login/signup buttons when all inputs are not
 filled (#141)

---
 frontend/components/Login/Login.jsx | 9 ++++++++-
 frontend/components/Reg/Reg.jsx     | 9 ++++++++-
 frontend/styles/globals.css         | 9 +++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/components/Login/Login.jsx b/frontend/components/Login/Login.jsx
index 086f7a7..f41bfb8 100644
--- a/frontend/components/Login/Login.jsx
+++ b/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>
 
diff --git a/frontend/components/Reg/Reg.jsx b/frontend/components/Reg/Reg.jsx
index b104109..182fa1b 100644
--- a/frontend/components/Reg/Reg.jsx
+++ b/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>
 
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
index 6735050..f0a6a9c 100644
--- a/frontend/styles/globals.css
+++ b/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;
 }