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

<template>
    <!-- <div id="twofactor-totp-settings">
        <template v-if="loading">
            <span class="icon-loading-small totp-loading" />
            <span> {{ t('twofactor_totp', 'Enable TOTP') }} </span>
        </template>
        <div v-else>
            <input id="totp-enabled" v-model="enabled" type="checkbox" class="checkbox" :disabled="loading"
                @change="toggleEnabled">
            <label for="totp-enabled">{{
                t('twofactor_totp', 'Enable TOTP')
            }}</label>
        </div>

        <SetupConfirmation v-if="secret" :secret="secret" :qr-url="qrUrl" :loading="loadingConfirmation"
            :confirmation.sync="confirmation" @confirm="enableTOTP" />
    </div> -->
    <CardBox :icon="mdiTwoFactorAuthentication" id="twofactor-totp-settings" title="Two-Factor Authentication" form>
        <template v-if="loading">
            <!-- <span class="icon-loading-small totp-loading" /> -->
            <div class="relative inline-flex">
                <div class="w-6 h-6 bg-blue-500 rounded-full"></div>
                <div class="w-6 h-6 bg-blue-500 rounded-full absolute top-0 left-0 animate-ping"></div>
                <div class="w-6 h-6 bg-blue-500 rounded-full absolute top-0 left-0 animate-pulse"></div>
                <span class="ml-4 max-w-xl text-sm text-gray-600">Enabling TOTP...</span>
            </div>
        </template>
        <div v-else>
            <!-- <div class="text-lg font-medium text-gray-900">
                You have not enabled two factor authentication.
            </div>
            <div class="text-sm text-gray-600">
                When two factor authentication is enabled, you will be prompted for a secure,
                random token during authentication. You may retrieve this token from your phone's
                Google Authenticator application.
            </div> -->
            <input id="totp-enabled" v-model="enabled" type="checkbox" class="checkbox" :disabled="loading"
                @change="toggleEnabled" />
            <!-- <label for="totp-enabled"> Enable TOTP </label> -->
            <label for="totp-enabled">{{ checkboxLabel }}</label>
        </div>

        <!-- <SetupConfirmation v-if="secret" :secret="secret" :qr-url="qrUrl" :loading="loadingConfirmation"
            :confirmation.sync="confirmation" @confirm="enableTOTP" /> -->
        <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>

            </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>
                <!-- :disabled="loading" -->
                <input id="totp-confirmation" :disabled="loadingConfirmation" v-model="confirmationCode" type="tel"
                    minlength="6" maxlength="10" autocomplete="off" autocapitalize="off"
                    :placeholder="'Authentication code'" @keydown="onConfirmKeyDown" />

                <!-- <input id="totp-confirmation-submit" type="button" :disabled="loading" :value="'Verify'"
                    @click="enableTOTP"> -->

                <!-- <BaseButtons>
                    <BaseButton :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
                        label="Verify" @click="enableTOTP" />
                </BaseButtons> -->
            </div>
        </div>

        <template #footer>
            <BaseButtons  v-if="qrSecret != ''">
                <BaseButton :icon="mdiContentSaveCheck" type="button" :disabled="loadingConfirmation" color="info"
                    label="Verify" @click="enableTOTP" />
            </BaseButtons>
        </template>
    </CardBox>
</template>

<script setup lang="ts">
import CardBox from '@/Components/CardBox.vue';
import { computed, ref } from 'vue';
import { MainService, State } from '@/Stores/main';
import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import Notification from '@/utils/toast';
import { mdiContentSaveCheck, mdiTwoFactorAuthentication } from '@mdi/js';

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

const props = defineProps({
    // user will be returned from controller action
    // user: {
    //     type: Object,
    //     default: () => ({}),
    // },
    twoFactorEnabled: {
        type: Boolean,
        default: false,
    },
    //     // code: {
    //     //     type: Object,
    //     // },
    //     // recoveryCodes: {
    //     //     type: Array<string>,
    //     //     default: () => [],
    //     // },
    //     // errors: {
    //     //     type: Object,
    //     //     default: () => ({}),
    //     // },
});
let loading = ref(false);
let loadingConfirmation = ref(false);
let test;
if (props.twoFactorEnabled) {
    test = State.STATE_ENABLED;
} else {
    test = State.STATE_DISABLED;
}
mainService.setState(test);

const enabled = ref(mainService.totpState == State.STATE_ENABLED);

let qrSecret = ref('');
let qrUrl = ref('');
let qrSvg = ref('');

const confirmationCode = ref('');

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

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

const state = computed(() => mainService.totpState);
const checkboxLabel = computed(() => {
    if (enabled.value == true) {
        return ' Disable TOTP';
    } else {
        return ' Enable TOTP';
    }
});

const toggleEnabled = async () => {
    if (loading.value == true) {
        // Ignore event
        // Logger.debug('still loading -> ignoring event')
        return;
    }

    if (enabled.value) {
        return await createTOTP();
    } else {
        return await disableTOTP();
    }
};

const createTOTP = async () => {
    // Show loading spinner
    loading.value = true;
    // Logger.debug('starting setup')

    try {
        const { url, secret, svg } = await mainService.create();
        qrSecret.value = secret;
        qrUrl.value = url;
        qrSvg.value = svg;
        // If the stat could be changed, keep showing the loading
        // spinner until the user has finished the registration
        //  if state isCretaed, show loading:
        loading.value = state.value === State.STATE_CREATED;
    } catch (e) {
        Notification.showWarning('Could not enable TOTP');
        // Logger.error('Could not enable TOTP', e)
        console.log('Could not create TOTP', e.message);

        // Restore on error
        loading.value = false;
        enabled.value = false;
    }
};

const disableTOTP = async () => {
    loading.value = false;
    // Logger.debug('starting disable');

    await mainService.disable();
    enabled.value = false;
    loading.value = false;
    Notification.showSuccess('TOTP disabled!');
};

const enableTOTP = async () => {
    loading.value = true;
    loadingConfirmation.value = true;

    try {
        await mainService.confirm(confirmationCode.value);
        if (mainService.totpState === State.STATE_ENABLED) {
            // Success
            loading.value = false;
            enabled.value = true;
            qrUrl.value = '';
            qrSecret.value = '';
            Notification.showSuccess('two factor authentication enabled');
        } else {
            Notification.showWarning('Could not verify your key. Please try again');
            console.log('Could not verify your key. Please try again');
        }
        confirmationCode.value = '';
        loadingConfirmation.value = false;
    } catch (e) {
        console.log('Could not enable TOTP', e.message);
        Notification.showWarning('Could not enable TOTP ' + e.message);
        confirmationCode.value = '';
        loadingConfirmation.value = false;
    }
};
</script>

<style scoped>
.totp-loading {
    display: inline-block;
    vertical-align: sub;
    margin-left: -2px;
    margin-right: 4px;
}
</style>