Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Signup.vue
| <template> | <template> | ||||
| <div class="container"> | <div class="container"> | ||||
| <div id="step0" v-if="!invitation"> | <div id="step0" v-if="!invitation"> | ||||
| <div class="plan-selector row row-cols-sm-2 g-3"> | <div class="plan-selector row row-cols-sm-2 g-3"> | ||||
| <div v-for="item in plans" :key="item.id"> | <div v-for="item in plans" :key="item.id" :id="'plan-' + item.title"> | ||||
| <div :class="'card bg-light plan-' + item.title"> | <div :class="'card bg-light plan-' + item.title"> | ||||
| <div class="card-header plan-header"> | <div class="card-header plan-header"> | ||||
| <div class="plan-ico text-center"> | <div class="plan-ico text-center"> | ||||
| <svg-icon :icon="plan_icons[item.title]"></svg-icon> | <svg-icon :icon="plan_icons[item.title] || 'user'"></svg-icon> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="card-body text-center"> | <div class="card-body text-center"> | ||||
| <btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn> | <btn class="btn-primary" :data-title="item.title" @click="selectPlan(item.title)" v-html="item.button"></btn> | ||||
| <div class="plan-description text-start mt-3" v-html="item.description"></div> | <div class="plan-description text-start mt-3" v-html="item.description"></div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| ▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
| <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn> | <btn class="btn-primary ms-2" type="submit" icon="check">{{ $t('btn.continue') }}</btn> | ||||
| <input type="hidden" id="signup_code" v-model="code" /> | <input type="hidden" id="signup_code" v-model="code" /> | ||||
| </form> | </form> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div class="card d-none" id="step3"> | <div class="card d-none" id="step3"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <h4 v-if="!invitation" class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: steps, n: steps }) }}</h4> | <h4 v-if="!invitation && steps > 1" class="card-title">{{ $t('signup.title') }} - {{ $t('nav.step', { i: steps, n: steps }) }}</h4> | ||||
| <p class="card-text"> | <p class="card-text"> | ||||
| {{ $t('signup.step3', { app: $root.appName }) }} | {{ $t('signup.step3', { app: $root.appName }) }} | ||||
| </p> | </p> | ||||
| <form @submit.prevent="submitStep3" data-validation-prefix="signup_"> | <form @submit.prevent="submitStep3" data-validation-prefix="signup_"> | ||||
| <div class="mb-3" v-if="invitation"> | <div class="mb-3" v-if="invitation"> | ||||
| <div class="input-group"> | <div class="input-group"> | ||||
| <input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name"> | <input type="text" class="form-control" id="signup_first_name" :placeholder="$t('form.firstname')" autofocus v-model="first_name"> | ||||
| <input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name"> | <input type="text" class="form-control rounded-end" id="signup_last_name" :placeholder="$t('form.surname')" v-model="last_name"> | ||||
| ▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Lines | export default { | ||||
| }, | }, | ||||
| plans: [], | plans: [], | ||||
| token: '', | token: '', | ||||
| voucher: '' | voucher: '' | ||||
| } | } | ||||
| }, | }, | ||||
| computed: { | computed: { | ||||
| steps() { | steps() { | ||||
| return this.mode == 'token' ? 2 : 3 | switch (this.mode) { | ||||
| case 'token': | |||||
| return 2 | |||||
| case 'mandate': | |||||
| return 1 | |||||
| case 'email': | |||||
| default: | |||||
| return 3 | |||||
| } | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| let param = this.$route.params.param; | let param = this.$route.params.param; | ||||
| if (this.$route.name == 'signup-invite') { | if (this.$route.name == 'signup-invite') { | ||||
| axios.get('/api/auth/signup/invitations/' + param, { loader: true }) | axios.get('/api/auth/signup/invitations/' + param, { loader: true }) | ||||
| .then(response => { | .then(response => { | ||||
| Show All 36 Lines | export default { | ||||
| this.selectPlanByTitle(plan) | this.selectPlanByTitle(plan) | ||||
| }, | }, | ||||
| // Composes plan selection page | // Composes plan selection page | ||||
| selectPlanByTitle(title) { | selectPlanByTitle(title) { | ||||
| const plan = this.plans.filter(plan => plan.title == title)[0] | const plan = this.plans.filter(plan => plan.title == title)[0] | ||||
| if (plan) { | if (plan) { | ||||
| this.plan = title | this.plan = title | ||||
| this.mode = plan.mode | this.mode = plan.mode | ||||
| this.displayForm(1, true) | this.is_domain = plan.isDomain | ||||
| this.domain = '' | |||||
| let step = 1 | |||||
| if (plan.mode == 'mandate') { | |||||
| step = 3 | |||||
| if (!plan.isDomain || !this.domains.length) { | |||||
| axios.get('/api/auth/signup/domains') | |||||
| .then(response => { | |||||
| this.displayForm(step, true) | |||||
| this.setDomain(response.data) | |||||
| }) | |||||
| return | |||||
| } | |||||
| } | |||||
| this.displayForm(step, true) | |||||
| } | } | ||||
| }, | }, | ||||
| step0(plan) { | step0(plan) { | ||||
| if (!this.plans.length) { | if (!this.plans.length) { | ||||
| axios.get('/api/auth/signup/plans', { loader: true }).then(response => { | axios.get('/api/auth/signup/plans', { loader: true }).then(response => { | ||||
| this.plans = response.data.plans | this.plans = response.data.plans | ||||
| this.selectPlanByTitle(plan) | this.selectPlanByTitle(plan) | ||||
| }) | }) | ||||
| ▲ Show 20 Lines • Show All 58 Lines • ▼ Show 20 Lines | export default { | ||||
| } | } | ||||
| }) | }) | ||||
| }, | }, | ||||
| // Submits the data to the API to create the user account | // Submits the data to the API to create the user account | ||||
| submitStep3() { | submitStep3() { | ||||
| this.$root.clearFormValidation($('#step3 form')) | this.$root.clearFormValidation($('#step3 form')) | ||||
| let post = { | let post = { | ||||
| ...this.$root.pick(this, ['login', 'domain', 'voucher']), | ...this.$root.pick(this, ['login', 'domain', 'voucher', 'plan']), | ||||
| ...this.pass | ...this.pass | ||||
| } | } | ||||
| if (this.invitation) { | if (this.invitation) { | ||||
| post.invitation = this.invitation.id | post.invitation = this.invitation.id | ||||
| post.plan = this.plan | |||||
| post.first_name = this.first_name | post.first_name = this.first_name | ||||
| post.last_name = this.last_name | post.last_name = this.last_name | ||||
| } else { | } else { | ||||
| post.code = this.code | post.code = this.code | ||||
| post.short_code = this.short_code | post.short_code = this.short_code | ||||
| } | } | ||||
| axios.post('/api/auth/signup', post).then(response => { | axios.post('/api/auth/signup', post).then(response => { | ||||
| Show All 9 Lines | export default { | ||||
| card.addClass('d-none').find('form')[0].reset() | card.addClass('d-none').find('form')[0].reset() | ||||
| step -= 1 | step -= 1 | ||||
| if (step == 2 && this.mode == 'token') { | if (step == 2 && this.mode == 'token') { | ||||
| step = 1 | step = 1 | ||||
| } | } | ||||
| if (this.mode == 'mandate') { | |||||
| step = 0 | |||||
| } | |||||
| $('#step' + step).removeClass('d-none').find('input').first().focus() | $('#step' + step).removeClass('d-none').find('input').first().focus() | ||||
| if (!step) { | if (!step) { | ||||
| this.step0() | this.step0() | ||||
| this.$router.replace({path: '/signup'}) | this.$router.replace({path: '/signup'}) | ||||
| } | } | ||||
| }, | }, | ||||
| displayForm(step, focus) { | displayForm(step, focus) { | ||||
| Show All 11 Lines | export default { | ||||
| $('#step' + step).find('input').first().focus() | $('#step' + step).find('input').first().focus() | ||||
| } | } | ||||
| }, | }, | ||||
| setDomain(response) { | setDomain(response) { | ||||
| if (response.domains) { | if (response.domains) { | ||||
| this.domains = response.domains | this.domains = response.domains | ||||
| } | } | ||||
| this.domain = response.domain || window.config['app.domain'] | this.domain = response.domain | ||||
| if (!this.domain) { | |||||
| this.domain = window.config['app.domain'] | |||||
| if (this.domains.length && !this.domains.includes(this.domain)) { | |||||
| this.domain = this.domains[0] | |||||
| } | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||