Move homepage javascript to seperate file
This commit is contained in:
parent
6b582fadd2
commit
19c79427ed
2 changed files with 113 additions and 116 deletions
112
static/build/index.js
Normal file
112
static/build/index.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
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;
|
||||
});
|
||||
|
||||
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 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; });
|
||||
};
|
||||
|
|
@ -232,124 +232,9 @@
|
|||
<a href="https://codeberg.org/notatio/notatio/issues" class="mx-2 text-muted">Report Issues</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
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;
|
||||
});
|
||||
|
||||
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 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; });
|
||||
};
|
||||
</script>
|
||||
<script src="/static/build/index.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue