@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/stores/auth.js

@@ -1,12 +1,22 @@
-import { writable } from "svelte/store";
+import { writable, get, derived } from "svelte/store";
+import { jwtDecode } from "jwt-decode";
 
 // Store to manage authentication state
 export const auth = writable({
   isAuthenticated: false,
   token: null,
+  refreshToken: null,
   userDetails: null, // To store email and first name
+  tokenExpiry: null, // Token expiration timestamp
+  permissions: null, // RBAC permissions
+  context: null, // User context (performer)
 });
 
+// Derived store for checking if user has performer permissions
+export const isPerformer = derived(auth, ($auth) =>
+  $auth.context?.contextType === 'performer' || $auth.isAuthenticated
+);
+
 // Function to set authentication state
 export const setAuthState = (state) => {
   auth.set(state);
@@ -14,23 +24,100 @@ export const setAuthState = (state) => {
 
 // Function to clear the authentication state
 export const clearAuthState = () => {
-  auth.set({ isAuthenticated: false, token: null, userDetails: null });
+  auth.set({
+    isAuthenticated: false,
+    token: null,
+    refreshToken: null,
+    userDetails: null,
+    tokenExpiry: null,
+    permissions: null,
+    context: null,
+  });
 };
 
-// Initialize the store from cookies
-export const initializeAuthState = () => {
-  const cookies = Object.fromEntries(
+// Parse cookies helper
+const parseCookies = () => {
+  if (typeof document === "undefined") return {};
+  return Object.fromEntries(
     document.cookie
       .split("; ")
+      .filter(c => c)
       .map((c) => c.split("="))
-      .map(([k, v]) => [k, decodeURIComponent(v)])
+      .map(([k, v]) => [k, decodeURIComponent(v || "")])
   );
+};
+
+// Get token expiry from JWT
+const getTokenExpiry = (token) => {
+  if (!token) return null;
+  try {
+    const decoded = jwtDecode(token);
+    return decoded.exp ? decoded.exp * 1000 : null; // Convert to milliseconds
+  } catch {
+    return null;
+  }
+};
+
+// Check if token is expired or about to expire (within 5 minutes)
+export const isTokenExpiringSoon = (bufferMs = 5 * 60 * 1000) => {
+  const state = get(auth);
+  if (!state.tokenExpiry) return true;
+  return Date.now() >= (state.tokenExpiry - bufferMs);
+};
+
+// Initialize the store from cookies
+export const initializeAuthState = () => {
+  const cookies = parseCookies();
 
   if (cookies.performer_token) {
+    const tokenExpiry = getTokenExpiry(cookies.performer_token);
+
     setAuthState({
       isAuthenticated: true,
       token: cookies.performer_token,
+      refreshToken: cookies.performer_refresh_token || null,
       userDetails: cookies.userDetails ? JSON.parse(cookies.userDetails) : null,
+      tokenExpiry,
     });
   }
 };
+
+// Update tokens after a refresh
+export const updateTokens = (accessToken, refreshToken) => {
+  auth.update(state => ({
+    ...state,
+    token: accessToken,
+    refreshToken: refreshToken || state.refreshToken,
+    tokenExpiry: getTokenExpiry(accessToken),
+  }));
+};
+
+// Update permissions
+export const setPermissions = (permissions) => {
+  auth.update(state => ({
+    ...state,
+    permissions,
+  }));
+};
+
+// Set user context
+export const setContext = (context) => {
+  auth.update(state => ({
+    ...state,
+    context,
+  }));
+};
+
+// Check if user has a specific permission
+export const hasPermission = (category, permission) => {
+  const state = get(auth);
+  if (!state.permissions) return false;
+
+  // Performers have limited permissions by design
+  return state.permissions[category]?.[permission] ?? false;
+};
+
+// Get current permissions
+export const getPermissions = () => {
+  return get(auth).permissions;
+};

package/dist/stores/auth.spec.js

@@ -1,6 +1,31 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { get } from 'svelte/store';
-import { auth, setAuthState, clearAuthState, initializeAuthState } from './auth';
+import {
+  auth,
+  isPerformer,
+  setAuthState,
+  clearAuthState,
+  initializeAuthState,
+  updateTokens,
+  setPermissions,
+  setContext,
+  hasPermission,
+  getPermissions,
+  isTokenExpiringSoon
+} from './auth';
+
+// Mock jwt-decode
+vi.mock('jwt-decode', () => ({
+  jwtDecode: vi.fn((token) => {
+    // Parse mock tokens in format: "token-exp-{timestamp}"
+    if (token.startsWith('token-exp-')) {
+      const exp = parseInt(token.replace('token-exp-', ''), 10);
+      return { exp: exp / 1000 }; // Convert ms to seconds (JWT uses seconds)
+    }
+    // Default: return token that expires in 1 hour
+    return { exp: (Date.now() + 3600000) / 1000 };
+  })
+}));
 
 describe('auth store', () => {
   beforeEach(() => {
@@ -136,4 +161,287 @@ describe('auth store', () => {
       expect(values).toEqual([false, true, false]);
     });
   });
+
+  describe('updateTokens', () => {
+    it('updates access token and computes new expiry', () => {
+      setAuthState({
+        isAuthenticated: true,
+        token: 'old-token',
+        refreshToken: 'old-refresh',
+        userDetails: null,
+      });
+
+      updateTokens('new-access-token', 'new-refresh-token');
+
+      const state = get(auth);
+      expect(state.token).toBe('new-access-token');
+      expect(state.refreshToken).toBe('new-refresh-token');
+      expect(state.tokenExpiry).toBeDefined();
+    });
+
+    it('preserves existing refresh token if not provided', () => {
+      setAuthState({
+        isAuthenticated: true,
+        token: 'old-token',
+        refreshToken: 'existing-refresh',
+        userDetails: null,
+      });
+
+      updateTokens('new-access-token');
+
+      const state = get(auth);
+      expect(state.token).toBe('new-access-token');
+      expect(state.refreshToken).toBe('existing-refresh');
+    });
+
+    it('preserves other state properties when updating tokens', () => {
+      setAuthState({
+        isAuthenticated: true,
+        token: 'old-token',
+        refreshToken: 'refresh',
+        userDetails: { email: 'test@test.com' },
+        permissions: { events: { read: true } },
+        context: { contextType: 'performer' },
+      });
+
+      updateTokens('new-token');
+
+      const state = get(auth);
+      expect(state.userDetails).toEqual({ email: 'test@test.com' });
+      expect(state.permissions).toEqual({ events: { read: true } });
+      expect(state.context).toEqual({ contextType: 'performer' });
+    });
+  });
+
+  describe('isTokenExpiringSoon', () => {
+    it('returns true when no token expiry is set', () => {
+      clearAuthState();
+      expect(isTokenExpiringSoon()).toBe(true);
+    });
+
+    it('returns true when token is expired', () => {
+      const pastTime = Date.now() - 10000; // 10 seconds ago
+      setAuthState({
+        isAuthenticated: true,
+        token: 'token',
+        tokenExpiry: pastTime,
+      });
+
+      expect(isTokenExpiringSoon()).toBe(true);
+    });
+
+    it('returns true when token expires within buffer time', () => {
+      const soonExpiry = Date.now() + (2 * 60 * 1000); // 2 minutes from now
+      setAuthState({
+        isAuthenticated: true,
+        token: 'token',
+        tokenExpiry: soonExpiry,
+      });
+
+      // Default buffer is 5 minutes, so 2 minutes is within buffer
+      expect(isTokenExpiringSoon()).toBe(true);
+    });
+
+    it('returns false when token has plenty of time left', () => {
+      const futureExpiry = Date.now() + (30 * 60 * 1000); // 30 minutes from now
+      setAuthState({
+        isAuthenticated: true,
+        token: 'token',
+        tokenExpiry: futureExpiry,
+      });
+
+      expect(isTokenExpiringSoon()).toBe(false);
+    });
+
+    it('accepts custom buffer time', () => {
+      const expiry = Date.now() + (10 * 60 * 1000); // 10 minutes from now
+      setAuthState({
+        isAuthenticated: true,
+        token: 'token',
+        tokenExpiry: expiry,
+      });
+
+      // With 5 minute buffer (default), should be fine
+      expect(isTokenExpiringSoon(5 * 60 * 1000)).toBe(false);
+
+      // With 15 minute buffer, should be expiring soon
+      expect(isTokenExpiringSoon(15 * 60 * 1000)).toBe(true);
+    });
+  });
+
+  describe('setPermissions and getPermissions', () => {
+    it('sets permissions on auth state', () => {
+      const permissions = {
+        events: { read: true, write: false },
+        shows: { read: true, write: true },
+      };
+
+      setPermissions(permissions);
+
+      const state = get(auth);
+      expect(state.permissions).toEqual(permissions);
+    });
+
+    it('getPermissions returns current permissions', () => {
+      const permissions = {
+        events: { read: true },
+      };
+
+      setPermissions(permissions);
+
+      expect(getPermissions()).toEqual(permissions);
+    });
+
+    it('getPermissions returns null when no permissions set', () => {
+      clearAuthState();
+      expect(getPermissions()).toBe(null);
+    });
+
+    it('preserves other state when setting permissions', () => {
+      setAuthState({
+        isAuthenticated: true,
+        token: 'test-token',
+        userDetails: { email: 'test@test.com' },
+      });
+
+      setPermissions({ events: { read: true } });
+
+      const state = get(auth);
+      expect(state.isAuthenticated).toBe(true);
+      expect(state.token).toBe('test-token');
+      expect(state.userDetails).toEqual({ email: 'test@test.com' });
+    });
+  });
+
+  describe('setContext', () => {
+    it('sets user context on auth state', () => {
+      const context = {
+        contextType: 'performer',
+        performerId: 'perf-123',
+      };
+
+      setContext(context);
+
+      const state = get(auth);
+      expect(state.context).toEqual(context);
+    });
+
+    it('preserves other state when setting context', () => {
+      setAuthState({
+        isAuthenticated: true,
+        token: 'test-token',
+        permissions: { events: { read: true } },
+      });
+
+      setContext({ contextType: 'performer' });
+
+      const state = get(auth);
+      expect(state.isAuthenticated).toBe(true);
+      expect(state.token).toBe('test-token');
+      expect(state.permissions).toEqual({ events: { read: true } });
+    });
+
+    it('can update existing context', () => {
+      setContext({ contextType: 'performer', performerId: 'old' });
+      setContext({ contextType: 'performer', performerId: 'new' });
+
+      const state = get(auth);
+      expect(state.context.performerId).toBe('new');
+    });
+  });
+
+  describe('hasPermission', () => {
+    it('returns false when no permissions are set', () => {
+      clearAuthState();
+      expect(hasPermission('events', 'read')).toBe(false);
+    });
+
+    it('returns true when permission exists and is true', () => {
+      setPermissions({
+        events: { read: true, write: false },
+      });
+
+      expect(hasPermission('events', 'read')).toBe(true);
+    });
+
+    it('returns false when permission exists and is false', () => {
+      setPermissions({
+        events: { read: true, write: false },
+      });
+
+      expect(hasPermission('events', 'write')).toBe(false);
+    });
+
+    it('returns false when category does not exist', () => {
+      setPermissions({
+        events: { read: true },
+      });
+
+      expect(hasPermission('shows', 'read')).toBe(false);
+    });
+
+    it('returns false when permission does not exist in category', () => {
+      setPermissions({
+        events: { read: true },
+      });
+
+      expect(hasPermission('events', 'delete')).toBe(false);
+    });
+
+    it('works with nested permission categories', () => {
+      setPermissions({
+        events: { read: true, write: true },
+        shows: { read: true, write: false, delete: false },
+        admin: { read: false },
+      });
+
+      expect(hasPermission('events', 'read')).toBe(true);
+      expect(hasPermission('events', 'write')).toBe(true);
+      expect(hasPermission('shows', 'read')).toBe(true);
+      expect(hasPermission('shows', 'write')).toBe(false);
+      expect(hasPermission('admin', 'read')).toBe(false);
+    });
+  });
+
+  describe('isPerformer derived store', () => {
+    it('returns true when context type is performer', () => {
+      setContext({ contextType: 'performer' });
+
+      expect(get(isPerformer)).toBe(true);
+    });
+
+    it('returns true when user is authenticated (fallback)', () => {
+      setAuthState({
+        isAuthenticated: true,
+        token: 'token',
+        userDetails: null,
+      });
+
+      expect(get(isPerformer)).toBe(true);
+    });
+
+    it('returns false when not authenticated and no performer context', () => {
+      clearAuthState();
+
+      expect(get(isPerformer)).toBe(false);
+    });
+
+    it('updates reactively when context changes', () => {
+      const values = [];
+      const unsubscribe = isPerformer.subscribe((value) => {
+        values.push(value);
+      });
+
+      clearAuthState();
+      setContext({ contextType: 'performer' });
+      setContext({ contextType: 'staff' });
+      setAuthState({ isAuthenticated: true, token: 'token' });
+
+      unsubscribe();
+
+      // false (initial), true (performer context), false (staff context, not authenticated), true (authenticated)
+      expect(values).toContain(false);
+      expect(values).toContain(true);
+    });
+  });
 });

package/dist/stores/toaster.js

@@ -1,13 +1,13 @@
-import { toast } from "svelte-sonner";
-
-export { toast };
-
-export const showToast = (message, type = "success") => {
-  if (type === "success") {
-    toast.success(message);
-  } else if (type === "error") {
-    toast.error(message);
-  } else {
-    toast.message(message);
-  }
-};
+import { toast } from "svelte-sonner";
+
+export { toast };
+
+export const showToast = (message, type = "success") => {
+  if (type === "success") {
+    toast.success(message);
+  } else if (type === "error") {
+    toast.error(message);
+  } else {
+    toast.message(message);
+  }
+};

package/dist/stories/ButtonAuditReview.stories.svelte

@@ -1,14 +1,14 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ButtonAuditReview from "./ButtonAuditReview.svelte";
-
-  const { Story } = defineMeta({
-    title: "Design System/Button Audit Review",
-    component: ButtonAuditReview,
-    parameters: {
-      layout: 'fullscreen',
-    }
-  });
-</script>
-
-<Story name="All Issues" />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonAuditReview from "./ButtonAuditReview.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Audit Review",
+    component: ButtonAuditReview,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="All Issues" />