git init

resources/js/composables/useAppearance.ts

@@ -0,0 +1,124 @@
+import type { ComputedRef, Ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import type { Appearance, ResolvedAppearance } from '@/types';
+
+export type { Appearance, ResolvedAppearance };
+
+export type UseAppearanceReturn = {
+    appearance: Ref<Appearance>;
+    resolvedAppearance: ComputedRef<ResolvedAppearance>;
+    updateAppearance: (value: Appearance) => void;
+};
+
+export function updateTheme(value: Appearance): void {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    if (value === 'system') {
+        const mediaQueryList = window.matchMedia(
+            '(prefers-color-scheme: dark)',
+        );
+        const systemTheme = mediaQueryList.matches ? 'dark' : 'light';
+
+        document.documentElement.classList.toggle(
+            'dark',
+            systemTheme === 'dark',
+        );
+    } else {
+        document.documentElement.classList.toggle('dark', value === 'dark');
+    }
+}
+
+const setCookie = (name: string, value: string, days = 365) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    const maxAge = days * 24 * 60 * 60;
+
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+const mediaQuery = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const getStoredAppearance = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return localStorage.getItem('appearance') as Appearance | null;
+};
+
+const prefersDark = (): boolean => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const handleSystemThemeChange = () => {
+    const currentAppearance = getStoredAppearance();
+
+    updateTheme(currentAppearance || 'system');
+};
+
+export function initializeTheme(): void {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
+    // Initialize theme from saved preference or default to system...
+    const savedAppearance = getStoredAppearance();
+    updateTheme(savedAppearance || 'system');
+
+    // Set up system theme change listener...
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+
+const appearance = ref<Appearance>('system');
+
+export function useAppearance(): UseAppearanceReturn {
+    onMounted(() => {
+        const savedAppearance = localStorage.getItem(
+            'appearance',
+        ) as Appearance | null;
+
+        if (savedAppearance) {
+            appearance.value = savedAppearance;
+        }
+    });
+
+    const resolvedAppearance = computed<ResolvedAppearance>(() => {
+        if (appearance.value === 'system') {
+            return prefersDark() ? 'dark' : 'light';
+        }
+
+        return appearance.value;
+    });
+
+    function updateAppearance(value: Appearance) {
+        appearance.value = value;
+
+        // Store in localStorage for client-side persistence...
+        localStorage.setItem('appearance', value);
+
+        // Store in cookie for SSR...
+        setCookie('appearance', value);
+
+        updateTheme(value);
+    }
+
+    return {
+        appearance,
+        resolvedAppearance,
+        updateAppearance,
+    };
+}

resources/js/composables/useCurrentUrl.ts

@@ -0,0 +1,76 @@
+import type { InertiaLinkProps } from '@inertiajs/vue3';
+import { usePage } from '@inertiajs/vue3';
+import type { ComputedRef, DeepReadonly } from 'vue';
+import { computed, readonly } from 'vue';
+import { toUrl } from '@/lib/utils';
+
+export type UseCurrentUrlReturn = {
+    currentUrl: DeepReadonly<ComputedRef<string>>;
+    isCurrentUrl: (
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+        startsWith?: boolean,
+    ) => boolean;
+    isCurrentOrParentUrl: (
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+    ) => boolean;
+    whenCurrentUrl: <T, F = null>(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        ifTrue: T,
+        ifFalse?: F,
+    ) => T | F;
+};
+
+const page = usePage();
+const currentUrlReactive = computed(
+    () => new URL(page.url, window?.location.origin).pathname,
+);
+
+export function useCurrentUrl(): UseCurrentUrlReturn {
+    function isCurrentUrl(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+        startsWith: boolean = false,
+    ) {
+        const urlToCompare = currentUrl ?? currentUrlReactive.value;
+        const urlString = toUrl(urlToCheck);
+
+        const comparePath = (path: string): boolean =>
+            startsWith ? urlToCompare.startsWith(path) : path === urlToCompare;
+
+        if (!urlString.startsWith('http')) {
+            return comparePath(urlString);
+        }
+
+        try {
+            const absoluteUrl = new URL(urlString);
+
+            return comparePath(absoluteUrl.pathname);
+        } catch {
+            return false;
+        }
+    }
+
+    function isCurrentOrParentUrl(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+    ) {
+        return isCurrentUrl(urlToCheck, currentUrl, true);
+    }
+
+    function whenCurrentUrl(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        ifTrue: any,
+        ifFalse: any = null,
+    ) {
+        return isCurrentUrl(urlToCheck) ? ifTrue : ifFalse;
+    }
+
+    return {
+        currentUrl: readonly(currentUrlReactive),
+        isCurrentUrl,
+        isCurrentOrParentUrl,
+        whenCurrentUrl,
+    };
+}

resources/js/composables/useInitials.ts

@@ -0,0 +1,18 @@
+export type UseInitialsReturn = {
+    getInitials: (fullName?: string) => string;
+};
+
+export function getInitials(fullName?: string): string {
+    if (!fullName) return '';
+
+    const names = fullName.trim().split(' ');
+
+    if (names.length === 0) return '';
+    if (names.length === 1) return names[0].charAt(0).toUpperCase();
+
+    return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();
+}
+
+export function useInitials(): UseInitialsReturn {
+    return { getInitials };
+}

resources/js/composables/useTwoFactorAuth.ts

@@ -0,0 +1,120 @@
+import type { ComputedRef, Ref } from 'vue';
+import { computed, ref } from 'vue';
+import { qrCode, recoveryCodes, secretKey } from '@/routes/two-factor';
+
+export type UseTwoFactorAuthReturn = {
+    qrCodeSvg: Ref<string | null>;
+    manualSetupKey: Ref<string | null>;
+    recoveryCodesList: Ref<string[]>;
+    errors: Ref<string[]>;
+    hasSetupData: ComputedRef<boolean>;
+    clearSetupData: () => void;
+    clearErrors: () => void;
+    clearTwoFactorAuthData: () => void;
+    fetchQrCode: () => Promise<void>;
+    fetchSetupKey: () => Promise<void>;
+    fetchSetupData: () => Promise<void>;
+    fetchRecoveryCodes: () => Promise<void>;
+};
+
+const fetchJson = async <T>(url: string): Promise<T> => {
+    const response = await fetch(url, {
+        headers: { Accept: 'application/json' },
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch: ${response.status}`);
+    }
+
+    return response.json();
+};
+
+const errors = ref<string[]>([]);
+const manualSetupKey = ref<string | null>(null);
+const qrCodeSvg = ref<string | null>(null);
+const recoveryCodesList = ref<string[]>([]);
+
+const hasSetupData = computed<boolean>(
+    () => qrCodeSvg.value !== null && manualSetupKey.value !== null,
+);
+
+export const useTwoFactorAuth = (): UseTwoFactorAuthReturn => {
+    const fetchQrCode = async (): Promise<void> => {
+        try {
+            const { svg } = await fetchJson<{ svg: string; url: string }>(
+                qrCode.url(),
+            );
+
+            qrCodeSvg.value = svg;
+        } catch {
+            errors.value.push('Failed to fetch QR code');
+            qrCodeSvg.value = null;
+        }
+    };
+
+    const fetchSetupKey = async (): Promise<void> => {
+        try {
+            const { secretKey: key } = await fetchJson<{ secretKey: string }>(
+                secretKey.url(),
+            );
+
+            manualSetupKey.value = key;
+        } catch {
+            errors.value.push('Failed to fetch a setup key');
+            manualSetupKey.value = null;
+        }
+    };
+
+    const clearSetupData = (): void => {
+        manualSetupKey.value = null;
+        qrCodeSvg.value = null;
+        clearErrors();
+    };
+
+    const clearErrors = (): void => {
+        errors.value = [];
+    };
+
+    const clearTwoFactorAuthData = (): void => {
+        clearSetupData();
+        clearErrors();
+        recoveryCodesList.value = [];
+    };
+
+    const fetchRecoveryCodes = async (): Promise<void> => {
+        try {
+            clearErrors();
+            recoveryCodesList.value = await fetchJson<string[]>(
+                recoveryCodes.url(),
+            );
+        } catch {
+            errors.value.push('Failed to fetch recovery codes');
+            recoveryCodesList.value = [];
+        }
+    };
+
+    const fetchSetupData = async (): Promise<void> => {
+        try {
+            clearErrors();
+            await Promise.all([fetchQrCode(), fetchSetupKey()]);
+        } catch {
+            qrCodeSvg.value = null;
+            manualSetupKey.value = null;
+        }
+    };
+
+    return {
+        qrCodeSvg,
+        manualSetupKey,
+        recoveryCodesList,
+        errors,
+        hasSetupData,
+        clearSetupData,
+        clearErrors,
+        clearTwoFactorAuthData,
+        fetchQrCode,
+        fetchSetupKey,
+        fetchSetupData,
+        fetchRecoveryCodes,
+    };
+};