inscripciones_front/components/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-4">
          <strong>Inscripción a servicios de CeDeTec</strong>
        </h2>
      </div>

      <b-field label="Número de cuenta" :type="error">
        <b-input
          type="text"
          placeholder="Número de cuenta"
          @keyup.enter.native="login()"
          v-model="numeroCuenta"
        />
      </b-field>

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

      <p class="font" :class="colorSize">
        Si no recuerdas tu NIP de escolares, ingresa:
        <a href="https://sistemas.acatlan.unam.mx/recuperanip/" target="_blanc"
          >aquí</a
        >
      </p>

      <div class="has-text-centered">
        <b-button
          @click="login()"
          type="is-success"
          :disabled="error || !(numeroCuenta && password)"
        >
          Iniciar Sesión
        </b-button>
      </div>
    </form>
    <b-button @click="$router.push('/profesor/registro-profesor')">
      Ir al registro de profesor
    </b-button>

  </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 {
      numeroCuenta: '',
      password: '',
      error: '',
    }
  },
  methods: {
    login() {
      if (this.numeroCuenta && this.password && !this.error) {
        const data = {
          numeroCuenta: this.numeroCuenta,
          passwordUser: this.password,
        }
        this.updateIsLoading(true)
        axios
          .post(`${process.env.api}/Usuario/login`, data)
          .then((res) => {
            const info = res.data.Usuario

            localStorage.setItem('token', res.data.token)
            localStorage.setItem('idUsuario', info.idUsuario)
            localStorage.setItem('nombre', info.nombre)
            localStorage.setItem('generacion', info.generacion)
            localStorage.setItem('usuario', info.numeroCuenta)
            localStorage.setItem('idCarrera', info.idCarrera)
            localStorage.setItem('carrera', info.carrera)

            this.$router.push('/registro')
          })
          .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 = ''
    },
  },
  computed: {
    colorSize() {
      return { fontColor: this.error == 'is-danger' }
    },
  },
}
</script>

<style scoped>
.font {
  font-size: 12px;
  padding-bottom: 10px;
}

.fontColor {
  color: red;
}

.full-h {
  height: 75vh;
}

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

<template>
  <div class="full-h is-flex is-justify-content-center is-align-items-center">
    <form class="box">
      <div class="has-text-centered">
        <div class="titulo">
          <h2 class="is-size-4">Sistema de Inscripciones a CEDETEC</h2>
          <h2 class="is-size-4">para Profesores</h2>
        </div>
      </div>

      <b-field label="Número de trabajador" :type="error">
        <b-input
          type="text"
          placeholder="Ingresa tu número de trabajador"
          @keyup.enter.native="buscarProfesor()"
          v-model="numeroTrabajador"
        />
      </b-field>

      <div class="has-text-centered">
        <b-button class="is-primary "
          @click="buscarProfesor"
          type="is-primary"
          :disabled="!numeroTrabajador"
        >
          Buscar
        </b-button>
      </div>

      <p v-if="mensaje" class="has-text-centered mt-4">{{ mensaje }}</p>
      <button>Mensaje</button>
    </form>
  </div>
</template>

<script >
import axios from 'axios'
import { errorBuscar, profesorYaInscrito } from '~/utils/alerts'

export default {
  props: {
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    updateIsLoading: { type: Function, required: false, default: () => {} },
  },
  data() {
    return {
      numeroTrabajador: '',
      profesor: null,
      mensaje: '',
      error: '',
    }
  },
  methods: {
    buscarProfesor() {
      this.updateIsLoading(true)
      axios
        .get(`${process.env.VUE_APP_API}/profesores/${this.numeroTrabajador}`)
        .then((res) => {
          this.profesor = res.data;
          const { id_cuenta, nombre } = res.data;

          if (nombre  && id_cuenta ) {
            // Guardar en localStorage
            localStorage.setItem('profesorId', id_cuenta);
            localStorage.setItem('profesorNombre', nombre);
            
            this.$router.replace({
              path: '/profesor/bienvenida'
              //query: { nombre, idUsuario, numeroCuenta }
            })
          } 
          else {
            //Borrar
            /*
            this.profesor = null
            this.error = 'is-danger'
            this.mensaje = 'Profesor no encontrado o sin nombre registrado.'
            this.imprimirWarning('No se encontró al profesor.')
            */
            errorBuscar();
          }
            
        })
        .catch((err) => {
          //this.profesor = null
          //this.error = 'is-danger'
          //this.mensaje = 'Solo está permitido el acceso a profesores inscritos en la universidad.'
          //this.imprimirWarning(err.response?.data?.message || 'Error al buscar')
          //errorBuscar();
          const status = err.response?.status;

          if (status === 409) {
            profesorYaInscrito();
          } else {
            errorBuscar();
          }
        })
        .finally(() => {
          this.updateIsLoading(false)
        })
    },
    
  },
}

</script>

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

.is-primary {
  background-color: green;
}

.titulo {
  margin-bottom: 25px;
  color: goldenrod;
}

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