115 lines
4.7 KiB
Vue
Executable File
115 lines
4.7 KiB
Vue
Executable File
<template>
|
|
<div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-4 bg-img" :style="{ backgroundImage: `url(${backgroundImagePath})` }" >
|
|
</div>
|
|
<div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5 ">
|
|
<div class="pb-2 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" >Sign Up</h2>
|
|
<span class="fs-5 pt-2 text-muted">Helo , <span class="fw-bolder text-dark">Beautiful!</span></span>
|
|
<p class="text-muted pt-2 text-center fs-5 pb-0 mb-0">Mindboost helps you block out distracting noise with concentration-boosting music, increasing your productivity by up to 35%.</p>
|
|
</div>
|
|
<div class="row pt-3 pb-5">
|
|
<div class="col-12">
|
|
<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" 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" 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" 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" 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">
|
|
<div class="col-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
|
|
<label class="form-check-label" for="flexCheckIndeterminate">
|
|
I agree to Mindboost's terms and conditions. You can read about how we use and protect your information in our Privacy Policy.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row px-4 pt-3">
|
|
<div class="col-12">
|
|
<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>
|
|
</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 {
|
|
|
|
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;
|
|
if(error.response.status==422){
|
|
this.errors = error.response.data.errors;
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |