Rework how form data is collected for signup

static/build/index.js

@@ -14,6 +14,11 @@ document.addEventListener("DOMContentLoaded", function () {
         submitSignup();
     });
     
+    const usernameInput = document.getElementById("signup_username");
+    usernameInput.addEventListener("blur", function () {
+        checkUsernameAvailability();
+    });
+    
 
     loginForm.addEventListener("submit", function (event) {
         event.preventDefault(); // Prevent the form from being submitted normally
@@ -31,15 +36,9 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 });
 
-const usernameInput = document.getElementById("signup-username");
-usernameInput.addEventListener("blur", function () {
-    checkUsernameAvailability();
-});
-
-
 
 function checkUsernameAvailability() {
-    const usernameInput = document.getElementById("signup-username");
+    const usernameInput = document.getElementById("signup_username");
     const availabilityDiv = document.getElementById("usernameAvailability");
 
     // Get the value of the username input
@@ -78,18 +77,18 @@ function submitSignup() {
     submitBtn.innerHTML = '';
     submitBtn.appendChild(spinner);
 
-    // Get the values of the signup form fields
+    // Get the values of the form fields
+    const signup_username = document.getElementById("signup_username").value;
+    const signup_password = document.getElementById("signup_password").value;
     const name = document.getElementById("name").value;
     const email = document.getElementById("email").value;
-    const username = document.getElementById("signup-username").value;
-    const password = document.getElementById("signup-password").value;
 
     // Create a new FormData object and append the values
     const formData = new FormData();
     formData.append("name", name);
     formData.append("email", email);
-    formData.append("username", username);
+    formData.append("username", signup_username);
-    formData.append("password", password);
+    formData.append("password", signup_password);
 
     // Send the signup request as form data
     const xhr = new XMLHttpRequest();

templates/index.html

@@ -10,26 +10,6 @@
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" type="text/css"
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-    <script>
-        document.addEventListener("DOMContentLoaded", function () {
-            const passwordInput = document.getElementById("signup-password");
-            const passwordRequirements = document.querySelectorAll(".password-requirement");
-
-            passwordInput.addEventListener("input", function () {
-                const password = passwordInput.value;
-
-                passwordRequirements.forEach(function (requirement) {
-                    const requirementRegex = new RegExp(requirement.dataset.regex);
-                    if (requirementRegex.test(password)) {
-                        requirement.classList.add("text-success");
-                    } else {
-                        requirement.classList.remove("text-success");
-                    }
-                });
-            });
-        });
-
-    </script>
 
 </head>
 
@@ -176,7 +156,7 @@
                             <label for="username" class="form-label">Username:</label>
                             <div class="input-group has-validation">
                                 <span class="input-group-text">@</span>
-                                <input type="text" onblur="checkUsernameAvailability();" id="signup-username"
+                                <input type="text" onblur="checkUsernameAvailability();" id="signup_username"
                                     name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
                                     data-bs-toggle="popover"
                                     data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens."
@@ -188,7 +168,7 @@
                             <div id="usernameAvailability"></div>
                             <br>
                             <label for="password" class="form-label">Password:</label>
-                            <input type="password" id="signup-password" name="password"
+                            <input type="password" id="signup_password" name="password"
                                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
                                 class="form-control">
                             <div class="invalid-feedback">

user.go

@@ -134,7 +134,7 @@ func Signup(w http.ResponseWriter, r *http.Request) {
 	// Check if the request method is POST
 	if r.Method == http.MethodPost {
 		var creds Credentials
-		err := r.ParseForm()
+		err := r.ParseMultipartForm(0)
 		if err != nil {
 			log.Printf("Error parsing form: %v", err)
 			http.Error(w, "Bad Request", http.StatusBadRequest)