Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Signup.vue
Show First 20 Lines • Show All 94 Lines • ▼ Show 20 Lines | <div class="container"> | ||||
<btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn> | <btn v-if="!invitation" class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn> | ||||
<btn class="btn-primary" type="submit" icon="check"> | <btn class="btn-primary" type="submit" icon="check"> | ||||
<span v-if="invitation">{{ $t('btn.signup') }}</span> | <span v-if="invitation">{{ $t('btn.signup') }}</span> | ||||
<span v-else>{{ $t('btn.submit') }}</span> | <span v-else>{{ $t('btn.submit') }}</span> | ||||
</btn> | </btn> | ||||
</form> | </form> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="card d-none" id="step4"> | |||||
<div class="card-body"> | |||||
<div class="card-text mb-4" v-html="checkout.content"></div> | |||||
<form> | |||||
<btn class="btn-secondary me-2" @click="stepBack">{{ $t('btn.back') }}</btn> | |||||
<btn class="btn-primary" @click="submitStep4">{{ $t('btn.continue') }}</btn> | |||||
</form> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import PasswordInput from './Widgets/PasswordInput' | import PasswordInput from './Widgets/PasswordInput' | ||||
import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
library.add( | library.add( | ||||
require('@fortawesome/free-solid-svg-icons/faMobileRetro').definition, | require('@fortawesome/free-solid-svg-icons/faMobileRetro').definition, | ||||
require('@fortawesome/free-solid-svg-icons/faUsers').definition | require('@fortawesome/free-solid-svg-icons/faUsers').definition | ||||
) | ) | ||||
export default { | export default { | ||||
components: { | components: { | ||||
PasswordInput | PasswordInput | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
checkout: {}, | |||||
email: '', | email: '', | ||||
first_name: '', | first_name: '', | ||||
last_name: '', | last_name: '', | ||||
code: '', | code: '', | ||||
short_code: '', | short_code: '', | ||||
login: '', | login: '', | ||||
pass: {}, | pass: {}, | ||||
domain: '', | domain: '', | ||||
▲ Show 20 Lines • Show All 161 Lines • ▼ Show 20 Lines | export default { | ||||
this.displayForm(1, true) | this.displayForm(1, true) | ||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
// 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 = { | const post = this.lastStepPostData() | ||||
...this.$root.pick(this, ['login', 'domain', 'voucher', 'plan']), | |||||
...this.pass | |||||
} | |||||
if (this.invitation) { | if (this.mode == 'mandate') { | ||||
post.invitation = this.invitation.id | axios.post('/api/auth/signup/validate', post).then(response => { | ||||
post.first_name = this.first_name | this.checkout = response.data | ||||
post.last_name = this.last_name | this.displayForm(4) | ||||
}) | |||||
} else { | } else { | ||||
post.code = this.code | |||||
post.short_code = this.short_code | |||||
} | |||||
axios.post('/api/auth/signup', post).then(response => { | axios.post('/api/auth/signup', post).then(response => { | ||||
// auto-login and goto dashboard | // auto-login and goto dashboard | ||||
this.$root.loginUser(response.data) | this.$root.loginUser(response.data) | ||||
}) | }) | ||||
} | |||||
}, | |||||
submitStep4() { | |||||
const post = this.lastStepPostData() | |||||
axios.post('/api/auth/signup', post).then(response => { | |||||
// auto-login and goto to the payment checkout | |||||
this.$root.loginUser(response.data, false) | |||||
let checkout = response.data.checkout | |||||
if (checkout.redirectUrl) { | |||||
location.href = checkout.redirectUrl | |||||
} else if (checkout.id) { | |||||
// TODO: this.stripeCheckout(checkout) | |||||
} | |||||
}) | |||||
}, | }, | ||||
// Moves the user a step back in registration form | // Moves the user a step back in registration form | ||||
stepBack(e) { | stepBack(e) { | ||||
const card = $(e.target).closest('.card') | const card = $(e.target).closest('.card') | ||||
let step = card.attr('id').replace('step', '') | let step = card.attr('id').replace('step', '') | ||||
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') { | if (this.mode == 'mandate' && step < 3) { | ||||
step = 0 | 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) { | ||||
[0, 1, 2, 3].filter(value => value != step).forEach(value => { | [0, 1, 2, 3, 4].filter(value => value != step).forEach(value => { | ||||
$('#step' + value).addClass('d-none') | $('#step' + value).addClass('d-none') | ||||
}) | }) | ||||
if (!step) { | if (!step) { | ||||
return this.step0() | return this.step0() | ||||
} | } | ||||
$('#step' + step).removeClass('d-none').find('form')[0].reset() | $('#step' + step).removeClass('d-none').find('form')[0].reset() | ||||
if (focus) { | if (focus) { | ||||
$('#step' + step).find('input').first().focus() | $('#step' + step).find('input').first().focus() | ||||
} | } | ||||
}, | }, | ||||
lastStepPostData() { | |||||
let post = { | |||||
...this.$root.pick(this, ['login', 'domain', 'voucher', 'plan']), | |||||
...this.pass | |||||
} | |||||
if (this.invitation) { | |||||
post.invitation = this.invitation.id | |||||
post.first_name = this.first_name | |||||
post.last_name = this.last_name | |||||
} else { | |||||
post.code = this.code | |||||
post.short_code = this.short_code | |||||
} | |||||
return post | |||||
}, | |||||
setDomain(response) { | setDomain(response) { | ||||
if (response.domains) { | if (response.domains) { | ||||
this.domains = response.domains | this.domains = response.domains | ||||
} | } | ||||
this.domain = response.domain | this.domain = response.domain | ||||
if (!this.domain) { | if (!this.domain) { | ||||
Show All 9 Lines |