Disable button during reg.

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 {

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>