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>
|
<a href="https://codeberg.org/notatio/notatio/issues" class="mx-2 text-muted">Report Issues</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
<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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
<script>
|
<script src="/static/build/index.js" type="text/javascript"></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>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
Loading…
Reference in a new issue