Fix join form, fix nn assign form button, break admin button

.env.sample

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_MESHDB_URL=http://127.0.0.1:8000/api/v1/
+NEXT_PUBLIC_MESHDB_ADMIN=http://127.0.0.1:8000/admin/
 
 # Docker compose environment variables
 # Set this to true in prod

components/JoinForm/JoinForm.tsx

@@ -16,7 +16,7 @@ import styles from './JoinForm.module.scss'
 
 // import { SubmitHandler, useForm } from 'react-hook-form'
 import Select from 'react-select'
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 
 import Button from "@mui/material/Button";
 
@@ -41,9 +41,10 @@ const options = [
  }
 
 const JoinForm = () => {
-  function parseForm(event: FormData) {
+  function parseForm(event: FormEvent<HTMLFormElement>) {
+    const formData = new FormData(event.currentTarget)
     const data: Record<string, string | Blob | boolean | Number > = {};
-    event.forEach((value, key) => {
+    formData.forEach((value, key) => {
       if (key === 'roof_access' || key === 'ncl') {
         // Special case for the checkbox
         // This won't work for unchecked boxes because JS good language
@@ -75,11 +76,13 @@ const JoinForm = () => {
     return JoinFormInput.parse(data);
   }
 
-  async function sendForm(event: FormData) {
+  // TODO: Redirect them to a thank you/next steps page or something after they have submitted.
+  async function sendForm(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
     console.log(event); 
 
     try {
-      setDisableSubmitButton(true);
+      setIsLoading(true);
       let parsedForm = parseForm(event);
       if (parsedForm === undefined) return;
       let j: JoinFormInput = parsedForm;
@@ -92,20 +95,20 @@ const JoinForm = () => {
     } catch (e) {
       console.log("Could not submit Join Form:");
       toastErrorMessage(e);
-      setDisableSubmitButton(false);
-      return;
+      setIsLoading(false);
+      return
     }
+    setSubmitted(true);
+    setIsLoading(false);
   }
 
-  const initialState = {};
   const [phoneNumber, setPhoneNumber] = useState<E164Number | undefined>()
-
-  const router = useRouter()
-  const [disableSubmitButton, setDisableSubmitButton] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
 
   return <>
     <div className={styles.formBody}>
-      <form action={sendForm}>
+      <form onSubmit={sendForm}>
         <h2>Join NYC Mesh</h2>
         <p>Join our community network! Fill out the form, and we will reach out over email shortly.</p>
         <div>
@@ -145,12 +148,12 @@ const JoinForm = () => {
         <div className={styles.centered}>
           <Button
             type="submit"
-            disabled={disableSubmitButton}
+            disabled={isLoading || submitted}
             variant="contained"
             size="large"
             sx={{ width: "12rem", fontSize: "1rem", m:"1rem"}}
           >
-            Submit
+            { isLoading ? "Loading..." : (submitted ? "Thanks!" : "Submit") }
           </Button>
         </div>
       </form>

components/Landing/Landing.tsx

@@ -11,7 +11,7 @@ const Landing = () => {
     { text: "Query Form", link: "/query" },
     {
       text: "MeshDB Admin",
-      link: process.env.NEXT_PUBLIC_MESHDB_URL + "/admin/",
+      link: process.env.NEXT_PUBLIC_MESHDB_ADMIN,
     },
   ];
 

components/NNAssignForm/NNAssignForm.module.scss

@@ -20,19 +20,6 @@
   outline-offset: 4px;
 }
 
-.submitButton {
-  background-color: black;
-  border-radius: 4px;
-  color: white;
-  margin: 30px 0px 30px 0px;
-  padding: 10px 24px;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  font-size: 16px;
-  outline-offset: 4px;
-}
-
 .formBody button:hover {
   opacity: 0.8;
 }
@@ -97,3 +84,9 @@
 .nnLabel {
   color: #666;
 }
+
+/*FIXME: For the love of god stop duplicating this*/
+.centered {
+  display: flex;
+  justify-content: center;
+}

components/NNAssignForm/NNAssignForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@mui/material/Button";
 import { useFormState } from "react-dom";
 import { useFormStatus } from "react-dom";
 import { NNAssignFormInput, submitNNAssignForm } from "@/app/api";
@@ -73,7 +74,16 @@ export function NNAssignForm() {
             <input type="number" name="install_number" placeholder="Install Number" required />
             <input type="password" name="password" placeholder="Pre-Shared Key" required />
           </div>
-        <button className={styles.submitButton} type="submit" disabled={disableSubmitButton} hidden={disableSubmitButton}>Submit</button>
+        <div className={styles.centered}>
+          <Button
+            type="submit"
+            disabled={disableSubmitButton}
+            hidden={disableSubmitButton}
+            variant="contained"
+            size="large"
+            sx={{ width: "12rem", fontSize: "1rem", m:"1rem"}}
+          >Submit</Button>
+        </div>
         <h3 hidden={!disableSubmitButton} className={styles.nnLabel}>Your Network Number:</h3>
         <h1 hidden={!disableSubmitButton} id="">{networkNumber}</h1>
       </form>