HabitTracker/static/script/script-profile.js

document.addEventListener("DOMContentLoaded", function() {
    // Get elements
    const profileImage = document.getElementById("profileImage");
    const profileImageOverlay = document.getElementById("profileImageOverlay");
    const profileImageInput = document.getElementById("profileImageInput");
    const uploadForm = document.getElementById("uploadForm");

    const editButton = document.getElementById("editButton");
    const saveChangesButton = document.getElementById("saveChangesButton");
    const editForm = document.getElementById("editForm");
    const editModal = new bootstrap.Modal(document.getElementById('editModal'));

    const submitPasswordChangeButton = document.getElementById("submitPasswordChange");

    const DeleteAccountButton = document.getElementById('deleteAccountButton')
    const confirmDeleteModal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
    const ConfirmDeleteButton = document.getElementById('confirmDeleteButton')
    const deleteAccountForm = document.getElementById('deleteAccountForm')

    // Open file input when profile image is clicked
    profileImageOverlay.addEventListener("click", function() {
        profileImageInput.click();
    });

    // Change profile image when a new file is selected
    profileImageInput.addEventListener("change", function() {
        const file = this.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
            profileImage.src = e.target.result;
        };

        reader.readAsDataURL(file);

        // Submit the form
        uploadForm.submit();
    });

    // Add event listener to edit button to open modal
    editButton.addEventListener("click", function() {
        editModal.show();
    });

    // Add event listener to save changes button to submit form
    saveChangesButton.addEventListener("click", function() {
        // Perform client-side validation before submitting the form
        validateForm()
            .then(isValid => {
                if (isValid) {
                    editForm.submit();
                }
            })
            .catch(error => {
                // Handle validation error
                console.log("Account Form validation failed", error);
            });
    });

    // Function to perform client-side validation
    async function validateForm() {
        let isValid = true;

        isValid = validateInput("newName", "nameFeedback", "Bitte geben Sie einen neuen Namen ein.") && isValid;
        isValid = validateEmail("newEmail", "emailFeedback", "Bitte geben Sie eine gültige E-Mail-Adresse ein.") && isValid;

        try {
            const passwordValid = await validatePassword("password", "passwordFeedback", "Bitte geben Sie Ihr Passwort ein.");
            isValid = passwordValid && isValid;
        } catch (error) {
            isValid = false;
        }

        return isValid;
    }

    // Function to validate input fields
    function validateInput(inputId, feedbackId, errorMessage) {
        const input = document.getElementById(inputId);
        const feedback = document.getElementById(feedbackId);
        if (!input.value.trim()) {
            feedback.textContent = errorMessage;
            input.classList.add("is-invalid");
            return false;
        } else {
            feedback.textContent = "";
            input.classList.remove("is-invalid");
            return true;
        }
    }

    // Function to validate email
    function validateEmail(emailId, feedbackId, errorMessage) {
        const input = document.getElementById(emailId);
        const feedback = document.getElementById(feedbackId);
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Regular expression for email validation
        if (!input.value.trim()) {
            feedback.textContent = "Bitte geben Sie eine neue E-Mail-Adresse ein.";
            input.classList.add("is-invalid");
            return false;
        } else if (!emailRegex.test(input.value.trim())) {
            feedback.textContent = errorMessage;
            input.classList.add("is-invalid");
            return false;
        } else {
            feedback.textContent = "";
            input.classList.remove("is-invalid");
            return true;
        }
    }

    // Function to validate password
    function validatePassword(passwordId, passwordFeedbackId, errorMessage) {
        return new Promise((resolve, reject) => {
            const passwordInput = document.getElementById(passwordId);
            const passwordFeedback = document.getElementById(passwordFeedbackId);
            const password = passwordInput.value; // Get the password entered by the user
            if (!passwordInput.value.trim()) {
                passwordFeedback.textContent = errorMessage;
                passwordInput.classList.add("is-invalid");
                reject(false);
            } else {
                axios.post('/check_password', { password: password })
                    .then(response => {
                        if (!response.data.valid) {
                            passwordFeedback.textContent = "Falsches Passwort.";
                            passwordInput.classList.add("is-invalid");
                            passwordInput.value = "";
                            reject(false);
                        } else {
                            passwordInput.classList.remove("is-invalid");
                            resolve(true);
                        }
                    })
                    .catch(error => {
                        console.error('Error checking password:', error);
                        reject(false);
                    });
            }
        });
    }

    submitPasswordChangeButton.addEventListener("click", function() {
        // Perform client-side validation before submitting the form
        validatePasswordChangeForm()
            .then(isValid => {
                if (isValid) {
                    document.getElementById("editPasswordForm").submit();
                }
            })
            .catch(error => {
                // Handle validation error
                console.log("Password change form validation failed", error);
            });
    });

    async function validatePasswordChangeForm() {
        let isValid = true;

        try {
            const passwordValid = await validatePassword("oldPassword", "oldPasswordFeedback", "Bitte geben Sie Ihr altes Passwort ein.");
            isValid = passwordValid && isValid;
        } catch (error) {
            isValid = false;
        }
        isValid = validateInput("newPassword", "newPasswordFeedback", "Bitte geben Sie Ihr neues Passwort ein.") && isValid;
        isValid = validateInput("confirmPassword", "confirmPasswordFeedback", "Bitte bestätigen Sie Ihr neues Passwort.") && isValid;

        // Check if new password matches confirm password
        const newPassword = document.getElementById("newPassword").value.trim();
        const confirmPassword = document.getElementById("confirmPassword").value.trim();
        if (newPassword !== confirmPassword) {
            document.getElementById("confirmPasswordFeedback").textContent = "Die Passwörter stimmen nicht überein.";
            document.getElementById("confirmPassword").classList.add("is-invalid");
            isValid = false;
        } else {
            document.getElementById("confirmPasswordFeedback").textContent = "";
            document.getElementById("confirmPassword").classList.remove("is-invalid");
        }

        return isValid;
    }

    // Add event listener to edit button to open modal
    DeleteAccountButton.addEventListener("click", function() {
        confirmDeleteModal.show();
    });

    //Submit delete account form
    ConfirmDeleteButton.addEventListener('click', function () {
        deleteAccountForm.submit();
    });
});