tethys.backend/resources/js/Components/SetupConfirmation.vue

<template>
    <div v-if="qrSecret != ''">

        <div class="mt-4 max-w-xl text-sm text-gray-600">
            <!-- <p class="font-semibold">
                        Two factor authentication is now enabled.
                    </p> -->
            <p>Your new TOTP secret is: {{ qrSecret }}</p>
            <p>For quick setup, scan this QR code with your phone's authenticator application (TOTP):</p>
            <div class="mt-4">
                <img :src="qrSvg" />
            </div>
        </div>

        <div class="mt-4 max-w-xl text-sm text-gray-600">
            <p>
                After you configured your app, enter a test code below to ensure everything works correctly:
            </p>
            <input id="totp-confirmation" :disabled="loadingConfirmation" v-model="confirmationCode" type="tel"
                minlength="6" maxlength="10" autocomplete="off" autocapitalize="off" :placeholder="'Authentication code'"
                @keydown="onConfirmKeyDown" />
            <BaseButton class="mx-2" :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
                label="Verify" @click="confirm" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { mdiContentSaveCheck } from '@mdi/js';
import BaseButton from '@/Components/BaseButton.vue';
import { computed } from 'vue';

const emit = defineEmits(['confirm', 'update:confirmation']);

const props = defineProps({
    loadingConfirmation: {
        type: Boolean,
        default: false,
    },
    qrSecret: {
        type: String,
        required: true,
    },
    qrUrl: {
        type: String,
        required: true,
    },
    qrSvg: {
        type: String,
        required: true,
    },
    confirmation: {
        type: String,
        default: '',
    },
});

// https://vanoneang.github.io/article/v-model-in-vue3.html#the-challenge-reduce-boilerplate
const confirmationCode = computed({
    get() {
        return props.confirmation;
    },
    set(value) {
        // props.persons.length = 0;
        // props.persons.push(...value);
        emit('update:confirmation', value)
    },
});

const onConfirmKeyDown = (e) => {
    if (e.which === 13) {
        confirm();
    }
};

const confirm = () => {
    // emit('update:confirmation', confirmationCode.value);
    emit('confirm');
};

</script>