663 lines
18 KiB
Vue
663 lines
18 KiB
Vue
<template>
|
|
<div class="member-account-page">
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<div v-else class="account-authenticated">
|
|
<!-- PAGE HEADER -->
|
|
<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">
|
|
<div class="account-col-inset">
|
|
<div class="section-label">Current Membership</div>
|
|
|
|
<div class="membership-card">
|
|
<div class="membership-row">
|
|
<span class="membership-k">Status</span>
|
|
<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
|
|
? 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
|
|
>
|
|
</div>
|
|
<div class="membership-row">
|
|
<span class="membership-k">Member since</span>
|
|
<span class="membership-v">{{
|
|
formatMemberSince(memberData.createdAt)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="account-section">
|
|
<div class="account-col-inset">
|
|
<div class="section-label">Email</div>
|
|
|
|
<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>
|
|
</section>
|
|
|
|
<section class="account-section account-section--danger">
|
|
<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>
|
|
<div v-if="showCancelConfirm" class="cancel-confirm">
|
|
<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>
|
|
<button class="btn" @click="showCancelConfirm = false">
|
|
Nevermind
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
v-else
|
|
class="btn btn-danger"
|
|
@click="handleCancelMembership"
|
|
:disabled="isCancelling"
|
|
>
|
|
Cancel Membership
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN: Change Contribution & Circle -->
|
|
<div class="account-col-right">
|
|
<section class="account-section">
|
|
<div class="account-col-inset">
|
|
<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>
|
|
<button
|
|
class="btn btn-primary btn-section"
|
|
@click="handleUpdateTier"
|
|
:disabled="
|
|
selectedTier ===
|
|
Number(memberData.contributionTier || 0) || isUpdating
|
|
"
|
|
>
|
|
{{ isUpdating ? "Updating…" : "Update Contribution" }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="account-section">
|
|
<div class="account-col-inset">
|
|
<div class="section-label">Change Circle</div>
|
|
|
|
<CirclePicker
|
|
v-model="selectedCircle"
|
|
:circles="circleOptions"
|
|
/>
|
|
<button
|
|
class="btn btn-primary btn-section"
|
|
@click="handleUpdateCircle"
|
|
:disabled="
|
|
selectedCircle === memberData.circle || isUpdating
|
|
"
|
|
>
|
|
{{ isUpdating ? "Updating…" : "Update Circle" }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EVENTS MINI SIDEBAR -->
|
|
<EventsMiniSidebar :events="upcomingEvents" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: "auth",
|
|
});
|
|
|
|
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);
|
|
|
|
// 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" },
|
|
];
|
|
|
|
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.",
|
|
},
|
|
];
|
|
|
|
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";
|
|
}
|
|
});
|
|
|
|
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",
|
|
});
|
|
};
|
|
|
|
const handleUpdateTier = async () => {
|
|
isUpdating.value = true;
|
|
try {
|
|
await $fetch("/api/members/update-contribution", {
|
|
method: "POST",
|
|
body: { contributionTier: String(selectedTier.value) },
|
|
});
|
|
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",
|
|
});
|
|
} finally {
|
|
isUpdating.value = false;
|
|
}
|
|
};
|
|
|
|
const handleUpdateCircle = async () => {
|
|
isUpdating.value = true;
|
|
try {
|
|
await $fetch("/api/members/update-circle", {
|
|
method: "POST",
|
|
body: { circle: selectedCircle.value },
|
|
});
|
|
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",
|
|
});
|
|
} finally {
|
|
isUpdating.value = 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;
|
|
};
|
|
|
|
const confirmCancelMembership = async () => {
|
|
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",
|
|
});
|
|
} else {
|
|
toast.add({ title: "Membership cancelled", color: "orange" });
|
|
}
|
|
} catch (err) {
|
|
toast.add({
|
|
title: "Cancellation failed",
|
|
description: err.data?.statusMessage || "Please try again.",
|
|
color: "red",
|
|
});
|
|
} finally {
|
|
isCancelling.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.member-account-page {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.loading {
|
|
flex: 1;
|
|
padding: 48px 32px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.account-authenticated {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ---- CONTENT AREA ---- */
|
|
.content-area {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 200px;
|
|
align-items: stretch;
|
|
min-height: 0;
|
|
}
|
|
.page-content {
|
|
min-width: 0;
|
|
align-self: stretch;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ---- TWO-COLUMN LAYOUT ---- */
|
|
.account-columns {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
align-items: stretch;
|
|
min-height: 0;
|
|
}
|
|
.account-col-left,
|
|
.account-col-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
align-self: stretch;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.account-col-left {
|
|
border-right: 1px dashed var(--border);
|
|
}
|
|
|
|
/* Full-column rules: border on block-level section */
|
|
.account-section {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.account-section + .account-section {
|
|
margin-top: 24px;
|
|
border-top: 1px dashed var(--border);
|
|
padding-top: 20px;
|
|
}
|
|
.account-section + .account-section.account-section--danger {
|
|
margin-top: 24px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.account-col-left > .account-section:first-child .account-col-inset,
|
|
.account-col-right > .account-section:first-child .account-col-inset {
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.account-col-left > .account-section:last-child .account-col-inset,
|
|
.account-col-right > .account-section:last-child .account-col-inset {
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.account-col-left .account-col-inset {
|
|
padding-left: 28px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
.account-col-right .account-col-inset {
|
|
padding-left: 24px;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
/* ---- MEMBERSHIP CARD ---- */
|
|
.membership-card {
|
|
border: 1px dashed var(--border);
|
|
padding: 0;
|
|
margin-bottom: 12px;
|
|
}
|
|
.membership-row {
|
|
display: grid;
|
|
grid-template-columns: 120px 1fr;
|
|
gap: 0 12px;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
font-size: 12px;
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
.membership-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.membership-k {
|
|
color: var(--text-faint);
|
|
}
|
|
.membership-v {
|
|
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%;
|
|
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);
|
|
}
|
|
|
|
/* ---- EMAIL ---- */
|
|
.email-display {
|
|
display: flex;
|
|
align-items: baseline;
|
|
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);
|
|
}
|
|
|
|
/* ---- DANGER ZONE ---- */
|
|
.account-section--danger {
|
|
background: var(--ember-bg);
|
|
}
|
|
|
|
.account-section--danger .section-label.danger {
|
|
color: var(--ember);
|
|
}
|
|
.account-section--danger .danger-zone p {
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
margin-bottom: 12px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
/* ---- CANCEL CONFIRM ---- */
|
|
.cancel-confirm {
|
|
border: 1px dashed var(--ember);
|
|
padding: 14px 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
.cancel-confirm-prompt {
|
|
font-size: 12px;
|
|
color: var(--ember);
|
|
margin-bottom: 10px;
|
|
}
|
|
.cancel-confirm-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ---- TIER HINT ---- */
|
|
.tier-hint {
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.btn-section {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ---- RESPONSIVE ---- */
|
|
@media (max-width: 1024px) {
|
|
.content-area {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.account-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.account-col-left {
|
|
border-right: none;
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
.account-col-left .account-col-inset,
|
|
.account-col-right .account-col-inset {
|
|
padding-left: 28px;
|
|
padding-right: 28px;
|
|
}
|
|
}
|
|
</style>
|