Actualizar el perfil del usuario

• En esta lección vamos a gestionar el perfil de los usuarios/as de VueTalk. Vamos a permitir que la persona conectada puede editar su nombre, correo electrónico y contraseña.
• Como puedes comprobar, en la documentación de Firebase Auth existe una sección donde se trata lo esencial del manejo de usuarios. Algunos métodos y propiedades ya las conoces, como onAuthStateChanged o currentUser. Ahora aprenderás a utilizar nuevas opciones para cambiar otras propiedades del usuario.
• Pero primero debemos crear la vista que nos permita realizar esas acciones. La llamaremos UserProfileView.vue y dentro usaremos un formulario donde pre-cargaremos los datos del usuario conectado. Este componente contendrá un modelo local para guardar las modificaciones de las propiedades del perfil de usuario. Usaremos los map helpers de Vuex para mostrar el contenido sólo si hay un usuario conectado.

import { mapState } from "vuex";
...
data() {
  return {
    isLoading: false,
    userData: {
      name: "",
      email: "",
      password: ""
    }
  };
},
methods: {
	updateProfile() {
		...
  }
},
computed: {
  ...mapState("user", ["user"]),
	hasDataChanged(){}
}
...

• Así como un método, llamado updateProfile para lanzar el proceso de actualización, pero antes de crearlo tenemos establecer la acción en nuestro módulo Vuex que responderá al otro lado. En user.js creamos la acción updateProfile, establecemos sus parámetros y, haciendo uso de los métodos descritos en la documentación, cambiamos lo que sea necesario.

async updateProfile({ commit }, { name, email, password }) {
    const user = auth.currentUser;

    if (name) {
      await user.updateProfile({
        displayName: name
      });

    if (email) {
      await user.updateEmail(email);
    }

    if (password) {
      await user.updatePassword(password);
    }

    commit("setUser", user);
  }
};

• Ahora es el momento de completar el método local updateProfile de nuestra vista UserRoomProfile para hacer la llamada a la acción que hemos creado hace un momento.

updateProfile() {
  this.isLoading = true;
  try {
    await this.$store.dispatch("user/updateProfile", {
      name: this.userData.name,
      email: this.userData.email,
      password: this.userData.password
    });
    this.$toast.success("Account data updated");
    this.userData.name = this.userData.email = this.userData.password = "";
  } catch (error) {
    this.$toast.error(error.message);
    console.error(error.message);
  } finally {
    this.isLoading = false;
  }
}

• Como medida extra, en hasDataChanged vamos a preguntar si ha cambiado algo en la información del usuario, para permitirle lanzar el formulario sólo en ese caso.

hasDataChanged() {
  return (
    (this.userData.name && this.userData.name !== this.user.displayName) ||
    (this.userData.email && this.userData.email !== this.user.email) ||
    this.userData.password.length
  );
}

• Por último, nos queda crear la nueva ruta en Vue Router. Para ello abrimos router/index.js y establecemos la nueva ruta, protegiéndola con autentificación.

import UserProfileView from "../views/UserProfileView.vue";
...
{
  path: "/profile",
  name: "profile",
  component: UserProfileView,
  meta: {
    requiresAuth: true
  }
},
...

• Ahora añadimos la nueva ruta en el componente NavBarComponent con :to="{ name: 'profile' }" en el botón correspondiente, y comprobamos que todo funcione correctamente.