inital commit
This commit is contained in:
240
resources/js/components/partials/CreateAccount.vue
Normal file
240
resources/js/components/partials/CreateAccount.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<div class="left-side">
|
||||
<div class="left-heading">
|
||||
<h3>{{appName}}</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">
|
||||
<h2>Creating your account only takes a few seconds.</h2>
|
||||
<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,
|
||||
is_free:IS_FREE,
|
||||
},
|
||||
siteKey:GOOGLE_CAPTCHA_SITEKEY,
|
||||
message:"",
|
||||
errors:{},
|
||||
errorMsg:{},
|
||||
isButtonDisabled:true,
|
||||
package:pkg,
|
||||
appName : APP_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(){
|
||||
this.formData.is_free = IS_FREE;
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user