Proyecto cliente SPA para la API de películas con Nuxt.js

Manejando el registro

Como podéis suponer el proceso de registro no será muy diferente al de autenticación. Necesitaremos pasar un email y dos contraseñas repetidas. Si es correcto directamente se devolverá el token y haremos el login.

Evidentemente en un desarrollo más profesional deberíamos enviar el email de verificación a los usuarios, pero como este proyecto es para aprender el funcionamiento general los registraremos directamente.

Empezaremos creando una segunda modal para el registro, podemos ponerla debajo de la de login:

layouts/default.vue

<!-- Modal para el registro -->
<b-modal :active.sync="isRegisterActive">
  <form action="" v-on:submit.prevent="register">
    <div class="modal-card" style="width: auto">
      <header class="modal-card-head">
        <p class="modal-card-title">Registro</p>
      </header>
      <section class="modal-card-body">
        <b-field label="Email">
          <b-input
            type="email"
            v-model="registerEmail"
            placeholder="Tu email"
            required>
          </b-input>
        </b-field>
        <b-field label="Contraseña">
          <b-input
            type="password" 
            v-model="registerPassword1"
            password-reveal
            placeholder="Tu contraseña"
            required>
          </b-input>
        </b-field>
        <b-field label="Repite la contraseña">
          <b-input
            type="password" 
            v-model="registerPassword2"
            password-reveal
            placeholder="Tu contraseña"
            required>
          </b-input>
        </b-field>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-primary">Registrarse</button>
      </footer>
    </div>
  </form>
</b-modal>

Ésta hará uso de las siguientes variables:

isRegisterActive: false,

registerEmail: '',
registerPassword1: '',
registerPassword2:'',

Y se abrirá al hacer clic en el botón de registro del menú superior:

<a class="button" v-if="!user" @click="isRegisterActive=true">
    <strong>Registro</strong>
</a>

Al completar el formulario llamaremos al método register():

register() {
 return this.$axios.post('/auth/registration/', {
   email: this.registerEmail,
   password1: this.registerPassword1,
   password2: this.registerPassword2
 })
 .then((res) => {
   if (res.data.key){
     this.$store.commit('saveToken', res.data.key)
     this.$store.commit('saveUser', this.registerEmail.split("@")[0])
     // Reiniciamos los campos
     this.registerEmail = ''
     this.registerPassword1 = ''
     this.registerPassword2 = ''
     // Escondemos la modal
     this.isRegisterActive = false;
   }
 })
 .catch((error) => {
   alert(Object.values(error.response.data))
 })
},

Con esto ya debería funcionar el formulario y cuando el usuario se registre accederá automáticamente al establecerse su token y usuario en el store.

En caso de que algo no funcione, como estamos mostrando los fallos que nos devuelve la API podremos verlo en un alert, cuyo idioma nos aparecerán automáticamente en el que tenga configurado Django, ¡es genial!