Updates
Some checks failed
Test / vitest (push) Failing after 6m9s
Test / visual (push) Has been skipped
Test / playwright (push) Has been skipped
Test / Notify on failure (push) Successful in 2s

This commit is contained in:
Jennie Robinson Faber 2026-04-15 17:45:09 +01:00
parent 28040f44f4
commit 2394248d53
13 changed files with 571 additions and 538 deletions

View file

@ -25,11 +25,6 @@
/>
</NuxtLink>
</li>
<li>
<a href="#" class="sign-out" @click.prevent="handleLogout"
>Sign out</a
>
</li>
</ul>
<div class="sidebar-section">Explore</div>
@ -336,8 +331,8 @@ const exploreItems = [
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--candle);
margin-left: 6px;
background: var(--green);
margin-left: 0px;
vertical-align: middle;
transform: translateY(-1px);
}

View file

@ -1,44 +0,0 @@
<template>
<label class="priv">
<USwitch
:model-value="isPrivate"
aria-label="Private"
size="xs"
@update:model-value="onChange"
/>
<span class="priv-label">Private</span>
</label>
</template>
<script setup>
const props = defineProps({
modelValue: { type: String, default: "members" },
});
const emit = defineEmits(["update:modelValue"]);
// Treat legacy "public" values as "members" (visible to signed-in members).
const isPrivate = computed(() => props.modelValue === "private");
const onChange = (val) => {
emit("update:modelValue", val ? "private" : "members");
};
</script>
<style scoped>
.priv {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-family: "Commit Mono", monospace;
letter-spacing: 0.04em;
color: var(--text-faint);
user-select: none;
cursor: pointer;
}
.priv-label {
line-height: 1;
}
</style>

View file

@ -17,7 +17,7 @@
</span>
</slot>
</span>
<span>
<span class="right">
<slot name="right">
<ClientOnly>
<template v-if="memberData">
@ -27,7 +27,7 @@
:src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
:alt="memberData.name"
class="member-avatar"
/>
>
<svg
v-else
class="member-avatar default-ghost"
@ -56,6 +56,10 @@
</svg>
{{ memberData.name }}
</NuxtLink>
<span class="sep" aria-hidden="true">/</span>
<a href="#" class="sign-out" @click.prevent="handleLogout"
>sign out</a
>
</template>
<template v-else> The Baby Ghosts member program </template>
<template #fallback> The Baby Ghosts member program </template>
@ -70,7 +74,12 @@ const props = defineProps({
pagePath: { type: String, default: "" },
});
const { memberData } = useAuth();
const { memberData, logout } = useAuth();
const handleLogout = async () => {
await logout();
navigateTo("/");
};
const capitalize = (str) => {
if (!str) return "";
@ -112,6 +121,9 @@ const breadcrumbs = computed(() => {
gap: 6px;
text-decoration: none;
}
.member-link:hover {
text-decoration: underline;
}
.member-avatar {
width: 18px;
height: 18px;
@ -120,6 +132,23 @@ const breadcrumbs = computed(() => {
.default-ghost {
color: var(--border);
}
.right {
display: inline-flex;
align-items: center;
}
.sep {
color: var(--text-faint);
margin: 0 8px;
}
.top-strip a.sign-out {
font-size: 12px;
color: var(--ember);
text-decoration: none;
}
.top-strip a.sign-out:hover {
color: var(--ember);
text-decoration: underline;
}
.breadcrumb-nav {
display: inline;

View file

@ -28,7 +28,7 @@
<!-- Search / Filter -->
<div class="filter-bar">
<div class="field" style="margin-bottom: 0; flex: 1">
<input v-model="searchQuery" placeholder="Search members..." />
<input v-model="searchQuery" placeholder="Search members..." >
</div>
<div class="field" style="margin-bottom: 0">
<select v-model="circleFilter" aria-label="Filter by circle">
@ -38,6 +38,15 @@
<option value="practitioner">Practitioner</option>
</select>
</div>
<div class="field" style="margin-bottom: 0">
<select v-model="statusFilter" aria-label="Filter by status">
<option value="">All Statuses</option>
<option value="active">Active</option>
<option value="pending_payment">Pending Payment</option>
<option value="suspended">Suspended</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
</div>
<!-- Members Table -->
@ -61,17 +70,18 @@
:checked="allVisibleSelected"
:indeterminate="!allVisibleSelected && someVisibleSelected"
@change="toggleSelectAll"
/>
>
<span class="check-mark" />
</label>
</th>
<th>Name</th>
<th>Email</th>
<th>Circle</th>
<th>Tier</th>
<th class="sortable" @click="toggleSort('name')">Name <span class="sort-ind">{{ sortIndicator('name') }}</span></th>
<th class="sortable" @click="toggleSort('email')">Email <span class="sort-ind">{{ sortIndicator('email') }}</span></th>
<th class="sortable" @click="toggleSort('circle')">Circle <span class="sort-ind">{{ sortIndicator('circle') }}</span></th>
<th class="sortable" @click="toggleSort('contributionTier')">Tier <span class="sort-ind">{{ sortIndicator('contributionTier') }}</span></th>
<th class="sortable" @click="toggleSort('status')">Status <span class="sort-ind">{{ sortIndicator('status') }}</span></th>
<th>Invite</th>
<th>Slack</th>
<th>Joined</th>
<th class="sortable" @click="toggleSort('createdAt')">Joined <span class="sort-ind">{{ sortIndicator('createdAt') }}</span></th>
<th>Actions</th>
</tr>
</thead>
@ -89,7 +99,7 @@
type="checkbox"
:checked="selectedMemberIds.includes(member._id)"
@change="toggleSelect(member._id)"
/>
>
<span class="check-mark" />
</label>
</td>
@ -103,6 +113,9 @@
}}</span>
</td>
<td class="col-mono">${{ member.contributionTier }}/mo</td>
<td>
<span class="badge status" :class="`status-${member.status || 'pending_payment'}`">{{ statusLabel(member.status) }}</span>
</td>
<td>
<span
:class="member.inviteEmailSent ? 'status-ok' : 'status-dim'"
@ -122,10 +135,10 @@
<NuxtLink :to="`/admin/members/${member._id}`" class="link-btn" @click.stop
>View</NuxtLink
>
<button @click.stop="sendSlackInvite(member)" class="link-btn">
<button class="link-btn" @click.stop="sendSlackInvite(member)">
Slack
</button>
<button @click.stop="editMember(member)" class="link-btn">Edit</button>
<button class="link-btn" @click.stop="editMember(member)">Edit</button>
</td>
</tr>
</tbody>
@ -150,10 +163,10 @@
</button>
</div>
<form @submit.prevent="createMember" class="modal-body">
<form class="modal-body" @submit.prevent="createMember">
<div class="field">
<label>Name</label>
<input v-model="newMember.name" placeholder="Full name" required />
<input v-model="newMember.name" placeholder="Full name" required >
</div>
<div class="field">
<label>Email</label>
@ -162,7 +175,7 @@
type="email"
placeholder="email@example.com"
required
/>
>
</div>
<div class="field">
<label>Circle</label>
@ -220,9 +233,9 @@
ref="csvFileInput"
type="file"
accept=".csv"
@change="handleCsvFile"
class="file-input"
/>
@change="handleCsvFile"
>
</div>
<div v-if="csvParseError" class="error-box">
@ -243,7 +256,7 @@
>
{{ csvRows.length - csvValidRows.length }} with errors.
</span>
<button @click="resetCsvImport" class="link-btn">
<button class="link-btn" @click="resetCsvImport">
Choose different file
</button>
</div>
@ -303,14 +316,14 @@
</div>
<div class="modal-actions">
<button @click="closeImportModal" class="btn">
<button class="btn" @click="closeImportModal">
{{ importResults ? "Done" : "Cancel" }}
</button>
<button
v-if="csvValidRows.length && !importResults"
:disabled="importing"
@click="submitImport"
class="btn btn-primary"
@click="submitImport"
>
{{
importing
@ -336,14 +349,14 @@
</button>
</div>
<form @submit.prevent="submitEditMember" class="modal-body">
<form class="modal-body" @submit.prevent="submitEditMember">
<div class="field">
<label>Name</label>
<input v-model="editingMember.name" required />
<input v-model="editingMember.name" required >
</div>
<div class="field">
<label>Email</label>
<input v-model="editingMember.email" type="email" required />
<input v-model="editingMember.email" type="email" required >
</div>
<div class="field">
<label>Circle</label>
@ -407,7 +420,7 @@
<div class="field">
<label>Email Template</label>
<textarea v-model="inviteTemplate" rows="12"></textarea>
<textarea v-model="inviteTemplate" rows="12"/>
<p class="help-text" style="margin-top: 4px">
Tokens: <code>{name}</code>, <code>{loginLink}</code>,
<code>{circle}</code>
@ -439,14 +452,14 @@
</div>
<div class="modal-actions">
<button @click="showInviteModal = false" class="btn">
<button class="btn" @click="showInviteModal = false">
{{ inviteResults ? "Done" : "Cancel" }}
</button>
<button
v-if="!inviteResults"
:disabled="sendingInvites"
@click="submitInvites"
class="btn btn-primary"
@click="submitInvites"
>
{{
sendingInvites
@ -477,6 +490,30 @@ const {
const searchQuery = ref("");
const circleFilter = ref("");
const statusFilter = ref("");
const sortKey = ref("createdAt");
const sortDir = ref("desc");
const STATUS_LABELS = {
active: "Active",
pending_payment: "Pending",
suspended: "Suspended",
cancelled: "Cancelled",
};
const statusLabel = (s) => STATUS_LABELS[s] || "Pending";
const toggleSort = (key) => {
if (sortKey.value === key) {
sortDir.value = sortDir.value === "asc" ? "desc" : "asc";
} else {
sortKey.value = key;
sortDir.value = key === "createdAt" ? "desc" : "asc";
}
};
const sortIndicator = (key) => {
if (sortKey.value !== key) return "";
return sortDir.value === "asc" ? "▲" : "▼";
};
const showCreateModal = ref(false);
const creating = ref(false);
@ -519,7 +556,7 @@ const newMember = reactive({
const filteredMembers = computed(() => {
if (!members.value) return [];
return members.value.filter((member) => {
const filtered = members.value.filter((member) => {
const matchesSearch =
!searchQuery.value ||
member.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
@ -528,7 +565,33 @@ const filteredMembers = computed(() => {
const matchesCircle =
!circleFilter.value || member.circle === circleFilter.value;
return matchesSearch && matchesCircle;
const matchesStatus =
!statusFilter.value || (member.status || "pending_payment") === statusFilter.value;
return matchesSearch && matchesCircle && matchesStatus;
});
const key = sortKey.value;
const dir = sortDir.value === "asc" ? 1 : -1;
return [...filtered].sort((a, b) => {
let av = a[key];
let bv = b[key];
if (key === "contributionTier") {
av = Number(av) || 0;
bv = Number(bv) || 0;
} else if (key === "createdAt") {
av = av ? new Date(av).getTime() : 0;
bv = bv ? new Date(bv).getTime() : 0;
} else if (key === "status") {
av = a.status || "pending_payment";
bv = b.status || "pending_payment";
} else {
av = (av || "").toString().toLowerCase();
bv = (bv || "").toString().toLowerCase();
}
if (av < bv) return -1 * dir;
if (av > bv) return 1 * dir;
return 0;
});
});
@ -1055,6 +1118,44 @@ tbody td {
font-size: 11px;
}
/* ---- SORTABLE HEADERS ---- */
th.sortable {
cursor: pointer;
user-select: none;
}
th.sortable:hover {
color: var(--candle);
}
.sort-ind {
display: inline-block;
width: 10px;
font-size: 9px;
color: var(--candle);
margin-left: 2px;
}
/* ---- MEMBER STATUS BADGES ---- */
.badge.status {
text-transform: uppercase;
}
.badge.status-active {
color: var(--green, #3a6b3a);
border-color: rgba(58, 107, 58, 0.45);
}
.badge.status-pending_payment {
color: var(--text-dim);
border-color: var(--border);
}
.badge.status-suspended {
color: var(--ember);
border-color: rgba(138, 68, 32, 0.45);
}
.badge.status-cancelled {
color: var(--text-faint);
border-color: var(--border);
opacity: 0.7;
}
/* ---- MODALS ---- */
.modal-overlay {
position: fixed;

View file

@ -1,16 +1,18 @@
<template>
<PageShell title="Bulletin Board" :subtitle="pageSubtitle">
<div class="action-bar">
<button type="button" class="new-post-btn" @click="openNewForm">
+ New Post
</button>
</div>
<div v-if="cooperativeTags.length > 0" class="tags-drawer-toggle">
<button type="button" class="drawer-btn" @click="showTagsDrawer = !showTagsDrawer">
<button
v-if="cooperativeTags.length > 0"
type="button"
class="drawer-btn"
@click="showTagsDrawer = !showTagsDrawer"
>
Tags...
<span v-if="activeTagFilter" class="tag-count-badge">1</span>
</button>
<button type="button" class="new-post-btn" @click="openNewForm">
+ New Post
</button>
</div>
<div v-if="showTagsDrawer && cooperativeTags.length > 0" class="tags-drawer">
@ -206,7 +208,9 @@ onMounted(async () => {
padding: 12px 24px;
border-bottom: 1px dashed var(--border);
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.new-post-btn {
@ -230,10 +234,6 @@ onMounted(async () => {
}
/* ---- TAGS DRAWER ---- */
.tags-drawer-toggle {
padding: 8px 24px;
border-bottom: 1px dashed var(--border);
}
.drawer-btn {
font-family: "Commit Mono", monospace;
font-size: 11px;
@ -376,9 +376,6 @@ onMounted(async () => {
.action-bar {
padding: 12px 16px;
}
.tags-drawer-toggle {
padding: 8px 16px;
}
.skills-bar {
padding: 10px 16px;
}

View file

@ -30,7 +30,11 @@
subtitle="How you appear to other members"
>
<NuxtLink
v-if="memberId && memberData?.status === MEMBER_STATUSES.ACTIVE && formData.showInDirectory"
v-if="
memberId &&
memberData?.status === MEMBER_STATUSES.ACTIVE &&
formData.showInDirectory
"
:to="`/members/${memberId}`"
class="view-profile-link"
>
@ -50,18 +54,16 @@
type="text"
placeholder="Your name"
required
/>
>
</div>
<div class="row-2">
<div class="field">
<label>Pronouns</label>
<input
v-model="formData.pronouns"
type="text"
placeholder="e.g., she/her, they/them"
/>
<PrivacyToggle v-model="formData.pronounsPrivacy" />
>
</div>
<div class="field">
<label>Timezone</label>
@ -73,9 +75,12 @@
searchable-placeholder="Search timezones..."
placeholder="Select a timezone"
class="timezone-select"
:ui="{
content: 'tz-content',
item: 'tz-item',
input: 'tz-input',
}"
/>
<PrivacyToggle v-model="formData.timeZonePrivacy" />
</div>
</div>
<div class="field">
@ -90,10 +95,9 @@
:title="ghost.label"
@click="formData.avatar = ghost.value"
>
<img :src="ghost.image" :alt="ghost.label" />
<img :src="ghost.image" :alt="ghost.label" >
</button>
</div>
<PrivacyToggle v-model="formData.avatarPrivacy" />
</div>
</PageSection>
@ -107,8 +111,7 @@
v-model="formData.studio"
type="text"
placeholder="Studio name"
/>
<PrivacyToggle v-model="formData.studioPrivacy" />
>
</div>
<div class="field">
<label>Location</label>
@ -116,8 +119,7 @@
v-model="formData.location"
type="text"
placeholder="Toronto, ON"
/>
<PrivacyToggle v-model="formData.locationPrivacy" />
>
</div>
</div>
@ -128,11 +130,10 @@
rows="4"
placeholder="Share your background, interests, and experience..."
maxlength="300"
></textarea>
/>
<div class="char-count">
{{ formData.bio?.length || 0 }} / 300
</div>
<PrivacyToggle v-model="formData.bioPrivacy" />
</div>
<div class="field">
@ -142,7 +143,6 @@
:tags="craftTags"
@suggest="openTagSuggest('craft')"
/>
<PrivacyToggle v-model="formData.craftTagsPrivacy" />
</div>
</PageSection>
@ -157,7 +157,8 @@
<div class="toggle-label">
Show in Member Directory
<span class="toggle-sub"
>Your profile will appear in the public member listing</span
>Your profile will appear in the private member
directory.</span
>
</div>
</div>
@ -169,12 +170,12 @@
<div class="section-label">Board</div>
<div class="field">
<label>Slack Handle</label>
<label>Gamma Space Slack Handle</label>
<input
v-model="formData.boardSlackHandle"
type="text"
placeholder="@yourslackname"
/>
>
<div class="field-help">
Shown on your board posts so other members can reach out.
</div>
@ -182,7 +183,9 @@
<div class="posts-header">
<div class="posts-heading">Your Posts</div>
<NuxtLink to="/board" class="posts-new-link">+ New Post</NuxtLink>
<NuxtLink to="/board" class="posts-new-link"
>+ New Post</NuxtLink
>
</div>
<div v-if="myPosts.length === 0" class="posts-empty">
@ -256,7 +259,10 @@
</template>
</ClientOnly>
<TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
<TagSuggestModal
v-model:open="showTagSuggestModal"
:pool="tagSuggestPool"
/>
</PageShell>
</template>
@ -265,7 +271,7 @@ import { MEMBER_STATUSES } from "~/composables/useMemberStatus";
import { TIMEZONE_OPTIONS } from "~/config/timezones";
definePageMeta({
middleware: 'auth',
middleware: "auth",
});
const { memberData, checkMemberStatus } = useAuth();
@ -274,27 +280,67 @@ const { posts: myPosts, fetchPosts, deletePost } = useBoardPosts();
const toast = useToast();
const availableGhosts = [
{ value: "disbelieving", label: "Disbelieving", image: "/ghosties/Ghost-Disbelieving.png" },
{ value: "double-take", label: "Double Take", image: "/ghosties/Ghost-Double-Take.png" },
{ value: "exasperated", label: "Exasperated", image: "/ghosties/Ghost-Exasperated.png" },
{
value: "disbelieving",
label: "Disbelieving",
image: "/ghosties/Ghost-Disbelieving.png",
},
{
value: "double-take",
label: "Double Take",
image: "/ghosties/Ghost-Double-Take.png",
},
{
value: "exasperated",
label: "Exasperated",
image: "/ghosties/Ghost-Exasperated.png",
},
{ value: "mild", label: "Mild", image: "/ghosties/Ghost-Mild.png" },
{ value: "sweet", label: "Sweet", image: "/ghosties/Ghost-Sweet.png" },
{ value: "wtf", label: "WTF", image: "/ghosties/Ghost-WTF.png" },
];
// Compute current UTC offset for an IANA timezone (DST-aware).
const utcOffset = (tz) => {
try {
const parts = new Intl.DateTimeFormat("en-US", {
timeZone: tz,
timeZoneName: "longOffset",
}).formatToParts(new Date());
const name = parts.find((p) => p.type === "timeZoneName")?.value || "";
// "GMT-05:00" "UTC-05:00"; "GMT" "UTC+00:00"
if (name === "GMT") return "UTC+00:00";
return name.replace("GMT", "UTC");
} catch {
return "";
}
};
// Include the saved timezone as a custom option if it's not in the curated list.
const timezoneItems = computed(() => {
const saved = formData.timeZone;
const list = [...TIMEZONE_OPTIONS];
if (saved && !list.some((t) => t.value === saved)) {
list.unshift({ label: saved, value: saved });
const list = TIMEZONE_OPTIONS.map((t) => {
const off = utcOffset(t.value);
return { ...t, label: off ? `${t.label} (${off})` : t.label };
});
if (saved && !TIMEZONE_OPTIONS.some((t) => t.value === saved)) {
const off = utcOffset(saved);
list.unshift({ label: off ? `${saved} (${off})` : saved, value: saved });
}
return list;
});
const notificationToggles = [
{ key: "events", label: "Event reminders", sub: "Get notified about upcoming events" },
{ key: "updates", label: "Community updates", sub: "New posts from members you follow" },
{
key: "events",
label: "Event reminders",
sub: "Get notified about upcoming events",
},
{
key: "updates",
label: "Community updates",
sub: "New posts from members you follow",
},
];
const { data: tagsData } = await useFetch("/api/tags");
@ -321,14 +367,7 @@ const formData = reactive({
location: "",
showInDirectory: true,
craftTags: [],
craftTagsPrivacy: "members",
boardSlackHandle: "",
pronounsPrivacy: "members",
timeZonePrivacy: "members",
avatarPrivacy: "members",
studioPrivacy: "members",
bioPrivacy: "members",
locationPrivacy: "members",
notifications: {
events: true,
updates: true,
@ -364,15 +403,6 @@ const loadProfile = () => {
const board = memberData.value.board || {};
formData.boardSlackHandle = board.slackHandle || "";
const privacy = memberData.value.privacy || {};
formData.pronounsPrivacy = privacy.pronouns || "members";
formData.timeZonePrivacy = privacy.timeZone || "members";
formData.avatarPrivacy = privacy.avatar || "members";
formData.studioPrivacy = privacy.studio || "members";
formData.bioPrivacy = privacy.bio || "members";
formData.locationPrivacy = privacy.location || "members";
formData.craftTagsPrivacy = privacy.craftTags || "members";
const notifs = memberData.value.notifications || {};
formData.notifications.events = notifs.events ?? true;
formData.notifications.updates = notifs.updates ?? true;
@ -397,7 +427,8 @@ const handleSubmit = async () => {
console.error("Profile save error:", error);
toast.add({
title: "Update failed",
description: error.data?.statusMessage || error.data?.message || "Please try again.",
description:
error.data?.statusMessage || error.data?.message || "Please try again.",
color: "error",
});
} finally {
@ -474,11 +505,6 @@ useHead({
gap: 12px;
}
/* ---- PRIVACY TOGGLE SPACING ---- */
.field :deep(.priv) {
margin-top: 4px;
}
/* ---- FIELD LABELS (distinct from .section-label) ---- */
.field label {
font-size: 11px;
@ -703,11 +729,6 @@ useHead({
gap: 12px;
}
/* ---- TIMEZONE SELECT ---- */
.timezone-select {
width: 100%;
}
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
.row-2 {
@ -721,3 +742,85 @@ useHead({
}
}
</style>
<style>
/* Non-scoped: targets USelectMenu button root which does not inherit scoped data attribute. */
button.timezone-select {
display: flex !important;
width: 100%;
padding: 5px 8px !important;
font-family: "Commit Mono", monospace !important;
font-size: 13px !important;
color: var(--text-bright) !important;
background: var(--input-bg) !important;
border: 1px solid var(--border) !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
min-height: 0;
--tw-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-color: transparent;
}
button.timezone-select:hover {
background: var(--input-bg) !important;
}
button.timezone-select:focus,
button.timezone-select:focus-visible,
button.timezone-select[aria-expanded="true"] {
border-color: var(--candle) !important;
}
/* Popup content (portalled to body) */
.tz-content {
background: var(--input-bg) !important;
border: 1px solid var(--border) !important;
border-radius: 0 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
font-family: "Commit Mono", monospace !important;
}
/* Search input wrapper inside popup */
.tz-input {
border-bottom: 1px dashed var(--border) !important;
}
.tz-input input {
font-family: "Commit Mono", monospace !important;
font-size: 13px !important;
color: var(--text-bright) !important;
background: transparent !important;
border-radius: 0 !important;
padding: 6px 8px !important;
box-shadow: none !important;
--tw-ring-shadow: 0 0 #0000 !important;
--tw-ring-offset-shadow: 0 0 #0000 !important;
}
/* Option rows */
.tz-item {
font-family: "Commit Mono", monospace !important;
font-size: 13px !important;
color: var(--text) !important;
border-radius: 0 !important;
padding: 6px 8px !important;
}
.tz-item::before {
border-radius: 0 !important;
}
.tz-item[data-highlighted]::before,
.tz-item[data-highlighted]:not([data-disabled])::before {
background: var(--surface-hover) !important;
}
.tz-item[data-highlighted],
.tz-item[data-highlighted]:not([data-disabled]) {
color: var(--text-bright) !important;
}
</style>

View file

@ -25,7 +25,6 @@ export default defineEventHandler(async (event) => {
board: member.board,
showInDirectory: member.showInDirectory,
notifications: member.notifications,
privacy: member.privacy,
createdAt: member.createdAt,
onboarding: member.onboarding,
};

View file

@ -1,25 +1,8 @@
import jwt from "jsonwebtoken";
import Member from "../../models/member.js";
import { connectDB } from "../../utils/mongoose.js";
import { requireAuth } from "../../utils/auth.js";
export default defineEventHandler(async (event) => {
await connectDB();
// Check if user is authenticated (optional — works for public and authenticated users)
const token = getCookie(event, "auth-token");
let isAuthenticated = false;
if (token) {
try {
const decoded = jwt.verify(token, useRuntimeConfig().jwtSecret);
if (decoded.memberId) {
isAuthenticated = true;
}
} catch {
// Invalid token, treat as public
isAuthenticated = false;
}
}
await requireAuth(event);
const id = event.context.params.id;
@ -30,7 +13,7 @@ export default defineEventHandler(async (event) => {
status: "active",
})
.select(
"name pronouns timeZone avatar studio bio location socialLinks privacy circle craftTags board createdAt memberNumber",
"name pronouns timeZone avatar studio bio location socialLinks circle craftTags board createdAt memberNumber",
)
.lean();
@ -41,42 +24,27 @@ export default defineEventHandler(async (event) => {
});
}
// Filter fields based on privacy settings
const privacy = member.privacy || {};
const filtered = {
_id: member._id,
name: member.name,
circle: member.circle,
createdAt: member.createdAt,
memberNumber: member.memberNumber,
};
// Helper function to check if field should be visible
const isVisible = (field) => {
const privacySetting = privacy[field] || "members";
if (privacySetting === "public") return true;
if (privacySetting === "members" && isAuthenticated) return true;
if (privacySetting === "private") return false;
return false;
};
// Add fields based on privacy settings
if (isVisible("avatar")) filtered.avatar = member.avatar;
if (isVisible("pronouns")) filtered.pronouns = member.pronouns;
if (isVisible("timeZone")) filtered.timeZone = member.timeZone;
if (isVisible("studio")) filtered.studio = member.studio;
if (isVisible("bio")) filtered.bio = member.bio;
if (isVisible("location")) filtered.location = member.location;
if (isVisible("socialLinks")) filtered.socialLinks = member.socialLinks;
if (isVisible("craftTags")) filtered.craftTags = member.craftTags;
filtered.board = {
avatar: member.avatar,
pronouns: member.pronouns,
timeZone: member.timeZone,
studio: member.studio,
bio: member.bio,
location: member.location,
socialLinks: member.socialLinks,
craftTags: member.craftTags,
board: {
slackHandle: member.board?.slackHandle,
},
};
return { member: filtered };
} catch (error) {
// Re-throw NuxtErrors (like the 404 above)
if (error.statusCode) {
throw error;
}

View file

@ -1,23 +1,9 @@
import jwt from "jsonwebtoken";
import Member from "../../models/member.js";
import Tag from "../../models/tag.js";
import { connectDB } from "../../utils/mongoose.js";
import { requireAuth } from "../../utils/auth.js";
export default defineEventHandler(async (event) => {
await connectDB();
// Check if user is authenticated
const token = getCookie(event, "auth-token");
let isAuthenticated = false;
if (token) {
try {
jwt.verify(token, useRuntimeConfig().jwtSecret);
isAuthenticated = true;
} catch (err) {
isAuthenticated = false;
}
}
await requireAuth(event);
const query = getQuery(event);
const search = query.search || "";
@ -56,42 +42,28 @@ export default defineEventHandler(async (event) => {
try {
const members = await Member.find(dbQuery)
.select(
"name pronouns timeZone avatar studio bio location socialLinks privacy circle craftTags board createdAt",
"name pronouns timeZone avatar studio bio location socialLinks circle craftTags board createdAt",
)
.sort({ createdAt: -1 })
.lean();
const filteredMembers = members.map((member) => {
const privacy = member.privacy || {};
const filtered = {
const filteredMembers = members.map((member) => ({
_id: member._id,
name: member.name,
circle: member.circle,
createdAt: member.createdAt,
};
const isVisible = (field) => {
const privacySetting = privacy[field] || "members";
if (privacySetting === "public") return true;
if (privacySetting === "members" && isAuthenticated) return true;
return false;
};
if (isVisible("avatar")) filtered.avatar = member.avatar;
if (isVisible("pronouns")) filtered.pronouns = member.pronouns;
if (isVisible("timeZone")) filtered.timeZone = member.timeZone;
if (isVisible("studio")) filtered.studio = member.studio;
if (isVisible("bio")) filtered.bio = member.bio;
if (isVisible("location")) filtered.location = member.location;
if (isVisible("socialLinks")) filtered.socialLinks = member.socialLinks;
if (isVisible("craftTags")) filtered.craftTags = member.craftTags;
filtered.board = {
avatar: member.avatar,
pronouns: member.pronouns,
timeZone: member.timeZone,
studio: member.studio,
bio: member.bio,
location: member.location,
socialLinks: member.socialLinks,
craftTags: member.craftTags,
board: {
slackHandle: member.board?.slackHandle,
};
return filtered;
});
},
}));
const [craftTags, cooperativeTags] = await Promise.all([
Tag.find({ pool: "craft", active: true }).sort({ label: 1 }).lean(),
@ -110,6 +82,7 @@ export default defineEventHandler(async (event) => {
},
};
} catch (error) {
if (error.statusCode) throw error;
console.error("Directory fetch error:", error);
throw createError({
statusCode: 500,

View file

@ -22,18 +22,6 @@ export default defineEventHandler(async (event) => {
"notifications",
];
// Privacy fields from validated body
const privacyFields = [
"pronounsPrivacy",
"timeZonePrivacy",
"avatarPrivacy",
"studioPrivacy",
"bioPrivacy",
"locationPrivacy",
"socialLinksPrivacy",
"craftTagsPrivacy",
];
// Build update object from validated data
const updateData = {};
@ -53,14 +41,6 @@ export default defineEventHandler(async (event) => {
updateData["board.slackHandle"] = body.boardSlackHandle;
}
// Handle privacy settings
privacyFields.forEach((privacyField) => {
if (body[privacyField] !== undefined) {
const baseField = privacyField.replace("Privacy", "");
updateData[`privacy.${baseField}`] = body[privacyField];
}
});
try {
const member = await Member.findByIdAndUpdate(
memberId,
@ -76,7 +56,7 @@ export default defineEventHandler(async (event) => {
}
// Log which fields were updated
const changedFields = Object.keys(body).filter(k => body[k] !== undefined && !k.endsWith('Privacy'))
const changedFields = Object.keys(body).filter(k => body[k] !== undefined)
if (changedFields.length) {
logActivity(memberId, 'profile_updated', { fields: changedFields })
}

View file

@ -76,50 +76,6 @@ const memberSchema = new mongoose.Schema({
slackHandle: String,
},
// Privacy settings for profile fields
privacy: {
pronouns: {
type: String,
enum: ["members", "private"],
default: "members",
},
timeZone: {
type: String,
enum: ["members", "private"],
default: "members",
},
avatar: {
type: String,
enum: ["members", "private"],
default: "members",
},
studio: {
type: String,
enum: ["members", "private"],
default: "members",
},
bio: {
type: String,
enum: ["members", "private"],
default: "members",
},
location: {
type: String,
enum: ["members", "private"],
default: "members",
},
socialLinks: {
type: String,
enum: ["members", "private"],
default: "members",
},
craftTags: {
type: String,
enum: ["members", "private"],
default: "members",
},
},
notifications: {
events: { type: Boolean, default: true },
updates: { type: Boolean, default: true },

View file

@ -1,13 +1,6 @@
import * as z from 'zod'
import { ADMIN_ALERT_TYPES } from '../models/adminAlertDismissal.js'
// Binary privacy: 'members' = visible to signed-in members, 'private' = hidden.
// Legacy 'public' is accepted from old clients and coerced to 'members'.
const privacyEnum = z.preprocess(
(v) => (v === 'public' ? 'members' : v),
z.enum(['members', 'private'])
)
export const emailSchema = z.object({
email: z.string().trim().toLowerCase().email()
})
@ -37,15 +30,7 @@ export const memberProfileUpdateSchema = z.object({
events: z.boolean().optional(),
updates: z.boolean().optional()
}).optional(),
pronounsPrivacy: privacyEnum.optional(),
timeZonePrivacy: privacyEnum.optional(),
avatarPrivacy: privacyEnum.optional(),
studioPrivacy: privacyEnum.optional(),
bioPrivacy: privacyEnum.optional(),
locationPrivacy: privacyEnum.optional(),
socialLinksPrivacy: privacyEnum.optional(),
craftTags: z.array(z.string().max(100)).max(16).optional(),
craftTagsPrivacy: privacyEnum.optional(),
boardSlackHandle: z.string().max(200).optional()
})

View file

@ -175,20 +175,11 @@ describe('memberProfileUpdateSchema', () => {
expect(result.data).not.toHaveProperty('status')
})
it('validates privacy enum values', () => {
const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'invalid' })
expect(result.success).toBe(false)
})
it('accepts valid binary privacy values', () => {
expect(memberProfileUpdateSchema.safeParse({ bioPrivacy: 'members' }).success).toBe(true)
expect(memberProfileUpdateSchema.safeParse({ bioPrivacy: 'private' }).success).toBe(true)
})
it('coerces legacy "public" privacy value to "members"', () => {
const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'public' })
it('strips unknown privacy fields from profile update', () => {
const result = memberProfileUpdateSchema.safeParse({ bioPrivacy: 'members', bio: 'hello' })
expect(result.success).toBe(true)
expect(result.data.bioPrivacy).toBe('members')
expect(result.data).not.toHaveProperty('bioPrivacy')
expect(result.data.bio).toBe('hello')
})
})