2022-12-16 23:17:37 +00:00
|
|
|
<template>
|
|
|
|
<div>
|
2023-02-27 05:45:13 +00:00
|
|
|
<video-background
|
|
|
|
src="/video/bg-video.mp4"
|
|
|
|
style=" height: 100vh;"
|
|
|
|
>
|
2022-12-16 23:17:37 +00:00
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
2023-02-27 02:32:54 +00:00
|
|
|
<div class="col-12 col-lg-4 bg-img d-none d-lg-block" style="background-image: url('/images/login.svg');background-size: cover;height: 100vh;" >
|
2022-12-16 23:17:37 +00:00
|
|
|
</div>
|
2023-02-27 02:32:54 +00:00
|
|
|
<div class="col-12 col-lg-8 pt-4 px-3 px-sm-5 px-md-5 pb-5" >
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-12 text-center">
|
|
|
|
<div class="pb-2 ">
|
|
|
|
<svg width="225" height="32" viewBox="0 0 225 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<rect width="225" height="32" fill="url(#pattern0)"/>
|
|
|
|
<defs>
|
|
|
|
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
|
|
|
|
<use xlink:href="#image0_129_1673" transform="matrix(0.000429185 0 0 0.0030177 0 -0.000938841)"/>
|
|
|
|
</pattern>
|
|
|
|
<image id="image0_129_1673" width="2330" height="332" xlink:href="data:image/png;base64,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
|
|
|
|
</defs>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row" style="height: 90vh">
|
|
|
|
<div class="col-12 my-auto">
|
|
|
|
<div class="col-md-12 align-self-center ">
|
2023-02-26 06:37:36 +00:00
|
|
|
|
2023-02-27 02:32:54 +00:00
|
|
|
<div class="row pt-3 pb-5">
|
|
|
|
<div class="row" style="margin-bottom: 24px;">
|
|
|
|
<div class="text-center pt-1 ">
|
|
|
|
<h2 class="fw-bolder display-6 text-center" >Sign Up</h2>
|
2023-02-27 04:54:49 +00:00
|
|
|
<span class="fs-5 pt-2 text-muted">Hello, <span class="fw-bolder text-dark">Beautiful!</span></span>
|
2023-02-27 02:32:54 +00:00
|
|
|
<p class="text-muted pt-2 text-center fs-5 singn-up-text 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>
|
|
|
|
<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-md-4 pt-3 pb-2">
|
|
|
|
<div class="col-12 col-md-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 fw-bold 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>
|
2022-12-16 23:17:37 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2023-02-27 05:45:13 +00:00
|
|
|
</video-background>
|
2022-12-16 23:17:37 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import backgroundImagePath from '~/assets/image/login4.png'
|
2023-02-14 04:40:06 +00:00
|
|
|
import {useUserStore} from '@/stores/user';
|
|
|
|
import {mapState,mapActions} from "pinia";
|
2022-12-16 23:17:37 +00:00
|
|
|
export default {
|
2023-02-27 04:54:49 +00:00
|
|
|
setup() {
|
|
|
|
const { t } = useI18n()
|
|
|
|
const localePath = useLocalePath()
|
2022-12-16 23:17:37 +00:00
|
|
|
|
2023-02-27 04:54:49 +00:00
|
|
|
return {
|
|
|
|
t,
|
|
|
|
localePath,
|
|
|
|
}
|
|
|
|
},
|
2023-02-14 04:40:06 +00:00
|
|
|
computed:{
|
|
|
|
...mapState(useUserStore,['user'])
|
|
|
|
},
|
2022-12-16 23:17:37 +00:00
|
|
|
name:'LoGin',
|
|
|
|
data(){
|
|
|
|
return{
|
|
|
|
backgroundImagePath:backgroundImagePath,
|
2023-02-14 04:40:06 +00:00
|
|
|
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;
|
2023-02-27 04:54:49 +00:00
|
|
|
this.$toast.success("Signup successfully....");
|
2023-02-14 04:40:06 +00:00
|
|
|
this.login(data.user,data.authorisation.token)
|
2023-02-27 04:54:49 +00:00
|
|
|
this.$router.push(this.localePath('/onboarding'));
|
|
|
|
|
2023-02-14 04:40:06 +00:00
|
|
|
}).catch((error)=>{
|
|
|
|
this.loading=false;
|
2023-02-15 03:36:51 +00:00
|
|
|
if(error.response.status==422){
|
|
|
|
this.errors = error.response.data.errors;
|
2023-02-27 04:54:49 +00:00
|
|
|
this.$toast.error(error.response.data.message);
|
2023-02-15 03:36:51 +00:00
|
|
|
}
|
|
|
|
|
2023-02-14 04:40:06 +00:00
|
|
|
})
|
2022-12-16 23:17:37 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-02-26 06:37:36 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
@media only screen and (max-width: 587px) {
|
|
|
|
p{
|
|
|
|
font-size: 16px !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|