premiaciones_front2/components/Login.vue

<template>
  <div class="full-h">
    <div class="has-text-centered">
      <h2 class="is-size-1">Premiaciones</h2>
    </div>
    <div class="is-flex is-justify-content-center my-3">
      <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>
      <b-radio v-model="loginType" name="loginType" native-value="3">
        Profesor
      </b-radio>
    </div>
    <form v-if="loginType == 1" class="box">
      <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"
          :disabled="error || !(usuario && password)"
        >
          Iniciar Sesión
        </b-button>
      </div>
    </form>
    <form v-else-if="loginType == 2" class="box">
      <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"
          :disabled="error || !(usuario && password)"
        >
          Iniciar Sesión
        </b-button>
      </div>
    </form>
    <form v-else-if="loginType == 3" class="box">
      <b-field label="Numero de trabajador" :type="error">
        <b-input
          type="number"
          @keyup.enter.native="login()"
          v-model="noTrabajador"
        />
      </b-field>

      <b-field label="Adscripción" :type="error">
        <b-select v-model="adscripcion" expanded placeholder="Seleccione una adscripción">
          <option v-for="item in adscripciones" :value="item" :key="item.id">
            {{ item }}
          </option>
        </b-select>
      </b-field>

      <div class="has-text-centered">
        <b-button
          @click="login()"
          type="is-success"
          :disabled="error || !(noTrabajador && adscripcion)"
        >
          Iniciar Sesión
        </b-button>
      </div>
    </form>
  </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
            console.log(info)
            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.error = 'is-danger'
            this.updateIsLoading(false)
            this.imprimirError(err.response.data)
          })
        }

        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)
          })
        }

        if(this.loginType == 3){
          const data = {
            numeroTrabajador: this.noTrabajador,
            adscripcion: this.adscripcion,
          }
        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/profesor/login`, data)
          .then((res) => {
            const info = res.data

            localStorage.setItem('token', info.token)
            localStorage.setItem('idProfesor', info.Profesor.idProfesor)
            localStorage.setItem('numeroTrabajador', info.Profesor.numeroTrabajador)
            this.updateIsLoading(false)
            this.$router.push(`/${'profesor'}`)
          })
          .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 = ''
      this.noTrabajador = ''
      this.adscripcion = ''
    }
  },
  created() {
    axios.get(`${process.env.api}/profesor/adscripciones`).then((res) => {
      if (res) {
        res.data.forEach((item, index) => {
          this.adscripciones[index] = item.adscripcion
        })
      }
      console.log(this.adscripciones)
    })
  },
}
</script>

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

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