servicio_social_front/pages/index.vue

<template>
  <section class="container p-2 log">
    <div class="fix  columns is-mobile">
   <div class="container column is-12-mobile is-6-desktop is-6-tablet  cont">
    <b-field
      label="Usuario"
      message="This email is invalid"
      :type="usuarioValido()">
        <b-input v-model="usuario"></b-input>
    </b-field>

    <b-field
      label="Contraseña">
        <!-- message="This email is invalid"
      type="is-danger" -->
        <b-input
          v-model="password"
          type="password"
          password-reveal></b-input>
    </b-field>

    <b-field class="center">
    <button :disabled='usuario == "" || password=="" && error== true'
    class="button is-success is-medium"
    @click="enviar()">
        Iniciar sesion
    </button>
    </b-field>
    </div>
    </div>
  </section>
</template>

<script>
import validator from 'validator'
import axios from 'axios'

export default {
  data () {
    return {
      usuario: '',
      password: '',
      error: false,
      isFullPage: true
    }
  },
  methods: {
    usuarioValido () {
      if (!this.usuario) {
        console.log('esta vacio')
        // return ''
        this.error = true
      }
      if (validator.isNumeric(this.usuario, { no_symbols: true })) {
        if (this.usuario.length === 10) {
          console.log('es numero de cuenta')
        }
        return ''
      } else if (validator.isEmail(this.usuario)) {
        console.log('es correo')
        return ''
      } else if (validator.isAlpha(this.usuario)) {
        console.log('es texto')
        return ''
      }
      // return 'is-danger'
      this.error = true
    },

    enviar () {
      const loadingComponent = this.$buefy.loading.open({
        container: this.isFullPage ? null : this.$refs.element.$el
      })

      const data = {
        usuario: (this.usuario).trim(),
        password: this.password
      }
      axios.post(`${process.env.api}/usuario/login`, data)
        .then(resp => {
          loadingComponent.close()

          localStorage.clear()
          window.localStorage.setItem('idUsuario', resp.data.Usuario.idUsuario)
          window.localStorage.setItem('token', resp.data.token)
          window.localStorage.setItem('nombre', resp.data.Usuario.nombre)
          window.localStorage.setItem('idTipoUsuario', resp.data.Usuario.TipoUsuario.idTipoUsuario)
          window.localStorage.setItem('tipoUsuario', resp.data.Usuario.TipoUsuario.tipoUsuario)
          window.localStorage.setItem('usuario', resp.data.Usuario.usuario)

          this.$router.push(`/${resp.data.Usuario.TipoUsuario.tipoUsuario}`)
        })
        .catch(error => {
          loadingComponent.close()
          this.$buefy.dialog.alert({
            title: 'Error',
            message: error.response.data.message,
            type: 'is-danger',
            hasIcon: true,
            icon: 'alert-circle',
            iconPack: 'mdi',
            ariaRole: 'alertdialog',
            ariaModal: true
          })
        })
    }
  },
  watch: {
    usuario () {
      this.error = false
    }
  },
  layout: 'login'
}
</script>
<style scoped>
footer[data-v-cf943d08]{
  display: none !important;
}
.fix{
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cont{
  height: auto;
  padding: 0 1rem;
}
.cont *{
  margin: 1rem 0;
}
.center{
  text-align: center;
}
.columns{
  margin: 0;
}
</style>