Page MenuHomePhorge
Differential D2428 Diff 7000 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" v-if="!invitation">
<div class="plan-selector card-deck"> <div class="plan-selector card-deck">
<div v-for="item in plans" :key="item.id" :class="'card bg-light plan-' + item.title"> <div v-for="item in plans" :key="item.id" :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]"></svg-icon>
</div> </div>
</div> </div>
<div class="card-body text-center "> <div class="card-body text-center ">
<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> </div>
</div> </div>
<div class="card d-none" id="step1"> <div class="card d-none" id="step1" v-if="!invitation">
<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">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="signup_first_name" placeholder="First Name" autofocus v-model="first_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"> <input type="text" class="form-control rounded-right" id="signup_last_name" placeholder="Surname" v-model="last_name">
</div> </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>
</div> </div>
</div> </div>
<div class="card d-none" id="step2"> <div class="card d-none" id="step2" v-if="!invitation">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Sign Up - Step 2/3</h4> <h4 class="card-title">Sign Up - Step 2/3</h4>
<p class="card-text"> <p class="card-text">
We sent out a confirmation code to your email address. We sent out a confirmation code to your email address.
Enter the code we sent you, or click the link in the message. Enter the code we sent you, or click the link in the message.
</p> </p>
<form @submit.prevent="submitStep2" data-validation-prefix="signup_"> <form @submit.prevent="submitStep2" data-validation-prefix="signup_">
<div class="form-group"> <div class="form-group">
<label for="signup_short_code" class="sr-only">Confirmation Code</label> <label for="signup_short_code" class="sr-only">Confirmation Code</label>
<input type="text" class="form-control" id="signup_short_code" placeholder="Confirmation Code" required v-model="short_code"> <input type="text" class="form-control" id="signup_short_code" placeholder="Confirmation Code" required v-model="short_code">
</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>
<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 class="card-title">Sign Up - Step 3/3</h4> <h4 v-if="!invitation" class="card-title">Sign Up - Step 3/3</h4>
<p class="card-text"> <p class="card-text">
Create your Kolab identity (you can choose additional addresses later). Create your Kolab identity (you can choose additional addresses later).
</p> </p>
<form @submit.prevent="submitStep3" data-validation-prefix="signup_"> <form @submit.prevent="submitStep3" data-validation-prefix="signup_">
<div class="form-group" v-if="invitation">
<div class="input-group">
<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 class="form-group"> <div class="form-group">
<label for="signup_login" class="sr-only"></label> <label for="signup_login" class="sr-only"></label>
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="signup_login" required v-model="login" placeholder="Login"> <input type="text" class="form-control" id="signup_login" required v-model="login" placeholder="Login">
<span class="input-group-append"> <span class="input-group-append input-group-prepend">
<span class="input-group-text">@</span> <span class="input-group-text">@</span>
</span> </span>
<input v-if="is_domain" type="text" class="form-control rounded-right" id="signup_domain" required v-model="domain" placeholder="Domain"> <input v-if="is_domain" type="text" class="form-control rounded-right" id="signup_domain" required v-model="domain" placeholder="Domain">
<select v-else class="custom-select rounded-right" id="signup_domain" required v-model="domain"></select> <select v-else class="custom-select rounded-right" id="signup_domain" required v-model="domain">
<option v-for="domain in domains" :key="domain" :value="domain">{{ domain }}</option>
</select>
</div> </div>
</div> </div>
<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"> <div class="form-group pt-2 pb-2">
<label for="signup_voucher" class="sr-only">Voucher code</label> <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"> <input type="text" class="form-control" id="signup_voucher" placeholder="Voucher code" v-model="voucher">
</div> </div>
<button class="btn btn-secondary" type="button" @click="stepBack">Back</button> <button v-if="!invitation" 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> <span v-if="invitation">Sign Up</span><span v-else>Submit</span>
</button>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
email: '', email: '',
first_name: '', first_name: '',
last_name: '', last_name: '',
code: '', code: '',
short_code: '', short_code: '',
login: '', login: '',
password: '', password: '',
password_confirmation: '', password_confirmation: '',
domain: '', domain: '',
plan: null, domains: [],
invitation: null,
is_domain: false, is_domain: false,
plan: null,
plan_icons: { plan_icons: {
individual: 'user', individual: 'user',
group: 'users' group: 'users'
}, },
plans: [], plans: [],
voucher: '' voucher: ''
} }
}, },
mounted() { mounted() {
let param = this.$route.params.param; let param = this.$route.params.param;
if (param) { if (this.$route.name == 'signup-invite') {
this.$root.startLoading()
axios.get('/api/auth/signup/invitations/' + param)
.then(response => {
this.invitation = response.data
this.login = response.data.login
this.voucher = response.data.voucher
this.first_name = response.data.first_name
this.last_name = response.data.last_name
this.plan = response.data.plan
this.is_domain = response.data.is_domain
this.setDomain(response.data)
this.$root.stopLoading()
this.displayForm(3, true)
})
.catch(error => {
this.$root.errorHandler(error)
})
} else if (param) {
if (this.$route.path.indexOf('/signup/voucher/') === 0) { if (this.$route.path.indexOf('/signup/voucher/') === 0) {
// Voucher (discount) code // Voucher (discount) code
this.voucher = param this.voucher = param
this.displayForm(0) this.displayForm(0)
} else if (/^([A-Z0-9]+)-([a-zA-Z0-9]+)$/.test(param)) { } 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
▲ Show 20 Lines • Show All 60 Lines • ▼ Show 20 Lines export default {
this.first_name = response.data.first_name this.first_name = response.data.first_name
this.last_name = response.data.last_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 = [] this.setDomain(response.data)
$('select#signup_domain').html('')
$.each(response.data.domains, (i, v) => {
options.push($('<option>').text(v).attr('value', v))
})
$('select#signup_domain').append(options)
this.domain = window.config['app.domain']
} }
}).catch(error => { }).catch(error => {
if (bylink === true) { if (bylink === true) {
// FIXME: display step 1, user can do nothing about it anyway // FIXME: display step 1, user can do nothing about it anyway
// Maybe we should display 404 error page? // Maybe we should display 404 error page?
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'))
axios.post('/api/auth/signup', { let post = {
code: this.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 voucher: this.voucher
}).then(response => { }
if (this.invitation) {
post.invitation = this.invitation.id
post.plan = this.plan
post.first_name = this.first_name
post.last_name = this.last_name
} else {
post.code = this.code
post.short_code = this.short_code
}
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)
}) })
}, },
// 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 14 Lines export default {
return this.step0() return this.step0()
} }
$('#step' + step).removeClass('d-none') $('#step' + step).removeClass('d-none')
if (focus) { if (focus) {
$('#step' + step).find('input').first().focus() $('#step' + step).find('input').first().focus()
} }
},
setDomain(response) {
if (response.domains) {
this.domains = response.domains
}
this.domain = response.domain || window.config['app.domain']
} }
} }
} }
</script> </script>