From fc7ec52574e13a6f3b5dd556f90fe7eb8a608d79 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Mon, 13 Apr 2026 22:26:14 +0100
Subject: [PATCH] restrict members page to authenticated users only, remove
 public access

---
 app/pages/members/index.vue | 107 ++----------------------------------
 1 file changed, 6 insertions(+), 101 deletions(-)

diff --git a/app/pages/members/index.vue b/app/pages/members/index.vue
index 51b52af..133826b 100644
--- a/app/pages/members/index.vue
+++ b/app/pages/members/index.vue
@@ -18,14 +18,8 @@
           type="button"
           class="toggle-btn"
           :class="{ active: viewMode === 'ecology' }"
-          @click="handleEcologyToggle"
+          @click="setViewMode('ecology')"
         >
-          <template v-if="!isAuthenticated">
-            <svg width="10" height="12" viewBox="0 0 10 12" fill="none" aria-label="Members only" class="lock-icon">
-              <rect x="0.5" y="5" width="9" height="6.5" rx="0" stroke="currentColor" stroke-width="1"/>
-              <path d="M2.5 5V3.5a2.5 2.5 0 015 0V5" stroke="currentColor" stroke-width="1" fill="none"/>
-            </svg>
-          </template>
           Ecology
         </button>
       </div>
@@ -125,12 +119,6 @@
       </button>
     </div>
 
-    <!-- Public CTA (unauthenticated) -->
-    <div v-if="!isAuthenticated" class="public-cta">
-      <p>Join Ghost Guild to see the full directory and find collaborators</p>
-      <NuxtLink to="/join" class="btn btn-primary">Join Ghost Guild</NuxtLink>
-    </div>
-
     <!-- DIRECTORY MODE -->
     <template v-if="viewMode === 'directory'">
       <div v-if="loading && !members.length" class="loading-state">
@@ -294,31 +282,15 @@
       </ClientOnly>
     </template>
 
-    <!-- Auth notice (unauthenticated, has results) -->
-    <div v-if="!isAuthenticated && members.length > 0" class="auth-notice">
-      <p>Some member information is visible to members only.</p>
-      <div class="auth-actions">
-        <button
-          type="button"
-          class="btn"
-          @click="openLoginModal({
-            title: 'Sign in to see more',
-            description: 'Log in to view full member profiles',
-          })"
-        >
-          Log In
-        </button>
-        <NuxtLink to="/join" class="btn btn-primary">Join Ghost Guild</NuxtLink>
-      </div>
-    </div>
   </PageShell>
 </template>
 
 <script setup>
+definePageMeta({ middleware: ['members-auth'] })
+
 const route = useRoute()
 const router = useRouter()
-const { isAuthenticated, memberData } = useAuth()
-const { openLoginModal } = useLoginModal()
+const { memberData } = useAuth()
 const { render: renderMarkdown } = useMarkdown()
 const { getSuggestions } = useEcology()
 const { trackGoal, isComplete } = useOnboarding()
@@ -443,18 +415,6 @@ const pageSubtitle = computed(() => {
 })
 
 // ---- View mode switching ----
-const handleEcologyToggle = () => {
-  if (!isAuthenticated.value) {
-    openLoginModal({
-      title: 'Sign in to explore ecology',
-      description: 'Log in to find members who share your cooperative interests',
-      redirectTo: '/members?view=ecology',
-    })
-    return
-  }
-  setViewMode('ecology')
-}
-
 const setViewMode = (mode) => {
   if (viewMode.value === mode) return
   // Reset all filter state
@@ -541,17 +501,7 @@ const loadEcology = async () => {
       ? allCoopTags.filter((t) => myTopicSlugs.includes(t.slug))
       : allCoopTags
   } catch (error) {
-    if (error?.statusCode === 401 || error?.status === 401) {
-      viewMode.value = 'directory'
-      loadMembers()
-      openLoginModal({
-        title: 'Session expired',
-        description: 'Please sign in again to view ecology',
-        redirectTo: '/members?view=ecology',
-      })
-    } else {
-      console.error('Failed to load ecology:', error)
-    }
+    console.error('Failed to load ecology:', error)
     suggestions.value = []
   } finally {
     ecologyLoading.value = false
@@ -658,12 +608,9 @@ onMounted(async () => {
 
   await loadTagOptions()
 
-  if (viewMode.value === 'ecology' && isAuthenticated.value) {
+  if (viewMode.value === 'ecology') {
     await loadEcology()
   } else {
-    if (viewMode.value === 'ecology' && !isAuthenticated.value) {
-      viewMode.value = 'directory'
-    }
     await loadMembers()
   }
 })
@@ -701,12 +648,6 @@ onMounted(async () => {
   color: var(--text);
 }
 
-.lock-icon {
-  width: 10px;
-  height: 12px;
-  color: var(--text-faint);
-}
-
 /* ---- FILTER BAR ---- */
 .filter-bar {
   padding: 16px 24px;
@@ -916,18 +857,6 @@ onMounted(async () => {
   text-decoration: underline;
 }
 
-/* ---- PUBLIC CTA ---- */
-.public-cta {
-  padding: 24px;
-  border-bottom: 1px dashed var(--border);
-  text-align: center;
-}
-.public-cta p {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 12px;
-}
-
 /* ---- LOADING ---- */
 .loading-state {
   padding: 60px 24px;
@@ -1198,24 +1127,6 @@ onMounted(async () => {
   color: var(--candle);
 }
 
-/* ---- AUTH NOTICE ---- */
-.auth-notice {
-  padding: 24px;
-  margin: 20px 24px;
-  border: 1px dashed var(--candle-faint);
-  text-align: center;
-}
-.auth-notice p {
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 12px;
-}
-.auth-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-}
-
 /* ---- RESPONSIVE ---- */
 @media (max-width: 1024px) {
   .member-grid {
@@ -1247,12 +1158,6 @@ onMounted(async () => {
   .member-card {
     padding: 14px 16px;
   }
-  .auth-notice {
-    margin: 16px;
-  }
-  .public-cta {
-    padding: 20px 16px;
-  }
 }
 
 @media (max-width: 375px) {