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 = 'Continue'
first_name = ''
last_name = ''
username = ''
email = ''
async vue_on_create() {
this.message = 'Create an account 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 = 'Please provide your first and last name.'
this.loading = false
return
}
this.message = `Hi, ${this.first_name.trim()}. Now, you need to choose a username:`
this.$nextTick(() => {
this.$refs.input_username.focus()
})
} else if ( this.step === 2 ) {
if ( await auth_api.username_taken(this.username) ) {
this.error_message = 'That username is already taken.'
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 = 'Please provide a valid e-mail address.'
this.loading = false
return
}
if ( await auth_api.email_taken(this.email) ) {
this.error_message = 'That e-mail address is already taken.'
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 = 'Sorry, an unknown error has occurred and we are unable to continue at this time.'
else this.other_message = 'Welcome! Let\'s get your password set up...'
this.btn_disabled = true
return location_service.redirect('/dash', 2000)
} catch (e) {
this.error_message = e.message || 'Sorry, an unknown error has occurred and we are unable to continue at this time.'
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 = 'Create an account 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 = 'Okay! We\'ll have you login instead...'
location_service.redirect('/auth/login', 1500)
}
do_nothing() {}
}