pcpuma_unam_operador/components/admin/Login.vue

<template>
  <div class="full-h is-flex is-justify-content-center is-align-items-center">
    <form class="box">
      <div class="has-text-centered">
        <h2 class="is-size-1">PC Puma</h2>
      </div>

      <b-field label="Usuario" :type="error">
        <b-input
          autocomplete="off"
          v-model="usuario"
          @keyup.enter.native="login()"
        />
      </b-field>

      <b-field label="Contraseña" :type="error">
        <b-input
          autocomplete="off"
          type="password"
          @keyup.enter.native="login()"
          v-model="password"
          password-reveal
        />
      </b-field>

      <div class="is-flex is-justify-content-center my-3">
        <recaptcha />
      </div>

      <BotonIniciarSesion
        :login="login"
        :disabled="error || !usuario || !password ? true : false"
      />
    </form>
  </div>
</template>

<script>
import axios from 'axios'
import jwt_decode from 'jwt-decode'
import BotonIniciarSesion from '@/components/botones/BotonIniciarSesion'

export default {
  components: { BotonIniciarSesion },
  props: {
    updateIsLoading: { type: Function, required: true, default: () => {} },
  },
  data() {
    return { error: '', usuario: '', password: '' }
  },
  methods: {
    async login() {
      if (this.usuario && this.password && !this.error) {
        const token = await this.$recaptcha.getResponse().catch((err) => {
          this.$alertsGenericos.imprimirError(this.$buefy, this.$router, {
            message: 'Favor de completar el recaptcha.',
          })
        })

        if (token) {
          const data = {
            operador: this.usuario,
            password: this.password,
          }

          this.updateIsLoading(true)
          return axios
            .post(`${process.env.api}/auth/login-admin`, data, {
              headers: { recaptcha: token },
            })
            .then(async (res) => {
              const token = res.data.token
              const operador = jwt_decode(token).Operador

              localStorage.setItem('token', token)
              await this.$recaptcha.reset()
              this.updateIsLoading(false)
              if (operador.tipoUsuario.id_tipo_usuario === 2)
                this.$router.push(
                  '/admin/configuracion/instituciones/buscar_institucion'
                )
              else this.$router.push('/prestamo_devolucion')
            })
            .catch(async (err) => {
              this.error = 'is-danger'
              await this.$recaptcha.reset()
              this.updateIsLoading(false)
              this.$alertsGenericos.imprimirError(
                this.$buefy,
                this.$router,
                err.response.data
              )
            })
        }
      }
    },
  },
  watch: {
    password() {
      if (this.error) this.error = ''
    },
    usuario() {
      if (this.error) this.error = ''
    },
  },
  beforeDestroy() {
    this.$recaptcha.destroy()
  },
}
</script>

<style scoped>
.full-h {
  min-height: 80vh;
}

form {
  width: 25rem;
}
</style>