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();
    });
    
    const usernameInput = document.getElementById("signup_username");
    usernameInput.addEventListener("blur", function () {
        checkUsernameAvailability();
    });
    

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


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 form fields
    const signup_username = document.getElementById("signup_username").value;
    const signup_password = document.getElementById("signup_password").value;
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").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", signup_username);
    formData.append("password", signup_password);

    // Send the signup request as form data
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/signup", true);

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                // Signup successful
                console.log("Signup successful");
                window.location.href = "/welcome"; // Redirect to success page
            } else {
                // Signup failed, display the error message
                const response = JSON.parse(xhr.responseText);
                console.error("Signup failed:", response.error);
            }
        }
    };

    xhr.send(formData);

    // Enable the button and remove the spinner after 5 seconds
    setTimeout(function () {
        submitBtn.disabled = false;
        submitBtn.innerHTML = 'Sign Up';
    }, 10000);
    sleep(10000).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; });
};