Register.vue

<template>
  <v-card
    class="elevation-12"
    style="margin: 8px"
  >
    <v-toolbar
      dark
      color="success"
    >
      <v-toolbar-title>
        Datos de Usuario
      </v-toolbar-title>
    </v-toolbar>
    <v-card-text>
      <v-form
        ref="form"
        v-model="valid"
        lazy-validation
      >
        <!-- <v-text-field
          v-model="data.name"
          :rules="passwordRules"
          prepend-icon="mdi-account"
          label="Nombre"
        /> -->
        <v-text-field
          v-model="data.email"
          :rules="usernameRules"
          prepend-icon="mdi-at"
          name="login"
          label="Coreo Electrónico"
          required
          type="email"
        />
        <v-autocomplete
          v-model="data.role"
          :rules="passwordRules"
          :items="roles"
          prepend-icon="mdi-account"
          label="Rol"
          item-text="name"
          item-value="value"
          required
        />
        <v-text-field
          id="password"
          v-model="data.password"
          :rules="passwordRules"
          prepend-icon="mdi-lock"
          name="password"
          required
          label="Contraseña"
          type="password"
        />
        <v-text-field
          id="password"
          v-model="data.confirm_password"
          :rules="passwordRules"
          prepend-icon="mdi-lock"
          name="password"
          required
          label="Confirmar Contraseña"
          type="password"
        />
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-spacer />
      <v-btn
        color="red"
        text
        :disabled="!valid"
        submit
        :loading="tryLogin"
        @click="cancel"
      >
        Cancelar
      </v-btn>
      <v-spacer />
      <v-btn
        color="green"
        dark
        :disabled="!valid"
        submit
        :loading="tryLogin"
        @click="submit"
      >
        Registrar
      </v-btn>
      <v-spacer />
    </v-card-actions>
  </v-card>
</template>
<script>
  import { register } from '@/axios/auth'
  import { mapMutations } from 'vuex'
  import { isLastName, isEmail } from '@/utils/regex'

  export default {
    name: 'Register',
    data: () => ({
      custom: true,
      data: {
        name: null,
        email: null,
        password: null,
        confirm_password: null,
        role: null,
      },
      roles: [
        {
          value: 'MCP',
          name: 'Mesa Coordinadora Provincial',
        },
        {
          value: 'ERP',
          name: 'Equipo de Respuesta Rápida',
        },
        {
          value: 'MCM',
          name: 'Mesa Coordinadora Municipal',
        },
        {
          value: 'DCA',
          name: 'Director Centro Hospitalario',
        },
        {
          value: 'MCPREV',
          name: 'Revisor de Mesa Coordinadora Provincial',
        },
        {
          value: 'CA',
          name: 'Centro Aislamiento',
        },
      ],
      tryLogin: false,
      valid: true,
      passwordRules: [
        v => !!v || 'Este campo es requerido',
      ],
      testRules: [
        v => !!v || 'Este campo es requerido',
      ],
      nameRules: [
        v => !!v || 'Este campo es requerido',
        v => isLastName(v) || 'Debe introducir un nombre válido',
      ],
      usernameRules: [
        v => !!v || 'Este campo es requerido',
        v => isEmail(v) || 'Debe introducir una dirección de correo válida',
      ],
    }),
    computed: {
      same () {
        return this.data.password === this.data.confirm_password
      },
      progress () {
        return Math.min(100, this.value.length * 10)
      },
      color () {
        return ['error', 'warning', 'success'][Math.floor(this.progress / 40)]
      },
    },
    methods: {
      ...mapMutations(['setUser']),
      cancel () {
        this.$router.push({ name: 'Control' })
      },
      async submit () {
        this.$refs.form.validate()
        if (this.$refs.form.validate(true)) {
          this.tryLogin = true
          try {
            this.data.name = this.data.email
            const loginResponse = await register(this.data)
            const token = loginResponse.data.token
            const user = loginResponse.data.user
            this.setUser(user)
            localStorage.setItem('tkn', token)
            this.$router.push({ name: 'Control' })
          } catch (e) {
            if (e.toString() === 'Error: Network Error') {
              this.$toast.error('Error de Red, revise su conexión', {
                position: 'bottom-center',
                timeout: 3000,
                closeOnClick: true,
                pauseOnFocusLoss: false,
                pauseOnHover: true,
                draggable: true,
                draggablePercent: 0.6,
                showCloseButtonOnHover: false,
                hideProgressBar: true,
                closeButton: 'button',
                icon: true,
                rtl: false,
              })
              this.tryLogin = false
            }
            switch (e.response.status) {
              case 500: {
                this.$toast.error('Error interno del servidor, inténtelo más tarde', {
                  position: 'bottom-center',
                  timeout: 3000,
                  closeOnClick: true,
                  pauseOnFocusLoss: false,
                  pauseOnHover: true,
                  draggable: true,
                  draggablePercent: 0.6,
                  showCloseButtonOnHover: false,
                  hideProgressBar: true,
                  closeButton: 'button',
                  icon: true,
                  rtl: false,
                })
                break
              }
              case 401: {
                this.$toast.error('No autorizado', {
                  position: 'bottom-center',
                  timeout: 3000,
                  closeOnClick: true,
                  pauseOnFocusLoss: false,
                  pauseOnHover: true,
                  draggable: true,
                  draggablePercent: 0.6,
                  showCloseButtonOnHover: false,
                  hideProgressBar: true,
                  closeButton: 'button',
                  icon: true,
                  rtl: false,
                })
                break
              }
              default: {
                this.$toast.error('No autorizado', {
                  position: 'bottom-center',
                  timeout: 3000,
                  closeOnClick: true,
                  pauseOnFocusLoss: false,
                  pauseOnHover: true,
                  draggable: true,
                  draggablePercent: 0.6,
                  showCloseButtonOnHover: false,
                  hideProgressBar: true,
                  closeButton: 'button',
                  icon: true,
                  rtl: false,
                })
              }
            }
            this.tryLogin = false
          }
        }
      },
    },
  }
</script>