Login.vue

<template>
  <div>
    <div v-if="isLoading">
      <base-spinner />
    </div>
    <div class="flex items-center justify-center">
      <div class="sm:block card mt-6 w-1/3">
        <div class="p-5 mx-auto text-left font-raleway">
          <h1 class="font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
            Login to DD-Code
          </h1>
          <p
            v-show="error"
            class="text-lg text-red-500"
          >
            {{ errorMsg }}
          </p>
          <form @submit="login">
            <div class="my-4">
              <h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">
                Email*
              </h1>
              <input
                v-model.trim="email"
                type="email"
                class="outline-none pt-3 pb-3 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700"
              >
            </div>
            <div class="my-4">
              <h1 class="text-left font-bold mb-2 text-xl sm:text-2xl font-montserrat">
                Password*
              </h1>
              <input
                v-model.trim="password"
                type="password"
                class="text-xl outline-none pt-3 pb-3 w-4/5 bg-transparent border-b hover:border-blue-700 focus:border-blue-700"
              >
            </div>
            
           

            <button
              type="submit"
              :disabled="password.length < 3 || !password ||!email"
              :class="password.length < 3 || !password ||!email ? 'bg-green-400 text-3xl font-bold rounded-lg p-5 text-white opacity-75' : 'bg-green-400 text-3xl font-bold rounded-lg p-5 text-white hover:bg-green-600'"
            >
              Login  <font-awesome-icon
                size="lg"
                class="ml-2"
                icon="fa-solid fa-right-to-bracket"
              />
            </button>
            <p class="my-2 font-bold">
              <router-link to="/forgotpassword">
                Forgot Password?
              </router-link>
            </p>
            <p class="my-2 font-bold">
              <router-link to="/signup">
                Join DD-CODE as a contributor.
              </router-link>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let host = require('@/components/js/const').apiHost;

export default {
  name: 'Login',

  data() {
    return {
      email: '',
      password: '',
      error: false,
      errorMsg: `An error occurred, please try again`,
      isDev: process.env.NODE_ENV === 'development',
      isLoading: false
    }
  },
  computed: {
    userData: function () {
      return this.$store.getters['User/userData']
    },
  },
  mounted: function () {
    const vm = this
    if(vm.userData !== null) {
      this.$router.push('/profile')
    }
  },
  methods: {
    async login(e) {
      e.preventDefault()

      const vm = this;

      if(vm.isDev) {
        host = require('@/components/js/const').devApiHost;
      }
this.isLoading= true;
      try {
        const res = await this.axios.post(`${host}/api/auth/local`, {
          identifier: this.email,
          password: this.password
        });

        const { jwt, user } = res.data
        // console.log(user)
        window.localStorage.setItem('jwt', jwt)
        window.localStorage.setItem('userData', JSON.stringify(user))

        this.$store.dispatch('User/setJwt', jwt)
        this.$store.dispatch('User/setUserData', user)
        this.isLoading= false
        this.$router.push('/profile')
      } catch(error) {
        // console.log(error.response.data.error.message)
        this.isLoading= false;
        this.error = true
        this.password = ''
        this.isLoading= false
      }
    },
  }
}
</script>
<style>
  @import url('~@/assets/bootstrap.css');

  a {
    color: #42b983;
  }
</style>