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)
    }
}