ok

pages/auth/login.vue

@@ -14,23 +14,27 @@
         </div>
         <div class="row pt-4 pb-5">
           <div class="col-12 pb-5">
-            <form class=" 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" placeholder="JohnDoe@gmail.com" class="form-control" >
+                  <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" placeholder="Password" class="form-control" >
+                  <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>
+                  <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</button>
+                  <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>
@@ -44,22 +48,48 @@
 </div>
 </template>
 <script>
-import backgroundImagePath from '~/assets/image/login4.png'
+import backgroundImagePath from '~/assets/image/login4.png';
+import {useUserStore} from '@/stores/user';
+import {mapState,mapActions} from "pinia";
 export default {
 
   mounted() {
-    this.fetchData();
+
   },
-  name:'LoGin',
+  name:'Login',
   data(){
     return{
+      loading:false,
+      form:{
+        email:"",
+        password:"",
+      },
+      auth_error:false,
       backgroundImagePath:backgroundImagePath,
+      errors:[]
     }
   },
   methods:{
-    fetchData(){
+    ...mapActions(useUserStore,['login','logout']),
-      this.$axios.get('/api/fetch').then(({data})=>{
+    loginNow(){
-        console.log(data)
+    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;
+
+        }
+
       })
     }
   }

pages/auth/signup.vue

@@ -15,25 +15,29 @@
           </div>
           <div class="row pt-3 pb-5">
             <div class="col-12">
-              <form>
+              <form @submit.prevent="submitRegister" method="POST">
                 <div class="row  px-0 px-md-4 pb-2">
                   <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                     <label class="form-label">First Name</label>
-                    <input type="text" placeholder="First Name" class="form-control">
+                    <input type="text" v-model="form.first_name" placeholder="First Name" class="form-control">
+                    <div class="invalid-feedback d-block" v-if="errors.first_name">{{errors.first_name[0]}}</div>
                   </div>
                   <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                     <label class="form-label">Surname</label>
-                    <input type="text" placeholder="Surname" class="form-control">
+                    <input type="text" placeholder="Surname" v-model="form.surname" class="form-control">
+                    <div class="invalid-feedback d-block" v-if="errors.surname">{{errors.surname[0]}}</div>
                   </div>
                 </div>
                 <div class="row  px-0 px-md-4  pb-2">
                   <div class="col-12 col-md-6 pt-2 col-lg-6 ">
                     <label class="form-label">Email</label>
-                    <input type="text" placeholder="Email" class="form-control">
+                    <input type="text" placeholder="Email" v-model="form.email" class="form-control">
+                    <div class="invalid-feedback d-block" v-if="errors.email">{{errors.email[0]}}</div>
                   </div>
                   <div class="col-12 pt-2 col-md-6 col-lg-6 ">
                     <label class="form-label">Password</label>
-                    <input type="password" placeholder="Password" class="form-control">
+                    <input type="password" v-model="form.password" placeholder="Password" class="form-control">
+                    <div class="invalid-feedback d-block" v-if="errors.password">{{errors.password[0]}}</div>
                   </div>
                 </div>
                 <div class="row px-4 pt-3 pb-2">
@@ -48,7 +52,11 @@
                 </div>
                 <div class="row px-4 pt-3">
                   <div class="col-12">
-                    <button type="button" class="login-btn col-4">Signup</button>
+                    <button :disabled="loading" type="submit" class="login-btn col-4">Signup
+                      <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
+                      <span class="sr-only">Loading...</span>
+                    </div>
+                    </button>
                     <p class="pt-3">Already have an Account? <NuxtLink class="signup-link" href="login">Log In</NuxtLink></p>
                   </div>
                 </div>
@@ -62,12 +70,42 @@
 </template>
 <script>
 import backgroundImagePath from '~/assets/image/login4.png'
+import {useUserStore} from '@/stores/user';
+import {mapState,mapActions} from "pinia";
 export default {
 
+  computed:{
+    ...mapState(useUserStore,['user'])
+  },
   name:'LoGin',
   data(){
     return{
       backgroundImagePath:backgroundImagePath,
+      loading:false,
+      errors:[],
+      form:{
+        first_name:'',
+        surname:"",
+        email:"",
+        password:"",
+
+      }
+    }
+  },
+  methods:{
+    ...mapActions(useUserStore,['login','logout']),
+
+    submitRegister(){
+      this.loading=true;
+      this.$axios.post('/api/register',this.form).then(({data})=>{
+        console.log(data);
+
+        this.loading=false;
+        this.login(data.user,data.authorisation.token)
+      }).catch((error)=>{
+        this.loading=false;
+        this.errors = error.response.data.errors;
+      })
     }
   }
 }

plugins/axios.ts

@@ -1,14 +1,20 @@
 import axios from "axios";
+import {useUserStore} from '@/stores/user';
+import {mapState} from 'pinia';
 export default defineNuxtPlugin((nuxtApp) => {
     const defaultUrl = "http://localhost:8000";
 
+    // @ts-ignore
+    var token=mapState(useUserStore,['token']).token();
+    // Access Pinia state
     // @ts-ignore
     let api: AxiosInstance;
     api = axios.create({
         // @ts-ignore
-        baseUrl: defaultUrl,
+        baseURL: defaultUrl,
         headers: {
             common: {},
+            Authorization:'bearer '+token
         },
     });
     return {

stores/user.js

@@ -1,19 +1,21 @@
 // stores/counter.js
 import { defineStore } from 'pinia'
 
-export const useCounterStore = defineStore('user', {
+export const useUserStore = defineStore('user', {
     state: () => {
         return {
             user:{},
-            is_login:false
+            is_login:false,
+            token:''
         }
     },
     // could also be defined as
     // state: () => ({ count: 0 })
     actions: {
-        login(user) {
+        login(user,token) {
             this.user=user;
             this.is_login=true;
+            this.token=token;
         },
         logout(){
             this.user={}
@@ -21,4 +23,4 @@ export const useCounterStore = defineStore('user', {
         }
     },
     persist: true,
-})
+})