Rework how form data is collected for signup
This commit is contained in:
parent
174655a07c
commit
9ce0d02be7
3 changed files with 14 additions and 35 deletions
|
@ -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("password", password);
|
||||
formData.append("username", signup_username);
|
||||
formData.append("password", signup_password);
|
||||
|
||||
// Send the signup request as form data
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
|
|
@ -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">
|
||||
|
|
2
user.go
2
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)
|
||||
|
|
Loading…
Reference in a new issue