|
|
@ -8,41 +8,34 @@ const template = `
|
|
|
|
<div class="coreid-header font-weight-light">{{ app_name }}</div>
|
|
|
|
<div class="coreid-header font-weight-light">{{ app_name }}</div>
|
|
|
|
<span v-if="step === 0">
|
|
|
|
<span v-if="step === 0">
|
|
|
|
<div class="coreid-message">
|
|
|
|
<div class="coreid-message">
|
|
|
|
We're going to walk you through setting up multi-factor authentication for your account.
|
|
|
|
<span v-if="t['mfa.setup_prompt']" v-html="t['mfa.setup_prompt'].replace('APP_NAME', app_name)"></span>
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
Once this is completed, you will need to provide your second factor of authentication whenever you sign in with your {{ app_name }} account.
|
|
|
|
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
You'll need some kind of MFA token generator such as Google Authenticator.
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="buttons text-right pad-top">
|
|
|
|
<div class="buttons text-right pad-top">
|
|
|
|
<button type="button" class="btn btn-primary" @click="back_click">Cancel</button>
|
|
|
|
<button type="button" class="btn btn-primary" @click="back_click">{{ t['common.cancel'] }}</button>
|
|
|
|
<button type="button" class="btn btn-primary" @click="continue_click">Continue</button>
|
|
|
|
<button type="button" class="btn btn-primary" @click="continue_click">{{ t['common.continue'] }}</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span v-if="step === 1">
|
|
|
|
<span v-if="step === 1">
|
|
|
|
<div class="coreid-message">
|
|
|
|
<div class="coreid-message">
|
|
|
|
Scan the QR code below with your authenticator app to add your {{ app_name }} account.
|
|
|
|
<span v-if="t['mfa.setup_qr_prompt']" v-html="t['mfa.setup_qr_prompt'].replace('APP_NAME', app_name)"></span>
|
|
|
|
<br><br>
|
|
|
|
|
|
|
|
Once you've done this, we'll ask for one of the generated codes to verify that MFA is working correctly.
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="coreid-auth-image text-center">
|
|
|
|
<div class="coreid-auth-image text-center">
|
|
|
|
<img class="img-fluid" :src="qr_data">
|
|
|
|
<img class="img-fluid" :src="qr_data">
|
|
|
|
<br><br><small>Secret: {{ secret }}</small>
|
|
|
|
<br><br><small>{{ t['mfa.secret'] }} {{ secret }}</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="buttons text-right pad-top">
|
|
|
|
<div class="buttons text-right pad-top">
|
|
|
|
<button class="btn btn-primary" type="button" @click="continue_click">Continue</button>
|
|
|
|
<button class="btn btn-primary" type="button" @click="continue_click">{{ t['common.continue'] }}</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<span v-if="step === 2">
|
|
|
|
<span v-if="step === 2">
|
|
|
|
<div class="coreid-message">
|
|
|
|
<div class="coreid-message" v-if="t['mfa.setup_success']">
|
|
|
|
Now, enter the code displayed in your authenticator app. {{ app_name }} will verify that the code is
|
|
|
|
{{ t['mfa.setup_success'].replace('APP_NAME', app_name) }}
|
|
|
|
correct. Then, you can enable MFA for your account.
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<div class="form-group">
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
class="form-control"
|
|
|
|
class="form-control"
|
|
|
|
type="number"
|
|
|
|
type="number"
|
|
|
|
placeholder="2FA Code"
|
|
|
|
:placeholder="t['mfa.mfa_code']"
|
|
|
|
v-model="verify_code"
|
|
|
|
v-model="verify_code"
|
|
|
|
@keyup="on_key_up"
|
|
|
|
@keyup="on_key_up"
|
|
|
|
name="verify_code"
|
|
|
|
name="verify_code"
|
|
|
@ -54,8 +47,8 @@ const template = `
|
|
|
|
<div v-if="error_message" class="error-message">{{ error_message }}</div>
|
|
|
|
<div v-if="error_message" class="error-message">{{ error_message }}</div>
|
|
|
|
<div v-if="other_message" class="other-message">{{ other_message }}</div>
|
|
|
|
<div v-if="other_message" class="other-message">{{ other_message }}</div>
|
|
|
|
<div class="buttons text-right pad-top">
|
|
|
|
<div class="buttons text-right pad-top">
|
|
|
|
<button class="btn btn-primary" type="button" @click="back_click">Back</button>
|
|
|
|
<button class="btn btn-primary" type="button" @click="back_click">{{ t['common.back'] }}</button>
|
|
|
|
<button class="btn btn-primary" type="button" @click="continue_click" :disabled="!verify_success">Enable 2FA</button>
|
|
|
|
<button class="btn btn-primary" type="button" @click="continue_click" :disabled="!verify_success">{{ t['mfa.enable_mfa'] }}</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
<div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
|
|
|
|
<div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
|
|
|
@ -80,6 +73,25 @@ export default class MFASetupPage extends Component {
|
|
|
|
|
|
|
|
|
|
|
|
error_message = ''
|
|
|
|
error_message = ''
|
|
|
|
other_message = ''
|
|
|
|
other_message = ''
|
|
|
|
|
|
|
|
t = {}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async vue_on_create() {
|
|
|
|
|
|
|
|
this.t = await T(
|
|
|
|
|
|
|
|
'mfa.setup_prompt',
|
|
|
|
|
|
|
|
'common.cancel',
|
|
|
|
|
|
|
|
'common.continue',
|
|
|
|
|
|
|
|
'mfa.setup_qr_prompt',
|
|
|
|
|
|
|
|
'mfa.secret',
|
|
|
|
|
|
|
|
'mfa.setup_success',
|
|
|
|
|
|
|
|
'mfa.mfa_code',
|
|
|
|
|
|
|
|
'common.back',
|
|
|
|
|
|
|
|
'mfa.enable_mfa',
|
|
|
|
|
|
|
|
'mfa.invalid_code',
|
|
|
|
|
|
|
|
'mfa.setup_code_success',
|
|
|
|
|
|
|
|
'mfa.mfa_enabled',
|
|
|
|
|
|
|
|
'common.unknown_error'
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
async watch_verify_code(new_verify_code, old_verify_code) {
|
|
|
|
async watch_verify_code(new_verify_code, old_verify_code) {
|
|
|
|
if ( new_verify_code.length === 6 ) {
|
|
|
|
if ( new_verify_code.length === 6 ) {
|
|
|
@ -89,10 +101,10 @@ export default class MFASetupPage extends Component {
|
|
|
|
this.loading = false
|
|
|
|
this.loading = false
|
|
|
|
if ( !this.verify_success ) {
|
|
|
|
if ( !this.verify_success ) {
|
|
|
|
this.other_message = ''
|
|
|
|
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']
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.error_message = ''
|
|
|
|
this.error_message = ''
|
|
|
|
this.other_message = `Success! That code matched what ${this.app_name} was expecting. You can now enable multi-factor authentication for your account.`
|
|
|
|
this.other_message = this.t['mfa.setup_code_success'].replace('APP_NAME', this.app_name)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if ( new_verify_code.length > 6 ) {
|
|
|
|
} else if ( new_verify_code.length > 6 ) {
|
|
|
|
this.verify_code = old_verify_code
|
|
|
|
this.verify_code = old_verify_code
|
|
|
@ -136,11 +148,11 @@ export default class MFASetupPage extends Component {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
await auth_api.mfa_enable()
|
|
|
|
await auth_api.mfa_enable()
|
|
|
|
this.error_message = ''
|
|
|
|
this.error_message = ''
|
|
|
|
this.other_message = 'MFA has been enabled for your account! For security purposes, you will be asked to sign in again.'
|
|
|
|
this.other_message = this.t['mfa.mfa_enabled']
|
|
|
|
await location_service.redirect('/auth/login', 3000)
|
|
|
|
await location_service.redirect('/auth/login', 3000)
|
|
|
|
} catch(e) {
|
|
|
|
} catch(e) {
|
|
|
|
this.loading = false
|
|
|
|
this.loading = false
|
|
|
|
this.error_message = 'Sorry, an unknown error occurred, and we were unable to continue.'
|
|
|
|
this.error_message = this.t['common.unknown_error']
|
|
|
|
this.other_message = ''
|
|
|
|
this.other_message = ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|