@userfrosting/sprinkle-core 6.0.0-alpha.5 → 6.0.0-alpha.6

package/app/assets/composables/index.ts

@@ -1,2 +1,3 @@
-export { useSprunjer } from './sprunjer'
+export { useSprunjer } from './useSprunjer'
 export { useCsrf } from './useCsrf'
+export { useAxiosInterceptor } from './useAxiosInterceptor'

package/app/assets/composables/useAxiosInterceptor.ts

@@ -0,0 +1,30 @@
+import axios from 'axios'
+import { useAlertsStore } from '../stores/useAlertsStore'
+import { Severity } from '../interfaces'
+
+/**
+ * Axios Error Handler
+ *
+ * This composable sets up an Axios interceptor to handle errors globally using
+ * the Alerts store. It sends the error to the Alerts store, unless it's a 401
+ * error.
+ *
+ * @see https://axios-http.com/docs/interceptors
+ */
+export const useAxiosInterceptor = () => {
+    axios.interceptors.response.use(
+        (response) => response,
+        (error) => {
+            if (error.response.status !== 401) {
+                const alertStore = useAlertsStore()
+                alertStore.push({
+                    title: error.response.data.title ?? error.response?.statusText,
+                    description: error.response?.data?.description ?? error.message,
+                    style: Severity.Danger
+                })
+            }
+
+            return Promise.reject(error)
+        }
+    )
+}

package/app/assets/composables/useCsrf.ts

@@ -34,6 +34,14 @@ export const useCsrf = () => {
         axios.defaults.headers.patch[key_value.value] = token.value
     }
 
+    /**
+     * Fetch the CSRF token from the server
+     */
+    async function fetchCsrfToken() {
+        const response = await axios.get('/api/csrf')
+        updateFromHeaders(response.headers)
+    }
+
     /**
      * Get the CSRF token name and value keys from config.
      */
@@ -115,6 +123,7 @@ export const useCsrf = () => {
         name,
         token,
         isEnabled,
-        updateFromHeaders
+        updateFromHeaders,
+        fetchCsrfToken
     }
 }

package/app/assets/composables/{sprunjer.ts → useSprunjer.ts}

@@ -33,7 +33,13 @@
  */
 import { ref, toValue, watchEffect, computed } from 'vue'
 import axios from 'axios'
-import type { AssociativeArray, Sprunjer, SprunjerData, SprunjerResponse } from '../interfaces'
+import type {
+    ApiErrorResponse,
+    AssociativeArray,
+    Sprunjer,
+    SprunjerData,
+    SprunjerResponse
+} from '../interfaces'
 
 export const useSprunjer = (
     dataUrl: string | (() => string),
@@ -60,6 +66,7 @@ export const useSprunjer = (
 
     // State
     const loading = ref<boolean>(false)
+    const error = ref<ApiErrorResponse | null>(null)
 
     /**
      * Api fetch function
@@ -87,8 +94,7 @@ export const useSprunjer = (
                 data.value.filterable = response.data.filterable ?? []
             })
             .catch((err) => {
-                // TODO : User toast alert, or export alert
-                console.error(err)
+                error.value = err.response.data as ApiErrorResponse
             })
             .finally(() => {
                 loading.value = false
@@ -169,6 +175,7 @@ export const useSprunjer = (
         data,
         fetch,
         loading,
+        error,
         downloadCsv,
         totalPages,
         countFiltered,

package/app/assets/index.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 import { useConfigStore, useTranslator } from './stores'
 import { useCsrf } from './composables/useCsrf'
+import { useAxiosInterceptor } from './composables'
 
 /**
  * Core Sprinkle initialization recipe.
@@ -11,6 +12,13 @@ import { useCsrf } from './composables/useCsrf'
  */
 export default {
     install: (app: App) => {
+        /**
+         * Add Axios error handler.
+         * Load first to ensure that all axios requests are intercepted.
+         * This is important for the config loading and translator loading.
+         */
+        useAxiosInterceptor()
+
         /**
          * Load configuration
          */

package/app/assets/interfaces/ApiResponse.ts

@@ -4,5 +4,12 @@
  * Generic API Response interface.
  */
 export interface ApiResponse {
-    message: string
+    title: string
+    description?: string
+}
+
+export interface ApiErrorResponse {
+    title: string
+    description: string
+    status: number
 }

package/app/assets/interfaces/index.ts

@@ -27,4 +27,4 @@ export type { SprunjerRequest, SprunjerResponse } from './sprunjerApi'
 export type { DictionaryResponse, DictionaryEntries, DictionaryConfig } from './DictionaryApi'
 
 // Misc
-export type { ApiResponse } from './ApiResponse'
+export type { ApiResponse, ApiErrorResponse } from './ApiResponse'

package/app/assets/interfaces/sprunjer.ts

@@ -4,7 +4,7 @@
  * Represents the interface for the Sprunjer composable.
  */
 import type { Ref, ComputedRef } from 'vue'
-import type { AssociativeArray } from '.'
+import type { ApiErrorResponse, AssociativeArray } from '.'
 
 export interface Sprunjer {
     dataUrl: string | (() => string)
@@ -15,6 +15,7 @@ export interface Sprunjer {
     data: Ref<SprunjerData>
     fetch: () => void
     loading: Ref<boolean>
+    error: Ref<ApiErrorResponse | null>
     totalPages: ComputedRef<number>
     downloadCsv: () => void
     countFiltered: ComputedRef<number>

package/app/assets/routes/index.ts

@@ -12,7 +12,7 @@ export default [
             title: 'ERROR.404.TITLE',
             description: 'ERROR.404.DESCRIPTION'
         },
-        component: () => import('../views/404NotFound.vue')
+        component: () => import('../views/Page404NotFound.vue')
     },
     {
         path: '/:pathMatch(.*)*',
@@ -21,7 +21,7 @@ export default [
             title: 'ERROR.401.TITLE',
             description: 'ERROR.401.DESCRIPTION'
         },
-        component: () => import('../views/401Unauthorized.vue')
+        component: () => import('../views/Page401Unauthorized.vue')
     },
     {
         path: '/:pathMatch(.*)*',
@@ -30,7 +30,7 @@ export default [
             title: 'ERROR.403.TITLE',
             description: 'ERROR.403.DESCRIPTION'
         },
-        component: () => import('../views/403Forbidden.vue')
+        component: () => import('../views/Page403Forbidden.vue')
     },
     {
         path: '/:pathMatch(.*)*',
@@ -39,6 +39,6 @@ export default [
             title: 'ERROR.TITLE',
             description: 'ERROR.DESCRIPTION'
         },
-        component: () => import('../views/ErrorPage.vue')
+        component: () => import('../views/PageError.vue')
     }
 ]

package/app/assets/stores/index.ts

@@ -1,3 +1,4 @@
-export { useConfigStore } from './config'
+export { useConfigStore } from './useConfigStore'
 export { usePageMeta } from './usePageMeta'
 export { useTranslator } from './useTranslator'
+export { useAlertsStore } from './useAlertsStore'

package/app/assets/stores/useAlertsStore.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import type { AlertInterface } from '../interfaces'
+
+/**
+ * Alerts Store
+ *
+ * Manages application alerts in a reactive store. Templates can use this
+ * store to display alerts to users, including errors, warnings,
+ * informational, or success messages. When an alert is added, templates
+ * should automatically update the interface to reflect the change.
+ */
+export const useAlertsStore = defineStore('alerts', {
+    state: () => ({
+        alerts: [] as AlertInterface[]
+    }),
+    actions: {
+        push(alert: AlertInterface) {
+            this.alerts.push(alert)
+        },
+        pop() {
+            return this.alerts.pop()
+        },
+        shift() {
+            return this.alerts.shift()
+        },
+        clear() {
+            this.alerts = []
+        }
+    }
+})

package/app/assets/tests/composables/useCsrf.test.ts

@@ -1,11 +1,11 @@
 import { describe, expect, beforeEach, afterEach, test, vi } from 'vitest'
 import axios from 'axios'
-import { useConfigStore } from '../../stores/config'
+import { useConfigStore } from '../../stores/useConfigStore'
 import { useCsrf } from '../../composables/useCsrf'
 import { nextTick } from 'vue'
 
 // Mock the config store
-vi.mock('../../stores/config')
+vi.mock('../../stores/useConfigStore')
 const mockUseConfigStore = {
     get: vi.fn()
 }

package/app/assets/tests/plugin.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, test, vi } from 'vitest'
 import { createApp } from 'vue'
-import { useConfigStore } from '../stores/config'
+import { useConfigStore } from '../stores/useConfigStore'
 import plugin from '..'
-import * as Config from '../stores/config'
+import * as Config from '../stores/useConfigStore'
 import * as Translator from '../stores/useTranslator'
 
 const mockConfigStore = {

package/app/assets/tests/stores/config.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, beforeEach, test, vi } from 'vitest'
 import { setActivePinia, createPinia } from 'pinia'
 import axios from 'axios'
-import { useConfigStore } from '../../stores/config'
+import { useConfigStore } from '../../stores/useConfigStore'
 
 const testConfig = {
     name: 'Test Config',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@userfrosting/sprinkle-core",
-    "version": "6.0.0-alpha.5",
+    "version": "6.0.0-alpha.6",
     "type": "module",
     "description": "Core Sprinkle for UserFrosting",
     "funding": "https://opencollective.com/userfrosting",
@@ -59,7 +59,7 @@
         "happy-dom": "^15.11.6",
         "less": "^4.2.0",
         "npm-run-all2": "^6.1.2",
-        "prettier": "^3.2.5",
+        "prettier": "^3.6.2",
         "vite": "^6.2",
         "vite-plugin-dts": "^4.0.0",
         "vitest": "^3.1.1",