ghostguild-org/app/pages/auth/wiki-login.vue

<script setup lang="ts">
definePageMeta({
  layout: false,
});

const route = useRoute();
const uid = route.query.uid as string;

const email = ref("");
const sent = ref(false);
const notRegistered = ref(false);
const loading = ref(false);
const error = ref("");

async function sendMagicLink() {
  if (!email.value || !uid) return;
  loading.value = true;
  error.value = "";
  notRegistered.value = false;

  try {
    const response = await $fetch<{ success: boolean; registered: boolean }>(
      "/oidc/interaction/login",
      {
        method: "POST",
        body: { email: email.value, uid },
      }
    );
    if (response.registered === false) {
      notRegistered.value = true;
    } else {
      sent.value = true;
    }
  } catch (e: any) {
    error.value =
      e?.data?.statusMessage || "Something went wrong. Please try again.";
  } finally {
    loading.value = false;
  }
}

function resetForm() {
  sent.value = false;
  notRegistered.value = false;
  email.value = "";
}
</script>

<template>
  <main class="wiki-login">
    <div class="dashed-box wiki-login-box">
      <header class="wiki-login-header">
        <p class="section-label">Ghost Guild</p>
        <h1 class="wiki-login-title">Wiki</h1>
      </header>

      <hr class="section-divider" >

      <Transition name="wiki-fade" mode="out-in">
        <form
          v-if="!sent && !notRegistered"
          key="form"
          class="wiki-login-form"
          @submit.prevent="sendMagicLink"
        >
          <div class="field">
            <label for="email">Email address</label>
            <input
              id="email"
              v-model="email"
              type="email"
              required
              autocomplete="email"
              placeholder="you@example.com"
              :disabled="loading"
            >
          </div>

          <p
            v-if="error"
            class="wiki-login-error"
            role="alert"
            aria-live="assertive"
          >
            {{ error }}
          </p>

          <button
            type="submit"
            class="btn btn-primary wiki-login-submit"
            :disabled="loading || !email"
          >
            <span
              v-if="loading"
              class="wiki-login-spinner"
              aria-hidden="true"
            />
            {{ loading ? "Sending" : "Continue" }}
          </button>

          <p class="wiki-login-hint">
            We'll email you a sign-in link. No password needed.
          </p>
        </form>

        <div
          v-else-if="sent"
          key="sent"
          class="wiki-login-sent"
          role="status"
          aria-live="polite"
        >
          <h2 class="wiki-login-sent-heading">Check your inbox</h2>
          <p class="wiki-login-sent-detail">
            A sign-in link was sent to <strong>{{ email }}</strong>
          </p>
          <button class="wiki-login-reset" @click="resetForm">
            Try a different email
          </button>
        </div>

        <div
          v-else
          key="not-registered"
          class="wiki-login-sent"
          role="status"
          aria-live="polite"
        >
          <h2 class="wiki-login-sent-heading">Not a member yet</h2>
          <p class="wiki-login-sent-detail">
            <strong>{{ email }}</strong> isn't registered as a Ghost Guild
            member. If you've pre-registered, an admin needs to invite you
            before you can sign in.
          </p>
          <p class="wiki-login-sent-detail">
            <a href="https://babyghosts.org/ghost-guild/" class="wiki-login-link"
              >Pre-register at Baby Ghosts</a
            >
            or email
            <a href="mailto:hello@babyghosts.org" class="wiki-login-link"
              >hello@babyghosts.org</a
            >
            if you think this is a mistake.
          </p>
          <button class="wiki-login-reset" @click="resetForm">
            Try a different email
          </button>
        </div>
      </Transition>
    </div>
  </main>
</template>

<style scoped>
.wiki-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-pad-y) var(--page-pad-x);
}

.wiki-login-box {
  width: 100%;
  max-width: 360px;
  padding: 24px 28px;
}

.wiki-login-header {
  text-align: center;
}

.wiki-login-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--candle);
  margin: 0;
}

.wiki-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wiki-login-error {
  font-size: 13px;
  color: var(--ember);
  margin: 0;
}

.wiki-login-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.wiki-login-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wiki-login-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid color-mix(in srgb, var(--bg) 35%, transparent);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation: wiki-spin 0.7s linear infinite;
}

@keyframes wiki-spin {
  to {
    transform: rotate(360deg);
  }
}

.wiki-login-hint {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin: 4px 0 0;
}

.wiki-login-sent {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wiki-login-sent-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0;
}

.wiki-login-sent-detail {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

.wiki-login-sent-detail strong {
  color: var(--text-bright);
  font-weight: 600;
}

.wiki-login-link {
  color: var(--candle);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wiki-login-link:hover {
  color: var(--candle-dim);
}

.wiki-login-reset {
  font-family: "Commit Mono", monospace;
  font-size: 12px;
  color: var(--candle);
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.wiki-login-reset:hover {
  color: var(--candle-dim);
}

/* State transition */
.wiki-fade-enter-active,
.wiki-fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wiki-fade-enter-from {
  opacity: 0;
  transform: translateY(6px);
}

.wiki-fade-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}
</style>