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,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