Блог

У меня есть всплывающий режим, который появляется, когда пользователь нажимает «обновить профиль» в раскрывающемся меню навигации. В этом режиме они могут изменить свое имя пользователя.

Я пытаюсь реализовать следующий рабочий процесс: пользователь нажимает «обновить профиль», вводит свое новое имя пользователя, нажимает кнопку «отправить», форма сбрасывается, и модальное закрытие.

Первое обновление имени пользователя работает именно так, как я хочу. Последующие попытки обновления, похоже, запускают мое утверждение «еще», которое должно обнаруживаться, если пользователь оставил поле нового имени пользователя пустым, и вызывает предупреждение окна.

Вот код для всего моего модального профиля обновления:

 const updateProfileModal = (currentUser) => {

    // DOM Elements
    const modal = document.querySelector(".modal");
    const openModalButton = document.querySelector("#update-profile-btn");
    const updateButton = document.querySelector("#update");
    const updateProfileForm = document.querySelector(".profile-update-form");
    const profileNameField = document.querySelector("#profile_name");
    const closeModalButton = document.querySelector("#close-modal");

    // Open "update profile" modal when clicked from dropdown menu
    openModalButton.addEventListener("click", (e) => {
        e.preventDefault();

        // Hide the dropdown menu after opening update profile modal
        document.querySelector(".dropdown-content").classList.toggle("show");

        // Show user's email address and current username in placeholders
        document.querySelector("#profile_email").placeholder = currentUser.email;
        document.querySelector("#profile_name").placeholder = currentUser.displayName;

        // If the modal doesn't have the CSS "show" class:
        if (!modal.classList.contains("show")) {

            // Toggle that class into the modal
            modal.classList.toggle("show");

            // Upon clicking on "update" button inside modal:
            updateButton.addEventListener("click", (e) => {
                e.preventDefault();

                // Get value of new displayName
                const newName = profileNameField.value;

                // Update displayName.
                if (newName !== "") {
                    updateUsername(newName)
                    updateProfileForm.reset();
                    modal.classList.toggle("show")
                    firebase.auth().currentUser.reload();
                } else {
                    window.alert("Must choose a new name to update")
                }
            })
        }
    })

    // Close profile updating modal upon clicking the "x"
    closeModalButton.addEventListener("click", () => {
        modal.classList.toggle("show");
    })
}
 

Вот функция updateUsername, которую она использует:

 // Update user's display name
const updateUsername = (newName) => {
    auth.currentUser.updateProfile({
        displayName: newName
    }).then(() => {
        // Once the name has been updated, append it to the user dropdown menu
        updateDisplayNameInDOM(firebase.auth().currentUser)
    });
}
 

Вы можете попытаться удалить updateProfileForm.reset(); его из своего кода. Похоже, это приводит к сбою последующего обновления.