astro-tractstack 2.0.0-rc.0

package/templates/src/components/profile/ProfileUnlock.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from 'react';
+import { ProfileStorage } from '@/utils/profileStorage';
+import type { FormEvent } from 'react';
+
+interface ProfileUnlockProps {
+  initialEmail?: string;
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+}
+
+async function unlockProfile(payload: { email: string; codeword: string }) {
+  try {
+    const sessionData = ProfileStorage.prepareHandshakeData();
+
+    const response = await fetch('/api/auth/profile', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        email: payload.email,
+        codeword: payload.codeword,
+        sessionId: sessionData.sessionId,
+        isUpdate: true,
+      }),
+    });
+
+    const result = await response.json();
+
+    if (!result.success) {
+      ProfileStorage.clearProfile();
+      return {
+        success: false,
+        error: result.error || 'Invalid credentials',
+      };
+    }
+
+    // Store profile data and tokens
+    if (result.profile) {
+      ProfileStorage.setProfileData({
+        firstname: result.profile.Firstname,
+        contactPersona: result.profile.ContactPersona,
+        email: result.profile.Email,
+        shortBio: result.profile.ShortBio,
+      });
+    }
+
+    if (result.token) {
+      ProfileStorage.storeProfileToken(result.token);
+    }
+
+    if (result.encryptedEmail && result.encryptedCode) {
+      ProfileStorage.storeEncryptedCredentials(
+        result.encryptedEmail,
+        result.encryptedCode
+      );
+    }
+
+    if (result.consent) {
+      ProfileStorage.storeConsent(result.consent);
+    }
+
+    return { success: true, data: result };
+  } catch (e) {
+    console.error('Profile unlock error:', e);
+    ProfileStorage.clearProfile();
+    return { success: false, error: 'Network error occurred' };
+  }
+}
+
+const classNames = (...classes: (string | undefined | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
+export const ProfileUnlock = ({
+  initialEmail,
+  onSuccess,
+  onError,
+}: ProfileUnlockProps) => {
+  const [submitted, setSubmitted] = useState<boolean | undefined>(undefined);
+  const [email, setEmail] = useState(initialEmail || '');
+  const [badLogin, setBadLogin] = useState(false);
+  const [codeword, setCodeword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setBadLogin(false);
+    setSubmitted(true);
+    setIsLoading(true);
+
+    if (codeword && email) {
+      const result = await unlockProfile({
+        email,
+        codeword,
+      });
+
+      if (result.success) {
+        ProfileStorage.storeLastEmail(email);
+        onSuccess?.();
+      } else {
+        setBadLogin(true);
+        onError?.(result.error || 'Invalid credentials');
+      }
+    } else {
+      console.error('Missing required fields:', { email, codeword });
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    if (badLogin) {
+      const timeout = setTimeout(() => setBadLogin(false), 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [badLogin]);
+
+  // Try to get last used email
+  useEffect(() => {
+    if (!email) {
+      const lastEmail = ProfileStorage.getLastEmail();
+      if (lastEmail) {
+        setEmail(lastEmail);
+      }
+    }
+  }, [email]);
+
+  return (
+    <>
+      <h3 className="font-action py-6 text-xl text-blue-600">
+        Welcome back! Please unlock your profile
+      </h3>
+
+      <form onSubmit={handleSubmit}>
+        <div className="grid grid-cols-1 gap-4">
+          <div className="px-4 pt-6">
+            <label htmlFor="email" className="block text-sm text-gray-600">
+              Email address
+            </label>
+            <input
+              type="email"
+              name="email"
+              id="email"
+              autoComplete="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isLoading}
+              className={classNames(
+                `text-md mt-2 block w-full rounded-md bg-white p-3 shadow-sm focus:border-cyan-600 focus:ring-cyan-600`,
+                submitted && email === `` ? `border-red-500` : `border-gray-300`
+              )}
+            />
+            {submitted && email === `` && (
+              <span className="px-4 text-xs text-red-500">Required field.</span>
+            )}
+          </div>
+
+          <div className="px-4 pt-6">
+            <label htmlFor="codeword" className="block text-sm text-gray-600">
+              Secret code word
+            </label>
+            <input
+              type="password"
+              name="codeword"
+              id="codeword"
+              autoComplete="off"
+              value={codeword}
+              onChange={(e) => setCodeword(e.target.value)}
+              disabled={isLoading}
+              className={classNames(
+                `text-md mt-2 block w-full rounded-md bg-white p-3 shadow-sm focus:border-cyan-600 focus:ring-cyan-600`,
+                submitted && codeword === ``
+                  ? `border-red-500`
+                  : `border-gray-300`
+              )}
+            />
+            {submitted && codeword === `` && (
+              <span className="px-4 text-xs text-red-500">Required field.</span>
+            )}
+          </div>
+
+          {badLogin ? (
+            <div className="align-center font-action col-span-1 flex justify-center py-6 text-red-500">
+              Invalid credentials. Please try again.
+            </div>
+          ) : null}
+
+          <div className="align-center col-span-1 flex justify-center py-12">
+            <button
+              type="submit"
+              disabled={isLoading}
+              className={classNames(
+                `font-action rounded-lg px-3.5 py-2.5 text-white transition-all duration-200 hover:rotate-1`,
+                isLoading
+                  ? `cursor-not-allowed bg-gray-400`
+                  : `bg-black hover:bg-orange-500`
+              )}
+            >
+              {isLoading ? 'Unlocking...' : 'Unlock Profile'}
+            </button>
+          </div>
+
+          <div className="align-center col-span-1 flex justify-center">
+            <button
+              type="button"
+              onClick={() => {
+                // Clear any stored data and reload to show create form
+                ProfileStorage.clearProfile();
+                window.location.reload();
+              }}
+              className="text-sm text-blue-600 underline hover:text-black"
+            >
+              Create new profile instead
+            </button>
+          </div>
+        </div>
+      </form>
+    </>
+  );
+};

package/templates/src/components/storykeep/Dashboard.tsx

@@ -0,0 +1,160 @@
+import { useState, useEffect } from 'react';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { classNames } from '@/utils/helpers';
+import Wizard from './widgets/Wizard';
+import type { FullContentMapItem, BrandConfig } from '@/types/tractstack';
+
+interface Tab {
+  id: string;
+  name: string;
+  current: boolean;
+}
+
+export default function StoryKeepDashboard({
+  fullContentMap,
+  homeSlug,
+  activeTab = 'analytics',
+  role,
+  initializing = false,
+  brandConfig,
+  onBrandConfigUpdate,
+}: {
+  fullContentMap: FullContentMapItem[];
+  homeSlug: string;
+  activeTab?: string;
+  role?: string | null;
+  initializing?: boolean;
+  brandConfig?: BrandConfig | null;
+  onBrandConfigUpdate?: (config: BrandConfig) => void;
+}) {
+  const [isClient, setIsClient] = useState<boolean>(false);
+  const [internalBrandConfig, setInternalBrandConfig] =
+    useState<BrandConfig | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  // Use external brandConfig if provided, otherwise use internal state
+  const currentBrandConfig = brandConfig ?? internalBrandConfig;
+
+  const isCurrentlyInitializing =
+    initializing && !currentBrandConfig?.SITE_INIT;
+  // Detect if home page has title
+  const homePage = fullContentMap.find((item) => item.slug === homeSlug);
+  const hasTitle = !!homePage?.title?.trim();
+  const shouldShowInactiveTabs = !hasTitle && !isCurrentlyInitializing;
+
+  // Define tabs - show only branding when initializing
+  const tabs: Tab[] = isCurrentlyInitializing
+    ? [{ id: 'branding', name: 'Welcome to your StoryKeep', current: true }]
+    : [
+        {
+          id: 'analytics',
+          name: 'Analytics',
+          current: shouldShowInactiveTabs ? false : activeTab === 'analytics',
+        },
+        {
+          id: 'content',
+          name: 'Content',
+          current: activeTab === 'content',
+        },
+        {
+          id: 'branding',
+          name: 'Branding',
+          current: activeTab === 'branding',
+        },
+        ...(role === 'admin'
+          ? [
+              {
+                id: 'advanced',
+                name: 'Advanced',
+                current: activeTab === 'advanced',
+              },
+            ]
+          : []),
+      ];
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    // Only fetch if no external brandConfig provided and we don't have internal config
+    if (!brandConfig && !internalBrandConfig && !loading) {
+      setLoading(true);
+      getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default')
+        .then((config) => {
+          setInternalBrandConfig(config);
+          // If we have a callback, also notify parent
+          if (onBrandConfigUpdate) {
+            onBrandConfigUpdate(config);
+          }
+        })
+        .catch(console.error)
+        .finally(() => setLoading(false));
+    }
+  }, [brandConfig, internalBrandConfig, loading, onBrandConfigUpdate]);
+
+  if (!isClient) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="text-lg text-gray-600">Loading dashboard...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="md:mb-18 mb-12 w-full">
+      {isCurrentlyInitializing ? (
+        <div className="mb-8 rounded-md border border-dashed border-orange-200 bg-orange-50 p-6">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <span className="text-2xl">⭐</span>
+            </div>
+            <div className="ml-3">
+              <h3 className="text-lg font-bold text-black">
+                Welcome to your StoryKeep
+              </h3>
+              <div className="text-mydarkgrey mt-2 text-sm">
+                <p>
+                  Complete your site's branding configuration to get started.
+                  (And update as often as you like!)
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        // Only render Wizard if we have brandConfig loaded
+        currentBrandConfig && (
+          <Wizard
+            fullContentMap={fullContentMap}
+            homeSlug={homeSlug}
+            brandConfig={currentBrandConfig}
+          />
+        )
+      )}
+
+      {/* Tab Navigation */}
+      <div className="border-b border-gray-200">
+        <nav className="-mb-px flex gap-x-8" aria-label="Tabs">
+          {tabs.map((tab) => (
+            <a
+              key={tab.id}
+              href={
+                tab.id === 'analytics' ? '/storykeep' : `/storykeep/${tab.id}`
+              }
+              className={classNames(
+                tab.current
+                  ? 'border-cyan-500 text-cyan-600'
+                  : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                'whitespace-nowrap border-b-2 px-1 py-4 text-sm font-bold'
+              )}
+              aria-current={tab.current ? 'page' : undefined}
+            >
+              {tab.name}
+            </a>
+          ))}
+        </nav>
+      </div>
+    </div>
+  );
+}

package/templates/src/components/storykeep/Dashboard_Activity.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect, useMemo } from 'react';
+import ResponsiveLine from './widgets/ResponsiveLine';
+
+interface DashboardActivityProps {
+  data: Array<{
+    id: string;
+    data: Array<{ x: any; y: number }>;
+  }>;
+}
+
+const DashboardActivity = ({ data }: DashboardActivityProps) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const processedData = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+    const processed = data.map((series) => ({
+      ...series,
+      data: series.data
+        .filter(
+          (point) => point.x !== null && point.y !== null && point.y !== 0
+        )
+        .sort((a, b) => {
+          // Sort by UTC timestamp if x is a date string, otherwise by number
+          if (typeof a.x === 'string' && typeof b.x === 'string') {
+            return new Date(a.x).getTime() - new Date(b.x).getTime();
+          }
+          return Number(a.x) - Number(b.x);
+        }),
+    }));
+    return processed;
+  }, [data]);
+
+  if (!isClient) return null;
+
+  if (!data || data.length === 0) {
+    return <div>Loading activity data...</div>;
+  }
+
+  if (processedData.length === 0) return <div />;
+
+  return (
+    <>
+      <div style={{ height: '400px' }}>
+        <ResponsiveLine data={processedData} />
+      </div>
+    </>
+  );
+};
+
+export default DashboardActivity;

package/templates/src/components/storykeep/Dashboard_Advanced.tsx

@@ -0,0 +1,165 @@
+import { useState, useEffect } from 'react';
+import { useFormState } from '@/hooks/useFormState';
+import {
+  convertToLocalState,
+  convertToBackendFormat,
+  validateAdvancedConfig,
+  advancedStateIntercept,
+} from '@/utils/api/advancedHelpers';
+import {
+  getAdvancedConfigStatus,
+  saveAdvancedConfig,
+} from '@/utils/api/advancedConfig';
+import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
+import AuthConfigSection from '@/components/form/advanced/AuthConfigSection';
+import APIConfigSection from '@/components/form/advanced/APIConfigSection';
+import type {
+  AdvancedConfigState,
+  AdvancedConfigStatus,
+} from '@/types/tractstack';
+
+interface StoryKeepDashboardAdvancedProps {
+  initialize?: boolean;
+}
+
+export default function StoryKeepDashboard_Advanced({
+  initialize = false,
+}: StoryKeepDashboardAdvancedProps) {
+  const [status, setStatus] = useState<AdvancedConfigStatus | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+
+  // Load status on mount
+  useEffect(() => {
+    async function loadStatus() {
+      try {
+        setIsLoading(true);
+        const statusData = await getAdvancedConfigStatus(
+          window.TRACTSTACK_CONFIG?.tenantId || 'default'
+        );
+        setStatus(statusData);
+      } catch (err) {
+        setError(
+          err instanceof Error
+            ? err.message
+            : 'Failed to load configuration status'
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    loadStatus();
+  }, []);
+
+  const formState = useFormState<AdvancedConfigState>({
+    initialData: convertToLocalState(status),
+    validator: validateAdvancedConfig,
+    interceptor: advancedStateIntercept,
+    onSave: async (state: AdvancedConfigState) => {
+      const backendPayload = convertToBackendFormat(state);
+      await saveAdvancedConfig(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default',
+        backendPayload
+      );
+
+      // Reload status after save
+      const newStatus = await getAdvancedConfigStatus(
+        window.TRACTSTACK_CONFIG?.tenantId || 'default'
+      );
+      setStatus(newStatus);
+
+      // Reset form to new state (clears password fields and isDirty)
+      const newState = convertToLocalState(newStatus);
+      formState.resetToState(newState);
+
+      return newState;
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="text-gray-500">Loading configuration...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-red-50 p-4">
+        <div className="text-sm text-red-700">{error}</div>
+      </div>
+    );
+  }
+
+  // Database status component
+  const DatabaseStatusSection = () => {
+    const databaseType = status?.tursoEnabled
+      ? 'Turso Cloud Database'
+      : 'SQLite file on host server';
+    const icon = status?.tursoEnabled ? '☁️' : '📁';
+
+    return (
+      <div className="bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:p-6">
+          <h3 className="text-base font-bold leading-6 text-gray-900">
+            Database Configuration
+          </h3>
+          <div className="mt-2 max-w-xl text-sm text-gray-500">
+            <p>
+              Database configuration is managed at the infrastructure level.
+            </p>
+          </div>
+          <div className="mt-5">
+            <div className="flex items-center space-x-3 rounded-md bg-gray-50 p-4">
+              <span className="text-2xl">{icon}</span>
+              <div>
+                <div className="text-sm font-bold text-gray-900">
+                  Current Database: {databaseType}
+                </div>
+                <div className="text-xs text-gray-500">
+                  {status?.tursoEnabled
+                    ? 'Using Turso cloud-hosted SQLite database'
+                    : 'Using local SQLite database file'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      {initialize && (
+        <div className="rounded-md border border-blue-200 bg-blue-50 p-4">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <span className="text-xl text-blue-500">🚀</span>
+            </div>
+            <div className="ml-3">
+              <h3 className="text-sm font-bold text-blue-800">
+                Initialize Your StoryKeep
+              </h3>
+              <div className="mt-2 text-sm text-blue-700">
+                <p>
+                  Complete your advanced configuration to secure your
+                  installation and enable features.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <UnsavedChangesBar formState={formState} />
+
+      <div className="space-y-8">
+        <DatabaseStatusSection />
+        <AuthConfigSection formState={formState} status={status} />
+        <APIConfigSection formState={formState} status={status} />
+      </div>
+    </div>
+  );
+}