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">
        <h1 class="has-text-centered is-size-1">IRIS</h1>
        <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();

          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: 85vh;
  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>