UI/UX tweaks and improvements.
This commit is contained in:
parent
4daec9b624
commit
418d3cc402
32 changed files with 2725 additions and 1201 deletions
|
|
@ -3,18 +3,25 @@
|
|||
<!-- Unauthenticated -->
|
||||
<div v-if="!memberData" class="loading">
|
||||
<p>Please sign in to access your account settings.</p>
|
||||
<button class="btn btn-primary" @click="openLoginModal({ title: 'Sign in to manage your account' })">Sign In</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="openLoginModal({ title: 'Sign in to manage your account' })"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="account-authenticated">
|
||||
<!-- PAGE HEADER -->
|
||||
<PageHeader title="Account Settings" subtitle="Manage your membership and billing" />
|
||||
<PageHeader
|
||||
title="Account Settings"
|
||||
subtitle="Manage your membership and billing"
|
||||
/>
|
||||
|
||||
<!-- CONTENT AREA WITH EVENTS SIDEBAR -->
|
||||
<div class="content-area">
|
||||
<div class="page-content">
|
||||
<div class="account-columns">
|
||||
|
||||
<!-- LEFT COLUMN: Membership Status & Email -->
|
||||
<div class="account-col-left">
|
||||
<section class="account-section">
|
||||
|
|
@ -24,24 +31,42 @@
|
|||
<div class="membership-card">
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Status</span>
|
||||
<span class="membership-v">
|
||||
<span class="status-dot" :class="memberData.status || 'active'"></span>
|
||||
{{ memberData.status || 'Active' }}
|
||||
<span class="membership-v status-v">
|
||||
<span
|
||||
class="status-dot"
|
||||
:class="memberData.status || 'active'"
|
||||
></span>
|
||||
<span>{{
|
||||
formatStatus(memberData.status || "active")
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Circle</span>
|
||||
<span class="membership-v" :style="{ color: `var(--c-${memberData.circle || 'community'})` }">
|
||||
{{ memberData.circle || 'Community' }}
|
||||
<span
|
||||
class="membership-v"
|
||||
:style="{
|
||||
color: `var(--c-${memberData.circle || 'community'})`,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
memberData.circle
|
||||
? capitalise(memberData.circle)
|
||||
: "Community"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Contribution</span>
|
||||
<span class="membership-v">${{ memberData.contributionTier || 0 }} / month</span>
|
||||
<span class="membership-v"
|
||||
>${{ memberData.contributionTier || 0 }} / month</span
|
||||
>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="membership-k">Member since</span>
|
||||
<span class="membership-v">{{ formatMemberSince(memberData.createdAt) }}</span>
|
||||
<span class="membership-v">{{
|
||||
formatMemberSince(memberData.createdAt)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,10 +75,50 @@
|
|||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Email</div>
|
||||
<div class="email-display">
|
||||
|
||||
<div v-if="!showEmailEdit" class="email-display">
|
||||
<span class="email-value">{{ memberData.email }}</span>
|
||||
<button
|
||||
class="btn btn-inline"
|
||||
@click="showEmailEdit = true"
|
||||
>
|
||||
Change
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="email-edit">
|
||||
<div class="field">
|
||||
<label>New email address</label>
|
||||
<input
|
||||
type="email"
|
||||
v-model="newEmail"
|
||||
placeholder="you@example.com"
|
||||
@keydown.enter="handleUpdateEmail"
|
||||
@keydown.escape="cancelEmailEdit"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
<div class="email-edit-actions">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="handleUpdateEmail"
|
||||
:disabled="isUpdatingEmail || !newEmail.trim()"
|
||||
>
|
||||
{{ isUpdatingEmail ? "Saving…" : "Save" }}
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="cancelEmailEdit"
|
||||
:disabled="isUpdatingEmail"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="email-hint">
|
||||
Used for login magic links and notifications
|
||||
</div>
|
||||
<div class="email-hint">Used for login magic links and notifications</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -61,17 +126,34 @@
|
|||
<div class="account-col-inset">
|
||||
<div class="section-label danger">Danger Zone</div>
|
||||
<div class="danger-zone">
|
||||
<p>Cancelling your membership will immediately revoke access to member-only resources, events, and the Slack workspace. <strong>This action cannot be easily undone.</strong></p>
|
||||
<p>
|
||||
Cancelling your membership will immediately revoke access
|
||||
to member-only resources, events, and the Slack workspace.
|
||||
<strong>This action cannot be easily undone.</strong>
|
||||
</p>
|
||||
<div v-if="showCancelConfirm" class="cancel-confirm">
|
||||
<p class="cancel-confirm-prompt">Are you sure? This cannot be easily undone.</p>
|
||||
<p class="cancel-confirm-prompt">
|
||||
Are you sure? This cannot be easily undone.
|
||||
</p>
|
||||
<div class="cancel-confirm-actions">
|
||||
<button class="btn btn-danger" @click="confirmCancelMembership" :disabled="isCancelling">
|
||||
{{ isCancelling ? 'Cancelling...' : 'Yes, Cancel' }}
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="confirmCancelMembership"
|
||||
:disabled="isCancelling"
|
||||
>
|
||||
{{ isCancelling ? "Cancelling…" : "Yes, Cancel" }}
|
||||
</button>
|
||||
<button class="btn" @click="showCancelConfirm = false">
|
||||
Nevermind
|
||||
</button>
|
||||
<button class="btn" @click="showCancelConfirm = false">Nevermind</button>
|
||||
</div>
|
||||
</div>
|
||||
<button v-else class="btn btn-danger" @click="handleCancelMembership" :disabled="isCancelling">
|
||||
<button
|
||||
v-else
|
||||
class="btn btn-danger"
|
||||
@click="handleCancelMembership"
|
||||
:disabled="isCancelling"
|
||||
>
|
||||
Cancel Membership
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -86,13 +168,18 @@
|
|||
<div class="section-label">Change Contribution</div>
|
||||
|
||||
<TierPicker v-model="selectedTier" :tiers="tiers" />
|
||||
<div class="tier-hint">Changes take effect on your next billing cycle</div>
|
||||
<div class="tier-hint">
|
||||
Changes take effect on your next billing cycle
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-section"
|
||||
@click="handleUpdateTier"
|
||||
:disabled="selectedTier === Number(memberData.contributionTier || 0) || isUpdating"
|
||||
:disabled="
|
||||
selectedTier ===
|
||||
Number(memberData.contributionTier || 0) || isUpdating
|
||||
"
|
||||
>
|
||||
{{ isUpdating ? 'Updating...' : 'Update Contribution' }}
|
||||
{{ isUpdating ? "Updating…" : "Update Contribution" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -101,13 +188,18 @@
|
|||
<div class="account-col-inset">
|
||||
<div class="section-label">Change Circle</div>
|
||||
|
||||
<CirclePicker v-model="selectedCircle" :circles="circleOptions" />
|
||||
<CirclePicker
|
||||
v-model="selectedCircle"
|
||||
:circles="circleOptions"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-primary btn-section"
|
||||
@click="handleUpdateCircle"
|
||||
:disabled="selectedCircle === memberData.circle || isUpdating"
|
||||
:disabled="
|
||||
selectedCircle === memberData.circle || isUpdating
|
||||
"
|
||||
>
|
||||
{{ isUpdating ? 'Updating...' : 'Update Circle' }}
|
||||
{{ isUpdating ? "Updating…" : "Update Circle" }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -124,107 +216,187 @@
|
|||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: 'auth',
|
||||
})
|
||||
middleware: "auth",
|
||||
});
|
||||
|
||||
const { memberData, checkMemberStatus } = useAuth()
|
||||
const { openLoginModal } = useLoginModal()
|
||||
const toast = useToast()
|
||||
const { memberData, checkMemberStatus } = useAuth();
|
||||
const { openLoginModal } = useLoginModal();
|
||||
const toast = useToast();
|
||||
|
||||
const selectedTier = ref(0)
|
||||
const selectedCircle = ref('')
|
||||
const isUpdating = ref(false)
|
||||
const isCancelling = ref(false)
|
||||
const selectedTier = ref(0);
|
||||
const selectedCircle = ref("");
|
||||
const isUpdating = ref(false);
|
||||
const isCancelling = ref(false);
|
||||
|
||||
// Email edit state
|
||||
const showEmailEdit = ref(false);
|
||||
const newEmail = ref("");
|
||||
const isUpdatingEmail = ref(false);
|
||||
|
||||
const tiers = [
|
||||
{ amount: 0, display: '$0', label: 'Solidarity' },
|
||||
{ amount: 5, display: '$5', label: 'Supporter' },
|
||||
{ amount: 15, display: '$15', label: 'Sustainer' },
|
||||
{ amount: 30, display: '$30', label: 'Builder' },
|
||||
{ amount: 50, display: '$50', label: 'Champion' },
|
||||
]
|
||||
{ amount: 0, display: "$0", label: "Solidarity" },
|
||||
{ amount: 5, display: "$5", label: "Supporter" },
|
||||
{ amount: 15, display: "$15", label: "Sustainer" },
|
||||
{ amount: 30, display: "$30", label: "Builder" },
|
||||
{ amount: 50, display: "$50", label: "Champion" },
|
||||
];
|
||||
|
||||
const circleOptions = [
|
||||
{ value: 'community', label: 'Community', description: 'For anyone interested in cooperative game dev. Access discussions, events, and resources.' },
|
||||
{ value: 'founder', label: 'Founder', description: 'For those actively building or running a cooperative studio. Peer support and deep dives.' },
|
||||
{ value: 'practitioner', label: 'Practitioner', description: 'For professionals advising co-ops: lawyers, accountants, facilitators, consultants.' },
|
||||
]
|
||||
{
|
||||
value: "community",
|
||||
label: "Community",
|
||||
description:
|
||||
"For anyone interested in cooperative game dev. Access discussions, events, and resources.",
|
||||
},
|
||||
{
|
||||
value: "founder",
|
||||
label: "Founder",
|
||||
description:
|
||||
"For those actively building or running a cooperative studio. Peer support and deep dives.",
|
||||
},
|
||||
{
|
||||
value: "practitioner",
|
||||
label: "Practitioner",
|
||||
description:
|
||||
"For professionals advising co-ops: lawyers, accountants, facilitators, consultants.",
|
||||
},
|
||||
];
|
||||
|
||||
const STATUS_LABELS = {
|
||||
active: "Active",
|
||||
pending_payment: "Pending",
|
||||
suspended: "Suspended",
|
||||
cancelled: "Cancelled",
|
||||
};
|
||||
|
||||
const formatStatus = (s) => STATUS_LABELS[s] || s;
|
||||
|
||||
const capitalise = (s) => (s ? s.charAt(0).toUpperCase() + s.slice(1) : s);
|
||||
|
||||
// Initialize from member data
|
||||
watchEffect(() => {
|
||||
if (memberData.value) {
|
||||
selectedTier.value = Number(memberData.value.contributionTier || 0)
|
||||
selectedCircle.value = memberData.value.circle || 'community'
|
||||
selectedTier.value = Number(memberData.value.contributionTier || 0);
|
||||
selectedCircle.value = memberData.value.circle || "community";
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const { data: upcomingEvents } = await useFetch('/api/events', {
|
||||
const { data: upcomingEvents } = await useFetch("/api/events", {
|
||||
query: { limit: 3, upcoming: true },
|
||||
default: () => [],
|
||||
})
|
||||
});
|
||||
|
||||
const formatMemberSince = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
return new Date(dateStr).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
|
||||
}
|
||||
if (!dateStr) return "";
|
||||
return new Date(dateStr).toLocaleDateString("en-US", {
|
||||
month: "long",
|
||||
year: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateTier = async () => {
|
||||
isUpdating.value = true
|
||||
isUpdating.value = true;
|
||||
try {
|
||||
await $fetch('/api/members/update-contribution', {
|
||||
method: 'POST',
|
||||
await $fetch("/api/members/update-contribution", {
|
||||
method: "POST",
|
||||
body: { contributionTier: String(selectedTier.value) },
|
||||
})
|
||||
await checkMemberStatus()
|
||||
toast.add({ title: 'Contribution updated', color: 'green' })
|
||||
});
|
||||
await checkMemberStatus();
|
||||
toast.add({ title: "Contribution updated", color: "green" });
|
||||
} catch (err) {
|
||||
selectedTier.value = Number(memberData.value?.contributionTier || 0)
|
||||
toast.add({ title: 'Update failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
|
||||
selectedTier.value = Number(memberData.value?.contributionTier || 0);
|
||||
toast.add({
|
||||
title: "Update failed",
|
||||
description: err.data?.statusMessage || "Please try again.",
|
||||
color: "red",
|
||||
});
|
||||
} finally {
|
||||
isUpdating.value = false
|
||||
isUpdating.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateCircle = async () => {
|
||||
isUpdating.value = true
|
||||
isUpdating.value = true;
|
||||
try {
|
||||
await $fetch('/api/members/update-circle', {
|
||||
method: 'POST',
|
||||
await $fetch("/api/members/update-circle", {
|
||||
method: "POST",
|
||||
body: { circle: selectedCircle.value },
|
||||
})
|
||||
await checkMemberStatus()
|
||||
toast.add({ title: 'Circle updated', color: 'green' })
|
||||
});
|
||||
await checkMemberStatus();
|
||||
toast.add({ title: "Circle updated", color: "green" });
|
||||
} catch (err) {
|
||||
selectedCircle.value = memberData.value?.circle || 'community'
|
||||
toast.add({ title: 'Update failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
|
||||
selectedCircle.value = memberData.value?.circle || "community";
|
||||
toast.add({
|
||||
title: "Update failed",
|
||||
description: err.data?.statusMessage || "Please try again.",
|
||||
color: "red",
|
||||
});
|
||||
} finally {
|
||||
isUpdating.value = false
|
||||
isUpdating.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const showCancelConfirm = ref(false)
|
||||
const cancelEmailEdit = () => {
|
||||
showEmailEdit.value = false;
|
||||
newEmail.value = "";
|
||||
};
|
||||
|
||||
const handleUpdateEmail = async () => {
|
||||
const trimmed = newEmail.value.trim();
|
||||
if (!trimmed) return;
|
||||
isUpdatingEmail.value = true;
|
||||
try {
|
||||
await $fetch("/api/members/update-email", {
|
||||
method: "POST",
|
||||
body: { email: trimmed },
|
||||
});
|
||||
await checkMemberStatus();
|
||||
cancelEmailEdit();
|
||||
toast.add({ title: "Email updated", color: "green" });
|
||||
} catch (err) {
|
||||
toast.add({
|
||||
title: "Update failed",
|
||||
description: err.data?.statusMessage || "Please try again.",
|
||||
color: "red",
|
||||
});
|
||||
} finally {
|
||||
isUpdatingEmail.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const showCancelConfirm = ref(false);
|
||||
|
||||
const handleCancelMembership = () => {
|
||||
showCancelConfirm.value = true
|
||||
}
|
||||
showCancelConfirm.value = true;
|
||||
};
|
||||
|
||||
const confirmCancelMembership = async () => {
|
||||
showCancelConfirm.value = false
|
||||
isCancelling.value = true
|
||||
showCancelConfirm.value = false;
|
||||
isCancelling.value = true;
|
||||
try {
|
||||
const result = await $fetch('/api/members/cancel-subscription', { method: 'POST' })
|
||||
await checkMemberStatus()
|
||||
if (result.message === 'No active subscription to cancel') {
|
||||
toast.add({ title: 'No active subscription', description: 'You are on the free tier — nothing to cancel.', color: 'neutral' })
|
||||
const result = await $fetch("/api/members/cancel-subscription", {
|
||||
method: "POST",
|
||||
});
|
||||
await checkMemberStatus();
|
||||
if (result.message === "No active subscription to cancel") {
|
||||
toast.add({
|
||||
title: "No active subscription",
|
||||
description: "You are on the free tier — nothing to cancel.",
|
||||
color: "neutral",
|
||||
});
|
||||
} else {
|
||||
toast.add({ title: 'Membership cancelled', color: 'orange' })
|
||||
toast.add({ title: "Membership cancelled", color: "orange" });
|
||||
}
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Cancellation failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
|
||||
toast.add({
|
||||
title: "Cancellation failed",
|
||||
description: err.data?.statusMessage || "Please try again.",
|
||||
color: "red",
|
||||
});
|
||||
} finally {
|
||||
isCancelling.value = false
|
||||
isCancelling.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -286,18 +458,19 @@ const confirmCancelMembership = async () => {
|
|||
border-right: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
/* Full-column rules: border on block-level section (no hr / flex quirks) */
|
||||
/* Full-column rules: border on block-level section */
|
||||
.account-section {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-section + .account-section {
|
||||
margin-top: 20px;
|
||||
margin-top: 24px;
|
||||
border-top: 1px dashed var(--border);
|
||||
padding-top: 14px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.account-section + .account-section.account-section--danger {
|
||||
border-top-color: var(--ember);
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.account-col-left > .account-section:first-child .account-col-inset,
|
||||
|
|
@ -330,7 +503,7 @@ const confirmCancelMembership = async () => {
|
|||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 0 12px;
|
||||
align-items: baseline;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
|
|
@ -345,42 +518,97 @@ const confirmCancelMembership = async () => {
|
|||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Status dot — flex row so gap is exact, no whitespace-node gap */
|
||||
.status-v {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-dot.active {
|
||||
background: var(--green);
|
||||
}
|
||||
.status-dot.suspended {
|
||||
background: var(--ember);
|
||||
}
|
||||
.status-dot.cancelled {
|
||||
background: var(--text-faint);
|
||||
}
|
||||
.status-dot.pending_payment {
|
||||
background: var(--candle);
|
||||
}
|
||||
.status-dot.active { background: var(--green); }
|
||||
.status-dot.suspended { background: var(--ember); }
|
||||
.status-dot.cancelled { background: var(--text-faint); }
|
||||
.status-dot.pending_payment { background: var(--candle); }
|
||||
|
||||
/* ---- EMAIL ---- */
|
||||
.email-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.email-value {
|
||||
color: var(--text);
|
||||
}
|
||||
.btn-inline {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 2px 8px;
|
||||
border-style: dashed;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.email-edit {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.email-edit .field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.email-edit .field label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 3px;
|
||||
display: block;
|
||||
}
|
||||
.email-edit .field input {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 13px;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
.email-edit .field input:focus {
|
||||
border-color: var(--candle);
|
||||
}
|
||||
.email-edit-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.email-hint {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ---- DANGER ZONE ---- */
|
||||
.section-label.danger {
|
||||
.account-section--danger {
|
||||
background: var(--ember-bg);
|
||||
}
|
||||
|
||||
.account-section--danger .section-label.danger {
|
||||
color: var(--ember);
|
||||
}
|
||||
.danger-zone p {
|
||||
font-size: 12px;
|
||||
.account-section--danger .danger-zone p {
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 12px;
|
||||
max-width: 400px;
|
||||
|
|
@ -390,6 +618,7 @@ const confirmCancelMembership = async () => {
|
|||
.cancel-confirm {
|
||||
border: 1px dashed var(--ember);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cancel-confirm-prompt {
|
||||
font-size: 12px;
|
||||
|
|
@ -415,8 +644,12 @@ const confirmCancelMembership = async () => {
|
|||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.content-area { grid-template-columns: 1fr; }
|
||||
.account-columns { grid-template-columns: 1fr; }
|
||||
.content-area {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.account-columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.account-col-left {
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
|
|
|
|||
|
|
@ -1,171 +1,227 @@
|
|||
<template>
|
||||
<div class="dashboard">
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="authPending" class="loading-state">
|
||||
<div class="spinner" />
|
||||
<p>Loading your dashboard...</p>
|
||||
</div>
|
||||
|
||||
<!-- Unauthenticated State -->
|
||||
<div v-else-if="!memberData" class="unauth-state">
|
||||
<h2>Sign in required</h2>
|
||||
<p>Please sign in to access your member dashboard.</p>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<template v-else>
|
||||
<div class="dashboard-body">
|
||||
<!-- Member Status Banner -->
|
||||
<MemberStatusBanner :dismissible="true" />
|
||||
|
||||
<!-- Welcome Header -->
|
||||
<div class="welcome">
|
||||
<h1>Welcome back, {{ memberData?.name }}</h1>
|
||||
<div class="meta">
|
||||
<CircleBadge :circle="memberData?.circle || 'community'" />
|
||||
<span>${{ memberData?.contributionTier }} CAD/mo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Events + Quick Actions -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Upcoming Events</div>
|
||||
|
||||
<div v-if="loadingEvents" class="loading-inline">
|
||||
<div class="spinner spinner-sm" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="registeredEvents.length" class="event-list">
|
||||
<NuxtLink
|
||||
v-for="evt in registeredEvents"
|
||||
:key="evt._id"
|
||||
:to="`/events/${evt.slug || evt._id}`"
|
||||
class="event-item"
|
||||
>
|
||||
<span class="event-date">{{ formatEventDate(evt.startDate) }}</span>
|
||||
<span class="event-title">{{ evt.title }}</span>
|
||||
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Calendar subscription -->
|
||||
<button class="calendar-btn" @click="copyCalendarLink">
|
||||
{{ calendarLinkCopied ? 'Link copied!' : 'Subscribe to calendar' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<p>You haven't registered for any upcoming events</p>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/events" class="section-link">Browse all events →</NuxtLink>
|
||||
|
||||
<!-- Calendar subscription instructions -->
|
||||
<div v-if="registeredEvents.length > 0 && showCalendarInstructions" class="calendar-instructions">
|
||||
<div class="ci-header">
|
||||
<strong>How to Subscribe to Your Calendar</strong>
|
||||
<button @click="showCalendarInstructions = false" class="ci-close">×</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li><strong>Google Calendar:</strong> Click "+" then "From URL" then paste the link</li>
|
||||
<li><strong>Apple Calendar:</strong> File then New Calendar Subscription then paste the link</li>
|
||||
<li><strong>Outlook:</strong> Add Calendar then Subscribe from web then paste the link</li>
|
||||
</ul>
|
||||
<p class="ci-note">Your calendar will automatically update when you register or unregister from events.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Quick Actions</div>
|
||||
<NuxtLink
|
||||
to="/members?peerSupport=true"
|
||||
class="quick-action"
|
||||
:class="{ disabled: !canPeerSupport }"
|
||||
:title="!canPeerSupport ? 'Complete your membership to book peer sessions' : ''"
|
||||
>
|
||||
Book a peer session<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile" class="quick-action">
|
||||
Update your profile<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<a href="https://wiki.ghostguild.org" target="_blank" class="quick-action">
|
||||
Browse the wiki<span class="arrow">→</span>
|
||||
</a>
|
||||
<NuxtLink to="/members" class="quick-action">
|
||||
Browse members<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile#account" class="quick-action">
|
||||
Manage account<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Membership Summary + Peer Support -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Membership</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Circle</span>
|
||||
<span class="val" :style="{ color: `var(--c-${memberData?.circle || 'community'})` }">
|
||||
{{ memberData?.circle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Contribution</span>
|
||||
<span class="val">${{ memberData?.contributionTier }} CAD/month</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Status</span>
|
||||
<span class="val">
|
||||
<span :class="isActive ? 'status-active' : ''">
|
||||
{{ isActive ? 'Active' : statusConfig.label }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="memberData?.createdAt" class="membership-row">
|
||||
<span class="key">Member since</span>
|
||||
<span class="val">{{ formatMemberSince(memberData.createdAt) }}</span>
|
||||
</div>
|
||||
<NuxtLink to="/member/profile#account" class="section-link">
|
||||
Change circle or contribution →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Peer Support</div>
|
||||
<DashedBox>
|
||||
<p class="peer-text">
|
||||
Interested in offering peer support? Set up your profile to connect with other members who share your interests and experience.
|
||||
</p>
|
||||
<NuxtLink to="/member/profile" class="section-link">
|
||||
Set up peer support →
|
||||
</NuxtLink>
|
||||
</DashedBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<!-- Loading State -->
|
||||
<div v-if="authPending" class="loading-state">
|
||||
<div class="spinner" />
|
||||
<p>Loading your dashboard...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Unauthenticated State -->
|
||||
<div v-else-if="!memberData" class="unauth-state">
|
||||
<h2>Sign in required</h2>
|
||||
<p>Please sign in to access your member dashboard.</p>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="
|
||||
openLoginModal({
|
||||
title: 'Sign in to your dashboard',
|
||||
description: 'Enter your email to access your member dashboard',
|
||||
})
|
||||
"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<template v-else>
|
||||
<div class="dashboard-with-sidebar">
|
||||
<div class="dashboard-body">
|
||||
<!-- Member Status Banner -->
|
||||
<MemberStatusBanner />
|
||||
|
||||
<!-- Welcome Header -->
|
||||
<div class="welcome">
|
||||
<h1>Welcome back, {{ memberData?.name }}</h1>
|
||||
<div class="meta">
|
||||
<CircleBadge :circle="memberData?.circle || 'community'" />
|
||||
<span>${{ memberData?.contributionTier }} CAD/mo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Events + Quick Actions -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Upcoming Events</div>
|
||||
|
||||
<div v-if="loadingEvents" class="loading-inline">
|
||||
<div class="spinner spinner-sm" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="registeredEvents.length" class="event-list">
|
||||
<NuxtLink
|
||||
v-for="evt in registeredEvents"
|
||||
:key="evt._id"
|
||||
:to="`/events/${evt.slug || evt._id}`"
|
||||
class="event-item"
|
||||
>
|
||||
<span class="event-date">{{
|
||||
formatEventDate(evt.startDate)
|
||||
}}</span>
|
||||
<span class="event-title">{{ evt.title }}</span>
|
||||
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Calendar subscription -->
|
||||
<button class="calendar-btn" @click="copyCalendarLink">
|
||||
{{
|
||||
calendarLinkCopied
|
||||
? "Link copied!"
|
||||
: "Subscribe to calendar"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<p>You haven't registered for any upcoming events</p>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/events" class="section-link"
|
||||
>Browse all events →</NuxtLink
|
||||
>
|
||||
|
||||
<!-- Calendar subscription instructions -->
|
||||
<div
|
||||
v-if="registeredEvents.length > 0 && showCalendarInstructions"
|
||||
class="calendar-instructions"
|
||||
>
|
||||
<div class="ci-header">
|
||||
<strong>How to Subscribe to Your Calendar</strong>
|
||||
<button
|
||||
@click="showCalendarInstructions = false"
|
||||
class="ci-close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Google Calendar:</strong> Click "+" then "From
|
||||
URL" then paste the link
|
||||
</li>
|
||||
<li>
|
||||
<strong>Apple Calendar:</strong> File then New Calendar
|
||||
Subscription then paste the link
|
||||
</li>
|
||||
<li>
|
||||
<strong>Outlook:</strong> Add Calendar then Subscribe from
|
||||
web then paste the link
|
||||
</li>
|
||||
</ul>
|
||||
<p class="ci-note">
|
||||
Your calendar will automatically update when you register or
|
||||
unregister from events.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Quick Actions</div>
|
||||
<NuxtLink
|
||||
to="/members?peerSupport=true"
|
||||
class="quick-action"
|
||||
:class="{ disabled: !canPeerSupport }"
|
||||
:title="
|
||||
!canPeerSupport
|
||||
? 'Complete your membership to book peer sessions'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
Book a peer session<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile" class="quick-action">
|
||||
Update your profile<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<a
|
||||
href="https://wiki.ghostguild.org"
|
||||
target="_blank"
|
||||
class="quick-action"
|
||||
>
|
||||
Browse the wiki<span class="arrow">→</span>
|
||||
</a>
|
||||
<NuxtLink to="/members" class="quick-action">
|
||||
Browse members<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/member/profile#account" class="quick-action">
|
||||
Manage account<span class="arrow">→</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Membership Summary + Peer Support -->
|
||||
<div class="content-row">
|
||||
<div class="content-block">
|
||||
<div class="section-label">Your Membership</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Circle</span>
|
||||
<span
|
||||
class="val"
|
||||
:style="{
|
||||
color: `var(--c-${memberData?.circle || 'community'})`,
|
||||
}"
|
||||
>
|
||||
{{ memberData?.circle }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Contribution</span>
|
||||
<span class="val"
|
||||
>${{ memberData?.contributionTier }} CAD/month</span
|
||||
>
|
||||
</div>
|
||||
<div class="membership-row">
|
||||
<span class="key">Status</span>
|
||||
<span class="val">
|
||||
<span :class="isActive ? 'status-active' : ''">
|
||||
{{ isActive ? "Active" : statusConfig.label }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="memberData?.createdAt" class="membership-row">
|
||||
<span class="key">Member since</span>
|
||||
<span class="val">{{
|
||||
formatMemberSince(memberData.createdAt)
|
||||
}}</span>
|
||||
</div>
|
||||
<NuxtLink to="/member/profile#account" class="section-link">
|
||||
Change circle or contribution →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="content-block">
|
||||
<div class="section-label">Peer Support</div>
|
||||
<DashedBox>
|
||||
<p class="peer-text">
|
||||
Interested in offering peer support? Set up your profile to
|
||||
connect with other members who share your interests and
|
||||
experience.
|
||||
</p>
|
||||
<NuxtLink to="/member/profile" class="section-link">
|
||||
Set up peer support →
|
||||
</NuxtLink>
|
||||
</DashedBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EventsMiniSidebar :events="upcomingEvents" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
<div class="loading-state">
|
||||
<div class="spinner" />
|
||||
<p>Loading your dashboard...</p>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { memberData, checkMemberStatus } = useAuth();
|
||||
const { isActive, statusConfig, isPendingPayment, canPeerSupport } = useMemberStatus();
|
||||
const { isActive, statusConfig, isPendingPayment, canPeerSupport } =
|
||||
useMemberStatus();
|
||||
const { completePayment, isProcessingPayment } = useMemberPayment();
|
||||
|
||||
const registeredEvents = ref([]);
|
||||
|
|
@ -173,6 +229,11 @@ const loadingEvents = ref(false);
|
|||
const calendarLinkCopied = ref(false);
|
||||
const showCalendarInstructions = ref(false);
|
||||
|
||||
const { data: upcomingEvents } = await useFetch("/api/events", {
|
||||
query: { limit: 5, upcoming: true },
|
||||
default: () => [],
|
||||
});
|
||||
|
||||
// Calendar subscription URL
|
||||
const calendarUrl = computed(() => {
|
||||
const memberId = memberData.value?._id || memberData.value?.id;
|
||||
|
|
@ -358,7 +419,9 @@ useHead({
|
|||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-inline {
|
||||
|
|
@ -381,7 +444,7 @@ useHead({
|
|||
}
|
||||
|
||||
.unauth-state h2 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
|
|
@ -405,7 +468,7 @@ useHead({
|
|||
}
|
||||
|
||||
.welcome h1 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
|
|
@ -421,12 +484,19 @@ useHead({
|
|||
}
|
||||
|
||||
/* ---- CONTENT GRID ---- */
|
||||
.dashboard-with-sidebar {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dashboard-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
|
|
@ -490,7 +560,7 @@ useHead({
|
|||
|
||||
/* ---- CALENDAR BUTTON ---- */
|
||||
.calendar-btn {
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
color: var(--candle-dim);
|
||||
background: none;
|
||||
|
|
@ -636,7 +706,7 @@ useHead({
|
|||
}
|
||||
|
||||
.status-active::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
|
@ -652,7 +722,17 @@ useHead({
|
|||
}
|
||||
|
||||
/* ---- RESPONSIVE ---- */
|
||||
@media (max-width: 1024px) {
|
||||
.dashboard-with-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-with-sidebar {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
|
|||
3
app/pages/member/index.vue
Normal file
3
app/pages/member/index.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<script setup>
|
||||
await navigateTo('/members', { redirectCode: 301 })
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue