npm - astro-tractstack - Versions diffs - 2.0.0-rc.0 - Mend

astro-tractstack 2.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (427) hide show

package/templates/src/pages/storykeep/login.astro ADDED Viewed

@@ -0,0 +1,266 @@
+---
+import { isAuthenticated } from '@/utils/auth';
+import { preHealthCheck } from '@/utils/backend';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { freshInstallStore } from '@/stores/backend';
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+const url = new URL(Astro.request.url);
+const redirectPath = url.searchParams.get('redirect') || '/storykeep';
+const forceLogin = url.searchParams.get('force') === 'true';
+if (isAuthenticated(Astro) && !forceLogin) {
+  return Astro.redirect(redirectPath);
+}
+const isDev = import.meta.env.DEV;
+const isInitialized = !freshInstallStore.get().needsSetup;
+const brandConfig = await getBrandConfig(tenantId);
+const cssBasePath = isInitialized ? '/media/css' : '/styles';
+const getAssetPath = (configPath: string, fallback: string) => {
+  // Always prioritize brandConfig values when they exist
+  if (configPath && configPath !== '') {
+    return configPath;
+  }
+  return fallback;
+};
+const logo = getAssetPath(brandConfig?.LOGO, '/brand/logo.svg');
+const wordmark = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
+const mainStylesUrl = isDev
+  ? `${cssBasePath}/storykeep.css`
+  : `${cssBasePath}/frontend.css`;
+---
+<!doctype html>
+<html lang="en" class="bg-mywhite h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login | TractStack</title>
+    <link rel="stylesheet" href={`${cssBasePath}/custom.css`} />
+    <link rel="stylesheet" href={mainStylesUrl} />
+  </head>
+  <body class="h-full">
+    <div class="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div class="mx-auto pb-6">
+        <!-- Logo and Wordmark -->
+        <div class="flex flex-col items-center justify-center gap-4">
+          <div class="h-16 w-auto">
+            <img
+              src={logo}
+              class="pointer-events-none h-full w-auto"
+              alt="Logo"
+            />
+          </div>
+          <div class="h-16 w-auto">
+            <img
+              src={wordmark}
+              class="pointer-events-none h-full w-auto max-w-48 md:max-w-72"
+              alt="Wordmark"
+            />
+          </div>
+        </div>
+        <h2
+          class="text-mydarkgrey mt-6 text-center text-2xl font-bold leading-9 tracking-tight"
+        >
+          Sign in to your Storykeep
+        </h2>
+      </div>
+      <div class="mx-auto">
+        <div class="rounded-lg bg-white px-6 py-12 shadow-inner">
+          <!-- Error message -->
+          <div
+            id="loginError"
+            class="bg-myred/10 mb-6 rounded-md p-4"
+            style="display: none;"
+          >
+            <div class="flex">
+              <div class="flex-shrink-0">
+                <svg
+                  class="text-myred h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+                    clip-rule="evenodd"></path>
+                </svg>
+              </div>
+              <div class="ml-3">
+                <h3 class="text-myred text-sm font-bold">
+                  Invalid credentials
+                </h3>
+                <div class="text-myred/90 mt-2 text-sm">
+                  <p>Please check your password and try again.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Login form -->
+          <div id="loginForm" class="space-y-6">
+            <div>
+              <label
+                for="password"
+                class="text-mydarkgrey block text-sm font-bold leading-6"
+              >
+                Password
+              </label>
+              <div class="mt-2">
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  required
+                  class="text-mydarkgrey ring-mylightgrey placeholder:text-mylightgrey focus:ring-myorange block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
+                />
+              </div>
+            </div>
+            <input
+              type="hidden"
+              id="redirectPath"
+              name="redirect"
+              value={redirectPath}
+            />
+            <div>
+              <button
+                type="button"
+                id="submitButton"
+                class="bg-myblue hover:bg-myorange focus-visible:outline-myorange flex w-full justify-center rounded-md px-3 py-1.5 text-sm font-bold leading-6 text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+              >
+                Sign in
+              </button>
+            </div>
+          </div>
+          <!-- Success message -->
+          <div id="loginSuccess" class="space-y-6" style="display: none;">
+            <div class="rounded-md bg-green-50 p-4">
+              <div class="flex">
+                <div class="flex-shrink-0">
+                  <svg
+                    class="h-5 w-5 text-green-400"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.236 4.53L7.53 10.25a.75.75 0 00-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                      clip-rule="evenodd"></path>
+                  </svg>
+                </div>
+                <div class="ml-3">
+                  <h3 class="text-sm font-bold text-green-800">
+                    Login successful!
+                  </h3>
+                  <div class="mt-2 text-sm text-green-700">
+                    <p>Role: <span id="userRole"></span></p>
+                    <p>Redirecting...</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script is:inline>
+      document.addEventListener('DOMContentLoaded', function () {
+        const submitButton = document.getElementById('submitButton');
+        const passwordInput = document.getElementById('password');
+        const redirectInput = document.getElementById('redirectPath');
+        const loginErrorDiv = document.getElementById('loginError');
+        const loginFormDiv = document.getElementById('loginForm');
+        const loginSuccessDiv = document.getElementById('loginSuccess');
+        const userRoleSpan = document.getElementById('userRole');
+        if (submitButton && passwordInput && redirectInput) {
+          const buttonText = submitButton.textContent.trim();
+          submitButton.addEventListener('click', async function () {
+            // Hide error message
+            if (loginErrorDiv) loginErrorDiv.style.display = 'none';
+            // Show loading state
+            submitButton.disabled = true;
+            submitButton.textContent = 'Signing in...';
+            const password = passwordInput.value;
+            const redirectPath = redirectInput.value;
+            if (!password) {
+              if (loginErrorDiv) loginErrorDiv.style.display = 'block';
+              submitButton.disabled = false;
+              submitButton.textContent = buttonText;
+              return;
+            }
+            try {
+              const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                  Accept: 'application/json',
+                },
+                body: JSON.stringify({
+                  password,
+                  redirect: redirectPath,
+                }),
+              });
+              const result = await response.json();
+              if (result.success) {
+                // Show success message with role
+                if (loginFormDiv) loginFormDiv.style.display = 'none';
+                if (loginSuccessDiv) loginSuccessDiv.style.display = 'block';
+                if (userRoleSpan)
+                  userRoleSpan.textContent = result.role || 'authenticated';
+                // Console log for debugging
+                console.log('Login successful:', result);
+                console.log('User role:', result.role);
+                // Redirect after short delay
+                setTimeout(() => {
+                  window.location.href = result.redirect || redirectPath;
+                }, 1500);
+              } else {
+                if (loginErrorDiv) loginErrorDiv.style.display = 'block';
+                submitButton.disabled = false;
+                submitButton.textContent = buttonText;
+              }
+            } catch (error) {
+              console.error('Login error:', error);
+              if (loginErrorDiv) loginErrorDiv.style.display = 'block';
+              submitButton.disabled = false;
+              submitButton.textContent = buttonText;
+            }
+          });
+          passwordInput.addEventListener('keypress', function (event) {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              submitButton.click();
+            }
+          });
+        }
+      });
+    </script>
+  </body>
+</html>

package/templates/src/pages/storykeep/logout.astro ADDED Viewed

@@ -0,0 +1,84 @@
+---
+// Cookie-based logout - server-side cookie removal
+// Clears HTTP-only admin/editor auth cookies
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Logging out...</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        margin: 0;
+        background-color: #f3f4f6;
+      }
+      .logout-container {
+        text-align: center;
+        background: white;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="logout-container">
+      <h1>Logging out...</h1>
+      <p>Please wait while we clear your session.</p>
+    </div>
+    <script>
+      // Clear authentication data
+      async function logout() {
+        try {
+          // Call server-side logout API to clear HTTP-only cookies
+          const response = await fetch('/api/auth/logout', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          });
+          const result = await response.json();
+          if (result.success) {
+            console.log('StoryKeep: Admin logout successful');
+          } else {
+            console.error('StoryKeep: Admin logout failed:', result.error);
+          }
+          // Also clear any remaining TractStack user profile data
+          const tractStackKeys = [];
+          for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith('tractstack_')) {
+              tractStackKeys.push(key);
+            }
+          }
+          tractStackKeys.forEach((key) => localStorage.removeItem(key));
+          console.log('TractStack: Complete logout finished');
+          // Redirect to home page
+          setTimeout(() => {
+            window.location.href = '/';
+          }, 1000);
+        } catch (error) {
+          console.error('Logout error:', error);
+          // Still redirect even if logout API fails
+          window.location.href = '/';
+        }
+      }
+      // Execute logout immediately
+      logout();
+    </script>
+  </body>
+</html>

package/templates/src/pages/storykeep/profile.astro ADDED Viewed

@@ -0,0 +1,98 @@
+---
+import Layout from '@/layouts/Layout.astro';
+import { ProfileSwitch } from '@/components/profile/ProfileSwitch';
+import { ProfileConsent } from '@/components/profile/ProfileConsent';
+import { preHealthCheck } from '@/utils/backend';
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+const config = {
+  title: 'Configure your Session',
+  description: 'Manage your TractStack profile and session preferences',
+};
+---
+<Layout
+  title={config.title}
+  slug="profile"
+  isContext={false}
+  isStoryKeep={false}
+  isEditable={false}
+>
+  <main id="main-content">
+    <div class="px-6 py-24 font-sans text-xl">
+      <div class="mx-auto max-w-3xl">
+        <div class="space-y-6">
+          <p class="text-black">
+            This website has been "pressed" with Tract Stack. As you read and
+            click around it will open up like a choose-your-own adventure book.
+          </p>
+          <p class="text-black">
+            Without your consent, no personal information will be collected from
+            your device.
+          </p>
+          <h3 class="inline-flex items-center pt-12 text-xl text-gray-700">
+            Allow Tract Stack to retain memory of your session and preferences
+            <span
+              class="pl-2 text-gray-400"
+              title="We will use a few kilobytes of localStorage in your browser."
+            >
+              <svg
+                class="h-5 w-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                ></path>
+              </svg>
+            </span>
+          </h3>
+          <!-- Consent Toggle using Ark UI -->
+          <div class="py-4">
+            <ProfileConsent client:load />
+          </div>
+          <!-- Profile Switch Component -->
+          <div class="pt-6">
+            <ProfileSwitch client:load />
+          </div>
+          <div class="pt-8 text-sm text-gray-600">
+            <p class="pb-4">
+              By enabling session memory, Tract Stack can provide a personalized
+              reading experience. This includes:
+            </p>
+            <ul class="space-y-2 pl-6 text-base">
+              <li class="list-disc">
+                Remembering your reading progress and preferences
+              </li>
+              <li class="list-disc">
+                Showing content tailored to your interests
+              </li>
+              <li class="list-disc">Maintaining your session across visits</li>
+            </ul>
+            <p class="pt-4 text-xs">
+              All data is stored locally in your browser. No personal
+              information is transmitted to external servers without your
+              explicit consent.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</Layout>

package/templates/src/pages/storykeep.astro ADDED Viewed

@@ -0,0 +1,81 @@
+---
+import Layout from '@/layouts/Layout.astro';
+import StoryKeepDashboard from '@/components/storykeep/Dashboard';
+import StoryKeepDashboard_Analytics from '@/components/storykeep/Dashboard_Analytics';
+import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
+import { getFullContentMap } from '@/stores/analytics';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { preHealthCheck } from '@/utils/backend';
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+const authCheck = requireAdminOrEditor(Astro);
+if (authCheck) {
+  return authCheck;
+}
+const userIsAuthenticated = isAuthenticated(Astro);
+const userIsAdmin = isAdmin(Astro);
+const role = userIsAdmin ? `admin` : userIsAuthenticated ? `editor` : null;
+const brandConfig = await getBrandConfig(
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
+);
+const initializing = !brandConfig.SITE_INIT;
+// Redirect to branding page during initial setup
+if (initializing) {
+  return Astro.redirect('/storykeep/branding');
+}
+const title = 'Analytics | StoryKeep';
+let fullContentMap;
+let homeSlug = 'hello';
+try {
+  fullContentMap = await getFullContentMap(
+    Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
+  );
+  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
+} catch (error) {
+  return Astro.redirect(
+    `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
+  );
+}
+---
+<Layout title={title} isStoryKeep={true} slug="storykeep">
+  <main id="main-content" class="min-h-screen w-full">
+    <div class="p-3.5 md:p-8">
+      <StoryKeepDashboard
+        client:only="react"
+        fullContentMap={fullContentMap}
+        homeSlug={homeSlug}
+        activeTab="analytics"
+        role={role}
+        initializing={initializing}
+      />
+      <!-- Only show Analytics content when home page has title -->
+      {
+        fullContentMap.find((item) => item.slug === homeSlug)?.title?.trim() ? (
+          <StoryKeepDashboard_Analytics
+            client:only="react"
+            fullContentMap={fullContentMap}
+            initializing={initializing}
+          />
+        ) : (
+          <div class="mt-8 text-gray-500">
+            <p>Complete the setup wizard above to unlock Analytics.</p>
+          </div>
+        )
+      }
+    </div>
+  </main>
+</Layout>

package/templates/src/stores/analytics.ts ADDED Viewed

@@ -0,0 +1,171 @@
+import { atom } from 'nanostores';
+import { TractStackAPI } from '@/utils/api';
+// Internal tenant-keyed storage
+const tenantEpinetCustomFilters = atom<
+  Record<
+    string,
+    {
+      enabled: boolean;
+      visitorType: 'all' | 'anonymous' | 'known';
+      selectedUserId: string | null;
+      startTimeUTC: string | null;
+      endTimeUTC: string | null;
+      userCounts: Array<{ id: string; count: number; isKnown: boolean }>;
+      hourlyNodeActivity: Record<
+        string,
+        Record<
+          string,
+          {
+            events: Record<string, number>;
+            visitorIds: string[];
+          }
+        >
+      >;
+    }
+  >
+>({});
+const tenantFullContentMaps = atom<
+  Record<
+    string,
+    {
+      data: any[];
+      lastUpdated: number;
+    }
+  >
+>({});
+// Helper to get current tenant ID
+function getCurrentTenantId(): string {
+  if (typeof window !== 'undefined' && window.TRACTSTACK_CONFIG?.tenantId) {
+    return window.TRACTSTACK_CONFIG.tenantId;
+  }
+  return import.meta.env.PUBLIC_TENANTID || 'default';
+}
+// Default filter state
+const defaultEpinetFilters = {
+  enabled: false,
+  visitorType: 'all' as 'all' | 'anonymous' | 'known',
+  selectedUserId: null,
+  startTimeUTC: null,
+  endTimeUTC: null,
+  userCounts: [],
+  hourlyNodeActivity: {},
+};
+// Create tenant-aware atoms that work with useStore
+const createEpinetFiltersStore = () => {
+  const store = {
+    get: () => {
+      const tenantId = getCurrentTenantId();
+      return tenantEpinetCustomFilters.get()[tenantId] || defaultEpinetFilters;
+    },
+    set: (tenantId: string, updates: any) => {
+      const currentFilters =
+        tenantEpinetCustomFilters.get()[tenantId] || defaultEpinetFilters;
+      tenantEpinetCustomFilters.set({
+        ...tenantEpinetCustomFilters.get(),
+        [tenantId]: {
+          ...currentFilters,
+          ...updates,
+        },
+      });
+    },
+    subscribe: (callback: (value: any) => void) => {
+      const tenantId = getCurrentTenantId();
+      return tenantEpinetCustomFilters.subscribe((filters) => {
+        callback(filters[tenantId] || defaultEpinetFilters);
+      });
+    },
+    // Required nanostore properties for useStore
+    lc: 0,
+    listen: function (callback: any) {
+      return this.subscribe(callback);
+    },
+    notify: function () {},
+    off: function () {},
+    get value() {
+      return this.get();
+    },
+  };
+  return store;
+};
+const createFullContentMapStore = () => {
+  const store = {
+    get: () => {
+      const tenantId = getCurrentTenantId();
+      return tenantFullContentMaps.get()[tenantId] || null;
+    },
+    set: (tenantId: string, data: { data: any[]; lastUpdated: number }) => {
+      tenantFullContentMaps.set({
+        ...tenantFullContentMaps.get(),
+        [tenantId]: data,
+      });
+    },
+    subscribe: (callback: (value: any) => void) => {
+      const tenantId = getCurrentTenantId();
+      return tenantFullContentMaps.subscribe((maps) => {
+        callback(maps[tenantId] || null);
+      });
+    },
+    // Required nanostore properties for useStore
+    lc: 0,
+    listen: function (callback: any) {
+      return this.subscribe(callback);
+    },
+    notify: function () {},
+    off: function () {},
+    get value() {
+      return this.get();
+    },
+  };
+  return store;
+};
+export const epinetCustomFilters = createEpinetFiltersStore();
+export const fullContentMapStore = createFullContentMapStore();
+export async function getFullContentMap(tenantId: string): Promise<any[]> {
+  const api = new TractStackAPI(tenantId);
+  // Check tenant-specific cache
+  const cached = tenantFullContentMaps.get()[tenantId];
+  try {
+    const response = await api.getContentMapWithTimestamp(cached?.lastUpdated);
+    if (response.success && response.data) {
+      // Update tenant-specific cache
+      const newData = {
+        data: response.data.data,
+        lastUpdated: response.data.lastUpdated,
+      };
+      tenantFullContentMaps.set({
+        ...tenantFullContentMaps.get(),
+        [tenantId]: newData,
+      });
+      return newData.data;
+    } else {
+      const errorMsg = response.error || '';
+      if (errorMsg.includes('304')) {
+        return cached?.data || [];
+      }
+    }
+  } catch (error) {
+    console.error('Failed to fetch content map:', error);
+  }
+  return cached?.data || [];
+}