From 968a127f9657f878578e71c38f3801b72710e125 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 19 Apr 2026 12:53:50 +0100
Subject: [PATCH] fix(join): move flow overlay outside v-if so it survives auth
 flip

After createSubscription() calls checkMemberStatus(), isAuthenticated
flips to true and the <template v-else> branch unmounts, taking the
Teleport (and its overlay) with it. The authenticated 'You're already a
member' UI then showed for the 3-second pre-redirect delay, producing a
visible flash before navigateTo('/welcome') fired.

Teleport now lives at the root div alongside the v-if/v-else branches,
so the overlay stays mounted through the auth state transition and
covers the page continuously until the redirect.
---
 app/pages/join.vue | 161 +++++++++++++++++++++++----------------------
 1 file changed, 82 insertions(+), 79 deletions(-)

diff --git a/app/pages/join.vue b/app/pages/join.vue
index 4d6d325..2c7484c 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -318,86 +318,89 @@
         </div>
       </div>
 
-      <!-- Flow overlay: covers the page from form submit through redirect -->
-      <Teleport to="body">
-        <div v-if="flowState !== 'idle'" class="join-flow-overlay">
-          <div class="join-flow-card">
-            <div class="join-flow-step">{{ flowStepLabel }}</div>
-
-            <!-- Progress states -->
-            <template
-              v-if="[
-                'creating-customer',
-                'opening-payment',
-                'processing-payment',
-                'creating-subscription',
-              ].includes(flowState)"
-            >
-              <h2 class="join-flow-heading">
-                {{
-                  flowState === "creating-customer"
-                    ? "Creating your account..."
-                    : flowState === "opening-payment"
-                    ? "Opening secure payment..."
-                    : flowState === "processing-payment"
-                    ? "Confirming your card..."
-                    : "Activating your membership..."
-                }}
-              </h2>
-              <p class="join-flow-body">
-                Please don't close this window. This usually takes a few seconds.
-              </p>
-            </template>
-
-            <!-- Success state -->
-            <template v-if="flowState === 'success'">
-              <h2 class="join-flow-heading">Welcome to Ghost Guild!</h2>
-              <DashedBox :hoverable="false">
-                <div class="section-label" style="margin-bottom: 12px">
-                  Membership Details
-                </div>
-                <dl class="details-list">
-                  <div class="details-row">
-                    <dt>Name</dt><dd>{{ form.name }}</dd>
-                  </div>
-                  <div class="details-row">
-                    <dt>Email</dt><dd>{{ form.email }}</dd>
-                  </div>
-                  <div class="details-row">
-                    <dt>Circle</dt><dd class="capitalize">{{ form.circle }}</dd>
-                  </div>
-                  <div class="details-row">
-                    <dt>Contribution</dt><dd>{{ selectedTier.label }}</dd>
-                  </div>
-                </dl>
-              </DashedBox>
-              <p class="join-flow-body" style="margin-top: 16px">
-                We've sent a confirmation email to {{ form.email }}. Redirecting
-                you to your dashboard...
-              </p>
-              <div class="button-row" style="margin-top: 20px">
-                <NuxtLink to="/welcome" class="form-submit">
-                  Go to Dashboard Now
-                </NuxtLink>
-              </div>
-            </template>
-
-            <!-- Error state -->
-            <template v-if="flowState === 'error'">
-              <h2 class="join-flow-heading">We couldn't complete your signup</h2>
-              <div v-if="errorMessage" class="error-box">
-                {{ errorMessage }}
-              </div>
-              <div class="button-row" style="margin-top: 20px">
-                <button class="btn" @click="closeFlowOverlay">
-                  Back to form
-                </button>
-              </div>
-            </template>
-          </div>
-        </div>
-      </Teleport>
     </template>
+
+    <!-- Flow overlay: covers the page from form submit through redirect.
+         Lives outside v-if/v-else so it survives the auth state flip that
+         fires after checkMemberStatus() at the end of createSubscription. -->
+    <Teleport to="body">
+      <div v-if="flowState !== 'idle'" class="join-flow-overlay">
+        <div class="join-flow-card">
+          <div class="join-flow-step">{{ flowStepLabel }}</div>
+
+          <!-- Progress states -->
+          <template
+            v-if="[
+              'creating-customer',
+              'opening-payment',
+              'processing-payment',
+              'creating-subscription',
+            ].includes(flowState)"
+          >
+            <h2 class="join-flow-heading">
+              {{
+                flowState === "creating-customer"
+                  ? "Creating your account..."
+                  : flowState === "opening-payment"
+                  ? "Opening secure payment..."
+                  : flowState === "processing-payment"
+                  ? "Confirming your card..."
+                  : "Activating your membership..."
+              }}
+            </h2>
+            <p class="join-flow-body">
+              Please don't close this window. This usually takes a few seconds.
+            </p>
+          </template>
+
+          <!-- Success state -->
+          <template v-if="flowState === 'success'">
+            <h2 class="join-flow-heading">Welcome to Ghost Guild!</h2>
+            <DashedBox :hoverable="false">
+              <div class="section-label" style="margin-bottom: 12px">
+                Membership Details
+              </div>
+              <dl class="details-list">
+                <div class="details-row">
+                  <dt>Name</dt><dd>{{ form.name }}</dd>
+                </div>
+                <div class="details-row">
+                  <dt>Email</dt><dd>{{ form.email }}</dd>
+                </div>
+                <div class="details-row">
+                  <dt>Circle</dt><dd class="capitalize">{{ form.circle }}</dd>
+                </div>
+                <div class="details-row">
+                  <dt>Contribution</dt><dd>{{ selectedTier.label }}</dd>
+                </div>
+              </dl>
+            </DashedBox>
+            <p class="join-flow-body" style="margin-top: 16px">
+              We've sent a confirmation email to {{ form.email }}. Redirecting
+              you to your dashboard...
+            </p>
+            <div class="button-row" style="margin-top: 20px">
+              <NuxtLink to="/welcome" class="form-submit">
+                Go to Dashboard Now
+              </NuxtLink>
+            </div>
+          </template>
+
+          <!-- Error state -->
+          <template v-if="flowState === 'error'">
+            <h2 class="join-flow-heading">We couldn't complete your signup</h2>
+            <div v-if="errorMessage" class="error-box">
+              {{ errorMessage }}
+            </div>
+            <div class="button-row" style="margin-top: 20px">
+              <button class="btn" @click="closeFlowOverlay">
+                Back to form
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>