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" 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> |