240 lines
9.0 KiB
Vue
240 lines
9.0 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="form">
|
|
<div class="left-side">
|
|
<div class="left-heading">
|
|
<h3>{{company_Name}}</h3>
|
|
</div>
|
|
<Step step="1"/>
|
|
</div>
|
|
<div class="right-side">
|
|
<form @submit.prevent="createAccount" autocomplete="off" class="form-element was-validated form-element--login" method="post" id="createAccountForm"
|
|
novalidate="novalidate">
|
|
<div class="main active">
|
|
<TopArea/>
|
|
<div class="text">
|
|
<h3>Creating your account only takes a few seconds.</h3>
|
|
<p>Let's start with some basic info.</p>
|
|
</div>
|
|
<div class="text" v-if="isButtonDisabled">
|
|
<p class="error-text">All fields are required</p>
|
|
</div>
|
|
<div class="text" v-else-if="errorMsg.message">
|
|
<p class="error-text">{{errorMsg.message[0]}}</p>
|
|
</div>
|
|
<div class="input-text">
|
|
<input
|
|
type="text"
|
|
placeholder="First Name"
|
|
name="first_name"
|
|
:backend="errors.first_name"
|
|
:errors="v$.formData.first_name.$errors"
|
|
v-model="formData.first_name"
|
|
:rules="['required']"
|
|
:className="{'warning':errors.first_name}"
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder="Last Name"
|
|
name="last_name"
|
|
:backend="errors.last_name"
|
|
v-model="formData.last_name"
|
|
:errors="v$.formData.last_name.$errors"
|
|
:rules="['required']"
|
|
:className="{'warning':errors.last_name}"
|
|
/>
|
|
</div>
|
|
<div class="input-text">
|
|
<input
|
|
type="text"
|
|
placeholder="Email"
|
|
v-model="formData.email"
|
|
:errors="v$.formData.email.$errors"
|
|
:rules="['required','email']"
|
|
:className="{'warning':errors.email}"
|
|
/>
|
|
</div>
|
|
<div class="input-text">
|
|
<input
|
|
type="password"
|
|
placeholder="Password"
|
|
:backend="errors.password"
|
|
v-model="formData.password"
|
|
:errors="v$.formData.password.$errors"
|
|
:rules="['required','password']"
|
|
:className="{'warning':errors.password}"
|
|
/>
|
|
</div>
|
|
<div class="input-text">
|
|
<VueRecaptcha
|
|
:sitekey="siteKey"
|
|
:load-recaptcha-script="true"
|
|
@verify="handleSuccess"
|
|
@error="handleError"
|
|
/>
|
|
|
|
</div>
|
|
<div class="input-text">
|
|
<input type="checkbox" v-model="formData.is_click_acknowledge" @change.prevent="checkClickAcknowledge($event)">
|
|
<span style="font-weight:bold;color:purple;font-size: 12px;margin-top:5px">
|
|
By clicking on the "Next " button on the left, I acknowledge that I have read the Service Agreement, <a href="/terms-of-service" target="_blank">Terms of Use</a> and <a href="/terms-of-service" target="_blank">Privacy Policy</a> , and that I agree to their terms.
|
|
</span>
|
|
</div>
|
|
<div class="buttons">
|
|
<button :disabled="v$.formData.$invalid" type="submit" value="Next" class="next_button">Next Step</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<Footer/>
|
|
</template>
|
|
<script>
|
|
import register from "@/Api/register";
|
|
import {
|
|
setStep,
|
|
setUserEmail,
|
|
setUserId,
|
|
setSecurityKey,
|
|
setPackageId,
|
|
setAmount,
|
|
setUserLastName,
|
|
getPackageId,
|
|
setUserFirstName,
|
|
setUserPassword,
|
|
getUserFirstName,
|
|
getUserLastName,
|
|
getUserPassword,
|
|
getUserEmail,
|
|
getUserId, getLocalStorage,setLocalStorage
|
|
} from "../../helper";
|
|
import router from "../../router";
|
|
import { VueRecaptcha } from 'vue-recaptcha';
|
|
import useVuelidate from '@vuelidate/core'
|
|
import { required, email } from '@vuelidate/validators'
|
|
import { GOOGLE_CAPTCHA_SITEKEY } from "../../config/constants";
|
|
import pkg from "../../helper/package";
|
|
import Footer from "./Footer.vue";
|
|
|
|
export default {
|
|
components: {VueRecaptcha,Footer},
|
|
setup() {
|
|
return {v$: useVuelidate()};
|
|
},
|
|
data(){
|
|
return {
|
|
formData:{
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
password: "",
|
|
captcha:"",
|
|
is_click_acknowledge:null
|
|
},
|
|
siteKey:GOOGLE_CAPTCHA_SITEKEY,
|
|
message:"",
|
|
errors:{},
|
|
errorMsg:{},
|
|
isButtonDisabled:true,
|
|
package:pkg,
|
|
appName : APP_NAME,
|
|
company_Name: COMPANY_NAME
|
|
}
|
|
},
|
|
async mounted() {
|
|
const userData = JSON.parse(getLocalStorage('formData'))|| [];
|
|
this.formData.first_name = userData.first_name;
|
|
this.formData.last_name = userData.last_name;
|
|
this.formData.email = userData.email;
|
|
this.formData.password = userData.password;
|
|
},
|
|
|
|
methods:{
|
|
|
|
handleSuccess(response){
|
|
if(response) {
|
|
this.formData.captcha = response;
|
|
}
|
|
},
|
|
handleError(){
|
|
this.formData.captcha = "";
|
|
},
|
|
async createAccount(){
|
|
const result = await register.createAccount(this.formData);
|
|
this.errors = {};
|
|
this.errorMsg = {};
|
|
if (result.status_code == 100) {
|
|
setLocalStorage('formData', JSON.stringify(this.formData));
|
|
setStep(2);
|
|
router.push({name: 'add-profile'});
|
|
} else {
|
|
this.errors = result.data
|
|
|
|
if(result.status_code == 400)
|
|
{
|
|
this.errorMsg.message = [result.message];
|
|
}else {
|
|
if (this.errors?.email) {
|
|
this.errorMsg.message = this.errors?.email;
|
|
}else if (this.errors?.password) {
|
|
this.errorMsg.message = this.errors?.password;
|
|
} else {
|
|
this.errorMsg.message = this.errors?.captcha;
|
|
}
|
|
}
|
|
if (this.errorMsg.message){
|
|
this.isButtonDisabled = false
|
|
}
|
|
}
|
|
},
|
|
checkClickAcknowledge(e){
|
|
if(e.target.checked){
|
|
this.formData.is_click_acknowledge=e.target.checked;
|
|
}
|
|
else {
|
|
this.formData.is_click_acknowledge=null;
|
|
}
|
|
},
|
|
},
|
|
|
|
validations () {
|
|
this.errors = {};
|
|
return {
|
|
formData: {
|
|
first_name: {required},
|
|
last_name: {required},
|
|
email:{required,email},
|
|
password:{required},
|
|
is_click_acknowledge:{required}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
@media (max-width: 750px) {
|
|
.container .card .right-side {
|
|
width: 100%;
|
|
border-radius: 0 !important;
|
|
}
|
|
.container .card .left-side {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 0 !important;
|
|
}
|
|
.container .card .form {
|
|
display: block;
|
|
}
|
|
}
|
|
.error-text {
|
|
color: red;
|
|
text-align: center
|
|
}
|
|
</style>
|
|
|
|
|