import { Component } from '../../../lib/vues6/vues6.js'
import { auth_api } from '../../service/AuthApi.service.js'
import { location_service } from '../../service/Location.service.js'
import { message_service } from '../../service/Message.service.js'
import { password_service } from '../../service/Password.service.js'
const template = `
`
export default class AuthLoginForm extends Component {
static get selector() { return 'coreid-login-form' }
static get props() { return [
'app_name', 'login_message', 'additional_params', 'no_session', 'registration_enabled',
] }
static get template() { return template }
username = ''
password = ''
button_text = 'Next'
step_two = false
btn_disabled = true
loading = false
error_message = ''
other_message = ''
allow_back = true
watch_username(new_username, old_username) {
this.btn_disabled = !new_username
}
back_click() {
if ( !this.allow_back ) return;
this.step_two = false
this.button_text = 'Next'
}
async vue_on_create() {
const auth_user = await auth_api.get_authenticated_user()
if ( auth_user ) {
this.allow_back = false
this.username = auth_user
await this.step_click()
}
}
async on_key_up(event) {
if ( event.keyCode === 13 ) {
// Enter was pressed
event.preventDefault()
event.stopPropagation()
if ( !this.step_two && this.username ) return this.step_click(event)
else if ( this.step_two && this.username && this.password ) return this.step_click(event)
}
}
async step_click(event) {
if ( !this.step_two ) {
this.loading = true
try {
const is_valid = await auth_api.validate_username(this.username)
if ( !is_valid ) {
this.error_message = 'That username is invalid. Please try again.'
} else {
this.step_two = true
this.button_text = 'Continue'
this.error_message = ''
this.$nextTick(() => {
this.$refs.password_input.focus()
})
}
} catch (e) {
this.error_message = 'Sorry, an unknown error has occurred and we are unable to continue at this time.'
}
this.loading = false
} else {
this.loading = true
this.error_message = ''
let attempt_vars = {
username: this.username,
password: this.password,
create_session: !this.no_session,
}
if ( typeof this.additional_params === 'object' ) {
attempt_vars = {...attempt_vars, ...this.additional_params}
}
const result = await auth_api.attempt(attempt_vars)
if ( !result.success ) {
this.error_message = result.message || 'Sorry, an unknown error has occurred and we are unable to continue at this time.'
this.loading = false
return
}
this.other_message = 'Success! Let\'s get you on your way...'
await location_service.redirect(result.next, 1500)
}
}
on_register_click() {
this.loading = true
this.other_message = 'Okay! Let\'s get started...'
location_service.redirect('/auth/register', 1500) // TODO get this dynamically
}
async on_forgot_password() {
console.log(message_service)
await message_service.modal({
title: 'Reset Password',
message: 'If you have forgotten your password, you can request a reset e-mail to be sent to your account. Enter your e-mail address:',
inputs: [
{
type: 'email',
name: 'email',
placeholder: 'jdoe@contoso.com',
},
],
buttons: [
{
type: 'close',
text: 'Cancel',
},
{
type: 'close',
class: ['btn', 'btn-primary'],
text: 'Request',
on_click: async ($event, { email }) => {
await password_service.request_reset(email)
await message_service.alert({
type: 'success',
message: 'Success! If that e-mail address is associated with a valid ' + this.app_name + ' account, it will receive an e-mail with more instructions shortly.',
})
},
},
],
})
}
do_nothing() {}
}