notatio/static/build/index.js

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);

    // 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(() => {
        window.location.href = "/welcome";
    })
    .catch(error => {
        console.error(error);
    });

    // 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; });
}



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; });
};