fix: use private helcimApiToken for all server-side Helcim API calls
This commit is contained in:
parent
ccd1d0783a
commit
d31b5b4dac
53 changed files with 1755 additions and 572 deletions
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<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>
|
||||
<div v-else class="account-authenticated">
|
||||
<!-- PAGE HEADER -->
|
||||
<PageHeader title="Account Settings" subtitle="Manage your membership and billing" />
|
||||
|
||||
|
|
@ -17,81 +17,100 @@
|
|||
|
||||
<!-- LEFT COLUMN: Membership Status & Email -->
|
||||
<div class="account-col-left">
|
||||
<div class="section-label">Current Membership</div>
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Current Membership</div>
|
||||
|
||||
<div class="membership-card">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td>
|
||||
<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' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Circle</td>
|
||||
<td :style="{ color: `var(--c-${memberData.circle || 'community'})` }">
|
||||
</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' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Contribution</td>
|
||||
<td>${{ memberData.contributionAmount || 0 }} / month</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Member since</td>
|
||||
<td>{{ formatMemberSince(memberData.createdAt) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Email -->
|
||||
<hr class="section-divider">
|
||||
<div class="section-label">Email</div>
|
||||
<div class="email-display">
|
||||
<span class="email-value">{{ memberData.email }}</span>
|
||||
</div>
|
||||
<div class="email-hint">Used for login magic links and notifications</div>
|
||||
<section class="account-section">
|
||||
<div class="account-col-inset">
|
||||
<div class="section-label">Email</div>
|
||||
<div class="email-display">
|
||||
<span class="email-value">{{ memberData.email }}</span>
|
||||
</div>
|
||||
<div class="email-hint">Used for login magic links and notifications</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<hr class="section-divider danger">
|
||||
<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>
|
||||
<button class="btn btn-danger" @click="handleCancelMembership" :disabled="isCancelling">
|
||||
{{ isCancelling ? 'Cancelling...' : 'Cancel Membership' }}
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
<div class="section-label">Change Contribution</div>
|
||||
<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 === memberData.contributionAmount || isUpdating"
|
||||
>
|
||||
{{ isUpdating ? 'Updating...' : 'Update Contribution' }}
|
||||
</button>
|
||||
<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>
|
||||
|
||||
<!-- Change Circle -->
|
||||
<hr class="section-divider">
|
||||
<div class="section-label">Change Circle</div>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -134,7 +153,7 @@ const circleOptions = [
|
|||
// Initialize from member data
|
||||
watchEffect(() => {
|
||||
if (memberData.value) {
|
||||
selectedTier.value = memberData.value.contributionAmount || 0
|
||||
selectedTier.value = Number(memberData.value.contributionTier || 0)
|
||||
selectedCircle.value = memberData.value.circle || 'community'
|
||||
}
|
||||
})
|
||||
|
|
@ -154,11 +173,12 @@ const handleUpdateTier = async () => {
|
|||
try {
|
||||
await $fetch('/api/members/update-contribution', {
|
||||
method: 'POST',
|
||||
body: { amount: selectedTier.value },
|
||||
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
|
||||
|
|
@ -175,18 +195,30 @@ const handleUpdateCircle = async () => {
|
|||
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 handleCancelMembership = async () => {
|
||||
const showCancelConfirm = ref(false)
|
||||
|
||||
const handleCancelMembership = () => {
|
||||
showCancelConfirm.value = true
|
||||
}
|
||||
|
||||
const confirmCancelMembership = async () => {
|
||||
showCancelConfirm.value = false
|
||||
isCancelling.value = true
|
||||
try {
|
||||
await $fetch('/api/members/cancel', { method: 'POST' })
|
||||
const result = await $fetch('/api/members/cancel-subscription', { method: 'POST' })
|
||||
await checkMemberStatus()
|
||||
toast.add({ title: 'Membership cancelled', color: 'orange' })
|
||||
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 {
|
||||
|
|
@ -196,56 +228,120 @@ const handleCancelMembership = async () => {
|
|||
</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 {
|
||||
padding: 24px 28px;
|
||||
border-right: 1px dashed var(--border);
|
||||
}
|
||||
.account-col-right {
|
||||
padding: 24px 28px;
|
||||
|
||||
/* Full-column rules: border on block-level section (no hr / flex quirks) */
|
||||
.account-section {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.account-section + .account-section {
|
||||
margin-top: 20px;
|
||||
border-top: 1px dashed var(--border);
|
||||
padding-top: 14px;
|
||||
}
|
||||
.account-section + .account-section.account-section--danger {
|
||||
border-top-color: var(--ember);
|
||||
}
|
||||
|
||||
.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: 16px 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.membership-card table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.membership-card td {
|
||||
padding: 4px 0;
|
||||
.membership-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 0 12px;
|
||||
align-items: baseline;
|
||||
padding: 10px 20px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
}
|
||||
.membership-card tr:last-child td {
|
||||
.membership-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.membership-card td:first-child {
|
||||
.membership-k {
|
||||
color: var(--text-faint);
|
||||
width: 120px;
|
||||
}
|
||||
.membership-card td:last-child {
|
||||
.membership-v {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
|
@ -279,9 +375,6 @@ const handleCancelMembership = async () => {
|
|||
}
|
||||
|
||||
/* ---- DANGER ZONE ---- */
|
||||
.section-divider.danger {
|
||||
border-color: var(--ember);
|
||||
}
|
||||
.section-label.danger {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
|
@ -293,6 +386,21 @@ const handleCancelMembership = async () => {
|
|||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* ---- CANCEL CONFIRM ---- */
|
||||
.cancel-confirm {
|
||||
border: 1px dashed var(--ember);
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.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;
|
||||
|
|
@ -313,5 +421,10 @@ const handleCancelMembership = async () => {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue