You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
244 lines
8.5 KiB
244 lines
8.5 KiB
import { Component } from '../../../lib/vues6/vues6.js'
|
|
import { location_service } from '../../service/Location.service.js'
|
|
import { auth_api } from '../../service/AuthApi.service.js'
|
|
|
|
const template = `
|
|
<div class="coreid-login-form col-lg-6 col-md-8 col-sm-10 col-xs-12 offset-lg-3 offset-md-2 offset-sm-1 offset-xs-0 text-left">
|
|
<div class="coreid-login-form-inner">
|
|
<div class="coreid-login-form-header font-weight-light">{{ app_name }}</div>
|
|
<div class="coreid-login-form-message">{{ message }}</div>
|
|
<form class="coreid-form" v-on:submit.prevent="do_nothing">
|
|
<div class="form-group">
|
|
<input
|
|
v-if="step === 1"
|
|
type="text"
|
|
id="coreid-registration-form-first"
|
|
name="first_name"
|
|
class="form-control"
|
|
:placeholder="t['register.first_name']"
|
|
v-model="first_name"
|
|
autofocus
|
|
@keyup="on_key_up"
|
|
:disabled="loading || step > 1"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<input
|
|
v-if="step === 1"
|
|
type="text"
|
|
id="coreid-registration-form-last"
|
|
name="last_name"
|
|
class="form-control"
|
|
:placeholder="t['register.last_name']"
|
|
v-model="last_name"
|
|
autofocus
|
|
@keyup="on_key_up"
|
|
:disabled="loading || step > 1"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<input
|
|
v-if="step === 2 || step === 3"
|
|
type="text"
|
|
id="coreid-registration-form-username"
|
|
name="username"
|
|
class="form-control"
|
|
:placeholder="t['login.username']"
|
|
v-model="username"
|
|
autofocus
|
|
@keyup="on_key_up"
|
|
:disabled="loading || step != 2"
|
|
ref="input_username"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<input
|
|
v-if="step === 3"
|
|
type="email"
|
|
id="coreid-registration-form-email"
|
|
name="email"
|
|
class="form-control"
|
|
:placeholder="t['register.email']"
|
|
v-model="email"
|
|
autofocus
|
|
@keyup="on_key_up"
|
|
:disabled="loading || step != 3"
|
|
ref="input_email"
|
|
>
|
|
</div>
|
|
<div v-if="error_message" class="error-message">{{ error_message }}</div>
|
|
<div v-if="other_message" class="other-message">{{ other_message }}</div>
|
|
<div class="buttons text-right">
|
|
<small
|
|
class="mr-3"
|
|
v-if="step === 1 && !loading"
|
|
><a href="#" class="text-secondary" @click="on_login_click">{{ t['register.have_account'] }}</a></small>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
:disabled="loading"
|
|
v-if="step > 1"
|
|
v-on:click="back_click"
|
|
>{{ t['common.back'] }}</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
:disabled="loading || btn_disabled"
|
|
v-on:click="step_click"
|
|
>{{ button_text }}</button>
|
|
</div>
|
|
</form>
|
|
<div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
// Required: First Name, Last Name, Username, E-Mail, Password (Confirm)
|
|
export default class RegistrationFormComponent extends Component {
|
|
static get selector() { return 'coreid-registration-form' }
|
|
static get template() { return template }
|
|
static get props() { return ['app_name'] }
|
|
|
|
constructor() {
|
|
super()
|
|
|
|
this.loading = false
|
|
this.step = 1
|
|
this.other_message = ''
|
|
this.error_message = ''
|
|
this.message = ''
|
|
this.btn_disabled = true
|
|
this.button_text = ''
|
|
|
|
this.first_name = ''
|
|
this.last_name = ''
|
|
this.username = ''
|
|
this.email = ''
|
|
this.t = {}
|
|
}
|
|
|
|
async vue_on_create() {
|
|
// Batch-load translated phrases
|
|
this.t = await T(
|
|
'common.back',
|
|
'common.continue',
|
|
'common.unknown_error',
|
|
'login.username',
|
|
'register.first_name',
|
|
'register.last_name',
|
|
'register.email',
|
|
'register.have_account',
|
|
'register.create_to_continue',
|
|
'register.provide_first_last',
|
|
'register.hi_choose_username',
|
|
'register.username_in_use',
|
|
'register.invalid_email',
|
|
'register.email_in_use',
|
|
'register.success_password',
|
|
'register.login_instead'
|
|
)
|
|
|
|
this.button_text = this.t['common.continue']
|
|
this.message = this.t['register.create_to_continue']
|
|
}
|
|
|
|
async step_click() {
|
|
this.loading = true
|
|
this.error_message = ''
|
|
this.other_message = ''
|
|
if ( this.step === 1 ) {
|
|
if ( !this.first_name.trim() || !this.last_name.trim() ) {
|
|
this.error_message = this.t['register.provide_first_last']
|
|
this.loading = false
|
|
return
|
|
}
|
|
|
|
this.message = this.t['register.hi_choose_username'].replace('FIRST_NAME', this.first_name.trim())
|
|
this.$nextTick(() => {
|
|
this.$refs.input_username.focus()
|
|
})
|
|
} else if ( this.step === 2 ) {
|
|
if ( await auth_api.username_taken(this.username) ) {
|
|
this.error_message = this.t['register.username_in_use']
|
|
this.loading = false
|
|
return
|
|
}
|
|
|
|
this.$nextTick(function() {
|
|
this.$nextTick(() => {
|
|
this.$refs.input_email.focus()
|
|
})
|
|
})
|
|
} else if ( this.step === 3 ) {
|
|
if ( !(await auth_api.validate_email(this.email)) ) {
|
|
this.error_message = this.t['register.invalid_email']
|
|
this.loading = false
|
|
return
|
|
}
|
|
|
|
if ( await auth_api.email_taken(this.email) ) {
|
|
this.error_message = this.t['register.email_in_use']
|
|
this.loading = false
|
|
return
|
|
}
|
|
|
|
try {
|
|
const user = await auth_api.register_user({
|
|
first_name: this.first_name,
|
|
last_name: this.last_name,
|
|
uid: this.username,
|
|
email: this.email,
|
|
})
|
|
|
|
if ( !user ) this.error_message = this.t['common.unknown_error']
|
|
else this.other_message = this.t['register.success_password']
|
|
this.btn_disabled = true
|
|
return location_service.redirect('/dash', 2000)
|
|
} catch (e) {
|
|
this.error_message = e.message || this.t['common.unknown_error']
|
|
this.loading = false
|
|
return
|
|
}
|
|
}
|
|
|
|
if ( this.step < 3 ) this.step += 1
|
|
this.loading = false
|
|
this.btn_disabled = true
|
|
}
|
|
|
|
async back_click() {
|
|
this.error_message = ''
|
|
this.other_message = ''
|
|
this.step -= 1
|
|
this.on_key_up()
|
|
|
|
if ( this.step === 1 ) {
|
|
this.message = this.t['register.create_to_continue']
|
|
}
|
|
}
|
|
|
|
on_key_up(event) {
|
|
if ( this.step === 1 ) {
|
|
this.btn_disabled = !(this.first_name.trim() && this.last_name.trim())
|
|
} else if ( this.step === 2 ) {
|
|
this.btn_disabled = !this.username.trim() || !this.username.match(/^([A-Z]|[a-z]|[0-9]|_|-|\.)+$/)
|
|
} else if ( this.step === 3 ) {
|
|
this.btn_disabled = !this.email.trim()
|
|
}
|
|
|
|
if ( event.keyCode === 13 ) {
|
|
// Enter was pressed
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if ( !this.btn_disabled ) return this.step_click()
|
|
}
|
|
}
|
|
|
|
on_login_click() {
|
|
this.loading = true
|
|
this.other_message = this.t['register.login_instead']
|
|
location_service.redirect('/auth/login', 1500)
|
|
}
|
|
|
|
do_nothing() {}
|
|
}
|