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="qrSecret" :qr-secret="qrSecret" :qr-url="qrUrl" :qr-svg="qrSvg"
            :loading="loadingConfirmation" v-model:confirmation="confirmationCode" @confirm="enableTOTP" />


            <BaseDivider></BaseDivider>
        <PersonalSettings :backupState="props.backupState"/>

    </CardBox>
</template>

<script setup lang="ts">
import CardBox from '@/Components/CardBox.vue';
import { computed, ref } from 'vue';
import { MainService, State } from '@/Stores/main';
import SetupConfirmation from '@/Components/SetupConfirmation.vue';

import Notification from '@/utils/toast';
import { mdiTwoFactorAuthentication } from '@mdi/js';
import PersonalSettings from '@/Components/PersonalSettings.vue';
import BaseDivider from './BaseDivider.vue';

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,
    },
    backupState: {
        type: Object,
        default: () => ({}),
    },
    //     // code: {
    //     //     type: Object,
    //     // },
    //     // recoveryCodes: {
    //     //     type: Array<string>,
    //     //     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>