create-nara 1.0.44 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nara",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "CLI to scaffold NARA projects",
   "type": "module",
   "bin": {

package/templates/svelte/resources/js/components/Header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { fly, fade } from 'svelte/transition';
   import { page, router, inertia } from '@inertiajs/svelte';
-  import { clickOutside, Toast } from '../components/helper';
+  import { clickOutside, apiFetch } from '../components/helper';
   import DarkModeToggle from '../components/DarkModeToggle.svelte';
 
   interface User {
@@ -35,22 +35,12 @@
   $: visibleMenuLinks = menuLinks.filter((item) => item.show);
 
   async function handleLogout(): Promise<void> {
-    try {
-      const response = await fetch('/api/auth/logout', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' }
-      });
-      const result = await response.json();
+    const result = await apiFetch('/api/auth/logout', {
+      method: 'POST'
+    });
 
-      if (result.success) {
-        Toast(result.message || 'Logged out successfully', 'success');
-        router.visit(result.data?.redirect || '/login');
-      } else {
-        Toast(result.message || 'Logout failed', 'error');
-      }
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : 'Network error';
-      Toast(errorMessage, 'error');
+    if (result.success || result.redirected) {
+      router.visit(result.redirectUrl || '/login');
     }
   }
 </script>

package/templates/svelte/resources/js/components/helper.ts

@@ -68,6 +68,18 @@ interface ApiOptions {
   showErrorToast?: boolean;
 }
 
+/**
+ * Fetch API response type
+ */
+export interface FetchApiResponse<T = unknown> {
+  success: boolean;
+  data?: T;
+  message: string;
+  redirected?: boolean;
+  redirectUrl?: string;
+  errors?: Record<string, string[]>;
+}
+
 /** 
  * Creates a click outside event listener for a DOM node
  */
@@ -252,6 +264,138 @@ export async function api<T = unknown>(
   }
 }
 
+/**
+ * Reusable fetch API helper that handles JSON responses, redirects, and errors
+ *
+ * @param url - The URL to fetch
+ * @param options - Fetch options (method, body, headers, etc.)
+ * @param apiOptions - API options for toast notifications
+ * @returns FetchApiResponse with success, data, message, and redirect info
+ *
+ * @example
+ * // POST request with JSON body
+ * const result = await apiFetch('/api/auth/logout', { method: 'POST' });
+ * if (result.success || result.redirected) {
+ *   router.visit(result.redirectUrl || '/login');
+ * }
+ *
+ * @example
+ * // POST request with body
+ * const result = await apiFetch('/api/auth/login', {
+ *   method: 'POST',
+ *   body: JSON.stringify({ email, password })
+ * });
+ */
+export async function apiFetch<T = unknown>(
+  url: string,
+  options: RequestInit = {},
+  apiOptions: ApiOptions = {}
+): Promise<FetchApiResponse<T>> {
+  const { showSuccessToast = true, showErrorToast = true } = apiOptions;
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+    });
+
+    // Check if the response was a redirect (fetch follows redirects automatically)
+    // We detect this by checking if the final URL is different from the requested URL
+    // or if the URL matches common redirect targets
+    const isRedirected = response.redirected;
+    const finalUrl = response.url;
+
+    // Handle non-JSON responses (redirects, HTML error pages)
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      // If redirected to a success page, treat as success
+      if (isRedirected || finalUrl.endsWith('/dashboard') || finalUrl.endsWith('/login')) {
+        const successMsg = finalUrl.includes('login') ? 'Logged out successfully' : 'Success';
+        if (showSuccessToast) {
+          Toast(successMsg, 'success');
+        }
+        return {
+          success: true,
+          message: successMsg,
+          redirected: true,
+          redirectUrl: finalUrl,
+        };
+      }
+
+      // Handle error status codes
+      if (!response.ok) {
+        const errorMsg = getHttpErrorMessage(response.status, response.statusText);
+        if (showErrorToast) {
+          Toast(errorMsg, 'error');
+        }
+        return {
+          success: false,
+          message: errorMsg,
+        };
+      }
+
+      // Unknown non-JSON response
+      return {
+        success: true,
+        message: 'Success',
+        redirected: isRedirected,
+        redirectUrl: finalUrl,
+      };
+    }
+
+    // Parse JSON response
+    const result = await response.json() as ApiResponse<T>;
+
+    if (result.success) {
+      if (showSuccessToast && result.message) {
+        Toast(result.message, 'success');
+      }
+      return {
+        success: true,
+        message: result.message,
+        data: result.data,
+        redirected: isRedirected,
+        redirectUrl: finalUrl,
+      };
+    } else {
+      if (showErrorToast) {
+        const errorMsg = result.errors
+          ? formatValidationErrors(result.errors) || result.message
+          : result.message;
+        if (errorMsg) Toast(errorMsg, 'error');
+      }
+      return {
+        success: false,
+        message: result.message,
+        errors: result.errors,
+      };
+    }
+  } catch (err: unknown) {
+    // Network or parsing error
+    let errorMessage: string;
+
+    if (err instanceof SyntaxError) {
+      errorMessage = 'Server returned an invalid response. Please try again.';
+    } else if (err instanceof TypeError && (err.message.includes('fetch') || err.message.includes('network'))) {
+      errorMessage = 'Unable to connect to server. Please check your connection.';
+    } else {
+      errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred.';
+    }
+
+    if (showErrorToast) {
+      Toast(errorMessage, 'error');
+    }
+
+    return {
+      success: false,
+      message: errorMessage,
+    };
+  }
+}
+
 type ToastType = 'success' | 'error' | 'warning' | 'info';
 
 /**

package/templates/svelte/resources/js/pages/auth/login.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { inertia, router } from '@inertiajs/svelte'
-  import { Toast } from '../../components/helper';
+  import { apiFetch, Toast } from '../../components/helper';
   import NaraIcon from '../../components/NaraIcon.svelte';
   import { fade, fly } from 'svelte/transition';
 
@@ -28,63 +28,15 @@
 
   async function submitForm(): Promise<void> {
     loading = true;
-    try {
-      const response = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: form.email, password: form.password })
-      });
-
-      // Check if login was successful via redirect (backend returns 302 on success)
-      // fetch follows redirects automatically, so we check if we ended up at dashboard
-      if (response.redirected || response.url.endsWith('/dashboard')) {
-        Toast('Login successful', 'success');
-        router.visit('/dashboard');
-        return;
-      }
-
-      // Handle non-JSON responses (server errors returning HTML)
-      const contentType = response.headers.get('content-type');
-      if (!contentType || !contentType.includes('application/json')) {
-        const statusMessages: Record<number, string> = {
-          401: 'Invalid email or password.',
-          403: 'Access denied.',
-          404: 'Login service not available.',
-          500: 'Server error. Please try again later.',
-          502: 'Server is temporarily unavailable.',
-          503: 'Service unavailable. Please try again later.',
-        };
-        Toast(statusMessages[response.status] || `Server error (${response.status})`, 'error');
-        return;
-      }
-
-      const result = await response.json();
-
-      if (result.success) {
-        Toast(result.message || 'Login successful', 'success');
-        router.visit(result.data?.redirect || '/dashboard');
-      } else {
-        // Handle validation errors
-        if (result.errors) {
-          const errorMessages = Object.values(result.errors).flat() as string[];
-          Toast(errorMessages[0] || result.message || 'Invalid email or password.', 'error');
-        } else {
-          Toast(result.message || 'Invalid email or password.', 'error');
-        }
-      }
-    } catch (err: unknown) {
-      // Network or parsing error
-      if (err instanceof SyntaxError) {
-        Toast('Server returned an invalid response. Please try again.', 'error');
-      } else if (err instanceof TypeError && (err.message.includes('fetch') || err.message.includes('network'))) {
-        Toast('Unable to connect to server. Please check your connection.', 'error');
-      } else {
-        const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred.';
-        Toast(errorMessage, 'error');
-      }
-    } finally {
-      loading = false;
+    const result = await apiFetch('/api/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email: form.email, password: form.password })
+    });
+
+    if (result.success || result.redirected) {
+      router.visit(result.redirectUrl || '/dashboard');
     }
+    loading = false;
   }
 </script>