master
parent
27ad0834a2
commit
486004f3aa
|
@ -14,23 +14,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row pt-4 pb-5">
|
<div class="row pt-4 pb-5">
|
||||||
<div class="col-12 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="row pt-3 justify-content-center">
|
||||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||||||
<label class="form-label">Email</label>
|
<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>
|
</div>
|
||||||
<div class="row justify-content-center pt-3">
|
<div class="row justify-content-center pt-3">
|
||||||
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
<div class="col-12 col-sm-8 col-md-8 col-lg-5">
|
||||||
<label class="form-label">Password</label>
|
<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>
|
</div>
|
||||||
<div class="row justify-content-center pb-5">
|
<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">
|
<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>
|
<h5 class="text-center pt-3">Don’t have an Account? <NuxtLink class="signup-link" href="signup">Sign Up</NuxtLink></h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,22 +48,48 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.fetchData();
|
|
||||||
},
|
},
|
||||||
name:'LoGin',
|
name:'Login',
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
|
loading:false,
|
||||||
|
form:{
|
||||||
|
email:"",
|
||||||
|
password:"",
|
||||||
|
},
|
||||||
|
auth_error:false,
|
||||||
backgroundImagePath:backgroundImagePath,
|
backgroundImagePath:backgroundImagePath,
|
||||||
|
errors:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods:{
|
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,25 +15,29 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row pt-3 pb-5">
|
<div class="row pt-3 pb-5">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<form>
|
<form @submit.prevent="submitRegister" method="POST">
|
||||||
<div class="row px-0 px-md-4 pb-2">
|
<div class="row px-0 px-md-4 pb-2">
|
||||||
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||||||
<label class="form-label">First Name</label>
|
<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>
|
||||||
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||||||
<label class="form-label">Surname</label>
|
<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>
|
</div>
|
||||||
<div class="row px-0 px-md-4 pb-2">
|
<div class="row px-0 px-md-4 pb-2">
|
||||||
<div class="col-12 col-md-6 pt-2 col-lg-6 ">
|
<div class="col-12 col-md-6 pt-2 col-lg-6 ">
|
||||||
<label class="form-label">Email</label>
|
<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>
|
||||||
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
<div class="col-12 pt-2 col-md-6 col-lg-6 ">
|
||||||
<label class="form-label">Password</label>
|
<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>
|
</div>
|
||||||
<div class="row px-4 pt-3 pb-2">
|
<div class="row px-4 pt-3 pb-2">
|
||||||
|
@ -48,7 +52,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row px-4 pt-3">
|
<div class="row px-4 pt-3">
|
||||||
<div class="col-12">
|
<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>
|
<p class="pt-3">Already have an Account? <NuxtLink class="signup-link" href="login">Log In</NuxtLink></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -62,12 +70,42 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
|
|
||||||
|
computed:{
|
||||||
|
...mapState(useUserStore,['user'])
|
||||||
|
},
|
||||||
name:'LoGin',
|
name:'LoGin',
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
backgroundImagePath:backgroundImagePath,
|
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 axios from "axios";
|
||||||
|
import {useUserStore} from '@/stores/user';
|
||||||
|
import {mapState} from 'pinia';
|
||||||
export default defineNuxtPlugin((nuxtApp) => {
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
const defaultUrl = "http://localhost:8000";
|
const defaultUrl = "http://localhost:8000";
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
var token=mapState(useUserStore,['token']).token();
|
||||||
|
// Access Pinia state
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
let api: AxiosInstance;
|
let api: AxiosInstance;
|
||||||
api = axios.create({
|
api = axios.create({
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
baseUrl: defaultUrl,
|
baseURL: defaultUrl,
|
||||||
headers: {
|
headers: {
|
||||||
common: {},
|
common: {},
|
||||||
|
Authorization:'bearer '+token
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -1,19 +1,21 @@
|
||||||
// stores/counter.js
|
// stores/counter.js
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
export const useCounterStore = defineStore('user', {
|
export const useUserStore = defineStore('user', {
|
||||||
state: () => {
|
state: () => {
|
||||||
return {
|
return {
|
||||||
user:{},
|
user:{},
|
||||||
is_login:false
|
is_login:false,
|
||||||
|
token:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// could also be defined as
|
// could also be defined as
|
||||||
// state: () => ({ count: 0 })
|
// state: () => ({ count: 0 })
|
||||||
actions: {
|
actions: {
|
||||||
login(user) {
|
login(user,token) {
|
||||||
this.user=user;
|
this.user=user;
|
||||||
this.is_login=true;
|
this.is_login=true;
|
||||||
|
this.token=token;
|
||||||
},
|
},
|
||||||
logout(){
|
logout(){
|
||||||
this.user={}
|
this.user={}
|
||||||
|
|
Loading…
Reference in New Issue