falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: admin page with dynamic converter loading

Browse Source 
Implements full admin interface for managing units and groups.
Migrates converter from static imports to server-side data loading.

- Switch adapter-static → adapter-node
- Add bcryptjs session auth with HMAC-signed cookies
- Add data/units.json and data/config.json data layer
- Add atomic file writes via temp-file rename
- Add public GET /api/units endpoint
- Add auth-gated admin CRUD API for units and groups
- Add two-panel admin UI with group tree and edit forms
- Add YOLO mode toggle for cross-group conversions
- Add visual group dividers in converter results grid
- Update ResultItem type for nullable convertedValue and isYolo flag
- Group deletion supports reassign/orphan with toBase recalculation

Rollback point: 067fd44

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Falkan
2026-03-17 13:55:11 -04:00
parent 067fd445ef
commit d1f51c141e
27 changed files with 1915 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/ConversionResult.svelte
View File

@@ -5,7 +5,9 @@
/**
* ConversionResult — displays one conversion result tile.
* Emits onclick (highlight) and onshiftclick (make input unit) events.
* Emits onclick (highlight), onshiftclick (make input unit),
* and onctrlclick (adopt value) events.
* Handles nullable value for cross-group N/A state.
*/
let {
@@ -13,29 +15,27 @@
unit,
highlighted,
isInputUnit = false,
isYolo = false,
onclick,
onshiftclick,
onctrlclick
}: {
value: Big;
value: Big | null;
unit: Unit;
highlighted: boolean;
isInputUnit?: boolean;
isYolo?: boolean;
onclick: () => void;
onshiftclick: () => void;
onctrlclick: () => void;
} = $props();
// Compute once per reactive update; shared between aria-label and display span.
let formattedValue = $derived(formatBig(value));
let formattedValue = $derived(value !== null ? formatBig(value) : null);
function handleClick(e: MouseEvent) {
if (e.ctrlKey) {
// Ctrl+click adopts this tile's value as the new input value and promotes it to from-unit.
onctrlclick();
if (value !== null) onctrlclick();
} else if (e.shiftKey) {
// Shift+click promotes this tile to the from-unit (inputValue unchanged).
// Guard: if it already IS the from-unit, the action would be a no-op.
if (!isInputUnit) onshiftclick();
} else {
onclick();
@@ -49,13 +49,39 @@
class="result-tile"
class:highlighted
class:is-input-unit={isInputUnit}
class:is-na={value === null}
class:is-yolo={isYolo}
onclick={handleClick}
role="button"
tabindex="0"
onkeydown={(e) => { if (e.key === 'Enter') onclick(); }}
aria-label="{formattedValue} {unit.labelPlural}"
aria-label={value !== null ? `${formattedValue} ${unit.labelPlural}` : `N/A ${unit.labelPlural}`}
aria-pressed={highlighted}
>
<span class="result-value">{formattedValue}</span>
{#if value === null}
<span class="result-value result-na">N/A</span>
{:else}
<span class="result-value">
{#if isYolo}<span class="yolo-tilde">~</span>{/if}{formattedValue}
</span>
{/if}
<span class="result-label">{unit.labelPlural} ({unit.symbol})</span>
</div>
<style>
.is-na {
opacity: 0.5;
cursor: default;
}
.result-na {
color: var(--pico-muted-color);
font-style: italic;
}
.yolo-tilde {
color: var(--pico-muted-color);
font-weight: 400;
margin-right: 1px;
}
</style>

59
src/components/ConverterCard.svelte
View File

@@ -1,22 +1,19 @@
<script lang="ts">
import type { Unit, ResultItem } from '$lib/types';
import type { Unit, Group, ResultItem } from '$lib/types';
import type { Big } from 'big.js';
import { MIN_COLUMN_WIDTH, GRID_GAP } from '$lib/config';
import UnitInput from './UnitInput.svelte';
import UnitDropdown from './UnitDropdown.svelte';
import ConversionResult from './ConversionResult.svelte';
/**
* ConverterCard — groups UnitInput + UnitDropdown + results grid + hotkey hint.
* Emits events upward; does NOT contain NL input (Phase 3).
*/
let {
units,
groups,
inputValue,
fromUnitId,
highlightedUnitId,
results,
orderedResults,
oninputchange,
onunitchange,
onhighlight,
@@ -24,10 +21,12 @@
onctrlclick
}: {
units: Unit[];
groups: Group[];
inputValue: number;
fromUnitId: string;
highlightedUnitId: string | null;
results: ResultItem[];
orderedResults: { groupLabel: string | null; items: ResultItem[] }[];
oninputchange: (v: number) => void;
onunitchange: (id: string) => void;
onhighlight: (id: string) => void;
@@ -44,21 +43,43 @@
<UnitDropdown {units} value={fromUnitId} onchange={onunitchange} />
</div>
<div class="results-grid" style={gridStyle}>
{#each results as item (item.unit.id)}
<ConversionResult
value={item.convertedValue}
unit={item.unit}
highlighted={item.unit.id === highlightedUnitId}
isInputUnit={item.unit.id === fromUnitId}
onclick={() => onhighlight(item.unit.id)}
onshiftclick={() => onsetinput(item.unit.id)}
onctrlclick={() => onctrlclick(item.unit.id, item.convertedValue)}
/>
{/each}
</div>
{#each orderedResults as section}
{#if orderedResults.length > 1 && section.groupLabel}
<div class="group-divider">{section.groupLabel}</div>
{/if}
<div class="results-grid" style={gridStyle}>
{#each section.items as item (item.unit.id)}
<ConversionResult
value={item.convertedValue}
isYolo={item.isYolo}
unit={item.unit}
highlighted={item.unit.id === highlightedUnitId}
isInputUnit={item.unit.id === fromUnitId}
onclick={() => onhighlight(item.unit.id)}
onshiftclick={() => onsetinput(item.unit.id)}
onctrlclick={() => {
if (item.convertedValue !== null) onctrlclick(item.unit.id, item.convertedValue);
}}
/>
{/each}
</div>
{/each}
<p class="hotkey-hint">
<small>Click to highlight · Shift+click to change input unit · Ctrl+click to adopt value as input</small>
</p>
</article>
<style>
.group-divider {
font-size: 0.8rem;
font-weight: 600;
color: var(--pico-muted-color);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--pico-muted-border-color);
}
</style>

29
src/lib/convert.ts
View File

@@ -1,10 +1,11 @@
import { Big } from 'big.js';
import type { Unit } from './types';
import type { Unit, Group } from './types';
/**
* Convert a value from one unit to another using canonical base-unit factors.
* Uses big.js for all arithmetic to avoid floating-point precision loss.
* Pure function — no side effects, no imports of the unit registry.
* Only valid for units in the same group.
*/
export function convert(value: Big, from: Unit, to: Unit): Big {
if (from.id === to.id) return value;
@@ -29,3 +30,29 @@ export function convertById(
if (!to) throw new Error(`Unknown unit id: ${toId}`);
return convert(Big(value), from, to);
}
/**
* Returns true if from and to are in the same group (both non-null and equal).
*/
export function canConvert(from: Unit, to: Unit): boolean {
return from.group !== null && from.group === to.group;
}
/**
* Cross-group "YOLO" conversion using toUniversal scale factors.
* Path: value * from.toBase * fromGroup.toUniversal / toGroup.toUniversal / to.toBase
*/
export function convertYolo(value: Big, from: Unit, to: Unit, groups: Group[]): Big {
if (from.id === to.id) return value;
const fromGroup = groups.find((g) => g.id === from.group);
const toGroup = groups.find((g) => g.id === to.group);
if (!fromGroup || !toGroup) {
// No group info — fall back to raw toBase ratio
return value.times(from.toBase).div(to.toBase);
}
return value
.times(from.toBase)
.times(fromGroup.toUniversal)
.div(toGroup.toUniversal)
.div(to.toBase);
}

63
src/lib/server/auth.ts Normal file
View File

@@ -0,0 +1,63 @@
import bcrypt from 'bcryptjs';
import { createHmac, timingSafeEqual } from 'crypto';
import { parse } from 'cookie';
import type { AppConfig } from './data';
const BCRYPT_COST = 12;
export async function hashPassword(plain: string): Promise<string> {
return bcrypt.hash(plain, BCRYPT_COST);
}
export async function verifyPassword(plain: string, hash: string): Promise<boolean> {
if (!hash) return false;
return bcrypt.compare(plain, hash);
}
/**
* Creates an HMAC-signed session token.
* Format: `timestamp.hmac`
*/
export function createSession(secret: string): string {
const timestamp = Date.now().toString();
const hmac = createHmac('sha256', secret).update(timestamp).digest('hex');
return `${timestamp}.${hmac}`;
}
/**
* Verifies an HMAC-signed session token.
* Returns false if format is wrong, HMAC doesn't match, or token is >7 days old.
*/
export function verifySession(token: string, secret: string): boolean {
const parts = token.split('.');
if (parts.length !== 2) return false;
const [timestamp, providedHmac] = parts;
// Check age (7 days)
const ts = parseInt(timestamp, 10);
if (isNaN(ts)) return false;
if (Date.now() - ts > 7 * 24 * 60 * 60 * 1000) return false;
// Verify HMAC using timing-safe comparison
const expectedHmac = createHmac('sha256', secret).update(timestamp).digest('hex');
try {
const a = Buffer.from(providedHmac, 'hex');
const b = Buffer.from(expectedHmac, 'hex');
if (a.length !== b.length) return false;
return timingSafeEqual(a, b);
} catch {
return false;
}
}
/**
* Checks the hu_session cookie in the request.
* Returns true if a valid session is present.
*/
export function requireAuth(request: Request, config: AppConfig): boolean {
const cookieHeader = request.headers.get('cookie') ?? '';
const cookies = parse(cookieHeader);
const token = cookies['hu_session'];
if (!token) return false;
return verifySession(token, config.sessionSecret);
}

40
src/lib/server/data.ts Normal file
View File

@@ -0,0 +1,40 @@
import { readFileSync, writeFileSync, renameSync } from 'fs';
import { resolve } from 'path';
import type { UnitsData } from '$lib/types';
// Path is relative to project root (where the server runs from)
const DATA_DIR = resolve('data');
const UNITS_PATH = resolve(DATA_DIR, 'units.json');
const CONFIG_PATH = resolve(DATA_DIR, 'config.json');
export interface AppConfig {
adminPath: string;
passwordHash: string;
sessionSecret: string;
}
/** Read units.json synchronously. Returns parsed UnitsData. */
export function loadData(): UnitsData {
const raw = readFileSync(UNITS_PATH, 'utf8');
return JSON.parse(raw) as UnitsData;
}
/** Write full UnitsData atomically (write to temp, rename). */
export function saveData(data: UnitsData): void {
const tmp = UNITS_PATH + '.tmp';
writeFileSync(tmp, JSON.stringify(data, null, 2) + '\n', 'utf8');
renameSync(tmp, UNITS_PATH);
}
/** Read config.json synchronously. */
export function loadConfig(): AppConfig {
const raw = readFileSync(CONFIG_PATH, 'utf8');
return JSON.parse(raw) as AppConfig;
}
/** Write config.json atomically. */
export function saveConfig(config: AppConfig): void {
const tmp = CONFIG_PATH + '.tmp';
writeFileSync(tmp, JSON.stringify(config, null, 2) + '\n', 'utf8');
renameSync(tmp, CONFIG_PATH);
}

26
src/lib/types.ts
View File

@@ -22,19 +22,31 @@ export interface Unit {
*/
toBase: number;
/** Optional grouping tag for multi-group converters. */
group?: string;
/** Group this unit belongs to, or null if orphaned. */
group: string | null;
}
/** A named collection of units sharing a base unit. */
export interface UnitGroup {
/** A group of units sharing a base unit and a universal scale factor. */
export interface Group {
id: string;
label: string;
units: Unit[];
/** ID of the unit that serves as the base (toBase = 1.0) for this group. */
baseUnitId: string;
/** Relative scale for cross-group YOLO conversions. */
toUniversal: number;
}
/** One computed conversion result — unit plus its converted Big value. */
/** Full data payload for units and groups. */
export interface UnitsData {
units: Unit[];
groups: Group[];
}
/** One computed conversion result — unit plus its converted value. */
export interface ResultItem {
unit: Unit;
convertedValue: import('big.js').Big;
/** Converted value, or null if N/A (cross-group with YOLO off). */
convertedValue: import('big.js').Big | null;
/** True if this result used cross-group YOLO conversion. */
isYolo: boolean;
}

2
src/routes/+layout.ts
View File

@@ -1 +1 @@
export const prerender = true;
// No prerender — adapter-node handles SSR dynamically

10
src/routes/+page.server.ts Normal file
View File

@@ -0,0 +1,10 @@
import { loadData } from '$lib/server/data';
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = () => {
const data = loadData();
return {
units: data.units,
groups: data.groups
};
};

149
src/routes/+page.svelte
View File

@@ -2,26 +2,47 @@
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { page } from '$app/state';
import { florpUnits } from '$lib/units/definitions';
import { convertById } from '$lib/convert';
import { convert, convertYolo, canConvert } from '$lib/convert';
import { FRACTIONAL_DIGITS } from '$lib/config';
import { formatBig } from '$lib/format';
import Big from 'big.js';
import type { Unit, ResultItem } from '$lib/types';
import type { Unit, Group, ResultItem } from '$lib/types';
import ConverterCard from '../components/ConverterCard.svelte';
/**
* Converter page — owns all reactive state.
* Phase 2: live conversion, URL state, highlight interaction.
* Phase 3 will add NL input.
* Converter page — loads units dynamically from server props.
* Supports same-group and cross-group (YOLO) conversions.
*/
const units: Unit[] = florpUnits;
let { data }: { data: { units: Unit[]; groups: Group[] } } = $props();
let units: Unit[] = $derived(data.units);
let groups: Group[] = $derived(data.groups);
// ── Reactive state ──────────────────────────────────────────────────────────
let inputValue = $state<number>(1);
let fromUnitId = $state<string>(units[0].id);
let fromUnitId = $state<string>('');
let highlightedUnitId = $state<string | null>(null);
let yoloMode = $state<boolean>(false);
// Initialize fromUnitId to first unit once data arrives
$effect(() => {
if (fromUnitId === '' && units.length > 0) {
fromUnitId = units[0].id;
}
});
// ── Load YOLO preference from localStorage ──────────────────────────────────
$effect(() => {
if (!browser) return;
const stored = localStorage.getItem('yolo-mode');
if (stored === 'true') yoloMode = true;
});
$effect(() => {
if (!browser) return;
localStorage.setItem('yolo-mode', String(yoloMode));
});
// ── Initialize from URL params on first client-side load ───────────────────
if (browser) {
@@ -34,35 +55,52 @@
const n = parseFloat(pValue);
if (!isNaN(n)) inputValue = n;
}
if (pFrom !== null && units.some((u) => u.id === pFrom)) {
if (pFrom !== null && data.units.some((u) => u.id === pFrom)) {
fromUnitId = pFrom;
}
if (pHighlight !== null && units.some((u) => u.id === pHighlight)) {
if (pHighlight !== null && data.units.some((u) => u.id === pHighlight)) {
highlightedUnitId = pHighlight;
}
}
// ── Derived: results for ALL units in definition order ─────────────────────
// convert.ts already handles the same-unit identity (from.id === to.id → return value),
// so no special-casing needed here for the from-unit.
let results = $derived<ResultItem[]>(
units.map((u) => ({
unit: u,
convertedValue: convertById(inputValue, fromUnitId, u.id, units)
}))
// ── Derived: results for ALL units ─────────────────────────────────────────
let fromUnit = $derived(units.find((u) => u.id === fromUnitId) ?? units[0]);
let results: ResultItem[] = $derived(
fromUnit
? units.map((u) => {
const sameGroup = canConvert(fromUnit, u);
if (sameGroup) {
return {
unit: u,
convertedValue: convert(Big(inputValue), fromUnit, u),
isYolo: false
};
} else if (yoloMode) {
return {
unit: u,
convertedValue: convertYolo(Big(inputValue), fromUnit, u, groups),
isYolo: true
};
} else {
return {
unit: u,
convertedValue: null,
isYolo: false
};
}
})
: []
);
// ── Derived: highlighted result (unit + value) sourced from full results ────
// Results now includes all units, so from-unit can be highlighted too.
// ── Derived: highlighted result ─────────────────────────────────────────────
let highlightedResult = $derived(
highlightedUnitId !== null
? (results.find((r) => r.unit.id === highlightedUnitId) ?? null)
: null
);
let fromUnit = $derived(units.find(u => u.id === fromUnitId) ?? units[0]);
// ── URL sync: update URL only when serialized params actually change ────────
// ── URL sync ────────────────────────────────────────────────────────────────
$effect(() => {
if (!browser) return;
const params = new URLSearchParams();
@@ -80,7 +118,6 @@
// ── Event handlers ──────────────────────────────────────────────────────────
function handleUnitChange(id: string) {
fromUnitId = id;
// Clear highlight if the selected unit becomes the new from-unit.
if (highlightedUnitId === id) {
highlightedUnitId = null;
}
@@ -91,18 +128,29 @@
}
function handleSetInput(id: string) {
// Shift+click: promote result unit to from-unit.
// inputValue is NOT changed — outputs recalculate from the same inputValue with the new fromUnitId.
// highlightedUnitId is NOT cleared — the two states are independent.
fromUnitId = id;
}
function handleCtrlClick(id: string, convertedValue: Big) {
// Ctrl+click: adopt this tile's displayed value as the new inputValue and promote it to from-unit.
// This is the "pivot" gesture.
inputValue = parseFloat(convertedValue.toFixed(FRACTIONAL_DIGITS));
fromUnitId = id;
}
// ── Group units for display ─────────────────────────────────────────────────
let orderedResults: { groupLabel: string | null; items: ResultItem[] }[] = $derived.by(() => {
const sections: { groupLabel: string | null; items: ResultItem[] }[] = [];
for (const group of groups) {
const items = results.filter((r) => r.unit.group === group.id);
if (items.length > 0) {
sections.push({ groupLabel: group.label, items });
}
}
const orphaned = results.filter((r) => r.unit.group === null);
if (orphaned.length > 0) {
sections.push({ groupLabel: 'Ungrouped', items: orphaned });
}
return sections;
});
</script>
<svelte:head>
@@ -110,27 +158,64 @@
</svelte:head>
<div class="highlighted-result" class:has-highlight={highlightedResult !== null} aria-live="polite">
{#if highlightedResult !== null}
{#if highlightedResult !== null && highlightedResult.convertedValue !== null}
<button class="highlight-dismiss" onclick={() => (highlightedUnitId = null)} aria-label="Remove highlight">×</button>
<div class="highlighted-equation">
<span class="highlighted-eq-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
<span class="highlighted-eq-from">{formatBig(new Big(inputValue))} {fromUnit?.labelPlural}</span>
<span class="highlighted-eq-sep">=</span>
<span class="highlighted-eq-to">{formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
<span class="highlighted-eq-to">
{#if highlightedResult.isYolo}<span class="yolo-marker">~</span>{/if}{formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}
</span>
</div>
{:else if highlightedResult !== null && highlightedResult.convertedValue === null}
<button class="highlight-dismiss" onclick={() => (highlightedUnitId = null)} aria-label="Remove highlight">×</button>
<span class="highlighted-placeholder">N/A — enable YOLO mode for cross-group conversions</span>
{:else}
<span class="highlighted-placeholder">Click a result to highlight it</span>
{/if}
</div>
<div class="yolo-toggle-row">
<label class="yolo-label">
<input type="checkbox" bind:checked={yoloMode} role="switch" />
YOLO mode <small>(cross-group conversions)</small>
</label>
</div>
<ConverterCard
{units}
{groups}
{inputValue}
{fromUnitId}
{highlightedUnitId}
{results}
{orderedResults}
oninputchange={(v) => (inputValue = v)}
onunitchange={handleUnitChange}
onhighlight={handleHighlight}
onsetinput={handleSetInput}
onctrlclick={handleCtrlClick}
/>
<style>
.yolo-toggle-row {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.yolo-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
}
.yolo-marker {
color: var(--pico-muted-color);
font-weight: bold;
margin-right: 1px;
}
</style>

25
src/routes/admin/+layout.server.ts Normal file
View File

@@ -0,0 +1,25 @@
import { redirect } from '@sveltejs/kit';
import { loadConfig } from '$lib/server/data';
import { requireAuth } from '$lib/server/auth';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = ({ request, url }) => {
// Skip auth check for the login page itself
if (url.pathname.endsWith('/login') || url.pathname.endsWith('/login/')) {
return { authenticated: false };
}
// Skip auth check for API routes (they handle their own auth)
if (url.pathname.includes('/api/')) {
return { authenticated: true };
}
const config = loadConfig();
const authed = requireAuth(request, config);
if (!authed) {
throw redirect(302, '/admin/login');
}
return { authenticated: true };
};

13
src/routes/admin/+layout.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
let { children } = $props();
</script>
<div class="admin-layout">
{@render children()}
</div>
<style>
.admin-layout {
min-height: calc(100vh - 8rem);
}
</style>

747
src/routes/admin/+page.svelte Normal file
View File

@@ -0,0 +1,747 @@
<script lang="ts">
import type { Unit, Group, UnitsData } from '$lib/types';
// ── State ────────────────────────────────────────────────────────────────────
let unitsData = $state<UnitsData>({ units: [], groups: [] });
let selectedItem = $state<{ type: 'unit' | 'group'; id: string } | null>(null);
let checkedUnitIds = $state<Set<string>>(new Set());
let moveTargetGroupId = $state<string>('');
let expandedGroups = $state<Set<string>>(new Set());
let deleteGroupTarget = $state<Group | null>(null);
let deleteGroupAction = $state<'reassign' | 'orphan'>('reassign');
let deleteGroupTargetId = $state<string>('');
let deleteGroupToBaseAction = $state<'recalculate' | 'reset' | 'keep'>('keep');
let formError = $state<string | null>(null);
let formSuccess = $state<string | null>(null);
// Unit form state
let unitForm = $state<Partial<Unit>>({});
let unitFormNew = $state(false);
// Group form state
let groupForm = $state<Partial<Group>>({});
let groupFormNew = $state(false);
// ── Load data on mount ───────────────────────────────────────────────────────
async function loadData() {
const res = await fetch('/admin/api/units');
if (!res.ok) return;
const units: Unit[] = await res.json();
const gres = await fetch('/admin/api/groups');
const groups: Group[] = gres.ok ? await gres.json() : [];
unitsData = { units, groups };
// Initialize expanded state
for (const g of groups) {
expandedGroups.add(g.id);
}
}
// Load on mount
$effect(() => {
loadData();
});
// ── Derived ──────────────────────────────────────────────────────────────────
let unitsByGroup = $derived.by(() => {
const map = new Map<string | null, Unit[]>();
for (const u of unitsData.units) {
const key = u.group ?? null;
if (!map.has(key)) map.set(key, []);
map.get(key)!.push(u);
}
return map;
});
function getBaseUnit(group: Group): Unit | undefined {
return unitsData.units.find((u) => u.id === group.baseUnitId);
}
// ── Selection ────────────────────────────────────────────────────────────────
function selectUnit(unit: Unit) {
selectedItem = { type: 'unit', id: unit.id };
unitForm = { ...unit };
unitFormNew = false;
groupFormNew = false;
formError = null;
formSuccess = null;
}
function selectGroup(group: Group) {
selectedItem = { type: 'group', id: group.id };
groupForm = { ...group };
groupFormNew = false;
unitFormNew = false;
formError = null;
formSuccess = null;
}
function startNewUnit(groupId?: string) {
selectedItem = null;
unitForm = { group: groupId ?? null, toBase: 1, symbol: '', label: '', labelPlural: '', id: '' };
unitFormNew = true;
groupFormNew = false;
formError = null;
formSuccess = null;
}
function startNewGroup() {
selectedItem = null;
groupForm = { id: '', label: '', baseUnitId: '', toUniversal: 1 };
groupFormNew = true;
unitFormNew = false;
formError = null;
formSuccess = null;
}
// ── Unit form submit ─────────────────────────────────────────────────────────
async function saveUnit() {
formError = null;
formSuccess = null;
try {
let res: Response;
if (unitFormNew) {
res = await fetch('/admin/api/units', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(unitForm)
});
} else {
res = await fetch(`/admin/api/units/${selectedItem?.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(unitForm)
});
}
if (!res.ok) {
const err = await res.json().catch(() => ({}));
formError = (err as Record<string, string>).error ?? 'Save failed';
return;
}
formSuccess = unitFormNew ? 'Unit created.' : 'Unit saved.';
if (unitFormNew) {
const created = (await res.json()) as Unit;
unitFormNew = false;
selectedItem = { type: 'unit', id: created.id ?? '' };
}
await loadData();
} catch {
formError = 'Network error';
}
}
async function deleteUnit() {
if (!selectedItem || selectedItem.type !== 'unit') return;
if (!confirm(`Delete unit "${unitForm.label}"?`)) return;
try {
const res = await fetch(`/admin/api/units/${selectedItem.id}`, { method: 'DELETE' });
if (!res.ok) {
const err = await res.json().catch(() => ({}));
formError = (err as Record<string, string>).error ?? 'Delete failed';
return;
}
selectedItem = null;
unitForm = {};
await loadData();
} catch {
formError = 'Network error';
}
}
// ── Group form submit ────────────────────────────────────────────────────────
async function saveGroup() {
formError = null;
formSuccess = null;
try {
let res: Response;
if (groupFormNew) {
res = await fetch('/admin/api/groups', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(groupForm)
});
} else {
res = await fetch(`/admin/api/groups/${selectedItem?.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(groupForm)
});
}
if (!res.ok) {
const err = await res.json().catch(() => ({}));
formError = (err as Record<string, string>).error ?? 'Save failed';
return;
}
formSuccess = groupFormNew ? 'Group created.' : 'Group saved.';
if (groupFormNew) {
const created = (await res.json()) as Group;
groupFormNew = false;
selectedItem = { type: 'group', id: created.id ?? '' };
}
await loadData();
} catch {
formError = 'Network error';
}
}
// ── Delete group modal ───────────────────────────────────────────────────────
function openDeleteGroup(group: Group) {
deleteGroupTarget = group;
deleteGroupAction = 'reassign';
deleteGroupTargetId = '';
deleteGroupToBaseAction = 'keep';
formError = null;
}
function closeDeleteGroup() {
deleteGroupTarget = null;
}
async function confirmDeleteGroup() {
if (!deleteGroupTarget) return;
const unitsCount = (unitsByGroup.get(deleteGroupTarget.id) ?? []).length;
let body: Record<string, unknown>;
if (unitsCount === 0) {
body = { action: 'orphan' };
} else if (deleteGroupAction === 'reassign') {
body = {
action: 'reassign',
targetGroupId: deleteGroupTargetId,
toBaseAction: deleteGroupToBaseAction
};
} else {
body = { action: 'orphan' };
}
try {
const res = await fetch(`/admin/api/groups/${deleteGroupTarget.id}`, {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
formError = (err as Record<string, string>).error ?? 'Delete failed';
return;
}
deleteGroupTarget = null;
selectedItem = null;
groupForm = {};
await loadData();
} catch {
formError = 'Network error';
}
}
// ── Multi-select move ────────────────────────────────────────────────────────
async function moveCheckedUnits() {
if (!moveTargetGroupId || checkedUnitIds.size === 0) return;
for (const unitId of checkedUnitIds) {
await fetch(`/admin/api/units/${unitId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ group: moveTargetGroupId })
});
}
checkedUnitIds = new Set();
moveTargetGroupId = '';
await loadData();
}
function toggleCheck(unitId: string) {
const next = new Set(checkedUnitIds);
if (next.has(unitId)) next.delete(unitId);
else next.add(unitId);
checkedUnitIds = next;
}
// ── Live toBase hint ─────────────────────────────────────────────────────────
let toBaseHint = $derived.by(() => {
const g = unitsData.groups.find((gr) => gr.id === unitForm.group);
if (!g) return null;
const base = unitsData.units.find((u) => u.id === g.baseUnitId);
const sym = unitForm.symbol ?? '?';
const tb = unitForm.toBase ?? 1;
const baseSymbol = base?.symbol ?? 'base units';
return `1 ${sym} = ${tb} ${baseSymbol}`;
});
async function logout() {
await fetch('/admin/api/auth/logout', { method: 'POST' });
window.location.href = '/admin/login';
}
</script>
<svelte:head>
<title>Humor Units — Admin</title>
</svelte:head>
<div class="admin-header">
<h2>Admin</h2>
<button class="outline secondary logout-btn" onclick={logout}>Log out</button>
</div>
{#if checkedUnitIds.size > 0}
<div class="bulk-actions">
<span>{checkedUnitIds.size} unit{checkedUnitIds.size === 1 ? '' : 's'} selected</span>
<select bind:value={moveTargetGroupId}>
<option value="">Move to group…</option>
{#each unitsData.groups as g}
<option value={g.id}>{g.label}</option>
{/each}
</select>
<button onclick={moveCheckedUnits} disabled={!moveTargetGroupId}>Move</button>
<button class="outline secondary" onclick={() => (checkedUnitIds = new Set())}>Clear</button>
</div>
{/if}
<div class="admin-panels">
<!-- Left panel: tree -->
<aside class="admin-tree">
{#each unitsData.groups as group (group.id)}
{@const groupUnits = unitsByGroup.get(group.id) ?? []}
<div class="tree-group">
<div class="tree-group-header">
<button
class="tree-expand plain"
onclick={() => {
const next = new Set(expandedGroups);
if (next.has(group.id)) next.delete(group.id);
else next.add(group.id);
expandedGroups = next;
}}
>
{expandedGroups.has(group.id) ? '▾' : '▸'}
</button>
<button class="tree-group-label plain" onclick={() => selectGroup(group)}>
<strong>{group.label}</strong>
<small class="muted">{groupUnits.length} unit{groupUnits.length === 1 ? '' : 's'}</small>
</button>
<div class="tree-group-actions">
<button class="icon-btn plain" title="Edit group" onclick={() => selectGroup(group)}>✏️</button>
<button class="icon-btn plain" title="Delete group" onclick={() => openDeleteGroup(group)}>🗑️</button>
</div>
</div>
{#if expandedGroups.has(group.id)}
<div class="tree-units">
{#each groupUnits as unit (unit.id)}
<div class="tree-unit-row" class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}>
<input
type="checkbox"
checked={checkedUnitIds.has(unit.id)}
onchange={() => toggleCheck(unit.id)}
/>
<button class="tree-unit-label plain" onclick={() => selectUnit(unit)}>
{unit.label}
<span class="muted">({unit.symbol})</span>
{#if unit.id === group.baseUnitId}
<span class="base-badge" title="Base unit">★</span>
{/if}
</button>
<button class="icon-btn plain" title="Edit" onclick={() => selectUnit(unit)}>✏️</button>
</div>
{/each}
<button class="add-unit-btn plain" onclick={() => startNewUnit(group.id)}>
+ Add Unit to {group.label}
</button>
</div>
{/if}
</div>
{/each}
<!-- Ungrouped section -->
{#if (unitsByGroup.get(null) ?? []).length > 0}
{@const orphaned = unitsByGroup.get(null) ?? []}
<div class="tree-group">
<div class="tree-group-header">
<span class="tree-group-label"><strong>Ungrouped</strong> <small class="muted">{orphaned.length}</small></span>
</div>
<div class="tree-units">
{#each orphaned as unit (unit.id)}
<div class="tree-unit-row" class:selected={selectedItem?.id === unit.id && selectedItem?.type === 'unit'}>
<input
type="checkbox"
checked={checkedUnitIds.has(unit.id)}
onchange={() => toggleCheck(unit.id)}
/>
<button class="tree-unit-label plain" onclick={() => selectUnit(unit)}>
{unit.label} <span class="muted">({unit.symbol})</span>
</button>
<button class="icon-btn plain" onclick={() => selectUnit(unit)}>✏️</button>
</div>
{/each}
</div>
</div>
{/if}
<div class="tree-footer">
<button onclick={() => startNewUnit()}>+ Add Unit</button>
<button class="outline" onclick={startNewGroup}>+ Add Group</button>
</div>
</aside>
<!-- Right panel: form -->
<section class="admin-form-panel">
{#if formError}
<p class="form-error" role="alert">{formError}</p>
{/if}
{#if formSuccess}
<p class="form-success" role="status">{formSuccess}</p>
{/if}
{#if (selectedItem?.type === 'unit' || unitFormNew)}
<!-- Unit form -->
<h3>{unitFormNew ? 'New Unit' : 'Edit Unit'}</h3>
<label>
ID {#if !unitFormNew}<small>(readonly)</small>{/if}
<input
type="text"
bind:value={unitForm.id}
readonly={!unitFormNew}
placeholder="e.g. my-unit"
/>
</label>
<label>
Label
<input type="text" bind:value={unitForm.label} placeholder="e.g. My Unit" />
</label>
<label>
Label (plural)
<input type="text" bind:value={unitForm.labelPlural} placeholder="e.g. My Units" />
</label>
<label>
Symbol
<input type="text" bind:value={unitForm.symbol} placeholder="e.g. mu" />
</label>
<label>
Group
<select bind:value={unitForm.group}>
<option value={null}>Ungrouped</option>
{#each unitsData.groups as g}
<option value={g.id}>{g.label}</option>
{/each}
</select>
</label>
<label>
To Base
<input type="number" bind:value={unitForm.toBase} min="0.000001" step="any" />
{#if toBaseHint}
<small class="tobase-hint">{toBaseHint}</small>
{/if}
</label>
<div class="form-actions">
<button onclick={saveUnit}>{unitFormNew ? 'Create Unit' : 'Save Unit'}</button>
{#if !unitFormNew}
<button class="outline secondary" onclick={deleteUnit}>Delete</button>
{/if}
</div>
{:else if (selectedItem?.type === 'group' || groupFormNew)}
<!-- Group form -->
<h3>{groupFormNew ? 'New Group' : 'Edit Group'}</h3>
<label>
ID {#if !groupFormNew}<small>(readonly)</small>{/if}
<input
type="text"
bind:value={groupForm.id}
readonly={!groupFormNew}
placeholder="e.g. my-group"
/>
</label>
<label>
Label
<input type="text" bind:value={groupForm.label} placeholder="e.g. My Group" />
</label>
<label>
Base Unit
<small>Changing the base unit will auto-recalculate all toBase values in this group.</small>
<select bind:value={groupForm.baseUnitId}>
<option value="">None</option>
{#each unitsData.units.filter((u) => u.group === groupForm.id) as u}
<option value={u.id}>{u.label} ({u.symbol})</option>
{/each}
</select>
</label>
<label>
To Universal
<small title="Relative scale for cross-group YOLO conversions. Arbitrary — make it up.">
Relative scale for cross-group conversions.
</small>
<input type="number" bind:value={groupForm.toUniversal} min="0.000001" step="any" />
</label>
<div class="form-actions">
<button onclick={saveGroup}>{groupFormNew ? 'Create Group' : 'Save Group'}</button>
{#if !groupFormNew}
<button
class="outline secondary"
onclick={() => {
const g = unitsData.groups.find((gr) => gr.id === selectedItem?.id);
if (g) openDeleteGroup(g);
}}
>Delete</button>
{/if}
</div>
{:else}
<p class="select-hint">Select a unit or group to edit</p>
{/if}
</section>
</div>
<!-- Delete group modal -->
{#if deleteGroupTarget}
{@const unitsCount = (unitsByGroup.get(deleteGroupTarget.id) ?? []).length}
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="modal-backdrop" onclick={closeDeleteGroup}>
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<article class="modal-card" onclick={(e) => e.stopPropagation()}>
<h3>Delete "{deleteGroupTarget.label}"</h3>
{#if unitsCount === 0}
<p>This group has no units. Delete it?</p>
<div class="form-actions">
<button
onclick={() => {
deleteGroupAction = 'orphan';
confirmDeleteGroup();
}}
>Delete Group</button>
<button class="outline secondary" onclick={closeDeleteGroup}>Cancel</button>
</div>
{:else}
<p>This group contains <strong>{unitsCount}</strong> unit{unitsCount === 1 ? '' : 's'}.</p>
<fieldset>
<legend>What to do with these units?</legend>
<label>
<input type="radio" bind:group={deleteGroupAction} value="reassign" />
Reassign to another group
</label>
{#if deleteGroupAction === 'reassign'}
<select bind:value={deleteGroupTargetId} style="margin: 0.5rem 0;">
<option value="">Select target group…</option>
{#each unitsData.groups.filter((g) => g.id !== deleteGroupTarget?.id) as g}
<option value={g.id}>{g.label}</option>
{/each}
</select>
<div>
<label><input type="radio" bind:group={deleteGroupToBaseAction} value="keep" /> Keep toBase values</label>
<label><input type="radio" bind:group={deleteGroupToBaseAction} value="recalculate" /> Recalculate (scale by toUniversal ratio)</label>
<label><input type="radio" bind:group={deleteGroupToBaseAction} value="reset" /> Reset to 1.0</label>
</div>
{/if}
<label>
<input type="radio" bind:group={deleteGroupAction} value="orphan" />
Delete Group, Keep Units (Orphan)
</label>
</fieldset>
<div class="form-actions">
<button
onclick={confirmDeleteGroup}
disabled={deleteGroupAction === 'reassign' && !deleteGroupTargetId}
>
{deleteGroupAction === 'reassign' ? 'Reassign & Delete Group' : 'Delete Group, Keep Units'}
</button>
<button class="outline secondary" onclick={closeDeleteGroup}>Cancel</button>
</div>
{/if}
</article>
</div>
{/if}
<style>
.admin-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.admin-header h2 {
margin: 0;
}
.bulk-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--pico-card-background-color);
border: 1px solid var(--pico-card-border-color);
border-radius: var(--pico-border-radius);
}
.admin-panels {
display: grid;
grid-template-columns: 280px 1fr;
gap: 1.5rem;
align-items: start;
}
@media (max-width: 720px) {
.admin-panels { grid-template-columns: 1fr; }
}
.admin-tree {
background: var(--pico-card-background-color);
border: 1px solid var(--pico-card-border-color);
border-radius: var(--pico-border-radius);
padding: 0.75rem;
}
.tree-group { margin-bottom: 0.5rem; }
.tree-group-header {
display: flex;
align-items: center;
gap: 0.25rem;
}
.tree-group-label {
flex: 1;
text-align: left;
display: flex;
gap: 0.4rem;
align-items: baseline;
}
.tree-group-actions {
display: flex;
gap: 0.25rem;
}
.tree-units {
margin-left: 1.5rem;
margin-top: 0.25rem;
}
.tree-unit-row {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.15rem 0.25rem;
border-radius: var(--pico-border-radius);
}
.tree-unit-row.selected {
background: var(--pico-primary-background);
}
.tree-unit-label {
flex: 1;
text-align: left;
}
.plain {
background: none;
border: none;
cursor: pointer;
padding: 0.15rem 0.25rem;
margin: 0;
color: inherit;
font: inherit;
}
.icon-btn {
font-size: 0.9rem;
opacity: 0.6;
}
.icon-btn:hover { opacity: 1; }
.base-badge {
color: var(--pico-primary);
font-size: 0.8rem;
}
.muted {
color: var(--pico-muted-color);
font-size: 0.85rem;
}
.add-unit-btn {
font-size: 0.85rem;
color: var(--pico-primary);
padding: 0.2rem 0.25rem;
margin-top: 0.25rem;
}
.tree-footer {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--pico-card-border-color);
}
.admin-form-panel {
background: var(--pico-card-background-color);
border: 1px solid var(--pico-card-border-color);
border-radius: var(--pico-border-radius);
padding: 1.25rem;
}
.select-hint {
color: var(--pico-muted-color);
font-style: italic;
margin: 2rem 0;
text-align: center;
}
.form-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.form-error {
color: var(--pico-del-color, #e74c3c);
background: rgba(231, 76, 60, 0.1);
padding: 0.5rem 0.75rem;
border-radius: var(--pico-border-radius);
font-size: 0.9rem;
}
.form-success {
color: var(--pico-ins-color, #2ecc71);
background: rgba(46, 204, 113, 0.1);
padding: 0.5rem 0.75rem;
border-radius: var(--pico-border-radius);
font-size: 0.9rem;
}
.tobase-hint {
display: block;
color: var(--pico-muted-color);
margin-top: 0.25rem;
font-style: italic;
}
.logout-btn {
width: auto;
padding: 0.3rem 0.75rem;
margin-bottom: 0;
font-size: 0.9rem;
}
/* Modal */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal-card {
width: 100%;
max-width: 480px;
margin: 0 1rem;
}
</style>

51
src/routes/admin/api/auth/login/+server.ts Normal file
View File

@@ -0,0 +1,51 @@
import { json } from '@sveltejs/kit';
import { loadConfig } from '$lib/server/data';
import { verifyPassword, createSession } from '$lib/server/auth';
import { serialize } from 'cookie';
import type { RequestHandler } from './$types';
const COOKIE_MAX_AGE = 86400 * 7; // 7 days
export const POST: RequestHandler = async ({ request, url }) => {
const body = await request.json().catch(() => ({}));
const { password } = body as { password?: string };
if (!password) {
return json({ error: 'Password required' }, { status: 400 });
}
const config = loadConfig();
if (!config.passwordHash) {
console.warn('[humor-units] WARNING: No password hash set. Run: node scripts/set-password.js <password>');
return json({ error: 'Admin not configured' }, { status: 503 });
}
// Timing attack mitigation: ensure response takes at least 500ms on failure
const start = Date.now();
const valid = await verifyPassword(password, config.passwordHash);
const elapsed = Date.now() - start;
if (!valid) {
const delay = Math.max(0, 500 - elapsed);
await new Promise((r) => setTimeout(r, delay));
return json({ error: 'Incorrect password' }, { status: 401 });
}
const token = createSession(config.sessionSecret);
const sessionCookie = serialize('hu_session', token, {
httpOnly: true,
sameSite: 'strict',
secure: url.protocol === 'https:',
path: '/',
maxAge: COOKIE_MAX_AGE
});
return new Response(JSON.stringify({ ok: true }), {
status: 200,
headers: {
'Content-Type': 'application/json',
'Set-Cookie': sessionCookie
}
});
};

20
src/routes/admin/api/auth/logout/+server.ts Normal file
View File

@@ -0,0 +1,20 @@
import { json } from '@sveltejs/kit';
import { serialize } from 'cookie';
import type { RequestHandler } from './$types';
export const POST: RequestHandler = ({ url }) => {
const clearCookie = serialize('hu_session', '', {
httpOnly: true,
sameSite: 'strict',
secure: url.protocol === 'https:',
path: '/',
maxAge: 0
});
return new Response(JSON.stringify({ ok: true }), {
status: 200,
headers: {
'Content-Type': 'application/json',
'Set-Cookie': clearCookie
}
});
};

64
src/routes/admin/api/groups/+server.ts Normal file
View File

@@ -0,0 +1,64 @@
import { json } from '@sveltejs/kit';
import { loadData, saveData, loadConfig } from '$lib/server/data';
import { requireAuth } from '$lib/server/auth';
import type { RequestHandler } from './$types';
import type { Group } from '$lib/types';
function auth(request: Request) {
return requireAuth(request, loadConfig());
}
const KEBAB_RE = /^[a-z][a-z0-9-]*$/;
export const GET: RequestHandler = ({ request }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const data = loadData();
return json(data.groups);
};
export const POST: RequestHandler = async ({ request }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const body = await request.json().catch(() => null);
if (!body) return json({ error: 'Invalid JSON' }, { status: 400 });
const { id, label, baseUnitId, toUniversal } = body as Partial<Group>;
if (!id || !KEBAB_RE.test(id)) {
return json({ error: 'id must be non-empty kebab-case' }, { status: 400 });
}
if (!label) {
return json({ error: 'label is required' }, { status: 400 });
}
if (typeof toUniversal !== 'number' || toUniversal <= 0) {
return json({ error: 'toUniversal must be a positive number' }, { status: 400 });
}
const data = loadData();
if (data.groups.some((g) => g.id === id)) {
return json({ error: `Group id '${id}' already exists` }, { status: 400 });
}
// baseUnitId must exist and belong to this group (or be empty for new group)
if (baseUnitId) {
const baseUnit = data.units.find((u) => u.id === baseUnitId);
if (!baseUnit) {
return json({ error: `baseUnitId '${baseUnitId}' does not exist` }, { status: 400 });
}
if (baseUnit.group !== id && baseUnit.group !== null) {
return json({ error: `baseUnitId '${baseUnitId}' does not belong to this group` }, { status: 400 });
}
}
const newGroup: Group = {
id,
label,
baseUnitId: baseUnitId ?? '',
toUniversal
};
data.groups.push(newGroup);
saveData(data);
return json(newGroup, { status: 201 });
};

111
src/routes/admin/api/groups/[id]/+server.ts Normal file
View File

@@ -0,0 +1,111 @@
import { json } from '@sveltejs/kit';
import { loadData, saveData, loadConfig } from '$lib/server/data';
import { requireAuth } from '$lib/server/auth';
import type { RequestHandler } from './$types';
import type { Group } from '$lib/types';
function auth(request: Request) {
return requireAuth(request, loadConfig());
}
export const PUT: RequestHandler = async ({ request, params }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const { id } = params;
const body = await request.json().catch(() => null);
if (!body) return json({ error: 'Invalid JSON' }, { status: 400 });
const data = loadData();
const gIdx = data.groups.findIndex((g) => g.id === id);
if (gIdx === -1) return json({ error: 'Group not found' }, { status: 404 });
const patch = body as Partial<Group>;
const currentGroup = data.groups[gIdx];
// Special case: changing baseUnitId requires recalculating all unit toBase values
if (patch.baseUnitId !== undefined && patch.baseUnitId !== currentGroup.baseUnitId) {
const newBaseId = patch.baseUnitId;
const newBaseUnit = data.units.find((u) => u.id === newBaseId && u.group === id);
if (!newBaseUnit) {
return json({ error: `baseUnitId '${newBaseId}' not found in this group` }, { status: 400 });
}
const X = newBaseUnit.toBase; // Current toBase of the new base unit
// Recalculate all units in this group: unit.toBase = unit.toBase / X
// Then set new base unit toBase = 1.0
for (const unit of data.units) {
if (unit.group === id) {
if (unit.id === newBaseId) {
unit.toBase = 1.0;
} else {
unit.toBase = unit.toBase / X;
}
}
}
}
const updated: Group = { ...currentGroup, ...patch };
data.groups[gIdx] = updated;
saveData(data);
return json(updated);
};
export const DELETE: RequestHandler = async ({ request, params }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const { id } = params;
const body = await request.json().catch(() => ({}));
const { action, targetGroupId, toBaseAction } = body as {
action?: 'reassign' | 'orphan';
targetGroupId?: string;
toBaseAction?: 'recalculate' | 'reset' | 'keep';
};
if (!action || (action !== 'reassign' && action !== 'orphan')) {
return json({ error: "action must be 'reassign' or 'orphan'" }, { status: 400 });
}
const data = loadData();
const gIdx = data.groups.findIndex((g) => g.id === id);
if (gIdx === -1) return json({ error: 'Group not found' }, { status: 404 });
const fromGroup = data.groups[gIdx];
const unitsInGroup = data.units.filter((u) => u.group === id);
if (action === 'reassign') {
if (!targetGroupId) {
return json({ error: 'targetGroupId required for reassign' }, { status: 400 });
}
if (targetGroupId === id) {
return json({ error: 'Cannot reassign to the same group' }, { status: 400 });
}
const toGroup = data.groups.find((g) => g.id === targetGroupId);
if (!toGroup) {
return json({ error: `Target group '${targetGroupId}' not found` }, { status: 404 });
}
for (const unit of data.units) {
if (unit.group === id) {
if (toBaseAction === 'recalculate') {
unit.toBase = (unit.toBase * fromGroup.toUniversal) / toGroup.toUniversal;
} else if (toBaseAction === 'reset') {
unit.toBase = 1.0;
}
// 'keep' or default: no change to toBase
unit.group = targetGroupId;
}
}
} else if (action === 'orphan') {
for (const unit of data.units) {
if (unit.group === id) {
unit.group = null;
}
}
}
data.groups.splice(gIdx, 1);
saveData(data);
return json({ ok: true, unitsAffected: unitsInGroup.length });
};

59
src/routes/admin/api/units/+server.ts Normal file
View File

@@ -0,0 +1,59 @@
import { json } from '@sveltejs/kit';
import { loadData, saveData, loadConfig } from '$lib/server/data';
import { requireAuth } from '$lib/server/auth';
import type { RequestHandler } from './$types';
import type { Unit } from '$lib/types';
function auth(request: Request) {
return requireAuth(request, loadConfig());
}
const KEBAB_RE = /^[a-z][a-z0-9-]*$/;
export const GET: RequestHandler = ({ request }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const data = loadData();
return json(data.units);
};
export const POST: RequestHandler = async ({ request }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const body = await request.json().catch(() => null);
if (!body) return json({ error: 'Invalid JSON' }, { status: 400 });
const { id, label, labelPlural, symbol, group, toBase } = body as Partial<Unit>;
// Validation
if (!id || !KEBAB_RE.test(id)) {
return json({ error: 'id must be non-empty kebab-case' }, { status: 400 });
}
if (!label || !labelPlural || !symbol) {
return json({ error: 'label, labelPlural, and symbol are required' }, { status: 400 });
}
if (typeof toBase !== 'number' || toBase <= 0) {
return json({ error: 'toBase must be a positive number' }, { status: 400 });
}
const data = loadData();
if (data.units.some((u) => u.id === id)) {
return json({ error: `Unit id '${id}' already exists` }, { status: 400 });
}
if (group !== null && group !== undefined && !data.groups.some((g) => g.id === group)) {
return json({ error: `Group '${group}' does not exist` }, { status: 400 });
}
const newUnit: Unit = {
id,
label,
labelPlural,
symbol,
group: group ?? null,
toBase
};
data.units.push(newUnit);
saveData(data);
return json(newUnit, { status: 201 });
};

61
src/routes/admin/api/units/[id]/+server.ts Normal file
View File

@@ -0,0 +1,61 @@
import { json } from '@sveltejs/kit';
import { loadData, saveData, loadConfig } from '$lib/server/data';
import { requireAuth } from '$lib/server/auth';
import type { RequestHandler } from './$types';
import type { Unit } from '$lib/types';
function auth(request: Request) {
return requireAuth(request, loadConfig());
}
const KEBAB_RE = /^[a-z][a-z0-9-]*$/;
export const PUT: RequestHandler = async ({ request, params }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const { id } = params;
const body = await request.json().catch(() => null);
if (!body) return json({ error: 'Invalid JSON' }, { status: 400 });
const data = loadData();
const idx = data.units.findIndex((u) => u.id === id);
if (idx === -1) return json({ error: 'Unit not found' }, { status: 404 });
const patch = body as Partial<Unit>;
// If id is changing, validate new id
if (patch.id !== undefined && patch.id !== id) {
if (!KEBAB_RE.test(patch.id)) {
return json({ error: 'id must be kebab-case' }, { status: 400 });
}
if (data.units.some((u) => u.id === patch.id)) {
return json({ error: `Unit id '${patch.id}' already exists` }, { status: 400 });
}
}
if (patch.toBase !== undefined && patch.toBase <= 0) {
return json({ error: 'toBase must be positive' }, { status: 400 });
}
if (patch.group !== null && patch.group !== undefined && !data.groups.some((g) => g.id === patch.group)) {
return json({ error: `Group '${patch.group}' does not exist` }, { status: 400 });
}
const updated: Unit = { ...data.units[idx], ...patch };
data.units[idx] = updated;
saveData(data);
return json(updated);
};
export const DELETE: RequestHandler = ({ request, params }) => {
if (!auth(request)) return json({ error: 'Unauthorized' }, { status: 401 });
const { id } = params;
const data = loadData();
const idx = data.units.findIndex((u) => u.id === id);
if (idx === -1) return json({ error: 'Unit not found' }, { status: 404 });
data.units.splice(idx, 1);
saveData(data);
return json({ ok: true });
};

85
src/routes/admin/login/+page.svelte Normal file
View File

@@ -0,0 +1,85 @@
<script lang="ts">
import { goto } from '$app/navigation';
let password = $state('');
let error = $state<string | null>(null);
let loading = $state(false);
async function handleSubmit(e: Event) {
e.preventDefault();
error = null;
loading = true;
try {
const res = await fetch('/admin/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password })
});
if (res.ok) {
await goto('/admin');
} else {
const data = await res.json().catch(() => ({}));
error = data.error ?? 'Incorrect password';
}
} catch {
error = 'Network error — please try again';
} finally {
loading = false;
}
}
</script>
<svelte:head>
<title>Humor Units — Admin Login</title>
</svelte:head>
<div class="login-wrapper">
<article class="login-card">
<h2>Admin Login</h2>
<form onsubmit={handleSubmit}>
<label>
Password
<input
type="password"
bind:value={password}
autocomplete="current-password"
disabled={loading}
required
/>
</label>
{#if error}
<p class="login-error" role="alert">{error}</p>
{/if}
<button type="submit" disabled={loading || !password}>
{loading ? 'Signing in…' : 'Sign in'}
</button>
</form>
</article>
</div>
<style>
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}
.login-card {
width: 100%;
max-width: 360px;
}
.login-error {
color: var(--pico-del-color, #e74c3c);
font-size: 0.9rem;
margin-top: 0.5rem;
}
button {
width: 100%;
margin-top: 0.5rem;
}
</style>

12
src/routes/api/units/+server.ts Normal file
View File

@@ -0,0 +1,12 @@
import { json } from '@sveltejs/kit';
import { loadData } from '$lib/server/data';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = () => {
const data = loadData();
return json(data, {
headers: {
'Cache-Control': 'no-store'
}
});
};