Musselman/notatio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move homepage javascript to seperate file

Browse source
This commit is contained in:
James Musselman 2023-11-29 17:20:25 -06:00
parent 6b582fadd2
commit 19c79427ed
2 changed files with 113 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
static/build/index.js Normal file
View 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; });
};

117
templates/index.html
View file

@ -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>