Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • En esta lección del curso de Firebase aprenderás a implementar la función de reinicio de contraseña en el caso de que la hayas olvidado. Con Firebase es tremendamente sencillo.
  • Como ves, estoy en la documentación de Firebase Auth y se nos indica que para restablecer la contraseña debemos usar el método sendPasswordResetEmail y el nuevo correo, así que vamos añadir esta funcionalidad en nuestra vista de autentificación AuthView.
  • Debemos añadir un nuevo formulario. Podríamos usar un único formulario y método y con condiciones if y v-if activar el contenido adecuado, así tendríamos un único formulario y método local, pero creo que lo que ganamos en reducir código lo perdemos en legibilidad. Para saber qué formulario mostrar convertimos la propiedad isLogin en action y manipulamos/comparamos los valores.
<!-- Reset password form -->
<template v-if="action === 'reset'">
  <h1 class="title has-text-centered">Reset password</h1>
  <form @submit.prevent="doReset">
    <div class="field">
      <label class="label">Email</label>
      <div class="control">
        <input v-model="userData.email" class="input" type="email" placeholder="e.g. alexsmith@gmail.com" required />
      </div>
    </div>

    <div class="field has-text-right">
      <div class="control">
        <button type="submit" class="button is-link" :class="{ 'is-loading': isLoading }">
          Reset password
        </button>
      </div>
    </div>
    <a class="is-block" href="#" @click="action = 'register'">Don't have an account?</a>
  </form>
</template>
<!-- End of Reset password form -->
  • Ahora creamos la acción en nuestro módulo user.js de Vuex.
...
async doReset(context, email) {
  await auth.sendPasswordResetEmail(email);
}
...
  • Y la consumimos desde el nuevo método local doReset.
async doReset() {
  this.isLoading = true;
  try {
    await this.$store.dispatch("user/doReset", this.userData.email);
    this.$toast.success(
      `Check ${this.userData.email} for further instructions`
    );
    this.resetData();
  } catch (error) {
    this.$toast.error(error.message);
    console.error(error.message);
  } finally {
    this.isLoading = false;
  }
}

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue