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 = `
`
// 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'] }
loading = false
step = 1
other_message = ''
error_message = ''
message = ''
btn_disabled = true
button_text = ''
first_name = ''
last_name = ''
username = ''
email = ''
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() {}
}