feat: pre-registrant management and invitation system
Admin interface to review, filter, and batch-invite the 95 pre-registrants from Baby Ghosts. Accept-invitation page pre-fills their data and collects circle, pronouns, motivation, contribution tier, and agreement before creating their member record.
This commit is contained in:
parent
bab53cec9e
commit
501be10bfe
15 changed files with 1896 additions and 1 deletions
|
|
@ -18,6 +18,14 @@
|
|||
Dashboard
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/admin/pre-registrants"
|
||||
:class="{ active: route.path.startsWith('/admin/pre-registrants') }"
|
||||
>
|
||||
Pre-Registrants
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/admin/members"
|
||||
|
|
@ -92,6 +100,15 @@
|
|||
Dashboard
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/admin/pre-registrants"
|
||||
:class="{ active: route.path.startsWith('/admin/pre-registrants') }"
|
||||
@click="isMobileMenuOpen = false"
|
||||
>
|
||||
Pre-Registrants
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink
|
||||
to="/admin/members"
|
||||
|
|
|
|||
617
app/pages/accept-invite.vue
Normal file
617
app/pages/accept-invite.vue
Normal file
|
|
@ -0,0 +1,617 @@
|
|||
<template>
|
||||
<div class="accept-invite">
|
||||
<!-- Verifying -->
|
||||
<div v-if="step === 'verifying'" class="center-box">
|
||||
<div class="spinner" />
|
||||
<p>Verifying your invitation...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="step === 'error'" class="center-box">
|
||||
<h1>Invitation Error</h1>
|
||||
<div class="error-box">{{ errorMessage }}</div>
|
||||
<NuxtLink to="/" class="btn" style="margin-top: 16px">Go to Ghost Guild</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Accept Form -->
|
||||
<div v-else-if="step === 'form'" class="form-container">
|
||||
<h1>Accept Your Invitation</h1>
|
||||
<p class="form-intro">
|
||||
Welcome to Ghost Guild. Review your info below, choose your circle and contribution, and you're in.
|
||||
</p>
|
||||
|
||||
<div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
|
||||
|
||||
<form @submit.prevent="handleAccept">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="accept-name">Name</label>
|
||||
<input
|
||||
id="accept-name"
|
||||
v-model="form.name"
|
||||
class="form-input"
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="accept-email">Email</label>
|
||||
<input
|
||||
id="accept-email"
|
||||
:value="preRegEmail"
|
||||
class="form-input"
|
||||
type="email"
|
||||
disabled
|
||||
/>
|
||||
<p class="field-note">Email cannot be changed. Contact us if you need to use a different email.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="accept-pronouns">Pronouns</label>
|
||||
<input
|
||||
id="accept-pronouns"
|
||||
v-model="form.pronouns"
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="e.g. they/them, she/her"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="accept-location">City / Region</label>
|
||||
<input
|
||||
id="accept-location"
|
||||
v-model="form.location"
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="e.g. Vancouver, BC"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label">Circle</label>
|
||||
<p class="field-note" style="margin-bottom: 8px">Which circle fits where you are right now?</p>
|
||||
<div class="circle-radios">
|
||||
<div class="circle-radio community">
|
||||
<input
|
||||
id="circle-community"
|
||||
v-model="form.circle"
|
||||
type="radio"
|
||||
name="circle"
|
||||
value="community"
|
||||
/>
|
||||
<label for="circle-community">
|
||||
<span class="circle-label-name" style="color: var(--c-community);">Community</span>
|
||||
<span class="circle-label-desc">Learning about co-ops</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="circle-radio founder">
|
||||
<input
|
||||
id="circle-founder"
|
||||
v-model="form.circle"
|
||||
type="radio"
|
||||
name="circle"
|
||||
value="founder"
|
||||
/>
|
||||
<label for="circle-founder">
|
||||
<span class="circle-label-name" style="color: var(--c-founder);">Founder</span>
|
||||
<span class="circle-label-desc">Building your studio</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="circle-radio practitioner">
|
||||
<input
|
||||
id="circle-practitioner"
|
||||
v-model="form.circle"
|
||||
type="radio"
|
||||
name="circle"
|
||||
value="practitioner"
|
||||
/>
|
||||
<label for="circle-practitioner">
|
||||
<span class="circle-label-name" style="color: var(--c-practitioner);">Practitioner</span>
|
||||
<span class="circle-label-desc">Leading and mentoring</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label" for="accept-motivation">What brings you to Ghost Guild?</label>
|
||||
<textarea
|
||||
id="accept-motivation"
|
||||
v-model="form.motivation"
|
||||
class="form-input"
|
||||
rows="3"
|
||||
placeholder="2-3 sentences about what you're looking for"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label class="form-label" for="accept-tier">Monthly Contribution</label>
|
||||
<select
|
||||
id="accept-tier"
|
||||
v-model="form.contributionTier"
|
||||
class="form-select"
|
||||
>
|
||||
<option value="0">$0/mo -- Access is a right</option>
|
||||
<option value="5">$5/mo -- A small gesture</option>
|
||||
<option value="15">$15/mo -- Sustaining (suggested)</option>
|
||||
<option value="30">$30/mo -- Supporting</option>
|
||||
<option value="50">$50/mo -- Solidarity</option>
|
||||
</select>
|
||||
<p class="field-note">Every dollar above $0 goes to the Solidarity Fund. Your contribution is never a gate -- it is a gift.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group full-width">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="form.agreedToTerms"
|
||||
/>
|
||||
<span>
|
||||
I've read and agree to the
|
||||
<NuxtLink to="/agreement" target="_blank">Member Agreement</NuxtLink>
|
||||
and
|
||||
<NuxtLink to="/guidelines" target="_blank">Code of Conduct</NuxtLink>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button
|
||||
class="form-submit"
|
||||
type="submit"
|
||||
:disabled="!isFormValid || isSubmitting"
|
||||
>
|
||||
<span v-if="isSubmitting">Processing...</span>
|
||||
<span v-else-if="needsPayment">Continue to Payment</span>
|
||||
<span v-else>Accept Invitation</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Payment Step -->
|
||||
<div v-else-if="step === 'payment'" class="form-container">
|
||||
<h1>Payment Information</h1>
|
||||
<p class="form-intro">
|
||||
You're signing up for ${{ form.contributionTier }} CAD / month.
|
||||
</p>
|
||||
|
||||
<div v-if="errorMessage" class="error-box">{{ errorMessage }}</div>
|
||||
|
||||
<DashedBox :hoverable="false">
|
||||
<p class="payment-instruction">Click "Complete Payment" below to open the secure payment modal and verify your payment method.</p>
|
||||
</DashedBox>
|
||||
|
||||
<div class="button-row" style="margin-top: 24px;">
|
||||
<button class="btn" :disabled="isSubmitting" @click="step = 'form'">Back</button>
|
||||
<button class="form-submit" :disabled="isSubmitting" @click="processPayment">
|
||||
<span v-if="isSubmitting">Processing...</span>
|
||||
<span v-else>Complete Payment</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation -->
|
||||
<div v-else-if="step === 'confirmation'" class="center-box">
|
||||
<h1>Welcome to Ghost Guild!</h1>
|
||||
<p>Your membership is active. Redirecting to your dashboard...</p>
|
||||
<NuxtLink to="/welcome" class="btn btn-primary" style="margin-top: 16px">Go to Dashboard</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { requiresPayment } from "~/config/contributions";
|
||||
|
||||
definePageMeta({ layout: false });
|
||||
|
||||
const { checkMemberStatus } = useAuth();
|
||||
|
||||
const step = ref("verifying");
|
||||
const errorMessage = ref("");
|
||||
const isSubmitting = ref(false);
|
||||
const preRegId = ref(null);
|
||||
const preRegEmail = ref("");
|
||||
const token = ref("");
|
||||
|
||||
const form = reactive({
|
||||
name: "",
|
||||
pronouns: "",
|
||||
location: "",
|
||||
circle: "community",
|
||||
motivation: "",
|
||||
contributionTier: "15",
|
||||
agreedToTerms: false,
|
||||
});
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return form.name && form.circle && form.contributionTier && form.agreedToTerms;
|
||||
});
|
||||
|
||||
const needsPayment = computed(() => {
|
||||
return requiresPayment(form.contributionTier);
|
||||
});
|
||||
|
||||
// Helcim state for paid tiers
|
||||
const memberId = ref(null);
|
||||
const customerId = ref(null);
|
||||
const customerCode = ref(null);
|
||||
|
||||
// On mount: extract token from fragment, verify
|
||||
onMounted(async () => {
|
||||
const hash = window.location.hash?.slice(1);
|
||||
if (!hash) {
|
||||
step.value = "error";
|
||||
errorMessage.value = "No invitation token found. Please check your email link.";
|
||||
return;
|
||||
}
|
||||
|
||||
token.value = hash;
|
||||
|
||||
try {
|
||||
const result = await $fetch("/api/invite/verify", {
|
||||
method: "POST",
|
||||
body: { token: hash },
|
||||
});
|
||||
|
||||
preRegId.value = result.preRegistrationId;
|
||||
preRegEmail.value = result.email;
|
||||
form.name = result.name || "";
|
||||
form.location = result.city || "";
|
||||
step.value = "form";
|
||||
} catch (err) {
|
||||
step.value = "error";
|
||||
errorMessage.value =
|
||||
err.data?.statusMessage || "This invitation link is invalid or has expired.";
|
||||
}
|
||||
});
|
||||
|
||||
const handleAccept = async () => {
|
||||
if (isSubmitting.value || !isFormValid.value) return;
|
||||
|
||||
isSubmitting.value = true;
|
||||
errorMessage.value = "";
|
||||
|
||||
try {
|
||||
const result = await $fetch("/api/invite/accept", {
|
||||
method: "POST",
|
||||
body: {
|
||||
preRegistrationId: preRegId.value,
|
||||
name: form.name,
|
||||
pronouns: form.pronouns || undefined,
|
||||
location: form.location || undefined,
|
||||
circle: form.circle,
|
||||
motivation: form.motivation || undefined,
|
||||
contributionTier: form.contributionTier,
|
||||
agreedToTerms: form.agreedToTerms,
|
||||
token: token.value,
|
||||
},
|
||||
});
|
||||
|
||||
memberId.value = result.member.id;
|
||||
|
||||
if (result.requiresPayment) {
|
||||
// Need to create Helcim customer + payment
|
||||
await setupPayment(result.member);
|
||||
} else {
|
||||
// Free tier — session cookie already set by accept endpoint
|
||||
await checkMemberStatus();
|
||||
step.value = "confirmation";
|
||||
setTimeout(() => navigateTo("/welcome"), 3000);
|
||||
}
|
||||
} catch (err) {
|
||||
errorMessage.value =
|
||||
err.data?.statusMessage || "Failed to accept invitation. Please try again.";
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const setupPayment = async (member) => {
|
||||
try {
|
||||
// Create Helcim customer for paid tier
|
||||
const customerResult = await $fetch("/api/helcim/customer", {
|
||||
method: "POST",
|
||||
body: {
|
||||
name: member.name,
|
||||
email: member.email,
|
||||
circle: member.circle,
|
||||
contributionTier: form.contributionTier,
|
||||
},
|
||||
});
|
||||
|
||||
customerId.value = customerResult.customerId;
|
||||
customerCode.value = customerResult.customerCode;
|
||||
|
||||
// Initialize HelcimPay.js
|
||||
const { initializeHelcimPay } = useHelcimPay();
|
||||
await initializeHelcimPay(customerId.value, customerCode.value, 0);
|
||||
|
||||
step.value = "payment";
|
||||
} catch (err) {
|
||||
errorMessage.value =
|
||||
err.data?.statusMessage || "Failed to set up payment. Please try again.";
|
||||
}
|
||||
};
|
||||
|
||||
const processPayment = async () => {
|
||||
if (isSubmitting.value) return;
|
||||
|
||||
isSubmitting.value = true;
|
||||
errorMessage.value = "";
|
||||
|
||||
try {
|
||||
const { verifyPayment } = useHelcimPay();
|
||||
const paymentResult = await verifyPayment();
|
||||
|
||||
if (paymentResult.success) {
|
||||
// Verify payment on server
|
||||
await $fetch("/api/helcim/verify-payment", {
|
||||
method: "POST",
|
||||
body: {
|
||||
cardToken: paymentResult.cardToken,
|
||||
customerId: customerId.value,
|
||||
},
|
||||
});
|
||||
|
||||
// Create subscription
|
||||
await $fetch("/api/helcim/subscription", {
|
||||
method: "POST",
|
||||
body: {
|
||||
customerId: customerId.value,
|
||||
customerCode: customerCode.value,
|
||||
contributionTier: form.contributionTier,
|
||||
cardToken: paymentResult.cardToken,
|
||||
},
|
||||
});
|
||||
|
||||
await checkMemberStatus();
|
||||
step.value = "confirmation";
|
||||
setTimeout(() => navigateTo("/welcome"), 3000);
|
||||
}
|
||||
} catch (err) {
|
||||
errorMessage.value =
|
||||
err.message || "Payment verification failed. Please try again.";
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.accept-invite {
|
||||
min-height: 100vh;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "Commit Mono", monospace;
|
||||
}
|
||||
|
||||
.center-box {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-box h1 {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.center-box p {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px 80px;
|
||||
}
|
||||
|
||||
.form-container h1 {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-intro {
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 28px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
padding: 12px 16px;
|
||||
border: 1px dashed var(--ember);
|
||||
color: var(--ember);
|
||||
font-size: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ---- FORM ---- */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 13px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--candle);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-input:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea.form-input {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.field-note {
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
margin-top: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ---- CIRCLE RADIOS ---- */
|
||||
.circle-radios {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.circle-radio {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circle-radio input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.circle-radio label {
|
||||
display: block;
|
||||
padding: 12px;
|
||||
border: 1px dashed var(--border);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.circle-radio input:checked + label {
|
||||
border-color: var(--candle);
|
||||
border-style: solid;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.circle-label-name {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.circle-label-desc {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* ---- CHECKBOX ---- */
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.checkbox-label input {
|
||||
margin-top: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-label a {
|
||||
color: var(--candle);
|
||||
}
|
||||
|
||||
/* ---- SUBMIT BUTTON ---- */
|
||||
.form-submit {
|
||||
display: inline-block;
|
||||
padding: 10px 24px;
|
||||
background: var(--candle);
|
||||
color: var(--bg);
|
||||
border: none;
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.payment-instruction {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ---- SPINNER ---- */
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px dashed var(--candle);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 600px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.circle-radios {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
830
app/pages/admin/pre-registrants/index.vue
Normal file
830
app/pages/admin/pre-registrants/index.vue
Normal file
|
|
@ -0,0 +1,830 @@
|
|||
<template>
|
||||
<div class="admin-prereg">
|
||||
<!-- Page Header -->
|
||||
<div class="page-header">
|
||||
<div class="header-row">
|
||||
<div>
|
||||
<h1>Pre-Registrants</h1>
|
||||
<p v-if="stats">
|
||||
{{ stats.total }} total · {{ stats.pending }} pending ·
|
||||
{{ stats.selected }} selected · {{ stats.invited }} invited ·
|
||||
{{ stats.accepted }} accepted
|
||||
</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="!selectedIds.length"
|
||||
@click="markAsSelected"
|
||||
>
|
||||
Mark as Selected ({{ selectedIds.length }})
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!invitableIds.length"
|
||||
@click="openInviteModal"
|
||||
>
|
||||
Send Invites ({{ invitableIds.length }})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search / Filter -->
|
||||
<div class="filter-bar">
|
||||
<div class="field" style="margin-bottom: 0; flex: 1">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
placeholder="Search by name, email, city, role..."
|
||||
/>
|
||||
</div>
|
||||
<div class="field" style="margin-bottom: 0">
|
||||
<select v-model="statusFilter" aria-label="Filter by status">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="selected">Selected</option>
|
||||
<option value="invited">Invited</option>
|
||||
<option value="accepted">Accepted</option>
|
||||
<option value="expired">Expired</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="table-wrap">
|
||||
<div v-if="pending" class="loading-state">
|
||||
<div class="spinner" />
|
||||
<span>Loading pre-registrants...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="error-state">
|
||||
Error loading pre-registrants: {{ error }}
|
||||
</div>
|
||||
|
||||
<table v-else-if="filtered.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-check">
|
||||
<UCheckbox
|
||||
label="Select all"
|
||||
:ui="{ label: 'sr-only' }"
|
||||
:model-value="
|
||||
allVisibleSelected
|
||||
? true
|
||||
: someVisibleSelected
|
||||
? 'indeterminate'
|
||||
: false
|
||||
"
|
||||
@update:model-value="toggleSelectAll"
|
||||
/>
|
||||
</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>City</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th class="col-date">Registered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="pr in filtered" :key="pr._id">
|
||||
<tr
|
||||
:class="{ 'row-expanded': expandedId === pr._id }"
|
||||
@click="toggleExpand(pr._id)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<td class="col-check" @click.stop>
|
||||
<UCheckbox
|
||||
:label="`Select ${pr.name || pr.email}`"
|
||||
:ui="{ label: 'sr-only' }"
|
||||
:model-value="selectedIds.includes(pr._id)"
|
||||
@update:model-value="toggleSelect(pr._id)"
|
||||
/>
|
||||
</td>
|
||||
<td class="col-name">{{ pr.name || "—" }}</td>
|
||||
<td class="col-email">{{ pr.email }}</td>
|
||||
<td>{{ pr.city || "—" }}</td>
|
||||
<td>{{ pr.role || "—" }}</td>
|
||||
<td>
|
||||
<span class="status-badge" :class="`status-${pr.status}`">
|
||||
{{ pr.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="col-mono col-date">
|
||||
{{ formatDate(pr.createdAt) }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Expanded detail row -->
|
||||
<tr v-if="expandedId === pr._id" class="detail-row">
|
||||
<td colspan="7">
|
||||
<div class="detail-panel">
|
||||
<div class="detail-fields">
|
||||
<div class="field">
|
||||
<label>Admin Notes</label>
|
||||
<textarea
|
||||
v-model="editNotes"
|
||||
rows="3"
|
||||
placeholder="Add notes about this pre-registrant..."
|
||||
@click.stop
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="detail-actions">
|
||||
<select
|
||||
v-model="editStatus"
|
||||
aria-label="Change status"
|
||||
@click.stop
|
||||
>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="selected">Selected</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn"
|
||||
@click.stop="saveDetail(pr._id)"
|
||||
:disabled="savingDetail"
|
||||
>
|
||||
{{ savingDetail ? "Saving..." : "Save" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="pr.inviteEmailSentAt"
|
||||
class="detail-meta"
|
||||
>
|
||||
Invite sent:
|
||||
{{ new Date(pr.inviteEmailSentAt).toLocaleString() }}
|
||||
</div>
|
||||
<div v-if="pr.acceptedAt" class="detail-meta">
|
||||
Accepted:
|
||||
{{ new Date(pr.acceptedAt).toLocaleString() }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
No pre-registrants found matching your criteria
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Send Invites Modal -->
|
||||
<div
|
||||
v-if="showInviteModal"
|
||||
class="modal-overlay"
|
||||
@click.self="showInviteModal = false"
|
||||
>
|
||||
<div class="modal modal-wide">
|
||||
<div class="modal-header">
|
||||
<h2>Send Invitation Emails</h2>
|
||||
<button class="modal-close" @click="showInviteModal = false">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p class="help-text">
|
||||
Sending to <strong>{{ invitableIds.length }}</strong> pre-registrant{{
|
||||
invitableIds.length !== 1 ? "s" : ""
|
||||
}}. Each receives a unique invitation link valid for 48 hours.
|
||||
</p>
|
||||
|
||||
<div class="field">
|
||||
<label>Email Template</label>
|
||||
<textarea v-model="inviteTemplate" rows="12"></textarea>
|
||||
<p class="help-text" style="margin-top: 4px">
|
||||
Tokens: <code>{name}</code>, <code>{acceptLink}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="invitePreview" class="field">
|
||||
<label>Preview ({{ invitePreview.name || invitePreview.email }})</label>
|
||||
<pre class="preview-box">{{ invitePreviewText }}</pre>
|
||||
</div>
|
||||
|
||||
<div v-if="inviteResults" class="results-box">
|
||||
<strong>Invitations sent</strong>
|
||||
<p class="status-ok">{{ inviteResults.sent }} sent</p>
|
||||
<p v-if="inviteResults.failed" class="status-error">
|
||||
{{ inviteResults.failed }} failed
|
||||
</p>
|
||||
<div v-if="inviteResults.results?.some((r) => !r.success)">
|
||||
<p
|
||||
v-for="fail in inviteResults.results.filter((r) => !r.success)"
|
||||
:key="fail.email"
|
||||
class="status-error"
|
||||
style="font-size: 11px"
|
||||
>
|
||||
{{ fail.email }}: {{ fail.error }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button @click="showInviteModal = false" class="btn">
|
||||
{{ inviteResults ? "Done" : "Cancel" }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!inviteResults"
|
||||
:disabled="sendingInvites"
|
||||
@click="submitInvites"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
{{
|
||||
sendingInvites
|
||||
? "Sending..."
|
||||
: `Send ${invitableIds.length} invitation${invitableIds.length !== 1 ? "s" : ""}`
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
middleware: "admin",
|
||||
});
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const {
|
||||
data: preRegistrants,
|
||||
pending,
|
||||
error,
|
||||
refresh,
|
||||
} = await useFetch("/api/admin/pre-registrants");
|
||||
|
||||
const { data: stats, refresh: refreshStats } = await useFetch(
|
||||
"/api/admin/pre-registrants/stats",
|
||||
);
|
||||
|
||||
const searchQuery = ref("");
|
||||
const statusFilter = ref("");
|
||||
const selectedIds = ref([]);
|
||||
const expandedId = ref(null);
|
||||
const editNotes = ref("");
|
||||
const editStatus = ref("pending");
|
||||
const savingDetail = ref(false);
|
||||
|
||||
// Invite
|
||||
const showInviteModal = ref(false);
|
||||
const sendingInvites = ref(false);
|
||||
const inviteResults = ref(null);
|
||||
|
||||
const DEFAULT_INVITE_TEMPLATE = `Hi {name},
|
||||
|
||||
You pre-registered for Ghost Guild, and we're ready for you.
|
||||
|
||||
Click below to accept your invitation, choose your circle, and set your contribution level:
|
||||
|
||||
{acceptLink}
|
||||
|
||||
This link expires in 48 hours. If it expires, we can send you a new one.
|
||||
|
||||
See you inside.`;
|
||||
|
||||
const inviteTemplate = ref(DEFAULT_INVITE_TEMPLATE);
|
||||
|
||||
const filtered = computed(() => {
|
||||
if (!preRegistrants.value) return [];
|
||||
|
||||
return preRegistrants.value.filter((pr) => {
|
||||
const q = searchQuery.value.toLowerCase();
|
||||
const matchesSearch =
|
||||
!q ||
|
||||
(pr.name || "").toLowerCase().includes(q) ||
|
||||
pr.email.toLowerCase().includes(q) ||
|
||||
(pr.city || "").toLowerCase().includes(q) ||
|
||||
(pr.role || "").toLowerCase().includes(q);
|
||||
|
||||
const matchesStatus = !statusFilter.value || pr.status === statusFilter.value;
|
||||
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
});
|
||||
|
||||
// Selection helpers
|
||||
const allVisibleSelected = computed(() => {
|
||||
if (!filtered.value.length) return false;
|
||||
return filtered.value.every((pr) => selectedIds.value.includes(pr._id));
|
||||
});
|
||||
|
||||
const someVisibleSelected = computed(() => {
|
||||
return filtered.value.some((pr) => selectedIds.value.includes(pr._id));
|
||||
});
|
||||
|
||||
// IDs of selected pre-registrants that can actually be invited (pending or selected status)
|
||||
const invitableIds = computed(() => {
|
||||
if (!preRegistrants.value) return [];
|
||||
return selectedIds.value.filter((id) => {
|
||||
const pr = preRegistrants.value.find((p) => p._id === id);
|
||||
return pr && (pr.status === "pending" || pr.status === "selected");
|
||||
});
|
||||
});
|
||||
|
||||
const toggleSelectAll = () => {
|
||||
if (allVisibleSelected.value) {
|
||||
const visibleIds = new Set(filtered.value.map((pr) => pr._id));
|
||||
selectedIds.value = selectedIds.value.filter((id) => !visibleIds.has(id));
|
||||
} else {
|
||||
const currentSet = new Set(selectedIds.value);
|
||||
for (const pr of filtered.value) {
|
||||
currentSet.add(pr._id);
|
||||
}
|
||||
selectedIds.value = [...currentSet];
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSelect = (id) => {
|
||||
const idx = selectedIds.value.indexOf(id);
|
||||
if (idx >= 0) {
|
||||
selectedIds.value.splice(idx, 1);
|
||||
} else {
|
||||
selectedIds.value.push(id);
|
||||
}
|
||||
};
|
||||
|
||||
// Expand / collapse detail rows
|
||||
const toggleExpand = (id) => {
|
||||
if (expandedId.value === id) {
|
||||
expandedId.value = null;
|
||||
return;
|
||||
}
|
||||
expandedId.value = id;
|
||||
const pr = preRegistrants.value?.find((p) => p._id === id);
|
||||
editNotes.value = pr?.adminNotes || "";
|
||||
editStatus.value = pr?.status === "selected" ? "selected" : "pending";
|
||||
};
|
||||
|
||||
const saveDetail = async (id) => {
|
||||
savingDetail.value = true;
|
||||
try {
|
||||
await $fetch(`/api/admin/pre-registrants/${id}`, {
|
||||
method: "PUT",
|
||||
body: { status: editStatus.value, adminNotes: editNotes.value },
|
||||
});
|
||||
await refresh();
|
||||
await refreshStats();
|
||||
toast.add({ title: "Updated", color: "green" });
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: "Failed to update",
|
||||
description: err.data?.statusMessage || err.message,
|
||||
color: "red",
|
||||
});
|
||||
} finally {
|
||||
savingDetail.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Mark selected as "selected" status
|
||||
const markAsSelected = async () => {
|
||||
try {
|
||||
await $fetch("/api/admin/pre-registrants/bulk-status", {
|
||||
method: "PATCH",
|
||||
body: { ids: selectedIds.value, status: "selected" },
|
||||
});
|
||||
await refresh();
|
||||
await refreshStats();
|
||||
selectedIds.value = [];
|
||||
toast.add({ title: "Marked as selected", color: "green" });
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: "Failed to update status",
|
||||
description: err.data?.statusMessage || err.message,
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Invite modal
|
||||
const invitePreview = computed(() => {
|
||||
if (!invitableIds.value.length || !preRegistrants.value) return null;
|
||||
return preRegistrants.value.find((pr) => pr._id === invitableIds.value[0]);
|
||||
});
|
||||
|
||||
const invitePreviewText = computed(() => {
|
||||
if (!invitePreview.value) return "";
|
||||
return inviteTemplate.value
|
||||
.replace(/\{name\}/g, invitePreview.value.name || "there")
|
||||
.replace(/\{acceptLink\}/g, "https://ghostguild.org/accept-invite#...");
|
||||
});
|
||||
|
||||
const openInviteModal = () => {
|
||||
inviteResults.value = null;
|
||||
showInviteModal.value = true;
|
||||
};
|
||||
|
||||
const submitInvites = async () => {
|
||||
sendingInvites.value = true;
|
||||
try {
|
||||
const result = await $fetch("/api/admin/pre-registrants/invite", {
|
||||
method: "POST",
|
||||
body: {
|
||||
preRegistrantIds: invitableIds.value,
|
||||
emailTemplate: inviteTemplate.value,
|
||||
},
|
||||
});
|
||||
|
||||
inviteResults.value = result;
|
||||
await refresh();
|
||||
await refreshStats();
|
||||
selectedIds.value = [];
|
||||
|
||||
toast.add({
|
||||
title: `Sent ${result.sent} invitation${result.sent !== 1 ? "s" : ""}`,
|
||||
description: result.failed ? `${result.failed} failed` : undefined,
|
||||
color: result.failed ? "orange" : "green",
|
||||
});
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: "Failed to send invitations",
|
||||
description: err.data?.statusMessage || err.message,
|
||||
color: "red",
|
||||
});
|
||||
} finally {
|
||||
sendingInvites.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-prereg {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ---- PAGE HEADER ---- */
|
||||
.page-header {
|
||||
padding: 28px 28px 20px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ---- FILTER BAR ---- */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 28px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
/* ---- TABLE ---- */
|
||||
.table-wrap {
|
||||
padding: 0 28px 24px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
thead th {
|
||||
text-align: left;
|
||||
padding: 12px 10px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-faint);
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px dashed var(--border);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 10px;
|
||||
color: var(--text);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.col-check {
|
||||
width: 32px;
|
||||
padding-left: 0;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.col-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.col-email {
|
||||
color: var(--text-dim);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.col-mono {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.col-date {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
/* ---- STATUS BADGES ---- */
|
||||
.status-badge {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 2px 6px;
|
||||
border: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.status-selected {
|
||||
color: var(--candle);
|
||||
border-color: var(--candle);
|
||||
}
|
||||
|
||||
.status-invited {
|
||||
color: var(--text-bright);
|
||||
border-color: var(--text-dim);
|
||||
}
|
||||
|
||||
.status-accepted {
|
||||
color: var(--green, #4a7);
|
||||
border-color: var(--green, #4a7);
|
||||
}
|
||||
|
||||
.status-expired {
|
||||
color: var(--ember);
|
||||
border-color: var(--ember);
|
||||
}
|
||||
|
||||
/* ---- EXPANDED DETAIL ROW ---- */
|
||||
.row-expanded {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.detail-row td {
|
||||
padding: 0 10px 16px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.detail-fields {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.detail-fields .field {
|
||||
flex: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ---- STATUS INDICATORS ---- */
|
||||
.status-ok {
|
||||
color: var(--green, #4a7);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.status-error {
|
||||
color: var(--ember);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ---- MODALS ---- */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg);
|
||||
border: 1px dashed var(--border);
|
||||
max-width: 440px;
|
||||
width: 100%;
|
||||
margin: 16px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-wide {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px 16px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-faint);
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
/* ---- HELP TEXT ---- */
|
||||
.help-text {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.help-text code {
|
||||
color: var(--text-bright);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ---- PREVIEW BOX ---- */
|
||||
.preview-box {
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
background: var(--surface);
|
||||
border: 1px dashed var(--border);
|
||||
padding: 16px;
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ---- RESULTS BOX ---- */
|
||||
.results-box {
|
||||
padding: 16px 20px;
|
||||
border: 1px dashed var(--border);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.results-box strong {
|
||||
color: var(--text-bright);
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* ---- STATES ---- */
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--ember);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px dashed var(--candle);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
padding: 24px 20px 16px;
|
||||
}
|
||||
|
||||
.header-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
flex-direction: column;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
padding: 0 12px 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.detail-fields {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
server/api/admin/pre-registrants/[id].get.js
Normal file
15
server/api/admin/pre-registrants/[id].get.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import PreRegistration from '../../../models/preRegistration.js'
|
||||
import { connectDB } from '../../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdmin(event)
|
||||
const id = getRouterParam(event, 'id')
|
||||
await connectDB()
|
||||
|
||||
const preRegistrant = await PreRegistration.findById(id).lean()
|
||||
if (!preRegistrant) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Pre-registrant not found' })
|
||||
}
|
||||
|
||||
return preRegistrant
|
||||
})
|
||||
26
server/api/admin/pre-registrants/[id].put.js
Normal file
26
server/api/admin/pre-registrants/[id].put.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import PreRegistration from '../../../models/preRegistration.js'
|
||||
import { connectDB } from '../../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdmin(event)
|
||||
const id = getRouterParam(event, 'id')
|
||||
const body = await validateBody(event, preRegistrantStatusUpdateSchema)
|
||||
await connectDB()
|
||||
|
||||
const existing = await PreRegistration.findById(id)
|
||||
if (!existing) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Pre-registrant not found' })
|
||||
}
|
||||
|
||||
// Only allow status changes to pending/selected (invite/accept are handled by other endpoints)
|
||||
if (existing.status === 'accepted') {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Cannot modify an accepted pre-registrant' })
|
||||
}
|
||||
|
||||
const update = {}
|
||||
if (body.status !== undefined) update.status = body.status
|
||||
if (body.adminNotes !== undefined) update.adminNotes = body.adminNotes
|
||||
|
||||
const updated = await PreRegistration.findByIdAndUpdate(id, update, { new: true }).lean()
|
||||
return updated
|
||||
})
|
||||
16
server/api/admin/pre-registrants/bulk-status.patch.js
Normal file
16
server/api/admin/pre-registrants/bulk-status.patch.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import PreRegistration from '../../../models/preRegistration.js'
|
||||
import { connectDB } from '../../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdmin(event)
|
||||
const { ids, status } = await validateBody(event, preRegistrantBulkStatusSchema)
|
||||
await connectDB()
|
||||
|
||||
// Only update pre-registrants that aren't already accepted
|
||||
const result = await PreRegistration.updateMany(
|
||||
{ _id: { $in: ids }, status: { $nin: ['accepted'] } },
|
||||
{ $set: { status } }
|
||||
)
|
||||
|
||||
return { modified: result.modifiedCount, total: ids.length }
|
||||
})
|
||||
13
server/api/admin/pre-registrants/index.get.js
Normal file
13
server/api/admin/pre-registrants/index.get.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import PreRegistration from '../../../models/preRegistration.js'
|
||||
import { connectDB } from '../../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdmin(event)
|
||||
await connectDB()
|
||||
|
||||
const preRegistrants = await PreRegistration.find()
|
||||
.sort({ createdAt: -1 })
|
||||
.lean()
|
||||
|
||||
return preRegistrants
|
||||
})
|
||||
98
server/api/admin/pre-registrants/invite.post.js
Normal file
98
server/api/admin/pre-registrants/invite.post.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import jwt from 'jsonwebtoken'
|
||||
import { randomUUID } from 'crypto'
|
||||
import { Resend } from 'resend'
|
||||
import PreRegistration from '../../../models/preRegistration.js'
|
||||
import { connectDB } from '../../../utils/mongoose.js'
|
||||
|
||||
const resend = new Resend(process.env.RESEND_API_KEY)
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdmin(event)
|
||||
const { preRegistrantIds, emailTemplate } = await validateBody(event, preRegistrantInviteSchema)
|
||||
await connectDB()
|
||||
|
||||
const baseUrl = process.env.BASE_URL
|
||||
if (!baseUrl) {
|
||||
throw createError({ statusCode: 500, statusMessage: 'BASE_URL environment variable is not set' })
|
||||
}
|
||||
|
||||
const config = useRuntimeConfig(event)
|
||||
const preRegs = await PreRegistration.find({ _id: { $in: preRegistrantIds } })
|
||||
|
||||
if (preRegs.length === 0) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'No pre-registrants found for the provided IDs' })
|
||||
}
|
||||
|
||||
const results = []
|
||||
|
||||
for (const preReg of preRegs) {
|
||||
// Only send to selected pre-registrants (skip already invited/accepted/expired)
|
||||
if (preReg.status !== 'selected' && preReg.status !== 'pending') {
|
||||
results.push({
|
||||
preRegistrantId: preReg._id,
|
||||
email: preReg.email,
|
||||
success: false,
|
||||
error: `Skipped: status is ${preReg.status}`,
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
try {
|
||||
const jti = randomUUID()
|
||||
const token = jwt.sign(
|
||||
{ preRegistrationId: preReg._id.toString(), jti, type: 'prereg-invite' },
|
||||
config.jwtSecret,
|
||||
{ expiresIn: '48h' },
|
||||
)
|
||||
|
||||
// Token in fragment — never hits server logs
|
||||
const acceptLink = `${baseUrl}/accept-invite#${token}`
|
||||
|
||||
const emailText = emailTemplate
|
||||
.replace(/\{name\}/g, preReg.name || 'there')
|
||||
.replace(/\{acceptLink\}/g, acceptLink)
|
||||
|
||||
// Build HTML version
|
||||
const acceptButton = `<a href="${acceptLink}" style="display:inline-block;padding:12px 24px;background-color:#d4a017;color:#1a1a1a;text-decoration:none;border-radius:6px;font-weight:bold;">Accept Your Invitation</a>`
|
||||
const emailHtml = emailTemplate
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/\{name\}/g, preReg.name || 'there')
|
||||
.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1">$1</a>')
|
||||
.replace(/\n/g, '<br>')
|
||||
.replace(/\{acceptLink\}/g, acceptButton)
|
||||
|
||||
const { error: emailError } = await resend.emails.send({
|
||||
from: 'Ghost Guild <welcome@babyghosts.org>',
|
||||
to: [preReg.email],
|
||||
subject: "You're invited to Ghost Guild",
|
||||
text: emailText,
|
||||
html: emailHtml,
|
||||
})
|
||||
|
||||
if (emailError) {
|
||||
results.push({ preRegistrantId: preReg._id, email: preReg.email, success: false, error: emailError.message })
|
||||
continue
|
||||
}
|
||||
|
||||
await PreRegistration.findByIdAndUpdate(preReg._id, {
|
||||
$set: {
|
||||
magicLinkJti: jti,
|
||||
magicLinkJtiUsed: false,
|
||||
status: 'invited',
|
||||
inviteEmailSentAt: new Date(),
|
||||
},
|
||||
})
|
||||
|
||||
results.push({ preRegistrantId: preReg._id, email: preReg.email, success: true })
|
||||
} catch (err) {
|
||||
results.push({ preRegistrantId: preReg._id, email: preReg.email, success: false, error: err.message })
|
||||
}
|
||||
}
|
||||
|
||||
const sent = results.filter(r => r.success).length
|
||||
const failed = results.filter(r => !r.success).length
|
||||
|
||||
return { sent, failed, results }
|
||||
})
|
||||
19
server/api/admin/pre-registrants/stats.get.js
Normal file
19
server/api/admin/pre-registrants/stats.get.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import PreRegistration from '../../../models/preRegistration.js'
|
||||
import { connectDB } from '../../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requireAdmin(event)
|
||||
await connectDB()
|
||||
|
||||
const counts = await PreRegistration.aggregate([
|
||||
{ $group: { _id: '$status', count: { $sum: 1 } } }
|
||||
])
|
||||
|
||||
const stats = { total: 0, pending: 0, selected: 0, invited: 0, accepted: 0, expired: 0 }
|
||||
for (const { _id, count } of counts) {
|
||||
if (_id in stats) stats[_id] = count
|
||||
stats.total += count
|
||||
}
|
||||
|
||||
return stats
|
||||
})
|
||||
108
server/api/invite/accept.post.js
Normal file
108
server/api/invite/accept.post.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import jwt from 'jsonwebtoken'
|
||||
import PreRegistration from '../../models/preRegistration.js'
|
||||
import Member from '../../models/member.js'
|
||||
import { connectDB } from '../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await validateBody(event, inviteAcceptSchema)
|
||||
const config = useRuntimeConfig(event)
|
||||
await connectDB()
|
||||
|
||||
// Re-verify the token is still valid (not expired)
|
||||
let decoded
|
||||
try {
|
||||
decoded = jwt.verify(body.token, config.jwtSecret)
|
||||
} catch {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid or expired invitation link' })
|
||||
}
|
||||
|
||||
if (decoded.type !== 'prereg-invite' || decoded.preRegistrationId !== body.preRegistrationId) {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid or expired invitation link' })
|
||||
}
|
||||
|
||||
const preReg = await PreRegistration.findById(body.preRegistrationId)
|
||||
if (!preReg) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Pre-registration not found' })
|
||||
}
|
||||
|
||||
if (preReg.status === 'accepted') {
|
||||
throw createError({ statusCode: 400, statusMessage: 'This invitation has already been accepted' })
|
||||
}
|
||||
|
||||
// Check no existing member with this email
|
||||
const existingMember = await Member.findOne({ email: preReg.email })
|
||||
if (existingMember) {
|
||||
throw createError({ statusCode: 409, statusMessage: 'A member with this email already exists' })
|
||||
}
|
||||
|
||||
// Create the member
|
||||
const member = await Member.create({
|
||||
email: preReg.email,
|
||||
name: body.name,
|
||||
pronouns: body.pronouns || undefined,
|
||||
location: body.location || undefined,
|
||||
circle: body.circle,
|
||||
contributionTier: body.contributionTier,
|
||||
bio: body.motivation || undefined,
|
||||
status: body.contributionTier === '0' ? 'active' : 'pending_payment',
|
||||
})
|
||||
|
||||
// Update pre-registration
|
||||
await PreRegistration.findByIdAndUpdate(preReg._id, {
|
||||
$set: {
|
||||
status: 'accepted',
|
||||
acceptedAt: new Date(),
|
||||
memberId: member._id,
|
||||
}
|
||||
})
|
||||
|
||||
logActivity(member._id, 'member_joined', {
|
||||
source: 'pre-registration',
|
||||
preRegistrationId: preReg._id,
|
||||
})
|
||||
|
||||
// For free tier, issue session and redirect to welcome
|
||||
if (body.contributionTier === '0') {
|
||||
const sessionToken = jwt.sign(
|
||||
{ memberId: member._id, email: member.email, tv: member.tokenVersion },
|
||||
config.jwtSecret,
|
||||
{ expiresIn: '7d' },
|
||||
)
|
||||
|
||||
setCookie(event, 'auth-token', sessionToken, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: 60 * 60 * 24 * 7,
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
requiresPayment: false,
|
||||
redirectUrl: '/welcome',
|
||||
member: {
|
||||
id: member._id,
|
||||
email: member.email,
|
||||
name: member.name,
|
||||
circle: member.circle,
|
||||
contributionTier: member.contributionTier,
|
||||
status: member.status,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For paid tiers, return member info so frontend can proceed to Helcim payment
|
||||
return {
|
||||
success: true,
|
||||
requiresPayment: true,
|
||||
member: {
|
||||
id: member._id,
|
||||
email: member.email,
|
||||
name: member.name,
|
||||
circle: member.circle,
|
||||
contributionTier: member.contributionTier,
|
||||
status: member.status,
|
||||
}
|
||||
}
|
||||
})
|
||||
46
server/api/invite/verify.post.js
Normal file
46
server/api/invite/verify.post.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import jwt from 'jsonwebtoken'
|
||||
import PreRegistration from '../../models/preRegistration.js'
|
||||
import { connectDB } from '../../utils/mongoose.js'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { token } = await validateBody(event, inviteVerifySchema)
|
||||
const config = useRuntimeConfig(event)
|
||||
await connectDB()
|
||||
|
||||
let decoded
|
||||
try {
|
||||
decoded = jwt.verify(token, config.jwtSecret)
|
||||
} catch {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid or expired invitation link' })
|
||||
}
|
||||
|
||||
if (decoded.type !== 'prereg-invite') {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid or expired invitation link' })
|
||||
}
|
||||
|
||||
const preReg = await PreRegistration.findById(decoded.preRegistrationId)
|
||||
if (!preReg) {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid or expired invitation link' })
|
||||
}
|
||||
|
||||
if (preReg.status === 'accepted') {
|
||||
throw createError({ statusCode: 400, statusMessage: 'This invitation has already been accepted' })
|
||||
}
|
||||
|
||||
// Single-use enforcement
|
||||
if (!decoded.jti || decoded.jti !== preReg.magicLinkJti || preReg.magicLinkJtiUsed) {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid or expired invitation link' })
|
||||
}
|
||||
|
||||
// Burn the token
|
||||
await PreRegistration.findByIdAndUpdate(preReg._id, {
|
||||
$set: { magicLinkJtiUsed: true }
|
||||
})
|
||||
|
||||
return {
|
||||
preRegistrationId: preReg._id,
|
||||
name: preReg.name,
|
||||
email: preReg.email,
|
||||
city: preReg.city,
|
||||
}
|
||||
})
|
||||
|
|
@ -92,6 +92,19 @@ async function run() {
|
|||
}
|
||||
}
|
||||
|
||||
// Normalize: ensure all docs have status field for Mongoose model compatibility
|
||||
if (!DRY_RUN) {
|
||||
const normalized = await dest.updateMany(
|
||||
{ status: { $exists: false } },
|
||||
{ $set: { status: "pending" } },
|
||||
);
|
||||
if (normalized.modifiedCount > 0) {
|
||||
console.log(
|
||||
`\nNormalized ${normalized.modifiedCount} record(s) with missing status field.`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
console.log("\n=== Summary ===");
|
||||
console.log(` Inserted : ${inserted}`);
|
||||
console.log(` Skipped : ${skipped}`);
|
||||
|
|
|
|||
32
server/models/preRegistration.js
Normal file
32
server/models/preRegistration.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import mongoose from "mongoose";
|
||||
|
||||
const preRegistrationSchema = new mongoose.Schema(
|
||||
{
|
||||
email: {
|
||||
type: String,
|
||||
required: true,
|
||||
unique: true,
|
||||
lowercase: true,
|
||||
trim: true,
|
||||
},
|
||||
name: String,
|
||||
city: String,
|
||||
role: String, // professional role (e.g. "3D artist") — admin-only reference
|
||||
newsletterOptIn: Boolean,
|
||||
status: {
|
||||
type: String,
|
||||
enum: ["pending", "selected", "invited", "accepted", "expired"],
|
||||
default: "pending",
|
||||
},
|
||||
inviteEmailSentAt: Date,
|
||||
acceptedAt: Date,
|
||||
memberId: { type: mongoose.Schema.Types.ObjectId, ref: "Member" },
|
||||
magicLinkJti: String,
|
||||
magicLinkJtiUsed: { type: Boolean, default: false },
|
||||
adminNotes: String,
|
||||
},
|
||||
{ timestamps: true }
|
||||
);
|
||||
|
||||
export default mongoose.models.PreRegistration ||
|
||||
mongoose.model("PreRegistration", preRegistrationSchema);
|
||||
|
|
@ -351,6 +351,39 @@ export const memberInviteSchema = z.object({
|
|||
emailTemplate: z.string().min(1).max(10000)
|
||||
})
|
||||
|
||||
// --- Pre-registrant schemas ---
|
||||
|
||||
export const preRegistrantStatusUpdateSchema = z.object({
|
||||
status: z.enum(['pending', 'selected']),
|
||||
adminNotes: z.string().max(2000).optional()
|
||||
})
|
||||
|
||||
export const preRegistrantBulkStatusSchema = z.object({
|
||||
ids: z.array(z.string().min(1)).min(1).max(100),
|
||||
status: z.enum(['pending', 'selected'])
|
||||
})
|
||||
|
||||
export const preRegistrantInviteSchema = z.object({
|
||||
preRegistrantIds: z.array(z.string().min(1)).min(1).max(20),
|
||||
emailTemplate: z.string().min(1).max(10000)
|
||||
})
|
||||
|
||||
export const inviteVerifySchema = z.object({
|
||||
token: z.string().min(1)
|
||||
})
|
||||
|
||||
export const inviteAcceptSchema = z.object({
|
||||
preRegistrationId: z.string().min(1),
|
||||
name: z.string().min(1).max(200),
|
||||
pronouns: z.string().max(100).optional(),
|
||||
location: z.string().max(200).optional(),
|
||||
circle: z.enum(['community', 'founder', 'practitioner']),
|
||||
motivation: z.string().max(5000).optional(),
|
||||
contributionTier: z.enum(['0', '5', '15', '30', '50']),
|
||||
agreedToTerms: z.literal(true),
|
||||
token: z.string().min(1)
|
||||
})
|
||||
|
||||
// --- Tag schemas ---
|
||||
|
||||
export const tagSuggestionSchema = z.object({
|
||||
|
|
|
|||
|
|
@ -31,6 +31,14 @@ const adminRoutes = {
|
|||
'series/[id].delete.js',
|
||||
'series/[id].put.js',
|
||||
'series/tickets.put.js'
|
||||
],
|
||||
'admin/pre-registrants/': [
|
||||
'pre-registrants/index.get.js',
|
||||
'pre-registrants/[id].get.js',
|
||||
'pre-registrants/[id].put.js',
|
||||
'pre-registrants/bulk-status.patch.js',
|
||||
'pre-registrants/invite.post.js',
|
||||
'pre-registrants/stats.get.js'
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +58,11 @@ const businessLogicPatterns = [
|
|||
'Event.countDocuments',
|
||||
'Series.find',
|
||||
'Series.findOne',
|
||||
'Series.findById'
|
||||
'Series.findById',
|
||||
'PreRegistration.find',
|
||||
'PreRegistration.findById',
|
||||
'PreRegistration.aggregate',
|
||||
'PreRegistration.updateMany'
|
||||
]
|
||||
|
||||
describe('Admin endpoint auth guards', () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue