guestguard/frontend/pages/signup.vue

<script setup lang="ts">
// Sign-up page. Honors `?email=` (pre-fill) and `?redirect=` query params
// so the collaborator-invite flow can hand a user from /invites/<token>
// through signup → verify-email → login → back to /invites/<token>.
// The redirect target survives across the verify-email round-trip via
// sessionStorage (the verify link is server-generated and can't carry it
// without a schema change).
const auth = useAuth()
const route = useRoute()

const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
const redirect = computed(() =>
  typeof route.query.redirect === 'string' ? route.query.redirect : ''
)
const name = ref('')
const password = ref('')
const acceptTerms = ref(false)
const submitting = ref(false)
const error = ref<string | null>(null)
const sent = ref(false)

async function submit() {
  error.value = null
  submitting.value = true
  try {
    await auth.signup(email.value, name.value, password.value, acceptTerms.value)
    // Park the desired post-verify destination so verify-email.vue can
    // resume the flow once the inbox round-trip completes.
    if (redirect.value && import.meta.client) {
      sessionStorage.setItem('gg.postAuthRedirect', redirect.value)
    }
    sent.value = true
  } catch (e: any) {
    error.value = useErrMessage(e, 'Sign-up failed')
  } finally {
    submitting.value = false
  }
}

// Login link target. If we have a redirect carry it through; pre-fill the
// email field too so the user doesn't retype it.
const loginHref = computed(() => {
  const q = new URLSearchParams()
  if (email.value) q.set('email', email.value)
  if (redirect.value) q.set('redirect', redirect.value)
  const qs = q.toString()
  return qs ? `/login?${qs}` : '/login'
})
</script>

<template>
  <section class="mx-auto max-w-md py-12">
    <h1 class="mb-2 text-2xl font-semibold">Create your account</h1>
    <p class="mb-6 text-sm text-zinc-400">Start managing your event guest lists in minutes.</p>

    <div v-if="sent" class="card text-sm">
      <p class="mb-2 font-medium text-brand-300">Check your inbox.</p>
      <p class="text-zinc-400">
        If <span class="text-zinc-200">{{ email }}</span> is reachable, we've sent a verification link.
        Click it to finish setting up your account.
      </p>
      <NuxtLink :to="loginHref" class="btn-ghost mt-4 w-full">I've verified — sign in</NuxtLink>
    </div>

    <form v-else class="card space-y-4" @submit.prevent="submit">
      <div>
        <label class="label">Name</label>
        <input v-model="name" type="text" class="input" autocomplete="name" required />
      </div>
      <div>
        <label class="label">Email</label>
        <input v-model="email" type="email" class="input" autocomplete="email" required />
      </div>
      <div>
        <label class="label">Password</label>
        <input
          v-model="password"
          type="password"
          class="input"
          autocomplete="new-password"
          minlength="8"
          maxlength="72"
          required
        />
        <p class="mt-1 text-xs text-zinc-500">At least 8 characters.</p>
      </div>
      <label class="flex cursor-pointer items-start gap-2 text-xs text-zinc-400">
        <input
          v-model="acceptTerms"
          type="checkbox"
          class="mt-0.5 h-4 w-4 cursor-pointer accent-brand-500"
          required
        />
        <span>
          I agree to GuestGuard's
          <NuxtLink to="/terms" target="_blank" class="text-brand-400 hover:text-brand-300">Terms of Service</NuxtLink>
          and
          <NuxtLink to="/privacy" target="_blank" class="text-brand-400 hover:text-brand-300">Privacy Policy</NuxtLink>.
        </span>
      </label>
      <button
        class="btn-primary w-full"
        :disabled="submitting || !email || !name || password.length < 8 || !acceptTerms"
      >
        {{ submitting ? 'Creating…' : 'Create account' }}
      </button>
      <p v-if="error" class="text-sm text-red-400">{{ error }}</p>
    </form>

    <p class="mt-6 text-center text-sm text-zinc-400">
      Already have an account?
      <NuxtLink :to="loginHref" class="text-brand-400 hover:text-brand-300">Sign in</NuxtLink>
    </p>
  </section>
</template>