add platform pages
This commit is contained in:
JCEEE
@@ -326,3 +326,14 @@
|
||||
- `[fam]/+layout.svelte` owns the `?checkout=return` flow (moved out of the fam page). On landing: if unlocked → welcome notice. If still gated (webhook lag) → `activating` state: paused overlay swaps to a spinner card ("Activating your subscription…"), TopNav paused announcement suppressed, and `invalidateAll()` revalidates every 1.5s (max 12 tries). The `$effect` watching `activating && !disabled` cancels polling and fires "Subscription active!" the instant the gate lifts; exhaustion degrades to a refresh-hint warning.
|
||||
- Mechanics: `pollToken` guards against stale loops; `history.replaceState` scrubs the query cosmetically + `returnHandled` flag prevents double-handling. Webhook remains the sole source of truth for `paymentMode`/`active`.
|
||||
- **Upgrade (same day): activation is event-driven, not polled.** `startActivating` subscribes the browser PB client to its own `fams` record (`pb.collection('fams').subscribe(famId)` — allowed by viewRule `id = @request.auth.famId`). Webhook (superuser) writes → PB SSE push → single `invalidateAll()`; unlock `$effect` stops the subscription + fires success. 20s timer kept purely as a degrade-gracefully fallback. Rejected: onComplete-as-source-of-truth (untrusted); optional future hardening = server-side session verification on return.
|
||||
|
||||
### 2026-08-22 — Platform admin: access-code management + richer stats
|
||||
|
||||
- `/admin` extended (same route/embedded login — env-var check + `platform_session` cookie, no PB auth or hooks involved):
|
||||
- **Access Codes card**: issue codes via `?/createCode` — blank value auto-generates `XXXX-XXXX` (unambiguous charset); fields name/duration/expiry/trialDays (`trialDays > 0` = Stripe trial code). Table shows type badge, active/disabled, **used-by count** (from fams.accessCodeId map), copy-to-clipboard. `?/toggleCode` flips active; `?/deleteCode` **blocked while in use** (must disable).
|
||||
- **Overview**: added chores completed (completions length), active subs (`paymentMode='sub'`), paused/gated (`!active || none/canceled`), active codes. Families table gained plan+paused badges.
|
||||
- All actions guarded by `requirePlatform(cookies)`; data still via `pbAdmin` superuser facade.
|
||||
- Note: `svelte-kit sync` needed after changing load return shapes or `$types` staleness doubles the error count.
|
||||
- **/admin login pattern:** action sets `platform_session` cookie + returns `{success:true}`; the form's `use:enhance` callback flips a local `authed` view state — no redirect, no reliance on inline invalidation or fetch-time Set-Cookie behavior (which proved flaky in-browser despite curl proving both response paths carried it). Cookie still covers subsequent loads; load errors surface as `data.loadError` on the login card instead of silently masquerading as logged-out.
|
||||
- **Platform-admin auth via hooks:** `hooks.server.ts` resolves `locals.platformAdmin` from the `platform_session` cookie (=== 'authenticated') on every request; `/admin` load/actions consume `event.locals.platformAdmin` (`requirePlatform(event)`) instead of raw cookie reads. Same central pattern as `pb_token` → `locals.user`.
|
||||
- **Platform-admin auth hardened (supersedes the constant-cookie version):** `/admin` login now does a real `_superusers.authWithPassword` via PB; the minted superuser JWT goes in `platform_session` (`setPlatformSession` in session.ts). `hooks.server.ts` deviates on `/admin`: verifies the token with `_superusers.authRefresh` → `locals.platformAdmin` (forged values fail authRefresh and get cleared); fam-user pb_token flow skipped on that route. FINAL login shape (user-amended, working): action returns `{success:true}` (no redirect); form's enhance callback does `goto('/admin', { invalidateAll: true })` on success — forcing the load re-run with the fresh cookie; view branches on `data.authenticated`. Verified: real token renders dashboard, forged cookie gets login.
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
- [ ] Optional hardening: server-side session verification on checkout return (`checkout.sessions.retrieve` reusing webhook apply logic) — only if SSE/webhook lag ever becomes a real problem (currently event-driven via PB realtime, see MEMORY 2026-08-22)
|
||||
|
||||
### Platform admin
|
||||
- [ ] Platform-admin UI for managing `accesscodes` globally (create/disable/delete access codes AND trial codes) — currently superuser/DB only. Natural home: `/admin` (has Platform Flags card already).
|
||||
- [ ] `/admin` Families table: name link and "Dashboard"/"View" are duplicates after the broken-link fix — tidy up.
|
||||
- [x] Platform-admin UI shipped on `/admin`: issue codes (auto-gen XXXX-XXXX values), enable/disable/delete (delete blocked while in use), usage counts, trial vs access typing; stats now include chores completed / active subs / paused-gated / active codes; families table shows plan+paused state. Remaining polish: table link duplication.
|
||||
- [ ] `/admin` Families table: name link and "View" are duplicates after the broken-link fix — tidy up.
|
||||
|
||||
### App / UX
|
||||
- [ ] Signup wizard: `?plan=` param only pre-highlights the tier at step 4 — confirm whether it should auto-scroll/pulse instead
|
||||
|
||||
Vendored
+4
@@ -5,6 +5,10 @@ declare global {
|
||||
interface Locals {
|
||||
user: SessionUser | null;
|
||||
pbToken: string | null;
|
||||
// Platform-admin (superuser dashboard) session — set from the
|
||||
// platform_session cookie in hooks.server.ts. Separate from the
|
||||
// fam user session; only /admin consumes it.
|
||||
platformAdmin: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
import { createPbClient } from '$lib/server/pocketbase';
|
||||
import { SESSION_COOKIE, setSessionCookie, clearSessionCookie } from '$lib/server/session';
|
||||
import {
|
||||
SESSION_COOKIE,
|
||||
setSessionCookie,
|
||||
clearSessionCookie,
|
||||
PLATFORM_SESSION_COOKIE,
|
||||
clearPlatformSession
|
||||
} from '$lib/server/session';
|
||||
import type { SessionUser } from '$lib/server/types';
|
||||
import { handleOf } from '@shared/slugify';
|
||||
import { migrateOnBoot } from '$lib/server/migrate-boot';
|
||||
@@ -11,7 +17,26 @@ void migrateOnBoot();
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
event.locals.user = null;
|
||||
event.locals.pbToken = null;
|
||||
event.locals.platformAdmin = false;
|
||||
|
||||
// Platform-admin routes authenticate via the superuser JWT in
|
||||
// platform_session, verified against PB (authRefresh) — the cookie value
|
||||
// is a real signed token, so forging it gains nothing.
|
||||
if (event.url.pathname.startsWith('/admin')) {
|
||||
const suToken = event.cookies.get(PLATFORM_SESSION_COOKIE);
|
||||
if (suToken) {
|
||||
try {
|
||||
await createPbClient(suToken).collection('_superusers').authRefresh();
|
||||
event.locals.platformAdmin = true;
|
||||
} catch {
|
||||
// Expired/revoked/forged token — drop it and treat as logged out.
|
||||
clearPlatformSession(event.cookies);
|
||||
}
|
||||
}
|
||||
return resolve(event);
|
||||
}
|
||||
|
||||
// Fam-user session: pb_token JWT → authRefresh → locals.user.
|
||||
const token = event.cookies.get(SESSION_COOKIE);
|
||||
|
||||
if (token) {
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { Button, CardGrid, Card } from '$lib/components';
|
||||
|
||||
interface Tier {
|
||||
id: 'trial' | 'monthly' | 'yearly';
|
||||
name: string;
|
||||
price: string;
|
||||
period: string;
|
||||
desc: string;
|
||||
blurb: string;
|
||||
features: string[];
|
||||
cta: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
@@ -17,16 +17,18 @@
|
||||
id: 'trial',
|
||||
name: 'Trial',
|
||||
price: 'Free',
|
||||
period: 'for a set period',
|
||||
desc: 'Try FamChore free for a period (e.g. 3 months) with a code.',
|
||||
cta: 'Start trial'
|
||||
period: 'for the trial period',
|
||||
blurb: 'Kick the tires on us.',
|
||||
features: ['Full family access', 'No card required', 'Code from us or a partner'],
|
||||
cta: 'Start free trial'
|
||||
},
|
||||
{
|
||||
id: 'monthly',
|
||||
name: 'Monthly',
|
||||
price: '£3',
|
||||
period: '/month',
|
||||
desc: 'Full access for one family. Cancel anytime.',
|
||||
blurb: 'Everything, month to month.',
|
||||
features: ['Unlimited kids & chores', 'Allowances calculated automatically', 'Bonuses & seasons', 'Cancel anytime'],
|
||||
cta: 'Choose monthly',
|
||||
featured: true
|
||||
},
|
||||
@@ -35,7 +37,8 @@
|
||||
name: 'Yearly',
|
||||
price: '£30',
|
||||
period: '/year',
|
||||
desc: 'Two months free vs monthly. Best value for committed families.',
|
||||
blurb: 'Two months free vs monthly.',
|
||||
features: ['Everything in Monthly', 'Two months free', 'Best for committed families'],
|
||||
cta: 'Choose yearly'
|
||||
}
|
||||
];
|
||||
@@ -49,104 +52,157 @@
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<CardGrid>
|
||||
<div class="tiers">
|
||||
{#each tiers.filter((t) => !(hideTrial && t.id === 'trial')) as tier}
|
||||
<Card title={tier.name} accent={tier.featured ? '#6366f1' : undefined} selected={selected === tier.id}>
|
||||
<article
|
||||
class="tier"
|
||||
class:featured={tier.featured}
|
||||
class:picked={selected === tier.id}
|
||||
aria-label="{tier.name} plan"
|
||||
>
|
||||
{#if tier.featured}
|
||||
<span class="pop">Most popular</span>
|
||||
{/if}
|
||||
<h3>{tier.name}</h3>
|
||||
<p class="price">
|
||||
<span class="amount">{tier.price}</span>
|
||||
<span class="period">{tier.period}</span>
|
||||
</p>
|
||||
<p class="hint">{tier.desc}</p>
|
||||
<p class="blurb">{tier.blurb}</p>
|
||||
|
||||
{#if tier.id === 'trial'}
|
||||
<form
|
||||
method="POST"
|
||||
action={action}
|
||||
use:enhance={onsubmit ?? undefined}
|
||||
>
|
||||
<input type="hidden" name="plan" value="trial" />
|
||||
<label class="field-label" for="trial-code">Trial code</label>
|
||||
<input
|
||||
id="trial-code"
|
||||
name="code"
|
||||
placeholder="e.g. FAM3MONTHS"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<Button type="submit" size="md" variant="secondary">Start trial</Button>
|
||||
</form>
|
||||
{:else}
|
||||
<form
|
||||
method="POST"
|
||||
action={action}
|
||||
use:enhance={onsubmit ?? undefined}
|
||||
>
|
||||
<form method="POST" action={action} use:enhance={onsubmit ?? undefined}>
|
||||
<input type="hidden" name="plan" value={tier.id} />
|
||||
<Button type="submit" size="md" variant={tier.featured ? 'primary' : 'secondary'}>
|
||||
{tier.cta}
|
||||
</Button>
|
||||
</form>
|
||||
{#if tier.id === 'trial'}
|
||||
<input name="code" placeholder="Trial code" autocomplete="off" />
|
||||
{/if}
|
||||
<button type="submit" class="cta" class:primary={tier.featured}>{tier.cta}</button>
|
||||
</form>
|
||||
|
||||
<ul>
|
||||
{#each tier.features as f}
|
||||
<li><span class="tick">✓</span>{f}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<p class="error">{error}</p>
|
||||
<p class="form-error">{error}</p>
|
||||
{/if}
|
||||
</Card>
|
||||
{/each}
|
||||
</CardGrid>
|
||||
|
||||
<style>
|
||||
.hint {
|
||||
font-size: 0.85rem;
|
||||
color: #9ca3af;
|
||||
line-height: 1.4;
|
||||
.tiers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
gap: 1.25rem;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.price {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.amount {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
.period {
|
||||
color: #9ca3af;
|
||||
font-size: 0.9rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
form {
|
||||
.tier {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.75rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem 1.4rem 1.4rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.field-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
.tier.featured {
|
||||
border: 2px solid #6366f1;
|
||||
box-shadow: 0 10px 28px rgba(99, 102, 241, 0.18);
|
||||
}
|
||||
.tier.picked {
|
||||
outline: 2px solid #a5b4fc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.pop {
|
||||
position: absolute;
|
||||
top: -0.7rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
color: #fff;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.22rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.price { margin: 0.55rem 0 0.15rem; line-height: 1; }
|
||||
.amount { font-size: 2.4rem; font-weight: 800; color: #111827; }
|
||||
.period { font-size: 0.85rem; color: #9ca3af; margin-left: 0.3rem; }
|
||||
.blurb { margin: 0 0 0.9rem; font-size: 0.85rem; color: #6b7280; }
|
||||
|
||||
form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: auto; }
|
||||
input {
|
||||
padding: 0.55rem 0.75rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
input:focus {
|
||||
outline: 2px solid #6366f1;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
form :global(.btn) {
|
||||
.cta {
|
||||
width: 100%;
|
||||
padding: 0.65rem 1rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid #6366f1;
|
||||
background: #fff;
|
||||
color: #4338ca;
|
||||
transition: background 0.15s ease, transform 0.05s ease;
|
||||
}
|
||||
.error {
|
||||
.cta:hover { background: #eef2ff; }
|
||||
.cta:active { transform: scale(0.98); }
|
||||
.cta.primary {
|
||||
background: linear-gradient(135deg, #4338ca, #6366f1);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
.cta.primary:hover { background: linear-gradient(135deg, #3730a3, #4f46e5); }
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 1.1rem 0 0;
|
||||
padding: 0.9rem 0 0;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
li {
|
||||
font-size: 0.84rem;
|
||||
color: #4b5563;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
.tick { color: #059669; font-weight: 700; flex-shrink: 0; }
|
||||
|
||||
.form-error {
|
||||
grid-column: 1 / -1;
|
||||
color: #dc2626;
|
||||
background: #fef2f2;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
:global(.selected) {
|
||||
border: 2px solid #6366f1;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
@@ -30,3 +30,24 @@ const LEGACY_DEVICE_COOKIE = 'device_token';
|
||||
export function clearLegacyCookies(cookies: Cookies) {
|
||||
cookies.delete(LEGACY_DEVICE_COOKIE, { path: '/' });
|
||||
}
|
||||
|
||||
// ── Platform-admin session (/admin) ──
|
||||
// Holds a REAL PocketBase superuser JWT (minted by _superusers.authWithPassword
|
||||
// at login) — verified per-request in hooks via authRefresh, so forging the
|
||||
// cookie value gains nothing. Separate from the fam-user pb_token.
|
||||
export const PLATFORM_SESSION_COOKIE = 'platform_session';
|
||||
const PLATFORM_MAX_AGE = 60 * 60 * 24; // 24h; PB token expiry is the ceiling
|
||||
|
||||
export function setPlatformSession(cookies: Cookies, token: string) {
|
||||
cookies.set(PLATFORM_SESSION_COOKIE, token, {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: PLATFORM_MAX_AGE,
|
||||
secure: import.meta.env.PROD
|
||||
});
|
||||
}
|
||||
|
||||
export function clearPlatformSession(cookies: Cookies) {
|
||||
cookies.delete(PLATFORM_SESSION_COOKIE, { path: '/' });
|
||||
}
|
||||
@@ -195,7 +195,6 @@ export interface TypingRow {
|
||||
export interface Session {
|
||||
famId: string;
|
||||
userId: string;
|
||||
famSlug: string;
|
||||
memberName?: string;
|
||||
role?: string;
|
||||
}
|
||||
|
||||
@@ -33,6 +33,9 @@
|
||||
<h2>Start your family</h2>
|
||||
<p class="card-sub">Free to get going. Takes about a minute.</p>
|
||||
<a class="submit" href="/signup">Create my family</a>
|
||||
<p class="card-alt">
|
||||
<a href="/pricing">See pricing →</a>
|
||||
</p>
|
||||
<p class="card-alt">
|
||||
Already have a family? <a href="/login">Log in</a>
|
||||
</p>
|
||||
@@ -94,6 +97,7 @@
|
||||
<div class="cta">
|
||||
<p>Ready to make chores painless?</p>
|
||||
<a class="cta-btn" href="/signup">Create your family</a>
|
||||
<p class="card-alt"><a href="/pricing">or see pricing →</a></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -1,39 +1,117 @@
|
||||
import { pbAdmin } from '$lib/server/pocketbase';
|
||||
import { pbAdmin, createPbClient } from '$lib/server/pocketbase';
|
||||
import { redirect, fail } from '@sveltejs/kit';
|
||||
import { PB_EMAIL, PB_PASSWORD } from '$app/env/private';
|
||||
import type { RequestEvent } from '@sveltejs/kit';
|
||||
import { setPlatformSession, clearPlatformSession } from '$lib/server/session';
|
||||
import { getPlatformFlags, setPlatformFlag } from '$lib/server/platform';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ cookies }) => {
|
||||
const session = cookies.get('platform_session');
|
||||
if (!session) {
|
||||
return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0, platformFlags: {} };
|
||||
function requirePlatform(event: RequestEvent) {
|
||||
if (!event.locals.platformAdmin) throw redirect(303, '/admin');
|
||||
}
|
||||
|
||||
// Random human-friendly code value: XXXX-XXXX (unambiguous charset).
|
||||
function genCodeValue(): string {
|
||||
const chars = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
|
||||
const pick = () => chars[Math.floor(Math.random() * chars.length)];
|
||||
return `${Array.from({ length: 4 }, pick).join('')}-${Array.from({ length: 4 }, pick).join('')}`;
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = async (event) => {
|
||||
const { cookies } = event;
|
||||
if (!event.locals.platformAdmin) {
|
||||
return {
|
||||
authenticated: false,
|
||||
fams: [],
|
||||
codes: [],
|
||||
platformFlags: {},
|
||||
totalFams: 0,
|
||||
totalMembers: 0,
|
||||
totalRewards: 0,
|
||||
totalChores: 0,
|
||||
subCount: 0,
|
||||
gatedCount: 0,
|
||||
codeCount: 0,
|
||||
loadError: undefined
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
const [fams, platformFlags] = await Promise.all([pbAdmin.getList('fams'), getPlatformFlags()]);
|
||||
const famsWithStats = await Promise.all(fams.map(async (fam: any) => {
|
||||
const [fams, codes, completions] = await Promise.all([
|
||||
pbAdmin.getList('fams'),
|
||||
pbAdmin.getList('accesscodes'),
|
||||
pbAdmin.getList('completions')
|
||||
]);
|
||||
const famsWithStats = await Promise.all(
|
||||
fams.map(async (fam: any) => {
|
||||
const [members, rewards, parents] = await Promise.all([
|
||||
pbAdmin.getList('users', `famId = '${fam.id}' && role = 'child'`),
|
||||
pbAdmin.getList('rewards', `famId = '${fam.id}'`),
|
||||
pbAdmin.getList('users', `famId = '${fam.id}' && role = 'parent'`),
|
||||
pbAdmin.getList('users', `famId = '${fam.id}' && role = 'parent'`)
|
||||
]);
|
||||
return {
|
||||
id: fam.id, name: fam.name, slug: fam.slug,
|
||||
id: fam.id,
|
||||
name: fam.name,
|
||||
slug: fam.slug,
|
||||
memberCount: members.length,
|
||||
requestedRewards: (rewards as any[]).filter((r: any) => r.status === 'requested').length,
|
||||
totalRewards: rewards.length,
|
||||
parentEmail: (parents as any[])?.[0]?.email || '',
|
||||
paymentMode: fam.paymentMode || 'none',
|
||||
active: fam.active !== false
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Usage map — which fams applied each code.
|
||||
const usage: Record<string, string[]> = {};
|
||||
for (const fam of fams as any[]) {
|
||||
if (fam.paymentMode === 'code' && fam.accessCodeId) {
|
||||
(usage[fam.accessCodeId] ||= []).push(fam.name);
|
||||
}
|
||||
}
|
||||
const codeList = (codes as any[])
|
||||
.sort((a, b) => (b.createdAt || '').localeCompare(a.createdAt || ''))
|
||||
.map((c) => ({
|
||||
id: c.id,
|
||||
value: c.value,
|
||||
name: c.name,
|
||||
duration: Number(c.duration) || 0,
|
||||
expiry: Number(c.expiry) || 0,
|
||||
trialDays: Number(c.trialDays) || 0,
|
||||
active: c.active !== false,
|
||||
usedBy: usage[c.id] || []
|
||||
}));
|
||||
|
||||
const totalFams = fams.length;
|
||||
const totalMembers = famsWithStats.reduce((s: number, f: any) => s + f.memberCount, 0);
|
||||
const totalRewards = famsWithStats.reduce((s: number, f: any) => s + f.totalRewards, 0);
|
||||
|
||||
return { authenticated: true, fams: famsWithStats, totalFams, totalMembers, totalRewards, platformFlags };
|
||||
} catch {
|
||||
return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0, platformFlags: {} };
|
||||
return {
|
||||
authenticated: true,
|
||||
fams: famsWithStats,
|
||||
codes: codeList,
|
||||
totalFams: fams.length,
|
||||
totalMembers: famsWithStats.reduce((s, f) => s + f.memberCount, 0),
|
||||
totalRewards: famsWithStats.reduce((s, f) => s + f.totalRewards, 0),
|
||||
totalChores: completions.length,
|
||||
subCount: famsWithStats.filter((f) => f.paymentMode === 'sub').length,
|
||||
gatedCount: famsWithStats.filter(
|
||||
(f) => !f.active || f.paymentMode === 'none' || f.paymentMode === 'canceled'
|
||||
).length,
|
||||
codeCount: codeList.filter((c) => c.active).length
|
||||
};
|
||||
} catch (e) {
|
||||
// Never swallow silently — a failed load must not masquerade as logged-out.
|
||||
console.error('[admin] load failed:', e);
|
||||
return {
|
||||
authenticated: false,
|
||||
fams: [],
|
||||
codes: [],
|
||||
totalFams: 0,
|
||||
totalMembers: 0,
|
||||
totalRewards: 0,
|
||||
totalChores: 0,
|
||||
subCount: 0,
|
||||
gatedCount: 0,
|
||||
codeCount: 0,
|
||||
loadError: e instanceof Error ? e.message : 'Failed to load platform data'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@@ -43,29 +121,32 @@ export const actions: Actions = {
|
||||
const email = fd.get('email') as string;
|
||||
const password = fd.get('password') as string;
|
||||
|
||||
if (email === PB_EMAIL && password === PB_PASSWORD) {
|
||||
cookies.set('platform_session', 'authenticated', {
|
||||
path: '/',
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
maxAge: 60 * 60 * 24, // 24 hours
|
||||
});
|
||||
return { success: true };
|
||||
}
|
||||
if (!email || !password) return fail(400, { error: 'Email and password required' });
|
||||
|
||||
// Real PB superuser auth — the minted JWT goes in the cookie and is
|
||||
// verified per-request in hooks (authRefresh). Forging the cookie
|
||||
// value gains nothing.
|
||||
try {
|
||||
const auth = await createPbClient()
|
||||
.collection('_superusers')
|
||||
.authWithPassword(email, password);
|
||||
setPlatformSession(cookies, auth.token);
|
||||
} catch {
|
||||
return fail(400, { error: 'Invalid credentials' });
|
||||
}
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
logout: async ({ cookies }) => {
|
||||
cookies.delete('platform_session', { path: '/' });
|
||||
clearPlatformSession(cookies);
|
||||
throw redirect(303, '/admin');
|
||||
},
|
||||
|
||||
// Toggles a platform-level feature flag on the singleton platform record.
|
||||
togglePlatformFlag: async ({ request, cookies }) => {
|
||||
const session = cookies.get('platform_session');
|
||||
if (!session) return fail(401, { error: 'Not authenticated' });
|
||||
togglePlatformFlag: async (event) => {
|
||||
requirePlatform(event);
|
||||
|
||||
const fd = await request.formData();
|
||||
const fd = await event.request.formData();
|
||||
const flag = fd.get('flag') as string;
|
||||
if (!flag) return fail(400, { error: 'Flag required' });
|
||||
|
||||
@@ -77,4 +158,72 @@ export const actions: Actions = {
|
||||
return fail(500, { error: e instanceof Error ? e.message : 'Failed to update' });
|
||||
}
|
||||
},
|
||||
|
||||
// Issue a new access/trial code. Blank value → auto-generated. trialDays > 0
|
||||
// makes it a trial code (maps to Stripe trial_period_days at checkout);
|
||||
// otherwise it's a platform-access code (duration months, 0 = continuous).
|
||||
createCode: async (event) => {
|
||||
requirePlatform(event);
|
||||
|
||||
const fd = await event.request.formData();
|
||||
const name = ((fd.get('name') as string) || '').trim();
|
||||
const value = ((fd.get('value') as string) || '').trim().toUpperCase() || genCodeValue();
|
||||
const duration = Math.max(0, parseInt(fd.get('duration') as string, 10) || 0);
|
||||
const expiry = Math.max(0, parseInt(fd.get('expiry') as string, 10) || 0);
|
||||
const trialDays = Math.max(0, parseInt(fd.get('trialDays') as string, 10) || 0);
|
||||
|
||||
if (!name) return fail(400, { error: 'Name required' });
|
||||
|
||||
try {
|
||||
const existing = await pbAdmin.getList('accesscodes', `value = '${value}'`);
|
||||
if (existing.length) return fail(400, { error: `Code "${value}" already exists` });
|
||||
await pbAdmin.create('accesscodes', {
|
||||
value,
|
||||
name,
|
||||
duration,
|
||||
expiry,
|
||||
trialDays,
|
||||
active: true,
|
||||
createdAt: new Date().toISOString()
|
||||
});
|
||||
return { success: true, createdValue: value };
|
||||
} catch (e) {
|
||||
return fail(500, { error: e instanceof Error ? e.message : 'Failed to create code' });
|
||||
}
|
||||
},
|
||||
|
||||
toggleCode: async (event) => {
|
||||
requirePlatform(event);
|
||||
|
||||
const fd = await event.request.formData();
|
||||
const id = fd.get('id') as string;
|
||||
try {
|
||||
const rec = (await pbAdmin.getOne('accesscodes', id)) as any;
|
||||
await pbAdmin.update('accesscodes', id, { active: rec.active === false });
|
||||
return { success: true };
|
||||
} catch (e) {
|
||||
return fail(500, { error: e instanceof Error ? e.message : 'Failed to update code' });
|
||||
}
|
||||
},
|
||||
|
||||
deleteCode: async (event) => {
|
||||
requirePlatform(event);
|
||||
|
||||
const fd = await event.request.formData();
|
||||
const id = fd.get('id') as string;
|
||||
|
||||
// Guard: a code still applied to a fam must be disabled, not deleted.
|
||||
const inUse = await pbAdmin.getList('fams', `accessCodeId = '${id}'`);
|
||||
if (inUse.length) {
|
||||
return fail(400, {
|
||||
error: `In use by ${inUse.length} fam${inUse.length > 1 ? 's' : ''} — disable it instead.`
|
||||
});
|
||||
}
|
||||
try {
|
||||
await pbAdmin.remove('accesscodes', id);
|
||||
return { success: true };
|
||||
} catch (e) {
|
||||
return fail(500, { error: e instanceof Error ? e.message : 'Failed to delete code' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,12 +1,43 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { goto, invalidateAll } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
let copied = $state('');
|
||||
function copy(v: string) {
|
||||
navigator.clipboard.writeText(v);
|
||||
copied = v;
|
||||
setTimeout(() => (copied = ''), 2000);
|
||||
}
|
||||
|
||||
const modeLabel: Record<string, string> = {
|
||||
sub: 'Sub',
|
||||
code: 'Code',
|
||||
canceled: 'Canceled',
|
||||
none: 'None'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="shell">
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span class="brand-icon">🏠</span> <strong>FamChore</strong></a>
|
||||
<nav>
|
||||
{#if data.authenticated}
|
||||
<form method="POST" action="?/logout" use:enhance>
|
||||
<button type="submit" class="nav-link link-btn-nav">Sign Out</button>
|
||||
</form>
|
||||
{:else}
|
||||
<a href="/" class="nav-link">Back to site</a>
|
||||
{/if}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{#if !data.authenticated}
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>Platform Admin</h1>
|
||||
<p class="subtitle">Sign in to access the admin dashboard</p>
|
||||
@@ -14,8 +45,27 @@
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
{/if}
|
||||
{#if data.loadError}
|
||||
<p class="error">Data load failed: {data.loadError}</p>
|
||||
{/if}
|
||||
|
||||
<form method="POST" action="?/login" use:enhance>
|
||||
<!-- Native document POST (no JS enhancement): 303 → full page load.
|
||||
Browsers reliably store Set-Cookie from navigations, which sidesteps
|
||||
fetch/HMR cookie weirdness entirely. -->
|
||||
<form
|
||||
method="POST"
|
||||
action="?/login"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
// Handles both action shapes: current code throws a redirect;
|
||||
// stale modules may return { success }. Either way, force the
|
||||
// load to re-run with the freshly-set cookie.
|
||||
if (result.type === 'success') {
|
||||
await goto('/admin', { invalidateAll: true });
|
||||
}
|
||||
};
|
||||
}}
|
||||
>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
@@ -27,12 +77,11 @@
|
||||
<Button type="submit" variant="primary" size="lg">Sign In</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<ViewHeader title="Platform Admin" subtitle="Manage families and platform settings" hero />
|
||||
<ViewHeader title="Platform Admin" subtitle="Families, access codes and platform settings" hero />
|
||||
|
||||
<CardGrid>
|
||||
<Card cols={1} title="Overview" accent="#6366f1">
|
||||
<Card cols={2} title="Overview" accent="#6366f1">
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.totalFams}</span>
|
||||
@@ -43,8 +92,20 @@
|
||||
<span class="stat-label">Members</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.totalRewards}</span>
|
||||
<span class="stat-label">Rewards</span>
|
||||
<span class="stat-value">{data.totalChores}</span>
|
||||
<span class="stat-label">Chores completed</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.subCount}</span>
|
||||
<span class="stat-label">Active subs</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.gatedCount}</span>
|
||||
<span class="stat-label">Paused / gated</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-value">{data.codeCount}</span>
|
||||
<span class="stat-label">Active codes</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -55,44 +116,141 @@
|
||||
<span class="flag-name">debug</span>
|
||||
<form method="POST" action="?/togglePlatformFlag" use:enhance>
|
||||
<input type="hidden" name="flag" value="debug" />
|
||||
<button type="submit" class="toggle-btn" class:active={data.platformFlags?.debug}>
|
||||
{data.platformFlags?.debug ? 'ON' : 'OFF'}
|
||||
<button type="submit" class="toggle-btn" class:active={page.data.platformFlags?.debug}>
|
||||
{page.data.platformFlags?.debug ? 'ON' : 'OFF'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<Card cols={2} title="Families" accent="#059669">
|
||||
<CardGrid>
|
||||
<Card cols={3} title="Access Codes" accent="#059669">
|
||||
{#if form?.error}
|
||||
<p class="error">{form.error}</p>
|
||||
{/if}
|
||||
|
||||
<!-- Issue a code -->
|
||||
<form method="POST" action="?/createCode" use:enhance class="code-form">
|
||||
<div class="code-fields">
|
||||
<label>Name <input name="name" placeholder="e.g. Launch promo" required /></label>
|
||||
<label>Value <input name="value" placeholder="Blank = auto" class="mono" /></label>
|
||||
<label>Duration (mo) <input name="duration" type="number" min="0" value="0" /></label>
|
||||
<label>Expiry (mo) <input name="expiry" type="number" min="0" value="0" /></label>
|
||||
<label>Trial days <input name="trialDays" type="number" min="0" value="0" /></label>
|
||||
</div>
|
||||
<div class="code-form-foot">
|
||||
<span class="hint">
|
||||
Duration 0 = continuous. Trial days > 0 makes it a Stripe trial code instead of
|
||||
platform access.
|
||||
</span>
|
||||
<Button type="submit" variant="primary" size="sm">Issue code</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="fam-table code-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Used by</th>
|
||||
<th class="th-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.codes as c}
|
||||
<tr class:inactive={!c.active}>
|
||||
<td data-label="Code">
|
||||
<button class="code-value" onclick={() => copy(c.value)} title="Copy"
|
||||
>{c.value}</button
|
||||
>
|
||||
{#if copied === c.value}<span class="copied">copied!</span>{/if}
|
||||
</td>
|
||||
<td data-label="Name">{c.name}</td>
|
||||
<td data-label="Type">
|
||||
{#if c.trialDays}
|
||||
<span class="badge trial">{c.trialDays}-day trial</span>
|
||||
{:else if c.duration}
|
||||
<span class="badge dur">{c.duration} mo</span>
|
||||
{:else}
|
||||
<span class="badge cont">continuous</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td data-label="Status">
|
||||
<span class="badge {c.active ? 'on' : 'off'}"
|
||||
>{c.active ? 'active' : 'disabled'}</span
|
||||
>
|
||||
</td>
|
||||
<td data-label="Used by">
|
||||
{#if c.usedBy.length}
|
||||
<span class="used-by" title={c.usedBy.join(', ')}
|
||||
>{c.usedBy.length} fam{c.usedBy.length > 1 ? 's' : ''}</span
|
||||
>
|
||||
{:else}
|
||||
<span class="muted">—</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="row-actions" data-label="Actions">
|
||||
<form method="POST" action="?/toggleCode" use:enhance>
|
||||
<input type="hidden" name="id" value={c.id} />
|
||||
<button type="submit" class="link-btn">{c.active ? 'Disable' : 'Enable'}</button>
|
||||
</form>
|
||||
{#if !c.usedBy.length}
|
||||
<form method="POST" action="?/deleteCode" use:enhance>
|
||||
<input type="hidden" name="id" value={c.id} />
|
||||
<button type="submit" class="link-btn danger">Delete</button>
|
||||
</form>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr><td colspan="6" class="muted">No codes yet — issue one above.</td></tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<CardGrid>
|
||||
<Card cols={3} title="Families" accent="#6366f1">
|
||||
<div class="table-wrap">
|
||||
<table class="fam-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parent</th>
|
||||
<th>Members</th>
|
||||
<th>Plan</th>
|
||||
<th>Claims</th>
|
||||
<th>Actions</th>
|
||||
<th class="th-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.fams as fam}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="/{fam.slug}">{fam.name}</a>
|
||||
<td data-label="Name">
|
||||
<a href="/{fam.slug}" class="fam-link">{fam.name}</a>
|
||||
<span class="slug">/{fam.slug}</span>
|
||||
</td>
|
||||
<td>{fam.parentEmail || '—'}</td>
|
||||
<td>{fam.memberCount}</td>
|
||||
<td>
|
||||
<td data-label="Parent">{fam.parentEmail || '—'}</td>
|
||||
<td data-label="Members">{fam.memberCount}</td>
|
||||
<td data-label="Plan">
|
||||
<span class="badge {fam.paymentMode === 'sub' ? 'on' : fam.active ? 'dur' : 'off'}">
|
||||
{modeLabel[fam.paymentMode] || fam.paymentMode}{fam.active ? '' : ' · paused'}
|
||||
</span>
|
||||
</td>
|
||||
<td data-label="Claims">
|
||||
{#if fam.requestedRewards > 0}
|
||||
<span class="badge pending">{fam.requestedRewards} pending</span>
|
||||
{:else}
|
||||
<span class="badge none">None</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<a href="/{fam.slug}" class="link">Dashboard</a>
|
||||
<a href="/{fam.slug}" class="link">View</a>
|
||||
</td>
|
||||
<td class="row-actions" data-label="Actions"><a href="/{fam.slug}" class="link">View →</a></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
@@ -100,103 +258,332 @@
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<form method="POST" action="?/logout" class="logout-form">
|
||||
<Button type="submit" variant="ghost" size="sm">Sign Out</Button>
|
||||
</form>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
background: #f3f4f6;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background:
|
||||
radial-gradient(60rem 30rem at 50% -10rem, #eef2ff 0%, transparent 65%),
|
||||
#fafafa;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.8rem 2rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 1.05rem;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar nav { display: flex; align-items: center; gap: 1rem; }
|
||||
.nav-link {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
text-decoration: none;
|
||||
}
|
||||
.link-btn-nav {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.link-btn-nav:hover { color: #111827; }
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem 2rem;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
main :global(.card-grid),
|
||||
main :global(.hero) { width: 100%; }
|
||||
.head { text-align: center; }
|
||||
.head h1 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: clamp(1.5rem, 3vw, 2rem);
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.head p {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
.login-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 380px;
|
||||
text-align: center;
|
||||
}
|
||||
.login-card h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
.subtitle {
|
||||
color: #6b7280;
|
||||
font-size: 0.85rem;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
color: #374151;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
padding: 0.55rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.error {
|
||||
color: #dc2626;
|
||||
background: #fef2f2;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.stat {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0.5rem;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
}
|
||||
.stat:nth-child(2) {
|
||||
background: linear-gradient(135deg, #059669, #10b981);
|
||||
}
|
||||
.stat:nth-child(3) {
|
||||
background: linear-gradient(135deg, #d97706, #f59e0b);
|
||||
}
|
||||
.stat:nth-child(4) {
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
}
|
||||
.stat:nth-child(5) {
|
||||
background: linear-gradient(135deg, #dc2626, #ef4444);
|
||||
}
|
||||
.stat:nth-child(6) {
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
}
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.72rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
.muted {
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Codes */
|
||||
.code-form {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
.code-fields {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.code-fields label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
}
|
||||
.code-fields input {
|
||||
padding: 0.45rem 0.6rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
}
|
||||
.mono {
|
||||
font-family: ui-monospace, monospace;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.code-form-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* ── Tables: clean rows, hover, responsive stack ── */
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #eef0f3;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
.fam-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.fam-table th, .fam-table td {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
.fam-table thead th {
|
||||
text-align: left;
|
||||
}
|
||||
.fam-table th {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #9ca3af;
|
||||
padding: 0.7rem 1rem;
|
||||
border-bottom: 1px solid #f0f1f4;
|
||||
background: #fafbfc;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.fam-table tbody td {
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #f6f7f8;
|
||||
vertical-align: middle;
|
||||
color: #374151;
|
||||
}
|
||||
.slug {
|
||||
color: #9ca3af;
|
||||
font-size: 0.8rem;
|
||||
margin-left: 0.25rem;
|
||||
.fam-table tbody tr:last-child td { border-bottom: none; }
|
||||
.fam-table tbody tr { transition: background 0.12s ease; }
|
||||
.fam-table tbody tr:hover { background: #f8faff; }
|
||||
.th-actions { text-align: right; }
|
||||
|
||||
.code-value {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
background: #eef2ff;
|
||||
border: 1px dashed #a5b4fc;
|
||||
border-radius: 6px;
|
||||
padding: 0.15rem 0.45rem;
|
||||
cursor: copy;
|
||||
}
|
||||
.copied {
|
||||
font-size: 0.7rem;
|
||||
color: #059669;
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
tr.inactive td {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.72rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge.pending { background: #fef3c7; color: #92400e; }
|
||||
.badge.none { background: #f3f4f6; color: #6b7280; }
|
||||
.badge.on {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
.badge.off {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
.badge.trial {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.badge.dur {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
.badge.cont {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
.badge.pending {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.badge.none {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
.row-actions form {
|
||||
margin: 0;
|
||||
}
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
color: #4338ca;
|
||||
cursor: pointer;
|
||||
}
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-btn.danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
.used-by {
|
||||
font-size: 0.8rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.flag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
.flag-name {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: #e5e7eb;
|
||||
border: none;
|
||||
@@ -210,28 +597,76 @@
|
||||
background: #059669;
|
||||
color: white;
|
||||
}
|
||||
.flag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
.flag-name {
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #374151;
|
||||
|
||||
.fam-link {
|
||||
color: #111827;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.fam-link:hover { color: #4338ca; }
|
||||
.link {
|
||||
color: #2563eb;
|
||||
color: #4338ca;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
margin-right: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.link:hover { text-decoration: underline; }
|
||||
.logout-form {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.slug {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.code-fields {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Responsive: stack rows into cards with labels ── */
|
||||
@media (max-width: 720px) {
|
||||
.table-wrap { border: none; overflow: visible; background: transparent; }
|
||||
.fam-table,
|
||||
.fam-table tbody,
|
||||
.fam-table tr,
|
||||
.fam-table td {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.fam-table thead { display: none; }
|
||||
.fam-table tbody tr {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.35rem 0.25rem;
|
||||
}
|
||||
.fam-table tbody td {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px dashed #f0f1f4;
|
||||
text-align: right;
|
||||
}
|
||||
.fam-table tbody td::before {
|
||||
content: attr(data-label);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #9ca3af;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.fam-table tbody td:empty { display: none; }
|
||||
.row-actions {
|
||||
justify-content: flex-end !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
import { enhance } from '$app/forms';
|
||||
import { PUBLIC_STRIPE_PUBLISHABLE_KEY } from '$app/env/public';
|
||||
import { loadStripe, type StripeEmbeddedCheckout } from '@stripe/stripe-js';
|
||||
import { ViewHeader, CardGrid, Card, Button, PricingPlans } from '$lib/components';
|
||||
import { Button, PricingPlans } from '$lib/components';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
|
||||
let { data, form } = $props();
|
||||
|
||||
@@ -45,55 +46,149 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<ViewHeader title="Pricing" subtitle="Choose a plan for your family" hero />
|
||||
<svelte:head><title>Pricing — FamChore</title></svelte:head>
|
||||
|
||||
<div class="shell">
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span class="brand-icon">🏠</span> <strong>FamChore</strong></a>
|
||||
<nav>
|
||||
<a href="/login" class="nav-link">Log in</a>
|
||||
<a href="/signup" class="nav-cta">Get started</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
{#if !showCheckout}
|
||||
<PricingPlans
|
||||
action="?/choose"
|
||||
selected=""
|
||||
error={form?.error}
|
||||
onsubmit={handleChoose}
|
||||
/>
|
||||
<div class="head">
|
||||
<h1>Simple pricing for every family</h1>
|
||||
<p>One price, the whole family. Start free — upgrade whenever you're ready.</p>
|
||||
</div>
|
||||
<PricingPlans action="?/choose" selected="" error={form?.error} onsubmit={handleChoose} />
|
||||
{:else}
|
||||
<CardGrid>
|
||||
<Card title={`Checkout — ${checkoutTitle}`} accent="#059669">
|
||||
<div class="checkout-actions">
|
||||
<div class="checkout-wrap">
|
||||
<div class="checkout-card">
|
||||
<div class="checkout-head">
|
||||
<h2>Checkout — {checkoutTitle}</h2>
|
||||
<Button variant="ghost" size="sm" onclick={resetCheckout}>← Back to plans</Button>
|
||||
</div>
|
||||
<div bind:this={checkoutEl} class="checkout-host"></div>
|
||||
<p class="hint" style="margin-top: 1rem;">
|
||||
<p class="hint">
|
||||
You can close and go to your dashboard any time — access unlocks once payment completes.
|
||||
</p>
|
||||
<a href={data.famSlug ? `/${data.famSlug}` : '/'} class="btn-primary" style="margin-top: 1rem; display: inline-block;">Go to dashboard</a>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
<a href={data.famSlug ? `/${data.famSlug}` : '/'} class="dash-link">Go to dashboard →</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hint {
|
||||
font-size: 0.85rem;
|
||||
color: #9ca3af;
|
||||
line-height: 1.4;
|
||||
/* Full-height shell: topbar / centered content / footer — no scroll on desktop. */
|
||||
.shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
background:
|
||||
radial-gradient(60rem 30rem at 50% -10rem, #eef2ff 0%, transparent 65%),
|
||||
#fafafa;
|
||||
}
|
||||
.checkout-actions {
|
||||
margin-bottom: 0.75rem;
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.8rem 2rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.checkout-host {
|
||||
min-height: 480px;
|
||||
}
|
||||
.checkout-host :global(iframe) {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background: #4338ca;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 1.05rem;
|
||||
color: #111827;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-primary:hover { background: #3730a3; }
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.topbar nav { display: flex; align-items: center; gap: 1rem; }
|
||||
.nav-link {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-link:hover { color: #111827; }
|
||||
.nav-cta {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: linear-gradient(135deg, #4338ca, #6366f1);
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: 999px;
|
||||
}
|
||||
.nav-cta:hover { background: linear-gradient(135deg, #3730a3, #4f46e5); }
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.75rem;
|
||||
padding: 1.5rem 2rem;
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.head { text-align: center; }
|
||||
.head h1 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-size: clamp(1.5rem, 3vw, 2.1rem);
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.head p {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.checkout-wrap { width: 100%; max-width: 720px; }
|
||||
.checkout-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 16px;
|
||||
padding: 1.25rem 1.5rem 1.5rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.checkout-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.checkout-head h2 { margin: 0; font-size: 1.05rem; color: #111827; }
|
||||
.checkout-host { min-height: 420px; }
|
||||
.checkout-host :global(iframe) { width: 100%; }
|
||||
.hint { font-size: 0.82rem; color: #9ca3af; margin: 0.75rem 0 0; }
|
||||
.dash-link {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
color: #4338ca;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.dash-link:hover { text-decoration: underline; }
|
||||
|
||||
@media (max-height: 760px) {
|
||||
main { gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
|
||||
.head h1 { font-size: 1.35rem; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user