2FAuth/resources/js_vue3/components/OtpDisplay.vue

<script setup>
    import Spinner from '@/components/Spinner.vue'
    import TotpLooper from '@/components/TotpLooper.vue'
    import Dots from '@/components/Dots.vue'
    import twofaccountService from '@/services/twofaccountService'
    import { useUserStore } from '@/stores/user'
    import { UseColorMode } from '@vueuse/components'
    import { useDisplayablePassword } from '@/composables/helpers'

    const user = useUserStore()
    const $2fauth = inject('2fauth')
    const { copy, copied } = useClipboard({ legacy: true })
    
    const emit = defineEmits(['please-close-me', 'increment-hotp', 'validation-error'])
    const props = defineProps({
        otp_type : String,
        account : String,
        service : String,
        icon : String,
        secret : String,
        digits : Number,
        algorithm : String,
        period : null,
        counter : null,
        image : String,
        qrcode : null,
        uri : String
    })

    const id = ref(null)
    const uri = ref(null)
    const otpauthParams = reactive({
        otp_type : String,
        account : String,
        service : String,
        icon : String,
        secret : String,
        digits : Number,
        algorithm : String,
        period : null,
        counter : null,
        image : String
    })
    const password = ref('')
    const generated_at = ref(null)
    const hasTOTP = ref(false)
    const showInlineSpinner = ref(false)

    const dots = ref()
    const totpLooper = ref()
    const otpSpanTag = ref()

    /***
     * 
     */
    const show = async (accountId) => {

        // 3 possible cases :
        //
        //   Case 1 : When user asks for an otp 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.otp_type is sent by the backend.
        //
        //   Case 2 : When user uses the Quick Uploader and preview the account: No ID but we have an URI.
        //
        //   Case 3 : When user uses the Advanced form and preview the account: We should have all OTP parameter
        //     to obtain an otp, including Secret and otp_type which are required

        otpauthParams.otp_type = props.otp_type
        otpauthParams.account = props.account
        otpauthParams.service = props.service
        otpauthParams.icon = props.icon
        otpauthParams.secret = props.secret
        otpauthParams.digits = props.digits
        otpauthParams.algorithm = props.algorithm
        otpauthParams.period = props.period
        otpauthParams.counter = props.counter

        setLoadingState()

        // Case 1
        if (accountId) {
            id.value = accountId
            const { data } = await twofaccountService.get(id.value)

            otpauthParams.service = data.service
            otpauthParams.account = data.account
            otpauthParams.icon = data.icon
            otpauthParams.otp_type = data.otp_type

            if( isHMacBased(data.otp_type) && data.counter ) {
                otpauthParams.counter = data.counter
            }
        }
        // Case 2
        else if(props.uri) {
            uri.value = props.uri
            otpauthParams.otp_type = props.uri.slice(0, 15 ).toLowerCase() === "otpauth://totp/" ? 'totp' : 'hotp'
        }
        // Case 3
        else if (! props.secret) {
            notify.error(new Error(trans('errors.cannot_create_otp_without_secret')))
        }
        else if (! isTimeBased(otpauthParams.otp_type) && ! isHMacBased(otpauthParams.otp_type)) {
            notify.error(new Error(trans('errors.not_a_supported_otp_type')))
        }

        try {
            await getOtp()
            focusOnOTP()
        }
        catch(error) {
            clearOTP()
        }
    }

    /**
     * Requests and handles a fresh OTP
     */
    async function getOtp() {
        setLoadingState()

        getOtpPromise().then(response => {
            let otp = response.data
            password.value = otp.password

            if(user.preferences.copyOtpOnDisplay) {
                copyOTP(otp.password)
            }

            if (isTimeBased(otp.otp_type)) {
                generated_at.value = otp.generated_at
                otpauthParams.period = otp.period
                hasTOTP.value = true

                nextTick().then(() => {
                    totpLooper.value.startLoop()
                })
            }
            else if (isHMacBased(otp.otp_type)) {
                otpauthParams.counter = otp.counter

                // returned counter & uri are incremented
                emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
            }
        })
        .catch(error => {
            if (error.response.status === 422) {
                emit('validation-error', error.response)
            }
            throw error
        })
        .finally(() => {
            showInlineSpinner.value = false
        })
    }

    /**
     * Shows blacked dots and a loading spinner
     */
    function setLoadingState() {
        showInlineSpinner.value = true
        dots.value.turnOff()
    }

    /**
     * Returns the appropriate promise to get a fresh OTP from backend
     */
    function getOtpPromise() {
        if(id.value) {
            return twofaccountService.getOtpById(id.value)
        }
        else if(uri.value) {
            return twofaccountService.getOtpByUri(uri.value)
        }
        else {
            return twofaccountService.getOtpByParams(otpauthParams)
        }
    }

    /**
     * Reset component's refs
     */
    function clearOTP() {
        id.value = otpauthParams.counter = generated_at.value = null
        otpauthParams.service = otpauthParams.account = otpauthParams.icon = otpauthParams.otp_type = otpauthParams.secret = ''
        password.value = '... ...'
        hasTOTP.value = false

        totpLooper.value?.clearLooper();
    }

    /**
     * Put focus on the OTP html tag
     */
    function focusOnOTP() {
        nextTick().then(() => {
            otpSpanTag.value?.focus()
        })
    }

    /**
     * Copies to clipboard and notify
     * 
     * @param {string} otp The password to copy
     * @param {*} permit_closing Toggle moddle closing On-Off
     */
    function copyOTP(otp, permit_closing) {
        copy(otp.replace(/ /g, ''))

        if (copied) {
            if(user.preferences.kickUserAfter == -1 && (permit_closing || false) === true) {
                user.logout()
            }
            else if(user.preferences.closeOtpOnCopy && (permit_closing || false) === true) {
                emit("please-close-me");
                clearOTP()
            }

            notify.success({ text: trans('commons.copied_to_clipboard') })
        }
    }

    /**
     * Checks OTP type is Time based (TOTP)
     * 
     * @param {string} otp_type 
     */
    function isTimeBased(otp_type) {
        return (otp_type === 'totp' || otp_type === 'steamtotp')
    }

    /**
     * Checks OTP type is HMAC based (HOTP)
     * 
     * @param {string} otp_type 
     */
    function isHMacBased(otp_type) {
        return otp_type === 'hotp'
    }
    
    /**
     * Turns dots On from the first one to the provided one
     */
    function turnDotOn(dotIndex) {
        dots.value.turnOn(dotIndex)
    }

    defineExpose({
        show,
        clearOTP
    })

</script>

<template>
    <div>
        <figure class="image is-64x64" :class="{ 'no-icon': !otpauthParams.icon }" style="display: inline-block">
            <img :src="$2fauth.config.subdirectory + '/storage/icons/' + otpauthParams.icon" v-if="otpauthParams.icon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
        </figure>
        <UseColorMode v-slot="{ mode }">
            <p class="is-size-4 has-ellipsis" :class="mode == 'dark' ? 'has-text-grey-light' : 'has-text-grey'">{{ otpauthParams.service }}</p>
            <p class="is-size-6 has-ellipsis" :class="mode == 'dark' ? 'has-text-grey' : 'has-text-grey-light'">{{ otpauthParams.account }}</p>
            <p>
                <span
                    v-if="!showInlineSpinner"
                    id="otp"
                    role="log"
                    ref="otpSpanTag"
                    tabindex="0"
                    class="otp is-size-1 is-clickable px-3"
                    :class="mode == 'dark' ? 'has-text-white' : 'has-text-grey-dark'"
                    @click="copyOTP(password, true)"
                    @keyup.enter="copyOTP(password, true)"
                    :title="$t('commons.copy_to_clipboard')"
                >
                    {{ useDisplayablePassword(password) }}
                </span>
                <span v-else tabindex="0" class="otp is-size-1">
                    <Spinner :isVisible="showInlineSpinner" :type="'raw'" />
                </span>
            </p>
        </UseColorMode>
        <Dots v-show="isTimeBased(otpauthParams.otp_type)" ref="dots"></Dots>
        <ul v-show="isHMacBased(otpauthParams.otp_type)">
            <li>counter: {{ otpauthParams.counter }}</li>
        </ul>
        <TotpLooper 
            v-if="hasTOTP"
            :period="otpauthParams.period" 
            :generated_at="generated_at" 
            :autostart="false" 
            v-on:loop-ended="getOtp()"
            v-on:loop-started="turnDotOn($event)"
            v-on:stepped-up="turnDotOn($event)"
            ref="totpLooper"
        ></TotpLooper>
    </div>
</template>