CoreID/app/assets/app/auth/MFASetup.component.js

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>
        <span v-if="step === 0">
            <div class="coreid-message">
                <span v-if="t['mfa.setup_prompt']" v-html="t['mfa.setup_prompt'].replace('APP_NAME', app_name)"></span>
            </div>
            <div class="buttons text-right pad-top">
                <button type="button" class="btn btn-primary" @click="back_click">{{ t['common.cancel'] }}</button>
                <button type="button" class="btn btn-primary" @click="continue_click">{{ t['common.continue'] }}</button>
            </div>
        </span>
        <span v-if="step === 1">
            <div class="coreid-message">
                <span v-if="t['mfa.setup_qr_prompt']" v-html="t['mfa.setup_qr_prompt'].replace('APP_NAME', app_name)"></span>
            </div>
            <div class="coreid-auth-image text-center">
                <img class="img-fluid" :src="qr_data">
                <br><br><small>{{ t['mfa.secret'] }} {{ secret }}</small>
            </div>
            <div class="buttons text-right pad-top">
                <button class="btn btn-primary" type="button" @click="continue_click">{{ t['common.continue'] }}</button>
            </div>
        </span>
        <span v-if="step === 2">
            <div class="coreid-message" v-if="t['mfa.setup_success']">
                {{ t['mfa.setup_success'].replace('APP_NAME', app_name) }}
            </div>
            <div class="form-group">
                <input
                    class="form-control"
                    type="number"
                    :placeholder="t['mfa.mfa_code']"
                    v-model="verify_code"
                    @keyup="on_key_up"
                    name="verify_code"
                    maxlength="6"
                    :disabled="verify_success"
                    ref="verify_input"
                >
            </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="buttons text-right pad-top">
                <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">{{ t['mfa.enable_mfa'] }}</button>
            </div>
        </span>
        <div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
    </div>
</div>
`

export default class MFASetupPage extends Component {
    static get selector() { return 'coreid-mfa-setup-page' }
    static get props() { return ['app_name'] }
    static get template() { return template }

    loading = false
    step = 0

    qr_data = ''
    otpauth_url = ''
    secret = ''
    verify_code = ''

    verify_success = false

    error_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) {
        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
            this.loading = false
            if ( !this.verify_success ) {
                this.other_message = ''
                this.error_message = this.t['mfa.invalid_code']
            } else {
                this.error_message = ''
                this.other_message = this.t['mfa.setup_code_success'].replace('APP_NAME', this.app_name)
            }
        } else if ( new_verify_code.length > 6 ) {
            this.verify_code = old_verify_code
        }
    }

    async back_click() {
        if ( this.step === 0 ) await location_service.back()
        else this.step -= 1
    }

    async on_key_up(event) {
        if ( event.keyCode === 13 ) {
            // Enter was pressed - don't submit the form
            event.preventDefault()
            event.stopPropagation()
            return false
        }
    }

    async continue_click() {
        if ( this.step === 0 ) {
            // Get the MFA token
            // TODO try/catch this
            this.loading = true
            const result = await auth_api.mfa_generate()
            this.qr_data = result.qr_code
            this.otpauth_url = result.otpauth_url
            this.secret = result.secret
            this.step = 1
            this.loading = false
        } else if ( this.step === 1 ) {
            this.step = 2
            this.error_message = ''
            this.other_message = ''
            this.$nextTick(() => {
                this.$refs.verify_input.focus()
            })
        } else if ( this.step === 2 ) {
            this.loading = true
            try {
                await auth_api.mfa_enable()
                this.error_message = ''
                this.other_message = this.t['mfa.mfa_enabled']
                await location_service.redirect('/auth/login', 3000)
            } catch(e) {
                this.loading = false
                this.error_message = this.t['common.unknown_error']
                this.other_message = ''
            }
        }
    }
}