refactor: centralize clipboard and two-factor authentication logic, enhance state management, and optimize TwoFactor UI components

Author: pushpak1300

resources/js/composables/useClipboard.ts

@@ -0,0 +1,30 @@
+import { ref } from 'vue';
+
+interface ClipboardOptions {
+    timeout?: number;
+}
+
+export function useClipboard(options: ClipboardOptions = {}) {
+    const { timeout = 1500 } = options;
+    
+    const copied = ref(false);
+    
+    const copyToClipboard = async (text: string): Promise<void> => {
+        if (typeof window === 'undefined' || !navigator.clipboard) {
+            return;
+        }
+        
+        try {
+            await navigator.clipboard.writeText(text);
+            copied.value = true;
+            setTimeout(() => (copied.value = false), timeout);
+        } catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+        }
+    };
+    
+    return {
+        copied,
+        copyToClipboard,
+    };
+}

resources/js/composables/useTwoFactorAuth.ts

@@ -0,0 +1,22 @@
+export const useTwoFactorAuth = () => {
+    const fetchQRCode = async (): Promise<{ svg: string }> => {
+        const response = await fetch(route('two-factor.qr-code'));
+        return await response.json();
+    };
+
+    const fetchManualSetupKey = async (): Promise<{ secretKey: string }> => {
+        const response = await fetch(route('two-factor.secret-key'));
+        return await response.json();
+    };
+
+    const fetchRecoveryCodes = async (): Promise<string[]> => {
+        const response = await fetch(route('two-factor.recovery-codes'));
+        return await response.json();
+    };
+
+    return {
+        fetchQRCode,
+        fetchManualSetupKey,
+        fetchRecoveryCodes,
+    };
+};