@flowdular/sdk 0.1.0

package/modules/auth/src/client/slug.ts

@@ -0,0 +1,26 @@
+/* Client-side mirror of the server workspace slug rules; the server stays
+   the authority through /api/auth/workspace-availability and sign-up. */
+
+export const WORKSPACE_SLUG_PATTERN = /^[a-z0-9](?:[a-z0-9-]{1,46}[a-z0-9])?$/;
+
+export function isValidWorkspaceSlug(slug: string): boolean {
+	return (
+		slug.length >= 3 &&
+		slug.length <= 48 &&
+		WORKSPACE_SLUG_PATTERN.test(slug) &&
+		!slug.includes('--')
+	);
+}
+
+export function slugifyWorkspaceName(name: string): string {
+	return name
+		.normalize('NFKD')
+		.replace(/[̀-ͯ]/g, '')
+		.toLowerCase()
+		.replace(/ł/g, 'l')
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/-{2,}/g, '-')
+		.replace(/^-+/, '')
+		.slice(0, 48)
+		.replace(/-+$/, '');
+}

package/modules/auth/src/client/state.ts

@@ -0,0 +1,115 @@
+import { cell, createStore } from 'segment-state';
+import type { AuthPrincipal } from '../domain/types.ts';
+
+export type AuthClientStatus =
+	| 'checking'
+	| 'anonymous'
+	| 'submitting'
+	| 'authenticated';
+export type AuthScreen =
+	| 'sign-in'
+	| 'sign-up'
+	| 'forgot-password'
+	| 'reset-password'
+	| 'accept-invitation'
+	| 'mfa-challenge';
+export type SignUpStep = 1 | 2 | 3;
+
+export interface WorkspaceSlugCheck {
+	status: 'idle' | 'checking' | 'available' | 'unavailable';
+	message: string;
+}
+
+const AUTH_PATHS: Readonly<Record<AuthScreen, string>> = {
+	'sign-in': '/auth/login',
+	'sign-up': '/auth/register',
+	'forgot-password': '/auth/forgot-password',
+	'reset-password': '/auth/reset-password',
+	'accept-invitation': '/auth/accept-invitation',
+	'mfa-challenge': '/auth/mfa',
+};
+
+const AUTH_ROUTE_PATHS = new Set([
+	...Object.values(AUTH_PATHS),
+	'/auth/sign-in',
+	'/auth/sign-up',
+	'/sign-in',
+	'/sign-up',
+	'/forgot-password',
+	'/reset-password',
+	'/accept-invitation',
+]);
+
+export function authPathForScreen(screen: AuthScreen): string {
+	return AUTH_PATHS[screen];
+}
+
+export function isAuthRouteUrl(value: string): boolean {
+	const url = new URL(value, 'https://flowdular.local');
+	return (
+		url.pathname.startsWith('/auth/') || AUTH_ROUTE_PATHS.has(url.pathname)
+	);
+}
+
+export function canonicalAuthLocation(value: string): string {
+	const url = new URL(value, 'https://flowdular.local');
+	return authPathForScreen(authScreenFromUrl(url.href)) + url.search + url.hash;
+}
+
+export function authScreenFromUrl(value: string): AuthScreen {
+	const url = new URL(value, 'https://flowdular.local');
+	if (
+		url.pathname === '/auth/register' ||
+		url.pathname === '/auth/sign-up' ||
+		url.pathname === '/sign-up'
+	)
+		return 'sign-up';
+	if (
+		url.pathname === '/auth/forgot-password' ||
+		url.pathname === '/forgot-password'
+	)
+		return 'forgot-password';
+	if (
+		url.pathname === '/auth/reset-password' ||
+		url.pathname === '/reset-password'
+	)
+		return 'reset-password';
+	if (
+		url.pathname === '/auth/accept-invitation' ||
+		url.pathname === '/accept-invitation'
+	)
+		return 'accept-invitation';
+	if (url.pathname === '/auth/mfa') return 'mfa-challenge';
+	if (url.searchParams.get('mfa') === 'oidc') return 'mfa-challenge';
+	return 'sign-in';
+}
+
+export function createAuthClientState(initialScreen: AuthScreen = 'sign-in') {
+	const store = createStore({
+		status: cell<AuthClientStatus>('checking'),
+		screen: cell<AuthScreen>(initialScreen),
+		principal: cell<AuthPrincipal | null>(null),
+		csrfToken: '',
+		passwordChangeRequired: false,
+		passwordMinLength: 12,
+		allowSignUp: false,
+		emailConfirmation: false,
+		signInProviders: cell<readonly string[]>([]),
+		signUpStep: cell<SignUpStep>(1),
+		workspaceName: '',
+		workspaceSlug: '',
+		workspaceSlugEdited: false,
+		workspaceSlugCheck: cell<WorkspaceSlugCheck>({
+			status: 'idle',
+			message: '',
+		}),
+		confirmationEmail: '',
+		mfaChallengeToken: '',
+		mfaRecoveryMode: false,
+		flowNotice: '',
+		error: '',
+	});
+	return { store, state: store.state };
+}
+
+export type AuthClientState = ReturnType<typeof createAuthClientState>;

package/modules/auth/src/client/tokens/ApiTokenForm.tsrx

@@ -0,0 +1,153 @@
+import { useMemo } from 'octane';
+import { t } from '@flowdular/sdk/client';
+import { Button, CheckGrid, FormField } from '@flowdular/sdk/ui';
+import type { CheckGroup, CheckOption } from '@flowdular/sdk/ui';
+import { cell, createStore, useValue } from 'segment-state';
+import type { CreateApiTokenRequest } from './api.ts';
+
+export interface ApiTokenFormProps {
+	readonly availableScopes: readonly string[];
+	readonly busy: boolean;
+	readonly onCancel: () => void;
+	readonly onSubmit: (input: CreateApiTokenRequest) => void;
+}
+
+/* A sandbox connection reads platform data and proves sandbox authority. It
+   never needs a write scope: session-guarded mutations reject API tokens. */
+function sandboxPreset(scope: string): boolean {
+	return scope.startsWith('sandbox.') || scope.endsWith('.read');
+}
+
+function scopeGroups(scopes: readonly string[]): readonly CheckGroup[] {
+	const groups = new Map<string, CheckOption[]>();
+	for (const scope of scopes) {
+		const namespace = scope.split('.')[0] ?? scope;
+		const options = groups.get(namespace) ?? [];
+		options.push({
+			value: scope,
+			label: scope.slice(namespace.length + 1) || scope,
+		});
+		groups.set(namespace, options);
+	}
+	return [...groups].map(([label, options]) => ({ label, options }));
+}
+
+function expiryTimestamp(days: string): number | null {
+	const value = Number(days);
+	if (!Number.isFinite(value) || value <= 0) return null;
+	return Date.now() + Math.min(value, 365) * 24 * 60 * 60 * 1000;
+}
+
+export function ApiTokenForm(props: ApiTokenFormProps) @{
+	const formState = useMemo(
+		() => createStore({
+			scopes: cell<readonly string[]>(
+				props.availableScopes.filter(sandboxPreset),
+			),
+			expiryDays: '0',
+		}),
+		[],
+	);
+	const [scopes, setScopes] = useValue(formState.state.scopes);
+	const [expiryDays, setExpiryDays] = useValue(formState.state.expiryDays);
+	const groups = scopeGroups(props.availableScopes);
+
+	const submit = (event: SubmitEvent) => {
+		event.preventDefault();
+		const form = new FormData(event.currentTarget as HTMLFormElement);
+		const label = form.get('label');
+		props.onSubmit({
+			label: typeof label === 'string' ? label : '',
+			scopes,
+			expiresAt: expiryTimestamp(expiryDays),
+		});
+	};
+
+	<form class="ui-drawer__form" onSubmit={submit}>
+		<div class="ui-drawer__body">
+			<div class="ui-form">
+				<FormField
+					label={t('auth.tokens.form.label')}
+					help={t('auth.tokens.form.labelHelp')}
+					required
+				>
+					<input
+						class="ui-input"
+						name="label"
+						minlength={2}
+						maxlength={80}
+						placeholder={t('auth.tokens.form.labelPlaceholder')}
+						autoFocus
+						required
+					/>
+				</FormField>
+				<FormField label={t('auth.tokens.form.expiry')}>
+					<select
+						class="ui-select"
+						value={expiryDays}
+						onInput={(event) => setExpiryDays(event.currentTarget.value)}
+					>
+						<option value="0">{t('auth.tokens.form.noExpiry')}</option>
+						<option value="7">{t('auth.tokens.form.days', {
+							count: 7,
+						})}</option>
+						<option value="30">{t('auth.tokens.form.days', {
+							count: 30,
+						})}</option>
+						<option value="90">{t('auth.tokens.form.days', {
+							count: 90,
+						})}</option>
+						<option value="365">{t('auth.tokens.form.days', {
+							count: 365,
+						})}</option>
+					</select>
+				</FormField>
+				<div class="ui-field">
+					<span class="ui-label">
+						{t('auth.tokens.form.scopes')}
+						<em aria-hidden="true">{' *'}</em>
+					</span>
+					<div class="token-presets">
+						<Button
+							size="sm"
+							onClick={() => setScopes(
+								props.availableScopes.filter(sandboxPreset),
+							)}
+						>{t('auth.tokens.form.presetSandbox')}</Button>
+						<Button
+							size="sm"
+							onClick={() => setScopes(
+								props.availableScopes.filter(
+									(scope) => scope.endsWith('.read'),
+								),
+							)}
+						>{t('auth.tokens.form.presetRead')}</Button>
+						<Button size="sm" variant="ghost" onClick={() => setScopes([])}>{t(
+							'auth.tokens.form.clear',
+						)}</Button>
+					</div>
+					<CheckGrid groups={groups} value={scopes} mono onChange={setScopes} />
+					<span class="ui-help">{t('auth.tokens.form.selected', {
+						selected: scopes.length,
+						total: props.availableScopes.length,
+					})}</span>
+				</div>
+			</div>
+		</div>
+		<div class="ui-drawer__foot">
+			<small>{t('auth.tokens.form.secretOnce')}</small>
+			<div class="ui-form__actions">
+				<Button onClick={props.onCancel}>{t('auth.common.cancel')}</Button>
+				<Button
+					variant="primary"
+					type="submit"
+					disabled={props.busy || scopes.length === 0}
+				>
+					{props.busy
+						? t('auth.tokens.form.creating')
+						: t('auth.tokens.form.create')}
+				</Button>
+			</div>
+		</div>
+	</form>
+}

package/modules/auth/src/client/tokens/ApiTokenSecret.tsrx

@@ -0,0 +1,35 @@
+import { t } from '@flowdular/sdk/client';
+import { Button, Icon } from '@flowdular/sdk/ui';
+
+export interface ApiTokenSecretProps {
+	readonly label: string;
+	readonly token: string;
+	readonly onDone: () => void;
+}
+
+export function ApiTokenSecret(props: ApiTokenSecretProps) @{
+	<div class="ui-drawer__form">
+		<div class="ui-drawer__body">
+			<div class="token-secret">
+				<span class="token-secret__icon">
+					<Icon name="key" size={18} />
+				</span>
+				<b>{t('auth.tokens.secret.ready', { label: props.label })}</b>
+				<p>{t('auth.tokens.secret.copyNow')}</p>
+				<code>{props.token}</code>
+				<Button
+					variant="primary"
+					onClick={() => void navigator.clipboard?.writeText(props.token).catch(
+						() => undefined,
+					)}
+				>{t('auth.tokens.secret.copy')}</Button>
+			</div>
+		</div>
+		<div class="ui-drawer__foot">
+			<small>{t('auth.tokens.secret.store')}</small>
+			<div class="ui-form__actions">
+				<Button onClick={props.onDone}>{t('auth.common.done')}</Button>
+			</div>
+		</div>
+	</div>
+}

package/modules/auth/src/client/tokens/ApiTokensView.tsrx

@@ -0,0 +1,216 @@
+import { useEffect, useMemo } from 'octane';
+import { activeLocale, t } from '@flowdular/sdk/client';
+import {
+	Alert,
+	Button,
+	Drawer,
+	Icon,
+	PageHeader,
+	SearchField,
+	TableCard,
+} from '@flowdular/sdk/ui';
+import { useValue } from 'segment-state';
+import {
+	createApiToken,
+	loadApiTokens,
+	revokeApiToken,
+	type CreateApiTokenRequest,
+} from './api.ts';
+import { ApiTokenForm } from './ApiTokenForm.tsrx';
+import { ApiTokenSecret } from './ApiTokenSecret.tsrx';
+import { apiTokenColumns } from './token-columns.tsrx';
+import { createApiTokenClientState, tokenState } from './state.ts';
+import '../auth.css';
+
+export interface ApiTokensViewProps {
+	readonly csrfToken: string;
+}
+
+function message(error: unknown, fallback: string): string {
+	return error instanceof Error ? error.message : fallback;
+}
+
+export function ApiTokensView(props: ApiTokensViewProps) @{
+	const tokens = useMemo(() => createApiTokenClientState(), []);
+	const [records] = useValue(tokens.state.tokens);
+	const [availableScopes] = useValue(tokens.state.availableScopes);
+	const [issuedToken, setIssuedToken] = useValue(tokens.state.issuedToken);
+	const [issuedLabel, setIssuedLabel] = useValue(tokens.state.issuedLabel);
+	const [status, setStatus] = useValue(tokens.state.status);
+	const [error, setError] = useValue(tokens.state.error);
+	const [query, setQuery] = useValue(tokens.state.query);
+	const [formOpen, setFormOpen] = useValue(tokens.state.formOpen);
+	const [formSession, setFormSession] = useValue(tokens.state.formSession);
+	const now = Date.now();
+	const active = records.filter(
+		(record) => tokenState(record, now) === 'active',
+	);
+	const columns = apiTokenColumns(now);
+	const locale = activeLocale();
+	const term = query.trim().toLocaleLowerCase(locale);
+	const visible =
+		term === ''
+			? records
+			: records.filter(
+					(record) =>
+						record.label.toLocaleLowerCase(locale).includes(term) ||
+							record.scopes.some((scope) => scope.includes(term)),
+				);
+
+	const refresh = async () => {
+		setStatus('loading');
+		setError('');
+		try {
+			const snapshot = await loadApiTokens();
+			tokens.store.act((transaction) => {
+				transaction.set(tokens.state.tokens, snapshot.tokens);
+				transaction.set(
+					tokens.state.availableScopes,
+					[...snapshot.availableScopes].sort(),
+				);
+			}, 'auth/tokens-loaded');
+		} catch (loadError) {
+			setError(message(loadError, t('auth.tokens.error.load')));
+		} finally {
+			setStatus('idle');
+		}
+	};
+
+	useEffect(() => {
+		void refresh();
+	}, []);
+
+	const openForm = () => {
+		setIssuedToken('');
+		setFormSession((current) => current + 1);
+		setFormOpen(true);
+	};
+
+	const closeForm = () => {
+		setFormOpen(false);
+		setIssuedToken('');
+	};
+
+	const submit = async (input: CreateApiTokenRequest) => {
+		setStatus('submitting');
+		setError('');
+		try {
+			const issued = await createApiToken(input, props.csrfToken);
+			setIssuedToken(issued.token);
+			setIssuedLabel(issued.record.label);
+			await refresh();
+		} catch (createError) {
+			setError(message(createError, t('auth.tokens.error.create')));
+			setStatus('idle');
+		}
+	};
+
+	const revoke = async (id: string) => {
+		setStatus('submitting');
+		setError('');
+		try {
+			await revokeApiToken(id, props.csrfToken);
+			await refresh();
+		} catch (revokeError) {
+			setError(message(revokeError, t('auth.tokens.error.revoke')));
+			setStatus('idle');
+		}
+	};
+
+	<div class="ui-view">
+		<PageHeader
+			eyebrow={t('auth.common.administration')}
+			title={t('auth.tokens.title')}
+			description={t('auth.tokens.description')}
+		>
+			<Button size="sm" onClick={() => void refresh()}>
+				<Icon name="refresh" size={14} />
+				{t('auth.common.refresh')}
+			</Button>
+			<Button
+				size="sm"
+				variant="primary"
+				disabled={availableScopes.length === 0}
+				onClick={openForm}
+			>
+				<Icon name="plus" size={14} />
+				{t('auth.tokens.new')}
+			</Button>
+		</PageHeader>
+		@if (error) {
+			<Alert>{error}</Alert>
+		}
+		<TableCard
+			title={t('auth.tokens.table.title')}
+			count={t('auth.tokens.table.count', {
+				active: active.length,
+				total: records.length,
+			})}
+			search={<SearchField
+				value={query}
+				placeholder={t('auth.tokens.search.placeholder')}
+				label={t('auth.tokens.search.label')}
+				onInput={setQuery}
+			/>}
+			caption={t('auth.tokens.table.caption')}
+			columns={columns}
+			rows={visible}
+			rowKey={(token) => token.id}
+			status={status === 'loading' && records.length === 0 ? 'loading' : 'idle'}
+			loadingLabel={t('auth.tokens.loading')}
+			filtered={term !== ''}
+			empty={{
+				icon: 'key',
+				title: t('auth.tokens.empty.title'),
+				hint: t('auth.tokens.empty.hint'),
+			}}
+			emptyFiltered={{
+				icon: 'key',
+				title: t('auth.tokens.empty.filteredTitle'),
+				hint: t('auth.tokens.empty.filteredHint'),
+			}}
+			actionsLabel={t('auth.common.actions')}
+			actions={(token) => token.revokedAt === null
+				? [
+						{
+							id: 'revoke',
+							label: t('auth.tokens.revoke'),
+							icon: 'x',
+							tone: 'danger',
+							disabled: status === 'submitting',
+							onSelect: () => void revoke(token.id),
+						},
+					]
+				: []}
+			noteIcon="shield"
+			note={t('auth.tokens.note')}
+		/>
+		<Drawer
+			open={formOpen}
+			title={issuedToken
+				? t('auth.tokens.drawer.createdTitle')
+				: t('auth.tokens.drawer.newTitle')}
+			subtitle={issuedToken
+				? t('auth.tokens.drawer.once')
+				: t('auth.tokens.drawer.subtitle')}
+			width="lg"
+			onClose={closeForm}
+		>
+			@if (issuedToken) {
+				<ApiTokenSecret
+					label={issuedLabel}
+					token={issuedToken}
+					onDone={closeForm}
+				/>
+			} @else {
+				<ApiTokenForm
+					key={'token-form-' + formSession}
+					availableScopes={availableScopes}
+					busy={status === 'submitting'}
+					onCancel={closeForm}
+					onSubmit={(input) => void submit(input)}
+				/>
+			}
+		</Drawer>
+	</div>
+}

package/modules/auth/src/client/tokens/api.ts

@@ -0,0 +1,59 @@
+import type { ApiTokenRecord, IssuedApiToken } from '../../domain/types.ts';
+import { t } from '@flowdular/sdk/client/i18n';
+
+interface ErrorEnvelope {
+	readonly error?: { readonly message?: string };
+}
+
+export interface ApiTokenSnapshot {
+	readonly tokens: readonly ApiTokenRecord[];
+	readonly availableScopes: readonly string[];
+}
+
+export interface CreateApiTokenRequest {
+	readonly label: string;
+	readonly scopes: readonly string[];
+	readonly expiresAt: number | null;
+}
+
+async function payload<T>(response: Response): Promise<T> {
+	const value = (await response.json()) as T & ErrorEnvelope;
+	if (!response.ok) {
+		throw new Error(value.error?.message ?? t('auth.tokens.error.request'));
+	}
+	return value;
+}
+
+export async function loadApiTokens(): Promise<ApiTokenSnapshot> {
+	const response = await fetch('/api/auth/api-tokens', {
+		headers: { accept: 'application/json' },
+		credentials: 'same-origin',
+	});
+	return payload<ApiTokenSnapshot>(response);
+}
+
+export async function createApiToken(
+	input: CreateApiTokenRequest,
+	csrfToken: string,
+): Promise<IssuedApiToken> {
+	const response = await fetch('/api/auth/api-tokens', {
+		method: 'POST',
+		headers: { 'content-type': 'application/json', 'x-csrf-token': csrfToken },
+		credentials: 'same-origin',
+		body: JSON.stringify(input),
+	});
+	return payload<IssuedApiToken>(response);
+}
+
+export async function revokeApiToken(
+	id: string,
+	csrfToken: string,
+): Promise<ApiTokenRecord> {
+	const response = await fetch('/api/auth/api-tokens/revoke', {
+		method: 'POST',
+		headers: { 'content-type': 'application/json', 'x-csrf-token': csrfToken },
+		credentials: 'same-origin',
+		body: JSON.stringify({ id }),
+	});
+	return (await payload<{ readonly token: ApiTokenRecord }>(response)).token;
+}

package/modules/auth/src/client/tokens/state.ts

@@ -0,0 +1,26 @@
+import { cell, createStore } from 'segment-state';
+import type { ApiTokenRecord } from '../../domain/types.ts';
+
+export function createApiTokenClientState() {
+	const store = createStore({
+		tokens: cell<readonly ApiTokenRecord[]>([]),
+		availableScopes: cell<readonly string[]>([]),
+		issuedToken: '',
+		issuedLabel: '',
+		status: cell<'idle' | 'loading' | 'submitting'>('idle'),
+		error: '',
+		query: '',
+		formOpen: false,
+		formSession: 0,
+	});
+	return { store, state: store.state };
+}
+
+export function tokenState(
+	token: ApiTokenRecord,
+	now: number,
+): 'active' | 'expired' | 'revoked' {
+	if (token.revokedAt !== null) return 'revoked';
+	if (token.expiresAt !== null && token.expiresAt <= now) return 'expired';
+	return 'active';
+}

package/modules/auth/src/client/tokens/token-columns.tsrx

@@ -0,0 +1,64 @@
+import { activeLocale, t } from '@flowdular/sdk/client';
+import { Tag, type TableColumn } from '@flowdular/sdk/ui';
+import type { ApiTokenRecord } from '../../domain/types.ts';
+import { tokenState } from './state.ts';
+
+function tone(state: string): 'success' | 'warning' | 'neutral' {
+	if (state === 'active') return 'success';
+	return state === 'expired' ? 'warning' : 'neutral';
+}
+
+function stamp(value: number | null): string {
+	return value === null
+		? t('auth.common.never')
+		: new Intl.DateTimeFormat(activeLocale(), {
+				dateStyle: 'medium',
+				timeStyle: 'short',
+			}).format(value);
+}
+
+function identity(token: ApiTokenRecord): string {
+	const count = token.scopes.length;
+	return token.prefix + '… · ' +
+		t(count === 1 ? 'auth.tokens.scope.one' : 'auth.tokens.scope.other', {
+			count: new Intl.NumberFormat(activeLocale()).format(count),
+		});
+}
+
+export function apiTokenColumns(
+	now: number,
+): readonly TableColumn<ApiTokenRecord>[] {
+	return [
+		{
+			key: 'token',
+			header: t('auth.tokens.column.token'),
+			width: '38%',
+			cell: (token) => <span class="ui-cell">
+				<b>{token.label}</b>
+				<small class="ui-mono">{identity(token)}</small>
+			</span>,
+		},
+		{
+			key: 'status',
+			header: t('auth.tokens.column.status'),
+			width: '30%',
+			cell: (token) => <span class="ui-table__state">
+				<Tag tone={tone(tokenState(token, now))} dot>{t(
+					'auth.tokens.status.' + tokenState(token, now),
+				)}</Tag>
+				<small>
+					{token.expiresAt === null
+						? t('auth.tokens.form.noExpiry')
+						: t('auth.tokens.until', { date: stamp(token.expiresAt) })}
+				</small>
+			</span>,
+		},
+		{
+			key: 'lastUsed',
+			header: t('auth.tokens.column.lastUsed'),
+			width: '22%',
+			numeric: true,
+			cell: (token) => stamp(token.lastUsedAt),
+		},
+	];
+}