Musselman
7682d9fd47
- Disable submit button and display spinner during form submission to prevent multiple clicks - Obtain form field values and send signup request as form data for processing on the server
171 lines
No EOL
5.6 KiB
JavaScript
171 lines
No EOL
5.6 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
const signupForm = document.forms.signupForm;
|
|
const loginForm = document.forms.loginForm;
|
|
|
|
const submitBtn = document.getElementById("submitBtn");
|
|
|
|
signupForm.addEventListener("input", function () {
|
|
const formIsValid = signupForm.checkValidity();
|
|
submitBtn.disabled = !formIsValid;
|
|
});
|
|
|
|
signupForm.addEventListener("submit", function (event) {
|
|
event.preventDefault(); // Prevent the form from being submitted normally
|
|
submitSignup();
|
|
});
|
|
|
|
|
|
loginForm.addEventListener("submit", function (event) {
|
|
event.preventDefault(); // Prevent the form from being submitted normally
|
|
submitLogin();
|
|
});
|
|
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
if (urlParams.has('login')) {
|
|
console.log("login parameter")
|
|
$('#loginModal').modal('show');
|
|
}
|
|
else if (urlParams.has('signup')) {
|
|
$('#signupModal').modal('show');
|
|
console.log("signup parameter")
|
|
}
|
|
});
|
|
|
|
const usernameInput = document.getElementById("signup-username");
|
|
usernameInput.addEventListener("blur", function () {
|
|
checkUsernameAvailability();
|
|
});
|
|
|
|
|
|
|
|
function checkUsernameAvailability() {
|
|
const usernameInput = document.getElementById("signup-username");
|
|
const availabilityDiv = document.getElementById("usernameAvailability");
|
|
|
|
// Get the value of the username input
|
|
const username = usernameInput.value;
|
|
|
|
// Check if the input value meets the required pattern
|
|
const usernameRegex = new RegExp(usernameInput.pattern);
|
|
if (!usernameRegex.test(username)) {
|
|
availabilityDiv.innerHTML = "";
|
|
return; // Exit the function if the username is not valid
|
|
}
|
|
// Send an AJAX request to the server
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "/checkusername?username=" + username, true);
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
const response = JSON.parse(xhr.responseText);
|
|
const isAvailable = response.available;
|
|
if (!isAvailable) {
|
|
availabilityDiv.innerHTML = "<span style='color:green;'>Username is available.</span>";
|
|
} else {
|
|
availabilityDiv.innerHTML = "<span style='color:red;'>Username is not available.</span>";
|
|
}
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
|
|
function submitSignup() {
|
|
// Disable the button to prevent multiple clicks
|
|
submitBtn.disabled = true;
|
|
|
|
// Show the spinner
|
|
const spinner = document.createElement('i');
|
|
spinner.classList.add('fas', 'fa-spinner', 'fa-spin');
|
|
submitBtn.innerHTML = '';
|
|
submitBtn.appendChild(spinner);
|
|
|
|
// Enable the button and remove the spinner after 5 seconds
|
|
setTimeout(function () {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = 'Sign Up';
|
|
}, 5000);
|
|
sleep(5000).then(() => { submitBtn.disabled = false; });
|
|
|
|
// Get the values of the signup form fields
|
|
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);
|
|
|
|
// Send the signup request as form data
|
|
fetch("/signup", {
|
|
method: "POST",
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error("Signup request failed");
|
|
}
|
|
})
|
|
.then(data => {
|
|
console.log(data);
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function sleep(ms) {
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
function submitLogin() {
|
|
|
|
// Get the values of the username and password fields
|
|
const username = loginForm.elements.username.value;
|
|
const password = loginForm.elements.login_password.value;
|
|
|
|
// Create a new FormData object and append the values
|
|
const formData = new FormData();
|
|
formData.append("username", username);
|
|
formData.append("password", password);
|
|
// Send the login request as form data
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/login", true);
|
|
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
if (xhr.status === 200) {
|
|
// Login successful, redirect to home page
|
|
console.log("Waiting for redirect...")
|
|
window.location.href = "/home";
|
|
} else {
|
|
// Login failed, display the error message
|
|
const response = JSON.parse(xhr.responseText);
|
|
const loginErrorDiv = document.getElementById("login-error");
|
|
loginErrorDiv.textContent = response.error;
|
|
}
|
|
}
|
|
};
|
|
xhr.send(formData);
|
|
// Disable the button to prevent multiple clicks
|
|
loginButton.disabled = true;
|
|
|
|
// Show the spinner
|
|
const spinner = document.createElement('i');
|
|
spinner.classList.add('fas', 'fa-spinner', 'fa-spin');
|
|
loginButton.innerHTML = '';
|
|
loginButton.appendChild(spinner);
|
|
|
|
// Enable the button and remove the spinner after 5 seconds
|
|
setTimeout(function () {
|
|
loginButton.disabled = false;
|
|
loginButton.innerHTML = 'Login';
|
|
}, 5000);
|
|
sleep(5000).then(() => { loginButton.disabled = false; });
|
|
}; |