Changeset View
Changeset View
Standalone View
Standalone View
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 class="plan-selector d-flex justify-content-around align-items-stretch"> | ||||
| <div v-for="item in plans" :key="item.id" :class="'p-3 m-1 text-center bg-light flex-fill plan-box d-flex flex-column align-items-center plan-' + item.title"> | <div v-for="item in plans" :key="item.id" :class="'p-3 m-1 text-center bg-light flex-fill plan-box d-flex flex-column align-items-center plan-' + item.title"> | ||||
| <div class="plan-ico"> | <div class="plan-ico"> | ||||
| <svg-icon :icon="plan_icons[item.title]"></svg-icon> | <svg-icon :icon="plan_icons[item.title]"></svg-icon> | ||||
| </div> | </div> | ||||
| <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button> | <button class="btn btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></button> | ||||
| <div class="plan-description text-left mt-3" v-html="item.description"></div> | <div class="plan-description text-left mt-3" v-html="item.description"></div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="faq"> | |||||
| <h5>FAQ</h5> | |||||
| <ul class="pl-4"> | |||||
| <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/how-much-storage-comes-with-my-account">How much storage comes with my account?</a></li> | |||||
| </ul> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <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> | ||||
| ▲ Show 20 Lines • Show All 123 Lines • ▼ Show 20 Lines | export default { | ||||
| this.$router.push({path: '/signup/' + plan}) | this.$router.push({path: '/signup/' + plan}) | ||||
| this.plan = plan | this.plan = plan | ||||
| this.displayForm(1, true) | this.displayForm(1, true) | ||||
| }, | }, | ||||
| // Composes plan selection page | // Composes plan selection page | ||||
| step0() { | step0() { | ||||
| if (!this.plans.length) { | if (!this.plans.length) { | ||||
| this.$root.startLoading() | this.$root.startLoading() | ||||
| axios.get('/api/auth/signup/plans', {}).then(response => { | axios.get('/api/auth/signup/plans').then(response => { | ||||
| this.$root.stopLoading() | this.$root.stopLoading() | ||||
| this.plans = response.data.plans | this.plans = response.data.plans | ||||
| }) | }) | ||||
| .catch(error => { | .catch(error => { | ||||
| this.$root.errorHandler(error) | this.$root.errorHandler(error) | ||||
| }) | }) | ||||
| } | } | ||||
| }, | }, | ||||
| ▲ Show 20 Lines • Show All 100 Lines • Show Last 20 Lines | |||||