forget.js

/* for Loading screen to edit mo sa css if you want, di ko magawng trasparent so I make a bg for loading HEHEHEE */
function showLoadingScreen(message) {
    // Create the loading screen HTML
    document.body.innerHTML = `
        <div class="loading-screen">
            <div class="log-in">${message}</div>
            <div class="loading-image">
                <img src="https://res.cloudinary.com/drkmgpcad/image/upload/v1726841328/rahjpg3k7mdtnow4ttux.png" alt="Loading Image">
            </div>
        </div>
    `;

    // Set a timeout to remove the loading screen after 2 seconds
    setTimeout(() => {
        document.body.innerHTML = ''; // Clear the loading screen
    }, 2000); // 2000 milliseconds = 2 seconds (1 second longer than before)
}

document.getElementById('new-password').addEventListener('input', function() {
    var password = this.value;

    if (password.length < 8 || (password.match(/\d/g) || []).length < 2) {
        this.setCustomValidity('Password must be at least 8 characters long and contain at least 2 numbers.');
    } else {
        this.setCustomValidity('');
    }
});

document.getElementById('retype-password').addEventListener('input', function() {
    var newPassword = document.getElementById('new-password').value;
    var retypePassword = this.value;

    if (newPassword !== retypePassword) {
        this.setCustomValidity('Passwords do not match.'); // Set custom validity message
    } else {
        this.setCustomValidity('');
    }
});