astro-tractstack 2.0.28 → 2.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/codehooks/SandboxAuthWrapper.tsx

@@ -5,22 +5,48 @@ import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon';
 import { ProfileStorage } from '@/utils/profileStorage';
 import SandboxRegisterForm from '@/components/codehooks/SandboxRegisterForm';
 
-export default function SandboxAuthWrapper() {
+interface SandboxAuthWrapperProps {
+  isServerSideAuthenticated: boolean;
+}
+
+export default function SandboxAuthWrapper({
+  isServerSideAuthenticated,
+}: SandboxAuthWrapperProps) {
   const [profileExists, setProfileExists] = useState<boolean | null>(null);
 
   useEffect(() => {
-    setProfileExists(ProfileStorage.hasProfile());
-  }, []);
+    const hasLocalProfile = ProfileStorage.hasProfile();
+
+    if (hasLocalProfile && !isServerSideAuthenticated) {
+      const token = localStorage.getItem('tractstack_profile_token');
+
+      if (token) {
+        ProfileStorage.storeProfileToken(token);
+        window.location.reload();
+        return;
+      } else {
+        ProfileStorage.clearProfile();
+        setProfileExists(false);
+      }
+    } else {
+      setProfileExists(hasLocalProfile);
+    }
+  }, [isServerSideAuthenticated]);
 
   const handleRegistrationSuccess = () => {
     setProfileExists(true);
+    window.location.reload();
   };
 
   const handleClose = () => {
     window.location.href = '/';
   };
 
-  if (profileExists === null || profileExists === true) {
+  if (profileExists === true && isServerSideAuthenticated) {
+    return null;
+  }
+
+  if (profileExists === null) {
     return null;
   }
 

package/templates/src/pages/sandbox.astro

@@ -26,7 +26,6 @@ if (healthCheckRedirect !== undefined) {
 }
 
 const brandConfig = await getBrandConfig(tenantId);
-
 const emptyStoryFragment = {
   id: ulid(),
   nodeType: 'StoryFragment' as const,
@@ -43,12 +42,15 @@ const loadData = {
 };
 const title = 'Sandbox - TractStack Editor';
 const storyFragmentID = emptyStoryFragment.id;
-
 const fullContentMap = await getFullContentMap(tenantId);
 const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
 }
+
+const hasProfile = Astro.request.headers
+  .get('cookie')
+  ?.includes('tractstack_profile=true');
 ---
 
 <Layout
@@ -59,7 +61,7 @@ for (const [key, value] of Astro.url.searchParams) {
   isStoryKeep={true}
   isEditor={true}
 >
-  <SandboxAuthWrapper client:load />
+  <SandboxAuthWrapper client:load isServerSideAuthenticated={!!hasProfile} />
   <Header
     title={title}
     slug="sandbox"
@@ -70,65 +72,71 @@ for (const [key, value] of Astro.url.searchParams) {
     menu={null}
   />
 
-  <section
-    id="storykeepHeader"
-    role="banner"
-    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
-  >
-    <StoryKeepHeader
-      slug="sandbox"
-      isContext={false}
-      isSandboxMode={true}
-      client:only="react"
-    />
-  </section>
-
-  <div class="flex min-h-screen">
-    <StoryKeepToolMode isContext={false} client:only="react" />
-
-    <main id="mainContent" class="relative flex-1 overflow-x-auto">
-      <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
-        <div
-          class="h-fit min-h-screen pb-96"
-          style={{
-            backgroundImage:
-              'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
-          }}
+  {
+    hasProfile && (
+      <>
+        <section
+          id="storykeepHeader"
+          role="banner"
+          class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
         >
-          <Compositor
-            id={storyFragmentID}
-            nodes={loadData}
-            config={brandConfig}
-            fullContentMap={fullContentMap}
-            fullCanonicalURL="/sandbox"
-            urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+          <StoryKeepHeader
+            slug="sandbox"
+            isContext={false}
             isSandboxMode={true}
             client:only="react"
           />
+        </section>
+
+        <div class="flex min-h-screen">
+          <StoryKeepToolMode isContext={false} client:only="react" />
+
+          <main id="mainContent" class="relative flex-1 overflow-x-auto">
+            <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
+              <div
+                class="h-fit min-h-screen pb-96"
+                style={{
+                  backgroundImage:
+                    'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
+                }}
+              >
+                <Compositor
+                  id={storyFragmentID}
+                  nodes={loadData}
+                  config={brandConfig}
+                  fullContentMap={fullContentMap}
+                  fullCanonicalURL="/sandbox"
+                  urlParams={urlParams}
+                  availableCodeHooks={Object.keys(codeHookComponents)}
+                  isSandboxMode={true}
+                  client:only="react"
+                />
+              </div>
+            </div>
+          </main>
         </div>
-      </div>
-    </main>
-  </div>
 
-  <aside
-    id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
-  >
-    <div class="pointer-events-none flex-grow"></div>
+        <aside
+          id="settingsControls"
+          class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
+        >
+          <div class="pointer-events-none flex-grow" />
 
-    <div class="pointer-events-auto flex-shrink-0">
-      <StoryKeepToolBar client:only="react" />
-    </div>
+          <div class="pointer-events-auto flex-shrink-0">
+            <StoryKeepToolBar client:only="react" />
+          </div>
 
-    <div class="pointer-events-auto max-h-full">
-      <SettingsPanel
-        config={brandConfig}
-        availableCodeHooks={Object.keys(codeHookComponents)}
-        client:only="react"
-      />
-    </div>
-  </aside>
+          <div class="pointer-events-auto max-h-full">
+            <SettingsPanel
+              config={brandConfig}
+              availableCodeHooks={Object.keys(codeHookComponents)}
+              client:only="react"
+            />
+          </div>
+        </aside>
+      </>
+    )
+  }
 </Layout>
 
 <script>