master
Waqar Ul Zafar
parent
27ad0834a2
commit
486004f3aa
|
|
@ -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" >
|
||||
<span class="float-end pt-2"><a class="forgot-link" href="#">Forgot Password</a></span>
|
||||
<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</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(){
|
||||
this.$axios.get('/api/fetch').then(({data})=>{
|
||||
console.log(data)
|
||||
...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;
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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={}
|
||||
|
|
|
|||
Loading…
Reference in New Issue