@ -13,9 +13,9 @@ const template = `
< div class = "card-body" >
< div class = "row" >
< div class = "col-8 offset-2 col-sm-4 offset-sm-0" >
< img src = "/api/v1/profile/me/photo" alt = "Profile Image " ref = "photo" class = "img-fluid" >
< img src = "/api/v1/profile/me/photo" : alt = "t['profile.profile_photo'] " ref = "photo" class = "img-fluid" >
< div class = "overlay" >
< button class = "btn btn-outline-light" @ click = "on_profile_change_click" > Change < / b u t t o n >
< button class = "btn btn-outline-light" @ click = "on_profile_change_click" > { { t [ 'common.change' ] } } < / b u t t o n >
< / d i v >
< / d i v >
< div class = "col-sm-8 offset-sm-0 col-12 text-sm-left text-center pad-top" >
@ -26,26 +26,26 @@ const template = `
< / d i v >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" >
< h4 > Basic Profile < / h 4 >
< h4 > { { t [ 'profile.basic_profile' ] } } < / h 4 >
< div class = "row" >
< div class = "col-12 col-md-6 form-group" >
< label for = "coreid-profile-first-input" > First Name < / l a b e l >
< label for = "coreid-profile-first-input" > { { t [ 'register.first_name' ] } } < / l a b e l >
< input
type = "text"
class = "form-control"
id = "coreid-profile-first-input"
placeholder = "John "
: placeholder = "t['profile.placeholder_first'] "
v - model = "profile_first"
@ keyup = "on_key_up($event)"
>
< / d i v >
< div class = "col-12 col-md-6 form-group" >
< label for = "coreid-profile-last-input" > Last Name < / l a b e l >
< label for = "coreid-profile-last-input" > { { t [ 'register.last_name' ] } } < / l a b e l >
< input
type = "text"
class = "form-control"
id = "coreid-profile-last-input"
placeholder = "Doe "
: placeholder = "t['profile.placeholder_last'] "
v - model = "profile_last"
@ keyup = "on_key_up($event)"
>
@ -53,12 +53,12 @@ const template = `
< / d i v >
< div class = "row" >
< div class = "col-12 form-group" >
< label for = "coreid-profile-email-input" > E - Mail Address < / l a b e l >
< label for = "coreid-profile-email-input" > { { t [ 'register.email' ] } } < / l a b e l >
< input
type = "email"
class = "form-control"
id = "coreid-profile-email-input"
placeholder = "john.doe@contoso.com "
: placeholder = "t['profile.placeholder_email'] "
v - model = "profile_email"
ref = "email_input"
@ keyup = "on_key_up($event)"
@ -67,7 +67,7 @@ const template = `
< / d i v >
< div class = "row" >
< div class = "col-12 form-group" >
< label for = "coreid-profile-tag-input" > Tagline < / l a b e l >
< label for = "coreid-profile-tag-input" > { { t [ 'profile.tagline' ] } } < / l a b e l >
< input
type = "text"
class = "form-control"
@ -82,13 +82,13 @@ const template = `
{ { form _message } }
< / l i >
< li class = "list-group-item" v - if = "!user_id || user_id === 'me'" >
< h4 > Password < / h 4 >
< p class = "font-italic" v - if = "last_reset" > Your password was last changed on { { last _reset } } . < / p >
< h4 > { { t [ 'password.password' ] } } < / h 4 >
< p class = "font-italic" v - if = "last_reset" > { { t [ 'profile.pw_last_reset' ] . replace ( 'LAST_RESET' , last _reset ) } } < / p >
< button
type = "button"
class = "btn btn-primary btn-sm"
@ click = "change_password"
> Change Password < / b u t t o n >
> { { t [ 'password.change' ] } } < / b u t t o n >
< / l i >
< li class = "list-group-item" v - if = "!has_mfa && (!user_id || user_id === 'me')" >
< h4 > Multi - factor Authentication < / h 4 >
@ -97,49 +97,49 @@ const template = `
< button class = "btn btn-success btn-sm" type = "button" @ click = "enable_mfa" > Enable MFA < / b u t t o n >
< / l i >
< li class = "list-group-item" v - if = "has_mfa && (!user_id || user_id === 'me')" >
< h4 > Multi - factor Authentication < / h 4 >
< p class = "font-italic" > MFA was enabled for your account on { { mfa _enable _date } } . < / p >
< h4 > { { t [ 'mfa.mfa' ] } } < / h 4 >
< p class = "font-italic" > { { t [ 'profile.mfa_enabled_on' ] . replace ( 'MFA_ENABLED' , mfa _enable _date ) } } < / p >
< button
class = "btn btn-danger btn-sm"
type = "button"
@ click = "disable_mfa"
> Disable MFA < / b u t t o n >
> { { t [ 'mfa.disable' ] } } < / b u t t o n >
< h6 class = "pad-top" > App Passwords < / h 6 >
< p > App passwords are specially generated passwords that allow you to sign into legacy services with your { { app _name } } account . < / p >
< p > You should only use this to authenticate against a service that needs to repeatedly use your password on your behalf ( e . g . e - mail clients ) . < / p >
< p > Use these with caution , as they can bypass your multi - factor authentication . < / p >
< h6 class = "pad-top" > { { t [ 'profile.app_pws' ] } } < / h 6 >
< p > { { t [ 'profile.app_pw_1' ] . replace ( 'APP_NAME' , app _name ) } } < / p >
< p > { { t [ 'profile.app_pw_2' ] } } < / p >
< p > { { t [ 'profile.app_pw_3' ] } } < / p >
< p class = "font-italic text-muted" v - if = "app_passwords.length > 0" > You have { { app _passwords . length } } app { { app _passwords . length === 1 ? 'password' : 'passwords' } } associated with your account . < / p >
< p class = "font-italic text-muted" v - if = "app_passwords.length > 0" > { { t [ 'profile.app_pw_remaining.' + ( app _passwords . length === 1 ? 'one' : 'many' ) ] . replace ( 'NUM_PWS' , app _passwords . length ) } } < / p >
< ul class = "list-group mb-4" v - if = "app_passwords.length > 0" >
< li class = "list-group-item" v - for = "pw of app_passwords" >
< div class = "row" >
< div class = "col-9" >
{ { pw . name } }
< br > < span class = "text-muted font-italic" > Issued : { { pw . created } } < / s p a n >
< br > < span class = "text-muted font-italic" > { { t [ 'profile.issued' ] } } { { pw . created } } < / s p a n >
< / d i v >
< div class = "col-3 my-auto" >
< button
class = "btn btn-sm btn-danger"
type = "button"
@ click = "deactivate_app_password($event, pw)"
> Deactivate < / b u t t o n >
> { { t [ 'common.deactivate' ] } } < / b u t t o n >
< / d i v >
< / d i v >
< / l i >
< / u l >
< button class = "btn btn-sm btn-primary" @ click = "on_click_generate_app_password" > Generate New < / b u t t o n >
< button class = "btn btn-sm btn-primary" @ click = "on_click_generate_app_password" > { { t [ 'profile.gen_new' ] } } < / b u t t o n >
< h6 class = "pad-top" > Recovery Codes < / h 6 >
< p > Recovery codes can be used to regain access to your account in the event that you lose access to the device that generates your MFA codes . < / p >
< h6 class = "pad-top" > { { t [ 'profile.recovery_codes' ] } } < / h 6 >
< p > { { t [ 'profile.recovery_1' ] } } < / p >
< span v - if = "!has_mfa_recovery" >
< p class = "font-italic" > No recovery codes have been generated for your account . < / p >
< button class = "btn btn-sm btn-success" @ click = "on_mfa_recovery_generate" > Generate Recovery Codes < / b u t t o n >
< p class = "font-italic" > { { t [ 'profile.no_recovery' ] } } < / p >
< button class = "btn btn-sm btn-success" @ click = "on_mfa_recovery_generate" > { { t [ 'profile.generate_recovery' ] } } < / b u t t o n >
< / s p a n >
< span v - if = "has_mfa_recovery" >
< p class = "font-italic" > Recovery codes were generate for your account on { { mfa _recovery _date } } . < span v - if = "mfa_recovery_codes === 1" > There is only 1 recovery code remaining . < / s p a n > < s p a n v - i f = " m f a _ r e c o v e r y _ c o d e s ! = = 1 " > T h e r e a r e { { m f a _ r e c o v e r y _ c o d e s } } r e c o v e r y c o d e s r e m a i n i n g . < / s p a n > </ p >
< button class = "btn btn-sm btn-success" @ click = "on_mfa_recovery_generate" > Re - generate Recovery Codes < / b u t t o n >
< p class = "font-italic" > { { t [ 'profile.recovery_gen_on' ] . replace ( 'MFA_RECOVERY' , mfa _recovery _date ) } } { { t [ 'profile.codes_remaining.' + ( mfa _recovery _codes === 1 ? 'one' : 'many' ) ] . replace ( 'NUM_CODES' , mfa _recovery _codes ) } } </ p >
< button class = "btn btn-sm btn-success" @ click = "on_mfa_recovery_generate" > { { t [ 'profile.regenerate_recovery' ] } } < / b u t t o n >
< / s p a n >
< / l i >
< / u l >
@ -179,10 +179,48 @@ export default class EditProfileComponent extends Component {
ready = false
app _passwords = [ ]
app _name = ''
t = { }
on _key _up = ( $event ) => { }
vue _on _create ( ) {
async vue _on _create ( ) {
this . t = await T (
'profile.profile_photo' ,
'common.change' ,
'profile.basic_profile' ,
'register.first_name' ,
'profile.placeholder_first' ,
'register.last_name' ,
'profile.placeholder_last' ,
'register.email' ,
'profile.placeholder_email' ,
'profile.tagline' ,
'password.password' ,
'password.change' ,
'profile.pw_last_reset' ,
'mfa.mfa' ,
'profile.mfa_enabled_on' ,
'mfa.disable' ,
'profile.app_pws' ,
'profile.issued' ,
'common.deactivate' ,
'profile.app_pw_remaining.one' ,
'profile.app_pw_remaining.many' ,
'profile.gen_new' ,
'profile.recovery_codes' ,
'profile.recovery_1' ,
'profile.no_recovery' ,
'profile.generate_recovery' ,
'profile.recovery_gen_on' ,
'profile.codes_remaining.one' ,
'profile.codes_remaining.many' ,
'profile.regenerate_recovery' ,
'profile.app_pw_1' ,
'profile.app_pw_2' ,
'profile.app_pw_3'
)
this . app _name = session . get ( 'app.name' )
this . load ( ) . then ( ( ) => {
this . ready = true