Page MenuHomePhorge
Differential D1162 Diff 3049 src/resources/vue/Signup.vue

Changeset View

Standalone View

View Options

src/resources/vue/Signup.vue

<template> <template>
<div class="container"> <div class="container">
<div id="step0"> <div id="step0">
<div class="plan-selector d-flex justify-content-around align-items-stretch mb-3"></div> <div class="plan-selector d-flex justify-content-around align-items-stretch mb-3">
<div v-for="plan in plans" :key="plan.id" :class="'p-3 m-1 text-center bg-light flex-fill plan-box d-flex flex-column align-items-center plan-' + plan.title">
<div class="plan-ico">
<svg-icon :icon="plan_icons[plan.title]"></svg-icon>
</div>
<button class="btn btn-primary" :data-title="plan.title" @click="selectPlan(plan.title)" v-html="plan.button"></button>
<div class="plan-description text-left mt-3" v-html="plan.description"></div>
</div>
</div>
<h3>FAQs</h3> <h3>FAQs</h3>
<ul> <ul>
<li><a href="https://kolabnow.com/tos">What are your terms of service?</a></li> <li><a href="https://kolabnow.com/tos">What are your terms of service?</a></li>
<li><a href="https://kb.kolabnow.com/faq/can-i-upgrade-an-individual-account-to-a-group-account">Can I upgrade an individual account to a group account?</a></li> <li><a href="https://kb.kolabnow.com/faq/can-i-upgrade-an-individual-account-to-a-group-account">Can I upgrade an individual account to a group account?</a></li>
<li><a href="https://kb.kolabnow.com/faq/how-much-storage-comes-with-my-account">How much storage comes with my account?</a></li> <li><a href="https://kb.kolabnow.com/faq/how-much-storage-comes-with-my-account">How much storage comes with my account?</a></li>
</ul> </ul>
</div> </div>
▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines <div class="container">
<div class="form-group"> <div class="form-group">
<label for="signup_password" class="sr-only">Password</label> <label for="signup_password" class="sr-only">Password</label>
<input type="password" class="form-control" id="signup_password" placeholder="Password" required v-model="password"> <input type="password" class="form-control" id="signup_password" placeholder="Password" required v-model="password">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="signup_confirm" class="sr-only">Confirm Password</label> <label for="signup_confirm" class="sr-only">Confirm Password</label>
<input type="password" class="form-control" id="signup_confirm" placeholder="Confirm Password" required v-model="password_confirmation"> <input type="password" class="form-control" id="signup_confirm" placeholder="Confirm Password" required v-model="password_confirmation">
</div> </div>
<div class="form-group pt-2 pb-2">
<label for="signup_voucher" class="sr-only">Voucher code</label>
<input type="text" class="form-control" id="signup_voucher" placeholder="Voucher code" v-model="voucher">
</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> Submit</button> <button class="btn btn-primary" type="submit"><svg-icon icon="check"></svg-icon> Submit</button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
email: '', email: '',
name: '', 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,
plans: null plan_icons: {
individual: 'user',
group: 'users'
},
plans: [],
voucher: ''
} }
}, },
mounted() { mounted() {
let param = this.$route.params.param; let param = this.$route.params.param;
if (param) { if (param) {
if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(param)) { if (this.$route.path.indexOf('/signup/voucher/') === 0) {
// Voucher (discount) code
this.voucher = param
this.displayForm(0)
} else if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(param)) {
// Verification code provided, auto-submit Step 2 // Verification code provided, auto-submit Step 2
this.short_code = RegExp.$1 this.short_code = RegExp.$1
this.code = RegExp.$2 this.code = RegExp.$2
this.submitStep2(true) this.submitStep2(true)
} else if (/^([a-zA-Z_]+)$/.test(param)) { } else if (/^([a-zA-Z_]+)$/.test(param)) {
// Plan title provided, save it and display Step 1 // Plan title provided, save it and display Step 1
this.plan = param this.plan = param
this.displayForm(1, true) this.displayForm(1, true)
} else { } else {
this.$root.errorPage(404) this.$root.errorPage(404)
} }
} else { } else {
this.displayForm(0) this.displayForm(0)
} }
}, },
methods: { methods: {
selectPlan(plan) {
this.$router.push({path: '/signup/' + plan})
this.plan = plan
this.displayForm(1, true)
},
// Composes plan selection page // Composes plan selection page
step0() { step0() {
if (!this.plans) { if (!this.plans.length) {
axios.get('/api/auth/signup/plans', {}).then(response => { axios.get('/api/auth/signup/plans', {}).then(response => {
let boxes = []
this.plans = response.data.plans this.plans = response.data.plans
this.plans.forEach(plan => {
boxes.push($(
`<div class="p-3 m-1 text-center bg-light flex-fill plan-box plan-${plan.title}">
<button class="btn btn-primary" data-title="${plan.title}">${plan.button}</button>
<div class="plan-description text-left mt-3">${plan.description}</div>
</div>`
))
})
$('#step0').find('.plan-selector')
.append(boxes)
.find('button').on('click', event => {
let plan = $(event.target).data('title')
this.$router.push({path: '/signup/' + plan})
this.plan = plan
this.displayForm(1, true)
})
}) })
} }
}, },
// 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, name: this.name,
plan: this.plan plan: this.plan,
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.name = response.data.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
// 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('')
$.each(response.data.domains, (i, v) => { $.each(response.data.domains, (i, v) => {
options.push($('<option>').text(v).attr('value', v)) options.push($('<option>').text(v).attr('value', v))
}) })
Show All 13 Lines export default {
this.$root.clearFormValidation($('#step3 form')) this.$root.clearFormValidation($('#step3 form'))
axios.post('/api/auth/signup', { axios.post('/api/auth/signup', {
code: this.code, code: this.code,
short_code: this.short_code, short_code: this.short_code,
login: this.login, login: this.login,
domain: this.domain, domain: this.domain,
password: this.password, password: this.password,
password_confirmation: this.password_confirmation password_confirmation: this.password_confirmation,
voucher: this.voucher
}).then(response => { }).then(response => {
// auto-login and goto dashboard // auto-login and goto dashboard
this.$root.loginUser(response.data.access_token) this.$root.loginUser(response.data.access_token)
}) })
}, },
// Moves the user a step back in registration form // Moves the user a step back in registration form
stepBack(e) { stepBack(e) {
var card = $(e.target).closest('.card') var card = $(e.target).closest('.card')
Show All 27 Lines