Rework how form data is collected for signup

This commit is contained in:
James Musselman 2023-11-29 23:30:12 -06:00
parent 174655a07c
commit 9ce0d02be7
3 changed files with 14 additions and 35 deletions

View file

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

View file

@ -10,26 +10,6 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.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> </head>
@ -176,7 +156,7 @@
<label for="username" class="form-label">Username:</label> <label for="username" class="form-label">Username:</label>
<div class="input-group has-validation"> <div class="input-group has-validation">
<span class="input-group-text">@</span> <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" name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
data-bs-toggle="popover" data-bs-toggle="popover"
data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens." 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> <div id="usernameAvailability"></div>
<br> <br>
<label for="password" class="form-label">Password:</label> <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 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
class="form-control"> class="form-control">
<div class="invalid-feedback"> <div class="invalid-feedback">

View file

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