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 = `
< 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 } } < / d i v >
< div class = "coreid-login-form-message" > { { login _message } } < / d i v >
< form class = "coreid-form" v - on : submit . prevent = "do_nothing" >
< div class = "form-group" >
< input
type = "text"
id = "coreid-login-form-username"
name = "username"
class = "form-control"
placeholder = "Username"
v - model = "username"
autofocus
@ keyup = "on_key_up"
: disabled = "loading || step_two"
>
< / d i v >
< div class = "form-group" v - if = "step_two" >
< input
type = "password"
id = "coreid-login-form-password"
name = "password"
class = "form-control"
placeholder = "Password"
v - model = "password"
: disabled = "loading"
@ keyup = "on_key_up"
ref = "password_input"
>
< / d i v >
< div v - if = "error_message" class = "error-message" > { { error _message } } < / d i v >
< div v - if = "other_message" class = "other-message" > { { other _message } } < / d i v >
< div class = "buttons text-right" >
< small
class = "mr-3"
v - if = "!step_two && !loading && registration_enabled"
> < a href = "#" class = "text-secondary" @ click = "on_register_click" > Need an account ? < / a > < / s m a l l >
< small
class = "mr-3"
v - if = "!loading"
> < a href = "#" class = "text-secondary" @ click = "on_forgot_password" > Forgot password ? < / a > < / s m a l l >
< button type = "button" class = "btn btn-primary" : disabled = "loading" v - if = "step_two" v - on : click = "back_click" > Back < / b u t t o n >
< button type = "button" class = "btn btn-primary" : disabled = "loading || btn_disabled" v - on : click = "step_click" > { { button _text } } < / b u t t o n >
< / d i v >
< / f o r m >
< div class = "coreid-loading-spinner" v - if = "loading" > < div class = "inner" > < / d i v > < / d i v >
< / d i v >
< / d i v >
`
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 ( ) { }
}