Add hasSetupData to avoid enabling 2FA again

Author: pushpak1300

resources/js/composables/useTwoFactorAuth.ts

@@ -1,5 +1,5 @@
 import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const fetchJson = async <T>(url: string): Promise<T> => {
     const response = await fetch(url, {
@@ -17,6 +17,8 @@ const qrCodeSvg = ref<string | null>(null);
 const manualSetupKey = ref<string | null>(null);
 const recoveryCodesList = ref<string[]>([]);
 
+const hasSetupData = computed<boolean>(() => qrCodeSvg.value !== null && manualSetupKey.value !== null);
+
 export const useTwoFactorAuth = () => {
     const fetchQrCode = async (): Promise<void> => {
         const { svg } = await fetchJson<{ svg: string; url: string }>(qrCode.url());
@@ -61,6 +63,7 @@ export const useTwoFactorAuth = () => {
         qrCodeSvg,
         manualSetupKey,
         recoveryCodesList,
+        hasSetupData,
         clearSetupData,
         clearTwoFactorAuthData,
         fetchQrCode,

resources/js/pages/settings/TwoFactor.vue

@@ -30,7 +30,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const { clearTwoFactorAuthData } = useTwoFactorAuth();
+const { hasSetupData, clearTwoFactorAuthData } = useTwoFactorAuth();
 const showSetupModal = ref<boolean>(false);
 
 onUnmounted(() => {
@@ -54,9 +54,10 @@ onUnmounted(() => {
                     </p>
 
                     <div>
-                        <Form v-bind="enable.form()" @success="showSetupModal = true" #default="{ processing }">
-                            <Button type="submit" :disabled="processing"> <ShieldCheck />Enable 2FA</Button>
-                        </Form>
+                        <Button v-if="hasSetupData" @click="showSetupModal = true"> <ShieldCheck />Continue Setup </Button>
+                        <Form v-else v-bind="enable.form()" @success="showSetupModal = true" #default="{ processing }">
+                            <Button type="submit" :disabled="processing"> <ShieldCheck />Enable 2FA</Button></Form
+                        >
                     </div>
                 </div>