premiaciones_front2/components/LoginOperador.vue

<template>
  <div class="full-h">
    <div class="has-text-centered">
      <h2 class="is-size-1">Entrega de medallas operador</h2>
    </div>
    <div class="is-flex is-justify-content-center my-3 cont-login">
      <b-radio v-model="loginType" name="loginType" native-value="1">
        Admin
      </b-radio>
      <b-radio v-model="loginType" name="loginType" native-value="2">
        Operador
      </b-radio>
    </div>
    <div class="is-flex is-justify-content-center my-3 cont-login">
      <form v-if="loginType == 1" class="box" @submit.prevent="">
        <b-field label="Usuario" :type="error">
          <b-input
            type="text"
            @keyup.enter.native="login()"
            v-model="usuario"
          />
        </b-field>

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

        <div class="has-text-centered">
          <b-button
            @click="login()"
            type="is-success"
            native-type="submit"
            :disabled="error || !(usuario && password)"
          >
            Iniciar Sesión
          </b-button>
        </div>
      </form>
      <form v-else-if="loginType == 2" class="box" @submit.prevent="">
        <b-field label="Usuario" :type="error">
          <b-input
            type="text"
            @keyup.enter.native="login()"
            v-model="usuario"
          />
        </b-field>

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

        <div class="has-text-centered">
          <b-button
            @click="login()"
            type="is-success"
            native-type="submit"
            :disabled="error || !(usuario && password)"
          >
            Iniciar Sesión
          </b-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: true },
  },
  data() {
    return {
      loginType: 1,
      usuario: '',
      password: '',
      noTrabajador: '',
      adscripcion: null,
      adscripciones: [],
      error: '',
    }
  },
  methods: {
    login() {
      if (
        (this.usuario && this.password && !this.error) ||
        (this.noTrabajador && this.adscripcion && !this.error)
      ) {
        if (this.loginType == 1) {
          const data = {
            usuario: this.usuario,
            password: this.password,
          }
          this.updateIsLoading(true)
          axios
            .post(`${process.env.api}/usuario/loginAdmin`, data)
            .then((res) => {
              const info = res.data
              localStorage.setItem('token', info.token)
              localStorage.setItem('usuario', info.Usuario.usuario)
              localStorage.setItem('tipoUsuario', info.Usuario.idTipoUsuario)
              localStorage.setItem('idUsuario', info.Usuario.idUsuario)
              this.updateIsLoading(false)
              this.$router.push(`/${'Admin'}`)
            })
            .catch((err) => {
              this.updateIsLoading(false)
              this.error = 'is-danger'
              console.log(err.response.data.message)
              this.imprimirError(err.response.data.message)
            })
        }

        if (this.loginType == 2) {
          const data = {
            usuario: this.usuario,
            password: this.password,
          }
          this.updateIsLoading(true)
          axios
            .post(`${process.env.api}/usuario/loginOperador`, data)
            .then((res) => {
              const info = res.data

              localStorage.setItem('token', info.token)
              localStorage.setItem('tipoUsuario', info.Usuario.tipoUsuario)
              localStorage.setItem('usuario', info.Usuario.usuario)
              localStorage.setItem('idUsuario', info.Usuario.idUsuario)
              this.updateIsLoading(false)
              this.$router.push(`/${'Operador'}`)
            })
            .catch((err) => {
              this.error = 'is-danger'
              this.updateIsLoading(false)
              this.imprimirError(err.response.data)
            })
        }
      }
    },
  },
  watch: {
    password() {
      if (this.error) this.error = ''
    },
    usuario() {
      if (this.error) this.error = ''
    },
    loginType() {
      this.usuario = ''
      this.password = ''
    },
  },
}
</script>

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

@media (max-width: 768px) {
  .cont-login{
    width: 382px;
    margin-left: 1.5rem;
  }
  .box 
  {
    padding: 15px !important;
  }
}

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