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>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
|
||||
<!-- Dashboard Content -->
|
||||
<template v-else>
|
||||
<div class="dashboard-body">
|
||||
<!-- Member Status Banner -->
|
||||
<MemberStatusBanner :dismissible="true" />
|
||||
|
||||
|
|
@ -149,6 +150,7 @@
|
|||
</DashedBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fallback>
|
||||
|
|
@ -321,14 +323,22 @@ useHead({
|
|||
<style scoped>
|
||||
/* ---- DASHBOARD LAYOUT ---- */
|
||||
.dashboard {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---- LOADING / UNAUTH STATES ---- */
|
||||
.loading-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
padding: 48px 24px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
|
|
@ -357,10 +367,17 @@ useHead({
|
|||
}
|
||||
|
||||
.unauth-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
padding: 48px 24px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.unauth-state h2 {
|
||||
|
|
@ -404,10 +421,19 @@ useHead({
|
|||
}
|
||||
|
||||
/* ---- CONTENT GRID ---- */
|
||||
.dashboard-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-bottom: 1px dashed var(--border);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.content-block {
|
||||
|
|
@ -415,6 +441,7 @@ useHead({
|
|||
border-right: 1px dashed var(--border);
|
||||
min-width: 0;
|
||||
overflow-wrap: break-word;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.content-block:last-child {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="my-updates-page">
|
||||
<PageHeader
|
||||
title="My Updates"
|
||||
subtitle="Your activity and milestones in the Guild"
|
||||
|
|
@ -312,10 +312,20 @@ useHead({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.my-updates-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- TWO-COLUMN LAYOUT ---- */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="profile-page">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div v-else class="profile-authenticated">
|
||||
<!-- PAGE HEADER -->
|
||||
<PageHeader
|
||||
title="Edit Profile"
|
||||
|
|
@ -25,11 +25,13 @@
|
|||
|
||||
<!-- TWO-COLUMN FORM -->
|
||||
<form class="page-content" @submit.prevent="handleSubmit">
|
||||
<div class="profile-main">
|
||||
<div class="profile-columns">
|
||||
|
||||
<!-- ======== LEFT COLUMN ======== -->
|
||||
<div class="profile-col-left">
|
||||
|
||||
<div class="profile-col-inset">
|
||||
<div class="section-label">Basics</div>
|
||||
|
||||
<div class="field">
|
||||
|
|
@ -73,9 +75,11 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- About You -->
|
||||
<hr class="section-divider section-divider-left" />
|
||||
<hr class="section-divider" />
|
||||
<div class="profile-col-inset">
|
||||
<div class="section-label">About You</div>
|
||||
|
||||
<div class="row-2">
|
||||
|
|
@ -103,9 +107,11 @@
|
|||
<textarea v-model="formData.bio" rows="2" placeholder="Share your background, interests, and experience..." maxlength="300"></textarea>
|
||||
<div class="char-count">{{ formData.bio?.length || 0 }} / 300</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skills Exchange -->
|
||||
<hr class="section-divider section-divider-left" />
|
||||
<hr class="section-divider" />
|
||||
<div class="profile-col-inset">
|
||||
<div class="section-label">Skills Exchange</div>
|
||||
|
||||
<div class="field">
|
||||
|
|
@ -131,9 +137,11 @@
|
|||
<label>Details</label>
|
||||
<textarea v-model="formData.lookingFor.text" rows="2" placeholder="e.g., Seeking a business-minded co-founder for a worker co-op studio."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visibility -->
|
||||
<hr class="section-divider section-divider-left" />
|
||||
<hr class="section-divider" />
|
||||
<div class="profile-col-inset">
|
||||
<div class="section-label">Visibility</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
|
|
@ -143,12 +151,14 @@
|
|||
<span class="toggle-sub">Your profile will appear in the public member listing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ======== RIGHT COLUMN ======== -->
|
||||
<div class="profile-col-right">
|
||||
|
||||
<div class="profile-col-inset">
|
||||
<div class="section-label">Peer Support</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
|
|
@ -205,9 +215,11 @@
|
|||
<div class="char-count">{{ formData.peerSupportMessage?.length || 0 }} / 200</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications -->
|
||||
<hr class="section-divider section-divider-right" />
|
||||
<hr class="section-divider" />
|
||||
<div class="profile-col-inset">
|
||||
<div class="section-label">Notifications</div>
|
||||
|
||||
<div class="toggle-field">
|
||||
|
|
@ -233,6 +245,7 @@
|
|||
<span class="toggle-sub">When someone wants to connect</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -247,6 +260,7 @@
|
|||
<span v-if="saveSuccess" class="save-msg save-msg-ok">Profile updated.</span>
|
||||
<span v-if="saveError" class="save-msg save-msg-err">{{ saveError }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -441,7 +455,14 @@ const handleSubmit = async () => {
|
|||
// Save profile data
|
||||
await $fetch('/api/members/profile', {
|
||||
method: 'PATCH',
|
||||
body: formData,
|
||||
body: {
|
||||
...formData,
|
||||
notifications: {
|
||||
events: formData.notifyEvents,
|
||||
updates: formData.notifyUpdates,
|
||||
peerRequests: formData.notifyPeerRequests,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
// Save peer support data separately
|
||||
|
|
@ -504,6 +525,20 @@ useHead({
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.profile-authenticated {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ---- LOADING / EMPTY STATE ---- */
|
||||
.loading-state {
|
||||
display: flex;
|
||||
|
|
@ -514,41 +549,83 @@ useHead({
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-page > .loading-state {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ---- CONTENT AREA ---- */
|
||||
.page-content {
|
||||
padding: 0 28px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Grid + save bar: one flex child so the center rule can span both */
|
||||
.profile-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Full-height vertical rule between columns (through save bar); 1fr | 1fr grid */
|
||||
.profile-main::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.profile-main::before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
border-left: 1px dashed var(--border);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- TWO-COLUMN LAYOUT ---- */
|
||||
.profile-columns {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 0;
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.profile-col-left,
|
||||
.profile-col-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.profile-col-left {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.profile-col-left > .profile-col-inset:first-of-type,
|
||||
.profile-col-right > .profile-col-inset:first-of-type {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.profile-col-left .profile-col-inset {
|
||||
padding-left: 28px;
|
||||
padding-right: 24px;
|
||||
padding-top: 14px;
|
||||
border-right: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
.profile-col-right {
|
||||
.profile-col-right .profile-col-inset {
|
||||
padding-left: 24px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
/* ---- SECTION DIVIDERS (full bleed) ---- */
|
||||
.section-divider-left {
|
||||
margin-left: -28px;
|
||||
margin-right: -24px;
|
||||
}
|
||||
|
||||
.section-divider-right {
|
||||
margin-left: -24px;
|
||||
margin-right: -28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
/* ---- MULTI-COLUMN ROWS ---- */
|
||||
|
|
@ -710,10 +787,9 @@ useHead({
|
|||
|
||||
/* ---- SAVE BAR ---- */
|
||||
.save-bar {
|
||||
margin-left: -28px;
|
||||
margin-right: -28px;
|
||||
padding: 16px 28px 24px;
|
||||
margin-top: 20px;
|
||||
flex-shrink: 0;
|
||||
padding: 24px 28px 24px;
|
||||
margin-top: 0;
|
||||
border-top: 1px dashed var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -737,36 +813,24 @@ useHead({
|
|||
@media (max-width: 1024px) {
|
||||
.profile-columns {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.profile-col-left {
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: -28px;
|
||||
margin-right: -28px;
|
||||
}
|
||||
|
||||
.profile-col-left .profile-col-inset,
|
||||
.profile-col-right .profile-col-inset {
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.profile-col-right {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.section-divider-left,
|
||||
.section-divider-right {
|
||||
margin-left: -28px;
|
||||
margin-right: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.row-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -775,22 +839,13 @@ useHead({
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile-col-left {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
.profile-col-left .profile-col-inset,
|
||||
.profile-col-right .profile-col-inset {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.section-divider-left,
|
||||
.section-divider-right {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
}
|
||||
|
||||
.save-bar {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue