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 las 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.