@wishbone-media/spark 0.8.5 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,6 +24,7 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/pro-regular-svg-icons": "^7.1.0",
     "@headlessui/vue": "^1.7.23",
+    "axios": "^1.6.0",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.0.0",
     "vue": "^3.5.24",

package/src/components/SparkModalContainer.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :show="sparkModalService.state.isVisible">
-    <Dialog class="relative z-50" @close="sparkModalService.hide">
+    <Dialog class="relative z-200" @close="sparkModalService.hide">
       <TransitionChild
           as="template"
           enter="ease-out duration-300"
@@ -24,7 +24,7 @@
               leave-from="opacity-100 translate-y-0 sm:scale-100"
               leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+            <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:min-w-lg sm:max-w-max">
               <!-- Render dynamic component -->
               <component
                   :is="sparkModalService.state.content"

package/src/plugins/fontawesome.js

@@ -36,6 +36,7 @@ import {
   faStreetView,
   faTimes,
   faXmark,
+  faSignOut,
 } from '@fortawesome/pro-regular-svg-icons'
 
 export const Icons = {
@@ -73,6 +74,7 @@ export const Icons = {
   farStreetView: faStreetView,
   farTimes: faTimes,
   farXmark: faXmark,
+  farSignOut: faSignOut,
 }
 
 export function addIcons(newIcons) {

package/src/plugins/index.js

@@ -1 +1,2 @@
-export { Icons, addIcons, setupFontAwesome } from './fontawesome.js'
+export { Icons, addIcons, setupFontAwesome } from './fontawesome.js'
+export { createAuthRoutes, setupAuthGuards } from './router.js'

package/src/plugins/router.js

@@ -0,0 +1,122 @@
+import { useSparkAuthStore } from '../stores/auth.js'
+import {
+  SparkLoginView,
+  SparkLogoutView,
+  SparkForgotPasswordView,
+  SparkResetPasswordView,
+} from '../views/index.js'
+
+export function createAuthRoutes(options = {}) {
+  const {
+    loginPath = '/login',
+    logoutPath = '/logout',
+    forgotPasswordPath = '/forgot-password',
+    resetPasswordPath = '/reset-password',
+    logo = '',
+    defaultRedirect = '/dashboard',
+  } = options
+
+  return [
+    {
+      path: loginPath,
+      name: 'login',
+      component: SparkLoginView,
+      props: { logo, defaultRedirect },
+      meta: { auth: false },
+    },
+    {
+      path: logoutPath,
+      name: 'logout',
+      component: SparkLogoutView,
+      props: { defaultRedirect: loginPath },
+      meta: { auth: false },
+    },
+    {
+      path: forgotPasswordPath,
+      name: 'forgot-password',
+      component: SparkForgotPasswordView,
+      props: { logo, loginRoute: loginPath },
+      meta: { auth: false },
+    },
+    {
+      path: resetPasswordPath,
+      name: 'reset-password',
+      component: SparkResetPasswordView,
+      props: { logo, loginRoute: loginPath },
+      meta: { auth: false },
+    },
+  ]
+}
+
+export function setupAuthGuards(router, options = {}) {
+  const { defaultAuthenticatedRoute = '/dashboard' } = options
+
+  router.beforeEach(async (to, _from, next) => {
+    // Access store inside the guard to ensure Pinia is initialized
+    const authStore = useSparkAuthStore()
+
+    // Wait for auth to be ready
+    if (!authStore.state.ready) {
+      await authStore.fetchUser()
+    }
+
+    processNavigation(to, next, authStore, defaultAuthenticatedRoute)
+  })
+}
+
+function processNavigation(to, next, authStore, defaultAuthenticatedRoute) {
+  const requiresAuth = to.meta.auth !== false
+  const isAuthenticated = authStore.check
+
+  // Handle unauthenticated users
+  if (!isAuthenticated) {
+    // Allow access to public routes (login, forgot-password, etc.)
+    if (!requiresAuth) {
+      if (to.path === '/logout') {
+        next({ path: authStore.state.routes.auth })
+        return
+      }
+      next()
+      return
+    }
+
+    // Redirect to login page with current path for protected routes
+    let redirect = to.fullPath
+
+    // Don't add redirect param if going to default route after login
+    if (redirect === '/' || redirect === '' || redirect === defaultAuthenticatedRoute) {
+      next({ path: authStore.state.routes.auth })
+      return
+    }
+
+    // Prevent double encoding
+    if (redirect.includes('%')) {
+      redirect = decodeURIComponent(redirect)
+    }
+    redirect = encodeURIComponent(redirect)
+
+    next({
+      path: authStore.state.routes.auth,
+      query: { redirect }
+    })
+    return
+  }
+
+  // Handle authenticated users
+  if (isAuthenticated) {
+    // Redirect away from public auth pages (login, logout, etc.) to default route
+    if (!requiresAuth && to.path === authStore.state.routes.auth) {
+      next({ path: defaultAuthenticatedRoute })
+      return
+    }
+
+    // Redirect root path to default route
+    if (to.path === '/') {
+      next({ path: defaultAuthenticatedRoute })
+      return
+    }
+
+    // Allow access to protected routes
+    next()
+  }
+}

package/src/stores/auth.js

@@ -0,0 +1,154 @@
+import { defineStore } from 'pinia'
+import { reactive, computed } from 'vue'
+import axios from 'axios'
+import { getCookie, setCookie, deleteCookie } from '../utils/cookies.js'
+
+const TOKEN_NAME = 'bolt-token'
+
+export const useSparkAuthStore = defineStore('auth', () => {
+  const state = reactive({
+    user: null,
+    token: null,
+    ready: false,
+    // Configurable endpoints
+    endpoints: {
+      login: '/login',
+      logout: '/logout',
+      fetch: '/user',
+      passwordEmail: '/password/email',
+      passwordReset: '/password/reset',
+    },
+    // Configurable routes
+    routes: {
+      auth: '/login',
+      forbidden: '/error/403',
+      notFound: '/error/404',
+    },
+    // Dev credentials for autofill (optional)
+    devCredentials: {
+      username: null,
+      password: null,
+    },
+    // Lifecycle callbacks (optional)
+    callbacks: {
+      onLoginSuccess: null,
+      onLoginError: null,
+      onLogoutSuccess: null,
+      onLogoutError: null,
+    },
+  })
+
+  // Initialize configuration
+  const initialize = (config = {}) => {
+    if (config.endpoints) {
+      Object.assign(state.endpoints, config.endpoints)
+    }
+    if (config.routes) {
+      Object.assign(state.routes, config.routes)
+    }
+    if (config.devCredentials) {
+      Object.assign(state.devCredentials, config.devCredentials)
+    }
+    if (config.callbacks) {
+      Object.assign(state.callbacks, config.callbacks)
+    }
+  }
+
+  // JWT Cookie Management
+  const setTokenCookie = (token) => {
+    setCookie(TOKEN_NAME, token)
+    state.token = token
+  }
+
+  const clearTokenCookie = () => {
+    deleteCookie(TOKEN_NAME)
+    state.token = null
+  }
+
+  const getTokenCookie = () => {
+    return getCookie(TOKEN_NAME)
+  }
+
+  // Auth Methods
+  const login = async (credentials) => {
+    const response = await axios.post(state.endpoints.login, credentials)
+
+    // Token is in Authorization header (raw token)
+    const token = response.headers.authorization
+
+    setTokenCookie(token)
+    state.user = response.data
+
+    // Call success callback if provided
+    if (state.callbacks.onLoginSuccess) {
+      await state.callbacks.onLoginSuccess(response.data)
+    }
+
+    return response.data
+  }
+
+  const logout = async () => {
+    try {
+      await axios.post(
+        state.endpoints.logout,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${state.token}`,
+          },
+        },
+      )
+
+      // Call success callback if provided
+      if (state.callbacks.onLogoutSuccess) {
+        await state.callbacks.onLogoutSuccess()
+      }
+    } catch (error) {
+      // Call error callback if provided
+      if (state.callbacks.onLogoutError) {
+        await state.callbacks.onLogoutError(error)
+      }
+      throw error
+    } finally {
+      clearTokenCookie()
+      state.user = null
+    }
+  }
+
+  const fetchUser = async () => {
+    const token = getTokenCookie()
+    if (!token) {
+      state.ready = true
+      return null
+    }
+
+    try {
+      const { data } = await axios.get(state.endpoints.fetch, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      state.user = data
+      state.token = token
+    } catch (error) {
+      clearTokenCookie()
+    } finally {
+      state.ready = true
+    }
+  }
+
+  const check = computed(() => !!state.token && !!state.user)
+
+  return {
+    state,
+    initialize,
+    login,
+    logout,
+    fetchUser,
+    check,
+    setTokenCookie,
+    clearTokenCookie,
+    getTokenCookie,
+  }
+})

package/src/stores/index.js

@@ -1,3 +1,4 @@
 export * from './app.js'
+export * from './auth.js'
 export * from './brand-filter.js'
 export * from './navigation.js'

package/src/stores/navigation.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
-import { reactive } from 'vue'
-import { useRouter } from 'vue-router'
+import { reactive, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 
 export const useSparkNavStore = defineStore('sparkNav', () => {
   const state = reactive({
@@ -10,6 +10,7 @@ export const useSparkNavStore = defineStore('sparkNav', () => {
   })
 
   const router = useRouter()
+  const route = useRoute()
 
   const initialize = (menuConfig = []) => {
     state.menu = menuConfig
@@ -28,24 +29,15 @@ export const useSparkNavStore = defineStore('sparkNav', () => {
 
   const goto = async (route) => {
     if (route) {
-      const updateMenuItemCurrent = (items) => {
-        items.forEach((item) => {
-          item.current = item.href === route
-          if (item.children) {
-            updateMenuItemCurrent(item.children)
-          }
-        })
-      }
-
-      updateMenuItemCurrent(state.menu)
-
       const menuItem = findMenuItemByRoute(state.menu, route)
 
+      // If menu item has a custom action, execute it instead of navigating
       if (menuItem && typeof menuItem.action === 'function') {
         menuItem.action()
         return
       }
 
+      // Navigate to route - the route watcher will update "current" state automatically
       await router.push(route)
     }
   }
@@ -58,11 +50,36 @@ export const useSparkNavStore = defineStore('sparkNav', () => {
     state.hidden = !state.hidden
   }
 
+  const syncWithRoute = () => {
+    const routeName = route.name || route.path.replace('/', '')
+    if (routeName) {
+      const updateMenuItemCurrent = (items) => {
+        items.forEach((item) => {
+          item.current = item.href === routeName
+          if (item.children) {
+            updateMenuItemCurrent(item.children)
+          }
+        })
+      }
+      updateMenuItemCurrent(state.menu)
+    }
+  }
+
+  // Watch route changes and sync navigation state
+  watch(
+    () => route.path,
+    () => {
+      syncWithRoute()
+    },
+    { immediate: true }
+  )
+
   return {
     state,
     initialize,
     goto,
     toggleCollapsed,
     toggleHidden,
+    syncWithRoute,
   }
 })

package/src/utils/cookies.js

@@ -0,0 +1,51 @@
+export const getCookie = (name) => {
+  const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`))
+  return match ? match[2] : null
+}
+
+export const setCookie = (name, value, options = {}) => {
+  const {
+    maxAge = 31536000, // 365 days in seconds
+    domain = getDomain(),
+    secure = import.meta.env.PROD,
+    sameSite = 'Lax',
+    path = '/',
+  } = options
+
+  let cookie = `${name}=${value}; max-age=${maxAge}; path=${path}; samesite=${sameSite}`
+
+  if (domain) {
+    cookie += `; domain=${domain}`
+  }
+
+  if (secure) {
+    cookie += '; secure'
+  }
+
+  document.cookie = cookie
+}
+
+export const deleteCookie = (name, options = {}) => {
+  const { domain = getDomain(), path = '/' } = options
+
+  let cookie = `${name}=; max-age=0; path=${path}`
+
+  if (domain) {
+    cookie += `; domain=${domain}`
+  }
+
+  document.cookie = cookie
+}
+
+export const getDomain = () => {
+  // For PRODUCTION: returns .letsbolt.com.au
+  // For STAGING: returns .ENV.letsbolt.io
+  // For DEV: returns .letsbolt.test
+  let reserveSlices = -3
+
+  if (window.location.hostname.endsWith('.test')) {
+    reserveSlices = -2
+  }
+
+  return window.location.hostname.split('.').slice(reserveSlices).join('.')
+}

package/src/views/SparkForgotPasswordView.vue

@@ -1,75 +1,105 @@
 <template>
   <div class="h-full grid place-content-center relative">
     <div class="absolute top-8 left-8">
+      <img v-if="props.logo" :src="props.logo" alt="Logo" class="h-[23px] w-auto" />
       <svg
-          width="59"
-          height="23"
-          viewBox="0 0 59 23"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
+        v-else
+        width="59"
+        height="23"
+        viewBox="0 0 59 23"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <path
-            d="M49.2029 17.1264V8.03835H44.0829V5.22235H58.0989V8.03835H52.9629V17.1264H49.2029Z"
-            fill="#1C64F2"
+          d="M49.2029 17.1264V8.03835H44.0829V5.22235H58.0989V8.03835H52.9629V17.1264H49.2029Z"
+          fill="#1C64F2"
         />
         <path d="M34.5 5.22235H38.228V14.1664H46.5V17.1264H34.5V5.22235Z" fill="#1C64F2" />
         <path
-            d="M28.3161 0C29.1499 0 29.7522 0.798785 29.5209 1.59757L27.1856 9.77748H30.9046C31.747 9.77748 32.4279 10.4584 32.4279 11.3008C32.4279 11.7504 32.2315 12.1738 31.891 12.4619L20.5989 22.0517C20.3719 22.2438 20.0839 22.3485 19.787 22.3485C18.9533 22.3485 18.351 21.5497 18.5823 20.751L20.9176 12.571H17.1463C16.33 12.571 15.6709 11.9119 15.6709 11.1001C15.6709 10.6679 15.8586 10.262 16.186 9.98263L27.5043 0.301181C27.7312 0.104759 28.0193 0 28.3161 0ZM26.7404 3.71021L18.8311 10.4759H22.3056C22.633 10.4759 22.9429 10.6286 23.1437 10.8905C23.3445 11.1524 23.4056 11.4929 23.3139 11.8072L21.3584 18.6601L29.355 11.8727H25.7976C25.4702 11.8727 25.1603 11.7199 24.9595 11.458C24.7587 11.1961 24.6976 10.8556 24.7893 10.5413L26.7404 3.71021Z"
-            fill="#1C64F2"
+          d="M28.3161 0C29.1499 0 29.7522 0.798785 29.5209 1.59757L27.1856 9.77748H30.9046C31.747 9.77748 32.4279 10.4584 32.4279 11.3008C32.4279 11.7504 32.2315 12.1738 31.891 12.4619L20.5989 22.0517C20.3719 22.2438 20.0839 22.3485 19.787 22.3485C18.9533 22.3485 18.351 21.5497 18.5823 20.751L20.9176 12.571H17.1463C16.33 12.571 15.6709 11.9119 15.6709 11.1001C15.6709 10.6679 15.8586 10.262 16.186 9.98263L27.5043 0.301181C27.7312 0.104759 28.0193 0 28.3161 0ZM26.7404 3.71021L18.8311 10.4759H22.3056C22.633 10.4759 22.9429 10.6286 23.1437 10.8905C23.3445 11.1524 23.4056 11.4929 23.3139 11.8072L21.3584 18.6601L29.355 11.8727H25.7976C25.4702 11.8727 25.1603 11.7199 24.9595 11.458C24.7587 11.1961 24.6976 10.8556 24.7893 10.5413L26.7404 3.71021Z"
+          fill="#1C64F2"
         />
         <path
-            d="M0 17.1264V5.22235H10.192C13.6 5.22235 14.544 6.53435 14.544 7.94235V8.16635C14.544 9.70235 13.232 10.3264 12.656 10.4864C13.472 10.6944 15.216 11.3984 15.216 13.4784V13.7024C15.216 15.5904 14.144 17.1264 10.288 17.1264H0ZM9.552 7.73435H3.728V9.67035H9.552C10.592 9.67035 10.848 9.19035 10.848 8.71035V8.67835C10.848 8.18235 10.592 7.73435 9.552 7.73435ZM9.872 12.1984H3.728V14.5344H9.872C11.12 14.5344 11.344 13.8464 11.344 13.3664V13.3024C11.344 12.7904 11.104 12.1984 9.872 12.1984Z"
-            fill="#1C64F2"
+          d="M0 17.1264V5.22235H10.192C13.6 5.22235 14.544 6.53435 14.544 7.94235V8.16635C14.544 9.70235 13.232 10.3264 12.656 10.4864C13.472 10.6944 15.216 11.3984 15.216 13.4784V13.7024C15.216 15.5904 14.144 17.1264 10.288 17.1264H0ZM9.552 7.73435H3.728V9.67035H9.552C10.592 9.67035 10.848 9.19035 10.848 8.71035V8.67835C10.848 8.18235 10.592 7.73435 9.552 7.73435ZM9.872 12.1984H3.728V14.5344H9.872C11.12 14.5344 11.344 13.8464 11.344 13.3664V13.3024C11.344 12.7904 11.104 12.1984 9.872 12.1984Z"
+          fill="#1C64F2"
         />
       </svg>
     </div>
 
     <div class="max-w-sm grid gap-y-1 -mt-8">
       <div class="mb-7">
-        <h1 class="text-4xl text-gray-900 semibold tracking-tight mb-3">Log in</h1>
+        <h1 class="text-4xl text-gray-900 semibold tracking-tight mb-3">Reset password</h1>
 
         <p class="text-gray-600">
-          Welcome back{{ appStore.state.app ? ` to ${appStore.state.app}` : '' }}! Please enter
-          your details.
+          Enter your email and we'll send you a link to reset your password.
         </p>
       </div>
 
-      <FormKit type="form" @submit="handleLogin" :actions="false">
+      <FormKit type="form" @submit="handleSubmit" :actions="false">
         <FormKit
-            label="Email"
-            name="email"
-            placeholder="Enter your email"
-            type="email"
-            validation="required|email"
-            outer-class="max-w-full"
+          label="Email"
+          name="email"
+          placeholder="Enter your email"
+          type="email"
+          validation="required|email"
+          outer-class="max-w-full"
         />
 
-        <FormKit
-            label="Password"
-            name="password"
-            placeholder="••••••••"
-            type="password"
-            validation="required"
-            outer-class="max-w-full"
-        />
-
-        <div class="grid grid-flow-col justify-between my-1">
-          <FormKit label="Remember me" name="remember" type="checkbox" />
-        </div>
-
         <div v-if="errorMessage" class="text-red-600 text-sm mb-2">
           {{ errorMessage }}
         </div>
 
+        <div v-if="successMessage" class="text-green-600 text-sm mb-2">
+          {{ successMessage }}
+        </div>
+
         <spark-button type="submit" size="xl" :disabled="isLoading" button-class="w-full mb-2">
-          <span v-if="!isLoading">Sign in</span>
-          <span v-else>Signing in...</span>
+          <span v-if="!isLoading">Send reset link</span>
+          <span v-else>Sending...</span>
         </spark-button>
+
+        <router-link :to="props.loginRoute" class="text-sm text-center text-primary-600 font-semibold block">
+          Back to login
+        </router-link>
       </FormKit>
     </div>
   </div>
 </template>
 
 <script setup>
-import { SparkButton } from '@/index.js'
+import { ref } from 'vue'
+import axios from 'axios'
+import { SparkButton, useSparkAuthStore } from '@/index.js'
+
+const authStore = useSparkAuthStore()
+
+const props = defineProps({
+  logo: {
+    type: String,
+    default: '',
+  },
+  loginRoute: {
+    type: String,
+    default: '/login',
+  },
+})
+
+const isLoading = ref(false)
+const errorMessage = ref('')
+const successMessage = ref('')
+
+const handleSubmit = async ({ email }) => {
+  isLoading.value = true
+  errorMessage.value = ''
+  successMessage.value = ''
+
+  try {
+    await axios.post(authStore.state.endpoints.passwordEmail, { email })
+    successMessage.value = 'Password reset link sent! Check your email.'
+  } catch (error) {
+    errorMessage.value = error.response?.data?.message || 'Failed to send reset link.'
+  } finally {
+    isLoading.value = false
+  }
+}
 </script>