|
|
|
|
import { Component } from '../../lib/vues6/vues6.js'
|
|
|
|
|
import { auth_api } from '../service/AuthApi.service.js'
|
|
|
|
|
import { location_service } from '../service/Location.service.js'
|
|
|
|
|
|
|
|
|
|
const template = `
|
|
|
|
|
<div class="coreid-auth-page 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-auth-page-inner">
|
|
|
|
|
<div class="coreid-header font-weight-light">{{ app_name }}</div>
|
|
|
|
|
<div class="coreid-message">
|
|
|
|
|
Your account has multi-factor authentication enabled. Please enter the code generated by your authenticator app to continue.
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
<input
|
|
|
|
|
class="form-control"
|
|
|
|
|
type="number"
|
|
|
|
|
placeholder="2FA Code"
|
|
|
|
|
v-model="verify_code"
|
|
|
|
|
@keyup="on_key_up"
|
|
|
|
|
name="verify_code"
|
|
|
|
|
maxlength="6"
|
|
|
|
|
:disabled="verify_success"
|
|
|
|
|
ref="verify_input"
|
|
|
|
|
autofocus
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="error_message" class="error-message">{{ error_message }}</div>
|
|
|
|
|
<div v-if="other_message" class="other-message">{{ other_message }}</div>
|
|
|
|
|
<div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
|
|
|
|
|
<small
|
|
|
|
|
class="mr-3"
|
|
|
|
|
><a href="#" class="text-secondary" @click="on_do_recovery">Lost your MFA device?</a></small>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
export default class MFAChallengePage extends Component {
|
|
|
|
|
static get selector() { return 'coreid-mfa-challenge-page' }
|
|
|
|
|
static get props() { return ['app_name'] }
|
|
|
|
|
static get template() { return template }
|
|
|
|
|
|
|
|
|
|
loading = false
|
|
|
|
|
|
|
|
|
|
verify_code = ''
|
|
|
|
|
verify_success = false
|
|
|
|
|
|
|
|
|
|
error_message = ''
|
|
|
|
|
other_message = ''
|
|
|
|
|
|
|
|
|
|
async watch_verify_code(new_verify_code, old_verify_code) {
|
|
|
|
|
if ( new_verify_code.length === 6 ) {
|
|
|
|
|
this.loading = true
|
|
|
|
|
const result = await auth_api.mfa_attempt(new_verify_code)
|
|
|
|
|
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.loading = false
|
|
|
|
|
} else {
|
|
|
|
|
this.error_message = ''
|
|
|
|
|
this.other_message = `Success! Redirecting...`
|
|
|
|
|
await location_service.redirect(result.next_destination, 1500)
|
|
|
|
|
}
|
|
|
|
|
} else if ( new_verify_code.length > 6 ) {
|
|
|
|
|
this.verify_code = old_verify_code
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async on_key_up(event) {
|
|
|
|
|
if ( event.keyCode === 13 ) {
|
|
|
|
|
// Enter was pressed - don't submit the form
|
|
|
|
|
event.preventDefault()
|
|
|
|
|
event.stopPropagation()
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async on_do_recovery(event) {
|
|
|
|
|
await location_service.redirect('/auth/mfa/recovery', 0)
|
|
|
|
|
}
|
|
|
|
|
}
|
