feat: participants directory and account page
This commit is contained in:
Jonathan
parent
636ef129bb
commit
99f3052651
2 changed files with 481 additions and 0 deletions
296
src/pages/account.astro
Normal file
296
src/pages/account.astro
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
---
|
||||
import AppLayout from '../layouts/AppLayout.astro';
|
||||
import { updateUserProfile } from '../lib/db';
|
||||
|
||||
const user = Astro.locals.user;
|
||||
let success = false;
|
||||
let error: string | null = null;
|
||||
|
||||
if (Astro.request.method === 'POST') {
|
||||
const data = await Astro.request.formData();
|
||||
const name = String(data.get('name') ?? '').trim();
|
||||
const bio = String(data.get('bio') ?? '').trim();
|
||||
|
||||
if (name.length < 2) {
|
||||
error = 'Name must be at least 2 characters.';
|
||||
} else if (bio.length > 280) {
|
||||
error = 'Bio must be 280 characters or fewer.';
|
||||
} else {
|
||||
updateUserProfile(user.id, name, bio);
|
||||
return Astro.redirect('/account?saved=1');
|
||||
}
|
||||
}
|
||||
|
||||
const saved = Astro.url.searchParams.get('saved') === '1';
|
||||
---
|
||||
<AppLayout title="Account" user={user}>
|
||||
<div class="page">
|
||||
|
||||
<header class="page-header">
|
||||
<p class="label-sm eyebrow">Account</p>
|
||||
<h1 class="headline-lg page-title">{user.name}</h1>
|
||||
<p class="body-md org">{user.organisation}</p>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
{saved && (
|
||||
<p class="success-msg body-sm" role="status">Profile updated.</p>
|
||||
)}
|
||||
{error && (
|
||||
<p class="error-msg body-sm" role="alert">{error}</p>
|
||||
)}
|
||||
|
||||
<form method="POST" class="account-form" novalidate>
|
||||
<div class="field">
|
||||
<label for="name" class="label-sm field-label">
|
||||
Display name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
class="input body-md"
|
||||
value={user.name}
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="bio" class="label-sm field-label">
|
||||
Bio
|
||||
<span class="label-sm field-hint">Optional · max 280 characters · shown on participants page</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
name="bio"
|
||||
class="textarea body-md"
|
||||
rows="4"
|
||||
maxlength="280"
|
||||
placeholder="A sentence or two about your work and why you are here."
|
||||
>{user.bio}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-primary body-md">Save changes</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="account-info">
|
||||
<h2 class="label-sm section-heading">Account details</h2>
|
||||
<dl class="info-list">
|
||||
<div class="info-row">
|
||||
<dt class="label-sm info-label">Email</dt>
|
||||
<dd class="body-md info-value">{user.email}</dd>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<dt class="label-sm info-label">Role</dt>
|
||||
<dd class="body-md info-value" style="text-transform: capitalize">{user.role}</dd>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<dt class="label-sm info-label">Organisation</dt>
|
||||
<dd class="body-md info-value">{user.organisation}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="body-sm reset-note">
|
||||
To change your email or password, contact Fenja — we will issue a new invite link.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
padding: var(--space-10) var(--space-20) var(--space-16);
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Header ──────────────────────────────────────────────────────── */
|
||||
.page-header {
|
||||
margin-bottom: var(--space-10);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--tracking-snug);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.org {
|
||||
color: var(--on-surface-variant);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Content ─────────────────────────────────────────────────────── */
|
||||
.content {
|
||||
max-width: 36rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
/* ── Status messages ─────────────────────────────────────────────── */
|
||||
.success-msg {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: rgba(109, 140, 124, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--pigment-copper);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-msg {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: rgba(185, 107, 88, 0.08);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--pigment-terracotta);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Form ────────────────────────────────────────────────────────── */
|
||||
.account-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.field-label {
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-variant);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
color: var(--on-surface-muted);
|
||||
text-transform: none;
|
||||
letter-spacing: var(--tracking-normal);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface-container-lowest);
|
||||
border: var(--ghost-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-body-md);
|
||||
color: var(--on-surface);
|
||||
outline: none;
|
||||
transition: border-color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input:focus {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface-container-lowest);
|
||||
border: var(--ghost-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-body-md);
|
||||
color: var(--on-surface);
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color var(--duration-fast) var(--ease-standard),
|
||||
box-shadow var(--duration-fast) var(--ease-standard);
|
||||
box-sizing: border-box;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
.textarea:focus {
|
||||
border-color: var(--secondary);
|
||||
box-shadow: 0 0 0 3px rgba(120, 95, 83, 0.12);
|
||||
}
|
||||
.textarea::placeholder { color: var(--on-surface-muted); }
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-dim) 100%);
|
||||
color: var(--on-secondary);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-body-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity var(--duration-fast) var(--ease-standard);
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
|
||||
/* ── Account info ────────────────────────────────────────────────── */
|
||||
.account-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding-top: var(--space-8);
|
||||
border-top: var(--ghost-border);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-muted);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-muted);
|
||||
min-width: 6rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--on-surface-variant);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reset-note {
|
||||
color: var(--on-surface-muted);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
185
src/pages/participants.astro
Normal file
185
src/pages/participants.astro
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
---
|
||||
import AppLayout from '../layouts/AppLayout.astro';
|
||||
import { getAllUsersPublic } from '../lib/db';
|
||||
import type { UserPublic, Role } from '../lib/db';
|
||||
|
||||
const user = Astro.locals.user;
|
||||
|
||||
const allUsers = getAllUsersPublic().filter((u) => u.active);
|
||||
|
||||
// Group by organisation
|
||||
const orgs = new Map<string, UserPublic[]>();
|
||||
for (const u of allUsers) {
|
||||
if (!orgs.has(u.organisation)) orgs.set(u.organisation, []);
|
||||
orgs.get(u.organisation)!.push(u);
|
||||
}
|
||||
|
||||
const roleLabels: Record<Role, string> = {
|
||||
pilot: 'Pilot',
|
||||
cab: 'CAB',
|
||||
fenja: 'Fenja',
|
||||
};
|
||||
|
||||
const roleColors: Record<Role, string> = {
|
||||
pilot: 'var(--pigment-copper)',
|
||||
cab: 'var(--pigment-indigo)',
|
||||
fenja: 'var(--secondary)',
|
||||
};
|
||||
---
|
||||
<AppLayout title="Participants" user={user}>
|
||||
<div class="page">
|
||||
|
||||
<header class="page-header">
|
||||
<p class="label-sm eyebrow">Participants</p>
|
||||
<h1 class="display-md page-title">The people.</h1>
|
||||
<p class="lead subtitle">
|
||||
Everyone in the Bifrost pilot — who they are, where they are from,
|
||||
and what they bring.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="orgs">
|
||||
{[...orgs.entries()].map(([orgName, members]) => (
|
||||
<section class="org-section">
|
||||
<h2 class="headline-sm org-name">{orgName}</h2>
|
||||
<ul class="member-list">
|
||||
{members.map((member) => (
|
||||
<li class="member-card">
|
||||
<div class="member-header">
|
||||
<span class="body-md member-name">{member.name}</span>
|
||||
<span
|
||||
class="role-badge label-sm"
|
||||
style={`color: ${roleColors[member.role]}`}
|
||||
>
|
||||
{roleLabels[member.role]}
|
||||
</span>
|
||||
</div>
|
||||
{member.bio && (
|
||||
<p class="body-sm member-bio">{member.bio}</p>
|
||||
)}
|
||||
{member.id === user.id && (
|
||||
<a href="/account" class="edit-bio-link label-sm">
|
||||
Edit your bio
|
||||
</a>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
padding: var(--space-12) var(--space-20) var(--space-16);
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ── Header ──────────────────────────────────────────────────────── */
|
||||
.page-header {
|
||||
max-width: 44rem;
|
||||
margin-bottom: var(--space-12);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
color: var(--on-surface-muted);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.page-title { margin-bottom: var(--space-5); }
|
||||
|
||||
.subtitle {
|
||||
color: var(--on-surface-variant);
|
||||
max-width: var(--reading-max);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Orgs ────────────────────────────────────────────────────────── */
|
||||
.orgs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-12);
|
||||
max-width: 52rem;
|
||||
}
|
||||
|
||||
.org-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.org-name {
|
||||
font-family: var(--font-serif);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--tracking-snug);
|
||||
margin: 0;
|
||||
padding-bottom: var(--space-4);
|
||||
border-bottom: var(--ghost-border);
|
||||
color: var(--on-surface);
|
||||
}
|
||||
|
||||
/* ── Member cards ────────────────────────────────────────────────── */
|
||||
.member-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.member-card {
|
||||
background: var(--surface-container-lowest);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.member-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-weight: 600;
|
||||
color: var(--on-surface);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-bio {
|
||||
color: var(--on-surface-variant);
|
||||
margin: 0;
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
.edit-bio-link {
|
||||
color: var(--on-surface-muted);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
transition: color var(--duration-fast) var(--ease-standard);
|
||||
align-self: flex-start;
|
||||
}
|
||||
.edit-bio-link:hover {
|
||||
color: var(--on-surface-variant);
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue