2FAuth/resources/js/components/TokenDisplayer.vue

<template>
    <div>
        <figure class="image is-64x64" :class="{ 'no-icon': !internal_icon }" style="display: inline-block">
            <img :src="'/storage/icons/' + internal_icon" v-if="internal_icon">
        </figure>
        <p class="is-size-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>
        <p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>
        <p class="is-size-1 has-text-white is-clickable" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => token.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ displayedToken }}</p>
        <ul class="dots" v-if="internal_otpType === 'totp'">
            <li v-for="n in 10"></li>
        </ul>
        <ul v-else-if="internal_otpType === 'hotp'">
            <li>counter: {{ internal_hotpCounter }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'TokenDisplayer',

        data() {
            return {
                id: null,
                token : '',
                remainingTimeout: null,
                firstDotToNextOneTimeout: null,
                dotToDotInterval: null,
                position: null,
                totpTimestamp: null,
                internal_otpType: '',
                internal_account: '',
                internal_service: '',
                internal_icon: '',
                internal_hotpCounter: null,
                lastActiveDot: null,
                dotToDotCounter: null,
            }
        },

        props: {
            account : String,
            algorithm : String,
            digits : Number,
            hotpCounter : null,
            icon : String,
            imageLink : String,
            otpType : String,
            qrcode : null,
            secret : String,
            secretIsBase32Encoded : Number,
            service : String,
            totpPeriod : null,
            uri : String
        },

        computed: {
            displayedToken() {
                return this.$root.appSettings.showTokenAsDot ? this.token.replace(/[0-9]/g, '●') : this.token
            }
        },

        mounted: function() {
            this.getToken()
        },

        methods: {

            async getToken(id) {

                // 3 possible cases :
                //   - Trigger when user ask for a token of an existing account: the ID is provided so we fetch the account data
                //     from db but without the uri.
                //     This prevent the uri (a sensitive data) to transit via http request unnecessarily. In this
                //     case this.otpType is sent by the backend.
                //   - Trigger when user use the Quick Uploader and preview the account: No ID but we have an URI.
                //   - Trigger when user use the Advanced form and preview the account: We should have all OTP parameter
                //     to obtain a token, including Secret and otpType which are required

                this.internal_service = this.service
                this.internal_account = this.account
                this.internal_icon = this.icon
                this.internal_otpType = this.otpType
                this.internal_hotpCounter = this.hotpCounter

                if( id ) {

                    this.id = id
                    const { data } = await this.axios.get('api/twofaccounts/' + this.id)

                    this.internal_service = data.service
                    this.internal_account = data.account
                    this.internal_icon = data.icon
                    this.internal_otpType = data.otpType
                    
                    if( data.otpType === 'hotp' && data.hotpCounter ) {
                        this.internal_hotpCounter = data.hotpCounter
                    }
                }

                // We force the otpType to be based on the uri
                if( this.uri ) {
                    this.internal_otpType = this.uri.slice(0, 15 ).toLowerCase() === "otpauth://totp/" ? 'totp' : 'hotp';
                }

                if( this.id || this.uri || this.secret ) { // minimun required vars to get a token from the backend
                    
                    switch(this.internal_otpType) {
                        case 'totp':
                            await this.getTOTP()
                            break;
                        case 'hotp':
                            await this.getHOTP()
                            break;
                        default:
                            this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
                    } 

                    this.$parent.isActive = true
                }
            },


            getTOTP: function() {

                this.dotToDotCounter = 0

                this.axios.post('/api/twofaccounts/otp', { id: this.id, otp: this.$props }).then(response => {

                    let spacePosition = Math.ceil(response.data.token.length / 2);
                    
                    this.token = response.data.token.substr(0, spacePosition) + " " + response.data.token.substr(spacePosition);
                    this.totpTimestamp = response.data.totpTimestamp; // the timestamp used to generate the token
                    this.position = this.totpTimestamp % response.data.totpPeriod // The position of the totp timestamp in the current period

                    // Hide all dots
                    let dots = this.$el.querySelector('.dots');

                    while (dots.querySelector('[data-is-active]')) {
                        dots.querySelector('[data-is-active]').removeAttribute('data-is-active');
                    }

                    // Activate the dot at the totp position
                    let relativePosition = (this.position * 10) / response.data.totpPeriod
                    let dotNumber = (Math.floor(relativePosition) +1)

                    this.lastActiveDot = dots.querySelector('li:nth-child(' + dotNumber + ')');
                    this.lastActiveDot.setAttribute('data-is-active', true);

                    // Main timeout which run all over the totpPeriod.

                    let remainingTimeBeforeEndOfPeriod = response.data.totpPeriod - this.position
                    let self = this; // because of the setInterval/setTimeout closures

                    this.remainingTimeout = setTimeout(function() {
                        self.stopLoop()
                        self.getTOTP();
                    }, remainingTimeBeforeEndOfPeriod*1000);

                    // During the remainingTimeout countdown we have to show a next dot every durationBetweenTwoDots seconds
                    // except for the first next dot

                    let durationBetweenTwoDots = response.data.totpPeriod / 10 // we have 10 dots
                    let firstDotTimeout = (Math.ceil(this.position / durationBetweenTwoDots) * durationBetweenTwoDots) - this.position

                    this.firstDotToNextOneTimeout = setTimeout(function() {

                        if( firstDotTimeout > 0 ) {
                            self.activeNextDot()
                            dotNumber += 1
                        }

                        self.dotToDotInterval = setInterval(function() {

                            self.dotToDotCounter += 1
                            self.activeNextDot()
                            dotNumber += 1

                        }, durationBetweenTwoDots*1000)

                    }, firstDotTimeout*1000)
                })
                .catch(error => {
                    this.$router.push({ name: 'genericError', params: { err: error.response } });
                });
            },


            getHOTP: function() {

                this.axios.post('/api/twofaccounts/otp', { id: this.id, otp: this.$props }).then(response => {
                    let spacePosition = Math.ceil(response.data.token.length / 2);
                    
                    this.token = response.data.token.substr(0, spacePosition) + " " + response.data.token.substr(spacePosition)

                    // returned counter & uri are incremented
                    this.$emit('increment-hotp', { nextHotpCounter: response.data.hotpCounter, nextUri: response.data.uri })

                })
                .catch(error => {
                    this.$router.push({ name: 'genericError', params: { err: error.response } });
                });
            },


            clearOTP: function() {
                this.stopLoop()
                this.id = this.remainingTimeout = this.dotToDotInterval = this.firstDotToNextOneTimeout = this.position = this.internal_hotpCounter = null
                this.internal_service = this.internal_account = this.internal_icon = this.internal_otpType = ''
                this.token = '... ...'

                try {
                    this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
                    this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);
                }
                catch(e) {
                    // we do not throw anything
                }
            },


            stopLoop: function() {
                if( this.internal_otpType === 'totp' ) {
                    clearTimeout(this.remainingTimeout)
                    clearTimeout(this.firstDotToNextOneTimeout)
                    clearInterval(this.dotToDotInterval)
                }
            },


            activeNextDot: function() {
                if(this.lastActiveDot.nextSibling !== null) {

                    this.lastActiveDot.removeAttribute('data-is-active')
                    this.lastActiveDot.nextSibling.setAttribute('data-is-active', true)
                    this.lastActiveDot = this.lastActiveDot.nextSibling
                }
            },


            clipboardSuccessHandler ({ value, event }) {

                if(this.$root.appSettings.kickUserAfter == -1) {
                    this.appLogout()
                }
                else if(this.$root.appSettings.closeTokenOnCopy) {
                    this.$parent.isActive = false
                    this.clearOTP()
                }

                this.$notify({ type: 'is-success', text: this.$t('commons.copied_to_clipboard') })
            },


            clipboardErrorHandler ({ value, event }) {
                console.log('error', value)
            }

        },

        beforeDestroy () {
            this.stopLoop()
        }
    }
</script>