From afb0e0abd93aa6c71a7cd863233a196d22c68f19 Mon Sep 17 00:00:00 2001
From: Thomas E Lackey <telackey@bozemanpass.com>
Date: Wed, 13 Sep 2023 16:37:49 -0500
Subject: [PATCH] Disable button during reg.

---
 src/App.css                          | 9 +++++++--
 src/components/pages/RegisterPage.js | 6 +++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index 73454c8..82d4078 100644
--- a/src/App.css
+++ b/src/App.css
@@ -115,8 +115,13 @@ input {
 }
 
 #sub_btn:hover {
-    background: #333;
-    transition: all .5s
+    background: #000;
+    transition: all .1s
+}
+
+#sub_btn:disabled {
+    background: #ccc;
+    transition: all .1s
 }
 
 footer p {
diff --git a/src/components/pages/RegisterPage.js b/src/components/pages/RegisterPage.js
index 98a23dd..6ef010e 100644
--- a/src/components/pages/RegisterPage.js
+++ b/src/components/pages/RegisterPage.js
@@ -9,8 +9,10 @@ export default function SignUpPage() {
     const [apiKey, setApiKey] = useState("");
     const [message, setMessage] = useState("");
     const [error, setError] = useState("");
+    const [buttonDisabled, setButtonDisabled] = useState(false);
 
     let handleSubmit = async (e) => {
+        setButtonDisabled(true);
         setApiKey("");
         setMessage("");
         setError("");
@@ -41,6 +43,8 @@ export default function SignUpPage() {
             }
         } catch (err) {
             setError("An error occurred.");
+        } finally {
+            setButtonDisabled(false);
         }
     };
 
@@ -80,7 +84,7 @@ export default function SignUpPage() {
                                 rel="noopener noreferrer">terms of service</a></span>.
                         </p>
                         <p>
-                            <button id="sub_btn" type="submit">Register</button>
+                            <button id="sub_btn" type="submit" disabled={buttonDisabled}>Register</button>
                         </p>
                     </form>
                     <div className="error">{error ? <p>{error}</p> : null}</div>