Aprende a dominar la plataforma Firebase

Vista de login y registro de usuario

  • Vamos a crear la vista AuthView.vue, que permitirá al usuario registrarse o hacer login en el caso de que tenga credenciales.
  • En una lección siguiente conectaremos los métodos locales de AuthView con nuestro almacén de estado en Vuex, módulo user.js.
  • Bulma (el framework CSS que estamos utilizando) tiene una serie de clases y modificadores muy intuitivos para trabajar con formularios, pero antes vamos a crear el layout con las ya conocidas clases section y container, además de añandiendo una columna con la clases columns, para trabajar con rejillas y columnas.
<article class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-half is-offset-one-quarter">
      </div>
    </div>
  </div>
</article>

  • En cuanto a la lógica, comenzaremos con algunas propiedades en el modelo y un par de métodos para hacer autentificar y registrar.
export default {
  name: "AuthView",
  data() {
    return {
      isLogin: true,
      isLoading: false,
      userData: {
        name: "",
        email: "",
        password: ""
      }
    };
  },
  methods: {
    doLogin() {},
    doRegister() {},
  }
}

  • Ahora podemos añadir los campos ambos formularios (registro y login) y conectarlos con los métodos locales.
<form @submit.prevent="doLogin">
  ...
  <div class="field">
    <label class="label">Password</label>
    <div class="control">
      <input v-model="userData.password" class="input" type="password" required />
    </div>
  </div>
  ...
</form>

  • Para poder decidir cual es el formulario a visualizar, dependiendo de si el usuario quiere registrarse o hacer login, podemos utilizar la directiva v-if y v-else envolviendo cada formulario en un template.
  • Por supuesto, también tenemos que añadir la nueva vista a nuestro enrutador Vue Router.
import AuthView from "../views/AuthView.vue";
...
{
  path: "/auth",
  name: "auth",
  component: AuthView
},
  • En la siguiente lección crearemos las acciones que hablarán a Firebase Auth a través de Vuex con nuestros métodos locales.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue