Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Signup.vue
Show All 20 Lines | <div class="container"> | ||||
<div class="card d-none" id="step1"> | <div class="card d-none" id="step1"> | ||||
<div class="card-body"> | <div class="card-body"> | ||||
<h4 class="card-title">Sign Up - Step 1/3</h4> | <h4 class="card-title">Sign Up - Step 1/3</h4> | ||||
<p class="card-text"> | <p class="card-text"> | ||||
Sign up to start your free month. | Sign up to start your free month. | ||||
</p> | </p> | ||||
<form @submit.prevent="submitStep1" data-validation-prefix="signup_"> | <form @submit.prevent="submitStep1" data-validation-prefix="signup_"> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label for="signup_name" class="sr-only">Your Name</label> | <div class="input-group"> | ||||
<input type="text" class="form-control" id="signup_name" placeholder="Your Name" required autofocus v-model="name"> | <input type="text" class="form-control" id="signup_first_name" placeholder="First Name" autofocus v-model="first_name"> | ||||
<input type="text" class="form-control rounded-right" id="signup_last_name" placeholder="Surname" v-model="last_name"> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="form-group"> | <div class="form-group"> | ||||
<label for="signup_email" class="sr-only">Existing Email Address</label> | <label for="signup_email" class="sr-only">Existing Email Address</label> | ||||
<input type="text" class="form-control" id="signup_email" placeholder="Existing Email Address" required v-model="email"> | <input type="text" class="form-control" id="signup_email" placeholder="Existing Email Address" required v-model="email"> | ||||
</div> | </div> | ||||
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button> | <button class="btn btn-secondary" type="button" @click="stepBack">Back</button> | ||||
<button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button> | <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Continue</button> | ||||
</form> | </form> | ||||
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines | <template> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
email: '', | email: '', | ||||
name: '', | first_name: '', | ||||
last_name: '', | |||||
code: '', | code: '', | ||||
short_code: '', | short_code: '', | ||||
login: '', | login: '', | ||||
password: '', | password: '', | ||||
password_confirmation: '', | password_confirmation: '', | ||||
domain: '', | domain: '', | ||||
plan: null, | plan: null, | ||||
is_domain: false, | is_domain: false, | ||||
▲ Show 20 Lines • Show All 44 Lines • ▼ Show 20 Lines | export default { | ||||
} | } | ||||
}, | }, | ||||
// Submits data to the API, validates and gets verification code | // Submits data to the API, validates and gets verification code | ||||
submitStep1() { | submitStep1() { | ||||
this.$root.clearFormValidation($('#step1 form')) | this.$root.clearFormValidation($('#step1 form')) | ||||
axios.post('/api/auth/signup/init', { | axios.post('/api/auth/signup/init', { | ||||
email: this.email, | email: this.email, | ||||
name: this.name, | last_name: this.last_name, | ||||
first_name: this.first_name, | |||||
plan: this.plan, | plan: this.plan, | ||||
voucher: this.voucher | voucher: this.voucher | ||||
}).then(response => { | }).then(response => { | ||||
this.displayForm(2, true) | this.displayForm(2, true) | ||||
this.code = response.data.code | this.code = response.data.code | ||||
}) | }) | ||||
}, | }, | ||||
// Submits the code to the API for verification | // Submits the code to the API for verification | ||||
submitStep2(bylink) { | submitStep2(bylink) { | ||||
if (bylink === true) { | if (bylink === true) { | ||||
this.displayForm(2, false) | this.displayForm(2, false) | ||||
} | } | ||||
this.$root.clearFormValidation($('#step2 form')) | this.$root.clearFormValidation($('#step2 form')) | ||||
axios.post('/api/auth/signup/verify', { | axios.post('/api/auth/signup/verify', { | ||||
code: this.code, | code: this.code, | ||||
short_code: this.short_code | short_code: this.short_code | ||||
}).then(response => { | }).then(response => { | ||||
this.displayForm(3, true) | this.displayForm(3, true) | ||||
// Reset user name/email/plan, we don't have them if user used a verification link | // Reset user name/email/plan, we don't have them if user used a verification link | ||||
this.name = response.data.name | this.first_name = response.data.first_name | ||||
this.last_name = response.data.last_name | |||||
this.email = response.data.email | this.email = response.data.email | ||||
this.is_domain = response.data.is_domain | this.is_domain = response.data.is_domain | ||||
this.voucher = response.data.voucher | this.voucher = response.data.voucher | ||||
// Fill the domain selector with available domains | // Fill the domain selector with available domains | ||||
if (!this.is_domain) { | if (!this.is_domain) { | ||||
let options = [] | let options = [] | ||||
$('select#signup_domain').html('') | $('select#signup_domain').html('') | ||||
▲ Show 20 Lines • Show All 61 Lines • Show Last 20 Lines |