From 1024a80731c260b1686f57d289cbd50dfe2a24bd Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 19 Mar 2026 11:01:03 +0000
Subject: [PATCH] Add login form to coming-soon page and allow admin routes
 through

Coming-soon page now shows a magic link login form for unauthenticated
visitors and a wiki link + sign out for logged-in members. The
coming-soon middleware allows /admin routes through (still protected by
admin middleware). A /login redirect page ensures invite email links work.
---
 app/middleware/coming-soon.global.js |  10 ++-
 app/pages/coming-soon.vue            | 122 +++++++++++++++++++++++++--
 app/pages/login.vue                  |   3 +
 3 files changed, 127 insertions(+), 8 deletions(-)
 create mode 100644 app/pages/login.vue

diff --git a/app/middleware/coming-soon.global.js b/app/middleware/coming-soon.global.js
index 3176935..11dc3cc 100644
--- a/app/middleware/coming-soon.global.js
+++ b/app/middleware/coming-soon.global.js
@@ -8,11 +8,15 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
     return;
   }
 
-  // Allow access to the coming-soon page and OIDC login
-  if (to.path === "/coming-soon" || to.path === "/auth/wiki-login") {
+  // Allow access to the coming-soon page, OIDC login, and admin routes
+  if (
+    to.path === "/coming-soon" ||
+    to.path === "/auth/wiki-login" ||
+    to.path.startsWith("/admin")
+  ) {
     return;
   }
 
-  // Redirect all other routes to coming-soon — no exceptions
+  // Redirect all other routes to coming-soon
   return navigateTo("/coming-soon");
 });
diff --git a/app/pages/coming-soon.vue b/app/pages/coming-soon.vue
index 13ad706..19041b5 100644
--- a/app/pages/coming-soon.vue
+++ b/app/pages/coming-soon.vue
@@ -1,9 +1,79 @@
 <template>
-  <div class="min-h-screen w-full flex flex-col items-center justify-center">
-    <a href="https://babyghosts.fund/ghost-guild" class="text-center">
-      <h1 class="text-display-xl font-bold mb-4">Ghost Guild</h1>
-      <p class="text-display-sm text-guild-400">Coming Soon</p>
-    </a>
+  <div class="min-h-screen w-full flex flex-col items-center justify-center px-4">
+    <h1 class="text-display-xl font-bold mb-2">Ghost Guild</h1>
+    <p class="text-display-sm text-guild-400 mb-10">Coming Soon</p>
+
+    <!-- Logged-in state -->
+    <div v-if="isAuthenticated" class="w-full max-w-sm space-y-4 text-center">
+      <p class="text-guild-200">
+        Welcome back, <strong class="text-guild-100">{{ memberData.name || memberData.email }}</strong>
+      </p>
+      <a
+        href="https://wiki.ghostguild.org"
+        class="block w-full py-3 px-4 bg-candlelight-500 hover:bg-candlelight-400 text-guild-900 font-semibold rounded-lg text-center transition-colors">
+        Go to Wiki
+      </a>
+      <button
+        class="text-sm text-guild-400 hover:text-guild-200 transition-colors"
+        @click="handleLogout">
+        Sign out
+      </button>
+    </div>
+
+    <!-- Login form -->
+    <div v-else class="w-full max-w-sm">
+      <!-- Success state -->
+      <div v-if="loginSuccess" class="text-center py-4">
+        <div
+          class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+          <UIcon name="i-heroicons-check-circle" class="w-10 h-10 text-candlelight-400" />
+        </div>
+        <h3 class="text-lg font-semibold text-guild-100 mb-2">
+          Check your email
+        </h3>
+        <p class="text-guild-300">
+          We've sent a magic link to
+          <strong class="text-guild-100">{{ email }}</strong>.
+          Click the link to sign in.
+        </p>
+      </div>
+
+      <!-- Form -->
+      <UForm v-else :state="{ email }" @submit="handleLogin">
+        <UFormField label="Email Address" name="email" required class="mb-4">
+          <UInput
+            v-model="email"
+            type="email"
+            size="lg"
+            class="w-full"
+            placeholder="your.email@example.com" />
+        </UFormField>
+
+        <div v-if="loginError" class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg">
+          <p class="text-ember-400 text-sm">{{ loginError }}</p>
+        </div>
+
+        <UButton
+          type="submit"
+          :loading="isLoggingIn"
+          :disabled="!isFormValid"
+          size="lg"
+          class="w-full">
+          Send Magic Link
+        </UButton>
+
+        <div class="text-center pt-6 border-t border-guild-700 mt-6">
+          <p class="text-guild-400 text-sm">
+            Don't have an account?
+            <a
+              href="https://babyghosts.fund/ghost-guild/"
+              class="text-candlelight-400 hover:text-candlelight-300 font-medium">
+              Join Ghost Guild
+            </a>
+          </p>
+        </div>
+      </UForm>
+    </div>
   </div>
 </template>
 
@@ -11,4 +81,46 @@
 definePageMeta({
   layout: "coming-soon",
 });
+
+const { isAuthenticated, memberData, checkMemberStatus, logout } = useAuth();
+
+const email = ref("");
+const isLoggingIn = ref(false);
+const loginSuccess = ref(false);
+const loginError = ref("");
+
+const isFormValid = computed(() => email.value && email.value.includes("@"));
+
+await checkMemberStatus();
+
+const handleLogin = async () => {
+  if (isLoggingIn.value) return;
+
+  isLoggingIn.value = true;
+  loginError.value = "";
+
+  try {
+    const response = await $fetch("/api/auth/login", {
+      method: "POST",
+      body: { email: email.value },
+    });
+
+    if (response.success) {
+      loginSuccess.value = true;
+    }
+  } catch (err) {
+    if (err.statusCode === 500) {
+      loginError.value = "Failed to send login email. Please try again later.";
+    } else {
+      loginError.value =
+        err.statusMessage || "Something went wrong. Please try again.";
+    }
+  } finally {
+    isLoggingIn.value = false;
+  }
+};
+
+const handleLogout = async () => {
+  await logout();
+};
 </script>
diff --git a/app/pages/login.vue b/app/pages/login.vue
new file mode 100644
index 0000000..5fe8d82
--- /dev/null
+++ b/app/pages/login.vue
@@ -0,0 +1,3 @@
+<script setup>
+await navigateTo("/coming-soon", { redirectCode: 301 });
+</script>