@ -16,7 +16,7 @@ const template = `
id = "coreid-login-form-username"
name = "username"
class = "form-control"
placeholder = "Username
: placeholder = "t['login.username']
v - model = "username"
autofocus
@ keyup = "on_key_up"
@ -29,7 +29,7 @@ const template = `
id = "coreid-login-form-password"
name = "password"
class = "form-control"
placeholder = "Password
: placeholder = "t['login.password']
v - model = "password"
: disabled = "loading"
@ keyup = "on_key_up"
@ -42,12 +42,12 @@ const template = `
< 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 >
> < a href = "#" class = "text-secondary" @ click = "on_register_click" > { { t [ 'login.need_account' ] } } < / a > < / s m a l l >
< small
class = "mr-3"
v - if = "!auth_user && !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 >
> < a href = "#" class = "text-secondary" @ click = "on_forgot_password" > { { t [ 'login.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" > { { t [ 'common.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 >
@ -65,7 +65,7 @@ export default class AuthLoginForm extends Component {
username = ''
password = ''
button _text = ' Next '
button _text = ' '
step _two = false
btn _disabled = true
loading = false
@ -74,6 +74,8 @@ export default class AuthLoginForm extends Component {
allow _back = true
auth _user = false
t = { }
watch _username ( new _username , old _username ) {
this . btn _disabled = ! new _username
}
@ -81,7 +83,7 @@ export default class AuthLoginForm extends Component {
back _click ( ) {
if ( ! this . allow _back ) return ;
this . step _two = false
this . button _text = 'Next'
this . button _text = this . t [ 'common.next' ]
}
async vue _on _create ( ) {
@ -92,6 +94,28 @@ export default class AuthLoginForm extends Component {
this . username = auth _user
await this . step _click ( )
}
// Batch-load translations all at once to make fewer requests
this . t = await T (
'common.continue' ,
'common.unknown_error' ,
'common.cancel' ,
'common.request' ,
'common.back' ,
'common.next' ,
'login.username' ,
'login.password' ,
'login.need_account' ,
'login.forgot_password' ,
'login.username_invalid' ,
'login.reset_password' ,
'login.reset_password_prompt' ,
'login.reset_password_success' ,
'login.success' ,
'login.get_started'
)
this . button _text = this . t [ 'common.next' ]
}
async on _key _up ( event ) {
@ -110,17 +134,17 @@ export default class AuthLoginForm extends Component {
try {
const is _valid = await auth _api . validate _username ( this . username )
if ( ! is _valid ) {
this . error _message = 'That username is invalid. Please try again.'
this . error _message = this . t [ 'login.username_invalid' ]
} else {
this . step _two = true
this . button _text = 'Continue'
this . button _text = this . t [ 'common.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 . error _message = this . t [ 'common.unknown_error' ]
}
this . loading = false
} else {
@ -139,27 +163,27 @@ export default class AuthLoginForm extends Component {
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 . error _message = result . message || this . t [ 'common.unknown_error' ]
this . loading = false
return
}
this . other _message = 'Success! Let\'s get you on your way...'
this . other _message = this . t [ 'login.success' ]
await location _service . redirect ( result . next , 1500 )
}
}
on _register _click ( ) {
this . loading = true
this . other _message = 'Okay! Let\'s get started...'
this . other _message = this . t [ 'login.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:' ,
title : this . t [ 'login.reset_password' ] ,
message : this . t [ 'login.reset_password_prompt' ] ,
inputs : [
{
type : 'email' ,
@ -170,17 +194,17 @@ export default class AuthLoginForm extends Component {
buttons : [
{
type : 'close' ,
text : 'Cancel' ,
text : this . t [ 'common.cancel' ] ,
} ,
{
type : 'close' ,
class : [ 'btn' , 'btn-primary' ] ,
text : 'Request' ,
text : this . t [ 'common.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.' ,
message : this . t [ 'login.reset_password_success' ] . replace ( 'APP_NAME' , this . app _name ) ,
} )
} ,
} ,
garrettmills
4 years ago