premiaciones_front2/components/Login.vue

<template>
  <div class="full-h cont">
    <h2 class="has-text-centered is-size-2">Registro de invitados</h2>
    <div class="cont-2 is-flex">
      <div class="img">
        <b-image
          :src="require('@/assets/login_image.png')"
          alt="LoginImage"
          ratio="601by235"
          class="my-4 img"
        ></b-image>
      </div>
      <div class="is-flex is-justify-content-center cont-login">
        <form class="box" @submit.prevent="">
          <p>
            Para garantizar el acceso de sus invitados a la ceremonia de entrega
            de medallas en la que usted será distinguido(a), le pedimos
            completar el siguiente dato:
          </p>
          <b-field label="Número de trabajador" :type="error">
            <b-input
              type="number"
              v-model="noTrabajador"
              v-on:keydown.prevent="submit"
            />
          </b-field>

          <div class="has-text-centered">
            <b-button
              type="is-success"
              native-type="submit"
              @click="login()"
              :disabled="error || !noTrabajador"
            >
              Iniciar sesión
            </b-button>
          </div>
        </form>
      </div>
    </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 {
      noTrabajador: '',
      error: '',
    }
  },
  methods: {
    login() {
      if (this.noTrabajador && !this.error) {
        const data = {
          numeroTrabajador: this.noTrabajador,
        }
        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/profesor/login`, data)
          .then((res) => {
            this.updateIsLoading(false)
            const info = res.data

            localStorage.setItem('token', info.token)
            localStorage.setItem('idProfesor', info.Profesor.idProfesor)
            localStorage.setItem('nombre', info.Profesor.nombre)
            localStorage.setItem('adscripcion', info.Profesor.adscripcion)
            localStorage.setItem(
              'numeroTrabajador',
              info.Profesor.numeroTrabajador
            )
            this.$router.push('Profesor')
          })
          .catch((err) => {
            this.updateIsLoading(false)
            this.error = 'is-danger'
            this.imprimirError(err.response.data.message)
          })
      }
    },
  },
  watch: {
    password() {
      if (this.error) this.error = ''
    },
    usuario() {
      if (this.error) this.error = ''
    },
    loginType() {
      this.noTrabajador = ''
    },
  },
}
</script>

<style scoped>
.full-h {
  min-height: 75vh;
}
.cont {
  margin-top: 10rem;
}

@media (max-width: 768px) {
  .img {
    display: none;
  }
  .cont-login{
    width: 382px;
  }
  .box 
  {
    padding: 15px !important;
  }
}
.img {
  width: 30rem;
  height: 14rem;
  margin-right: 2rem;
}
form {
  width: 30rem;
  max-height: 15rem;
}
</style>