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">
                We're going to walk you through setting up multi-factor authentication for your account.
                <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 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="continue_click">Continue</button>
            </div>
        </span>
        <span v-if="step === 1">
            <div class="coreid-message">
                Scan the QR code below with your authenticator app to add your {{ app_name }} account.
                <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 class="coreid-auth-image text-center">
                <img class="img-fluid" :src="qr_data">
                <br><br><small>Secret: {{ secret }}</small>
            </div>
            <div class="buttons text-right pad-top">
                <button class="btn btn-primary" type="button" @click="continue_click">Continue</button>
            </div>
        </span>
        <span v-if="step === 2">
            <div class="coreid-message">
                Now, enter the code displayed in your authenticator app. {{ app_name }} will verify that the code is
                correct. Then, you can enable MFA for your account.
            </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"
                >
            </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">Back</button>
                <button class="btn btn-primary" type="button" @click="continue_click" :disabled="!verify_success">Enable 2FA</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 = ''

    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 = `Uh, oh! It looks like that's not the right code. Please try again.`
            } else {
                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.`
            }
        } 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 = 'MFA has been enabled for your account! For security purposes, you will be asked to sign in again.'
                await location_service.redirect('/auth/login', 3000)
            } catch(e) {
                this.loading = false
                this.error_message = 'Sorry, an unknown error occurred, and we were unable to continue.'
                this.other_message = ''
            }
        }
    }
}