Register $checkAccess globally

Author: lcharette

packages/skeleton/env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="vite/client" />
 /// <reference types="@userfrosting/sprinkle-core" />
+/// <reference types="@userfrosting/sprinkle-account" />
 /// <reference types="@userfrosting/theme-pink-cupcake/components" />
+
 /**
  * This is required for webpack to correctly import vue file when using TypeScript.
  */ 

packages/sprinkle-account/app/assets/index.d.ts

@@ -0,0 +1,7 @@
+export {}
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $checkAccess: (slug: string) => Boolean
+    }
+}

packages/sprinkle-account/app/assets/index.ts

@@ -3,15 +3,29 @@ import type { Router } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { useAuthGuard } from './guards/authGuard'
 
-/* Install plugins */
+/**
+ * Account Sprinkle initialization recipe.
+ *
+ * This recipe is responsible for running the auth check on load, setting up
+ * the router guards and registering the checkAccess as a global properties.
+ */
 export default {
     install: (app: App, options: { router: Router }) => {
-        // Run auth check on load
+        /**
+         * Run auth check on load
+         */
         const auth = useAuthStore()
         auth.check()
 
-        // Setup router guards
+        /**
+         * Setup router guards
+         */
         const { router } = options
         useAuthGuard(router)
+
+        /**
+         * Register checkAccess as a global property
+         */
+        app.config.globalProperties.$checkAccess = auth.checkAccess
     }
 }

packages/sprinkle-admin/app/assets/index.ts

@@ -1,4 +1,6 @@
-/* Install plugins */
+/**
+ * Admin Sprinkle initialization recipe.
+ */
 export default {
     install: () => {}
 }

packages/sprinkle-admin/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="@userfrosting/sprinkle-core" />
+/// <reference types="@userfrosting/sprinkle-account" />
 
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

packages/sprinkle-core/app/assets/index.d.ts

@@ -2,7 +2,6 @@ export {}
 
 declare module 'vue' {
     interface ComponentCustomProperties {
-        // TODO : Use interface from sprinkle-core
         $t: (key: string, placeholders?: string | number | object) => string
         $tdate: (date: string, format?: string | object) => string
     }

packages/sprinkle-core/app/assets/index.ts

@@ -4,16 +4,23 @@ import { useConfigStore, useTranslator } from './stores'
 /**
  * Core Sprinkle initialization recipe.
  *
- * This recipe is responsible for loading the configuration from the api.
+ * This recipe is responsible for loading the configuration from the api,
+ * loading the translations and register the translator as $t and $tdate global
+ * properties.
  */
 export default {
     install: (app: App) => {
+        /**
+         * Load configuration
+         */
         useConfigStore().load()
 
-        // Load translations & add $t to global properties
-        const { translate, translateDate, load } = useTranslator()
-        load()
-        app.config.globalProperties.$t = translate
-        app.config.globalProperties.$tdate = translateDate
+        /**
+         * Load translations & add $t+$tdate to global properties
+         */
+        const translator = useTranslator()
+        translator.load()
+        app.config.globalProperties.$t = translator.translate
+        app.config.globalProperties.$tdate = translator.translateDate
     }
 }

packages/theme-pink-cupcake/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="vite/client" />
 /// <reference types="@userfrosting/sprinkle-core" />
+/// <reference types="@userfrosting/sprinkle-account" />
 
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

packages/theme-pink-cupcake/src/index.ts

@@ -1,24 +1,33 @@
 import type { App } from 'vue'
 
-// Import sub-plugins
+/**
+ * Import sub-plugins.
+ */
 import PinkCupcakeComponents from './plugins/components'
 import AdminSprinkle from './plugins/admin'
 import AccountSprinkle from './plugins/account'
 import CoreSprinkle from './plugins/core'
 import FontAwesome from './plugins/font-awesome'
 
-// Init UIkit
+/**
+ * Import UIkit and its icons.
+ */
 import UIkit from 'uikit'
 import Icons from 'uikit/dist/js/uikit-icons'
 UIkit.use(Icons)
 
-/* Install plugins */
+/**
+ * Pink Cupcake Theme initialization recipe.
+ *
+ * This recipe is responsible for loading the Pink Cupcake, Admin, Account and
+ * Core sprinkle plugins. It also load the FontAwesome icons.
+ */
 export default {
     install: (app: App) => {
         app.use(PinkCupcakeComponents)
         app.use(AdminSprinkle) // TODO : Add option to disable this or load on demand
         app.use(AccountSprinkle) // TODO : Add option to disable this or load on demand
-        app.use(CoreSprinkle) 
+        app.use(CoreSprinkle)
         app.use(FontAwesome)
     }
 }