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 | |||||