dev-audioprocessing/pages/auth/login.vue

<template>
<div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12  col-md-5 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
      </div>
      <div class="col-12 col-md-7 col-lg-8 pt-5 ">
        <div class="py-3 text-center">
          <img src="~/assets/image/Logo.png" style="width: 200px" />
        </div>
        <div class="text-center pt-1">
          <h2 class="fw-bolder display-6 text-center" >Log In</h2>
          <span class="fs-5 pt-1 text-muted">Welcome back, <span class="fw-bolder text-dark">Morris!</span></span>
        </div>
        <div class="row pt-4 pb-5">
          <div class="col-12 pb-5">
            <form @submit.prevent="loginNow" method="POST" class=" pb-5 ">
              <div class="row pt-3 justify-content-center">
                <div class="col-12 col-sm-8 col-md-8 col-lg-5">
                  <label class="form-label">Email</label>
                  <input type="email" v-model="form.email" placeholder="JohnDoe@gmail.com" class="form-control" >
                  <div class="invalid-feedback d-block" v-if="errors.email">{{errors.email[0]}}</div>
                  <div class="invalid-feedback d-block" v-if="auth_error">Email or password is wrong, please try again!</div>
                </div>
              </div>
              <div class="row justify-content-center pt-3">
                <div class="col-12 col-sm-8 col-md-8 col-lg-5">
                  <label class="form-label">Password</label>
                  <input type="password" v-model="form.password" placeholder="Password" class="form-control" >
                  <span class="float-end pt-2"><a  class="forgot-link" href="#">Forgot Password</a></span>
                </div>
              </div>
              <div class="row justify-content-center pb-5">
                <div class="col-12 col-sm-8 col-md-8 col-lg-5 pt-4 text-center">
                  <button type="submit" class=" login-btn col-12" >Sign Up <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
                    <span class="sr-only">Loading...</span>
                  </div></button>
                  <h5 class="text-center pt-3">Don’t have an Account?  <NuxtLink class="signup-link" href="signup">Sign Up</NuxtLink></h5>
                </div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
</template>
<script>
import backgroundImagePath from '~/assets/image/login4.png';
import {useUserStore} from '@/stores/user';
import {mapState,mapActions} from "pinia";
export default {

  mounted() {

  },
  name:'Login',
  data(){
    return{
      loading:false,
      form:{
        email:"",
        password:"",
      },
      auth_error:false,
      backgroundImagePath:backgroundImagePath,
      errors:[]
    }
  },
  methods:{
    ...mapActions(useUserStore,['login','logout']),
    loginNow(){
    this.errors=[];
    this.auth_error=false;
      this.loading=true;
      this.$axios.post('/api/login',this.form).then(({data})=>{
        this.loading=false;
        this.login(data.user,data.authorization.token);
      }).catch((error)=>{
        this.loading=false;
        console.log(error);

        if(error.response.status==401){
          this.auth_error=true;
        }
        if(error.response.status==422){
          this.errors = error.response.data.errors;

        }

      })
    }
  }
}
</script>