import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor'; import { computed, ref } from 'vue'; const fetchJson = async (url: string): Promise => { const response = await fetch(url, { headers: { Accept: 'application/json' }, }); if (!response.ok) { throw new Error(`Failed to fetch: ${response.status}`); } return response.json(); }; const qrCodeSvg = ref(null); const manualSetupKey = ref(null); const recoveryCodesList = ref([]); const hasSetupData = computed(() => qrCodeSvg.value !== null && manualSetupKey.value !== null); export const useTwoFactorAuth = () => { const fetchQrCode = async (): Promise => { const { svg } = await fetchJson<{ svg: string; url: string }>(qrCode.url()); qrCodeSvg.value = svg; }; const fetchSetupKey = async (): Promise => { const { secretKey: key } = await fetchJson<{ secretKey: string }>(secretKey.url()); manualSetupKey.value = key; }; const clearSetupData = (): void => { manualSetupKey.value = null; qrCodeSvg.value = null; }; const clearTwoFactorAuthData = (): void => { clearSetupData(); recoveryCodesList.value = []; }; const fetchRecoveryCodes = async (): Promise => { try { recoveryCodesList.value = await fetchJson(recoveryCodes.url()); } catch (error) { console.error('Failed to fetch recovery codes:', error); recoveryCodesList.value = []; } }; const fetchSetupData = async (): Promise => { try { await Promise.all([fetchQrCode(), fetchSetupKey()]); } catch (error) { console.error('Failed to fetch setup data:', error); qrCodeSvg.value = null; manualSetupKey.value = null; } }; return { qrCodeSvg, manualSetupKey, recoveryCodesList, hasSetupData, clearSetupData, clearTwoFactorAuthData, fetchQrCode, fetchSetupKey, fetchSetupData, fetchRecoveryCodes, }; };