diff --git a/app/assets/app/auth/MFAChallenge.component.js b/app/assets/app/auth/MFAChallenge.component.js index 5e9b734..b1de955 100644 --- a/app/assets/app/auth/MFAChallenge.component.js +++ b/app/assets/app/auth/MFAChallenge.component.js @@ -7,13 +7,13 @@ const template = `
{{ app_name }}
- Your account has multi-factor authentication enabled. Please enter the code generated by your authenticator app to continue. + {{ t['mfa.challenge_prompt'] }}
Lost your MFA device? + >{{ t['mfa.lost_device'] }}
` @@ -45,6 +45,19 @@ export default class MFAChallengePage extends Component { error_message = '' other_message = '' + t = {} + + async vue_on_create() { + this.t = await T( + 'mfa.challenge_prompt', + 'mfa.mfa_code', + 'mfa.lost_device', + 'mfa.invalid_code', + 'mfa.success' + ) + + console.log(this) + } async watch_verify_code(new_verify_code, old_verify_code) { if ( new_verify_code.length === 6 ) { @@ -53,11 +66,11 @@ export default class MFAChallengePage extends Component { this.verify_success = result && result.is_valid if ( !this.verify_success ) { this.other_message = '' - this.error_message = `Uh, oh! It looks like that's not the right code. Please try again.` + this.error_message = this.t['mfa.invalid_code'] this.loading = false } else { this.error_message = '' - this.other_message = `Success! Redirecting...` + this.other_message = this.t['mfa.success'] await location_service.redirect(result.next_destination, 1500) } } else if ( new_verify_code.length > 6 ) { diff --git a/app/assets/app/auth/MFADisable.component.js b/app/assets/app/auth/MFADisable.component.js index 6aadbb2..472d611 100644 --- a/app/assets/app/auth/MFADisable.component.js +++ b/app/assets/app/auth/MFADisable.component.js @@ -9,17 +9,13 @@ const template = `
{{ app_name }}
- This process will disable multi-factor authentication on your account. -

- For security reasons, this will sign you out of all devices. It will also deactivate any existing app passwords you have generated. -

- Are you sure you want to continue? +
{{ error_message }}
{{ other_message }}
- - + +
@@ -37,9 +33,18 @@ export default class MFADisableComponent extends Component { loading = false error_message = '' other_message = '' + t = {} - vue_on_create() { + async vue_on_create() { this.app_name = session.get('app.name') + + this.t = await T( + 'common.cancel', + 'common.unknown_error', + 'mfa.disable_success', + 'mfa.disable', + 'mfa.disable_prompt' + ) } async back_click() { @@ -51,10 +56,10 @@ export default class MFADisableComponent extends Component { this.loading = true const success = await auth_api.mfa_disable() if ( success ) { - this.other_message = 'MFA was successfully disabled. You\'ll now sign-in normally.' + this.other_message = this.t['mfa.disable_success'] await location_service.redirect('/dash/profile', 3000) } else { - this.error_message = 'An unknown error occurred while trying to disable MFA. Let\'s try again...' + this.error_message = this.t['common.unknown_error'] await location_service.reload(4000) } } diff --git a/app/assets/app/auth/MFARecovery.component.js b/app/assets/app/auth/MFARecovery.component.js index 5da2a73..f39c5d5 100644 --- a/app/assets/app/auth/MFARecovery.component.js +++ b/app/assets/app/auth/MFARecovery.component.js @@ -7,13 +7,13 @@ const template = `
{{ app_name }}
- To recover access to your account, you can enter one of the generated MFA recovery codes: + {{ t['mfa.recover_prompt'] }}
{{ other_message }}
Have a normal MFA code? + >{{ t['mfa.normal_code'] }}
@@ -43,8 +43,17 @@ export default class MFARecoveryComponent extends Component { recovery_code = '' error_message = '' other_message = '' + t = {} async vue_on_create() { + this.t = await T( + 'mfa.recover_prompt', + 'mfa.recovery_code', + 'mfa.normal_code', + 'mfa.recover_success', + 'mfa.invalid_code' + ) + this.$nextTick(() => { this.$refs.verify_input.focus() }) @@ -57,11 +66,11 @@ export default class MFARecoveryComponent extends Component { this.loading = true const result = await auth_api.attempt_mfa_recovery(this.recovery_code) if ( result && result.success ) { - this.other_message = `Success! There are only ${result.remaining_codes} recovery codes remaining. Let's get you on your way...` + this.other_message = this.t['mfa.recover_success'].replace('NUM_CODES', result.remaining_codes) await location_service.redirect(result.next_destination, 5000) } else { this.loading = false - this.error_message = 'Hm. It doesn\'t look like that code is valid.' + this.error_message = this.t['mfa.invalid_code'] } } } diff --git a/app/assets/app/auth/login/Form.component.js b/app/assets/app/auth/login/Form.component.js index da592fb..d528069 100644 --- a/app/assets/app/auth/login/Form.component.js +++ b/app/assets/app/auth/login/Form.component.js @@ -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 = ` Need an account? + >{{ t['login.need_account'] }} Forgot password? - + >{{ t['login.forgot_password'] }} + @@ -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), }) }, }, diff --git a/app/assets/app/auth/register/Form.component.js b/app/assets/app/auth/register/Form.component.js index e0dac27..fb6630a 100644 --- a/app/assets/app/auth/register/Form.component.js +++ b/app/assets/app/auth/register/Form.component.js @@ -15,7 +15,7 @@ const template = ` id="coreid-registration-form-first" name="first_name" class="form-control" - placeholder="First Name" + :placeholder="t['register.first_name']" v-model="first_name" autofocus @keyup="on_key_up" @@ -29,7 +29,7 @@ const template = ` id="coreid-registration-form-last" name="last_name" class="form-control" - placeholder="Last Name" + :placeholder="t['register.last_name']" v-model="last_name" autofocus @keyup="on_key_up" @@ -43,7 +43,7 @@ const template = ` id="coreid-registration-form-username" name="username" class="form-control" - placeholder="Username" + :placeholder="t['login.username']" v-model="username" autofocus @keyup="on_key_up" @@ -58,7 +58,7 @@ const template = ` id="coreid-registration-form-email" name="email" class="form-control" - placeholder="E-Mail" + :placeholder="t['register.email']" v-model="email" autofocus @keyup="on_key_up" @@ -72,14 +72,14 @@ const template = ` Already have an account? + >{{ t['register.have_account'] }} + >{{ t['common.back'] }}