@flowdular/sdk 0.1.0

package/modules/auth/src/client/security/SecurityView.tsrx

@@ -0,0 +1,253 @@
+import { useEffect, useMemo } from 'octane';
+import {
+	Alert,
+	Button,
+	EmptyState,
+	FormField,
+	Icon,
+	PageHeader,
+	Tag,
+} from '@flowdular/sdk/ui';
+import { t } from '@flowdular/sdk/client';
+import { cell, createStore, useValue } from 'segment-state';
+import {
+	AuthClientApiError,
+	confirmMfa,
+	enrollMfa,
+	loadMfaStatus,
+	type MfaEnrollmentPayload,
+	type MfaStatusPayload,
+} from '../api.ts';
+
+export interface SecurityViewProps {
+	readonly csrfToken: string;
+}
+
+type SecurityStatus = 'loading' | 'idle' | 'submitting' | 'denied' | 'error';
+
+function createSecurityState() {
+	const store = createStore({
+		status: cell<SecurityStatus>('loading'),
+		factor: cell<MfaStatusPayload | null>(null),
+		enrollment: cell<MfaEnrollmentPayload | null>(null),
+		error: '',
+		notice: '',
+	});
+	return { store, state: store.state };
+}
+
+function submittedCode(event: SubmitEvent): string {
+	const value = new FormData(event.currentTarget as HTMLFormElement).get(
+		'code',
+	);
+	return typeof value === 'string' ? value : '';
+}
+
+export function SecurityView(props: SecurityViewProps) @{
+	const client = useMemo(() => createSecurityState(), []);
+	const [status, setStatus] = useValue(client.state.status);
+	const [factor, setFactor] = useValue(client.state.factor);
+	const [enrollment, setEnrollment] = useValue(client.state.enrollment);
+	const [error, setError] = useValue(client.state.error);
+	const [notice, setNotice] = useValue(client.state.notice);
+
+	const refresh = async () => {
+		setStatus('loading');
+		setError('');
+		try {
+			setFactor(await loadMfaStatus());
+			setStatus('idle');
+		} catch (loadError) {
+			setError(
+				loadError instanceof Error
+					? loadError.message
+					: t('auth.security.mfa.errorLoad'),
+			);
+			setStatus(
+				loadError instanceof AuthClientApiError &&
+				(loadError.status === 401 || loadError.status === 403)
+					? 'denied'
+					: 'error',
+			);
+		}
+	};
+
+	useEffect(() => {
+		void refresh();
+	}, []);
+
+	const beginEnrollment = async () => {
+		setStatus('submitting');
+		setError('');
+		setNotice('');
+		try {
+			setEnrollment(await enrollMfa(props.csrfToken));
+			setStatus('idle');
+		} catch (enrollError) {
+			setError(
+				enrollError instanceof Error
+					? enrollError.message
+					: t('auth.security.mfa.errorEnroll'),
+			);
+			setStatus('idle');
+		}
+	};
+
+	const confirm = async (event: SubmitEvent) => {
+		event.preventDefault();
+		if (!enrollment) return;
+		setStatus('submitting');
+		setError('');
+		try {
+			await confirmMfa(submittedCode(event), props.csrfToken);
+			setFactor({ available: true, enrolled: true, pending: false });
+			setEnrollment({
+				secret: '',
+				otpauthUrl: '',
+				recoveryCodes: enrollment.recoveryCodes,
+			});
+			setNotice(t('auth.security.mfa.enabled'));
+			setStatus('idle');
+		} catch (confirmError) {
+			setError(
+				confirmError instanceof Error
+					? confirmError.message
+					: t('auth.security.mfa.errorConfirm'),
+			);
+			setStatus('idle');
+		}
+	};
+
+	<div class="ui-view">
+		<PageHeader
+			eyebrow={t('auth.security.page.eyebrow')}
+			title={t('auth.security.page.title')}
+			description={t('auth.security.page.description')}
+		>
+			<Button
+				size="sm"
+				onClick={() => void refresh()}
+				disabled={status === 'loading'}
+			>
+				<Icon name="refresh" size={14} />
+				{t('auth.security.action.refresh')}
+			</Button>
+		</PageHeader>
+		@if (status === 'denied') {
+			<section class="ui-card">
+				<EmptyState icon="shield" title={t('auth.security.denied.title')}>{t(
+					'auth.security.denied.description',
+				)}</EmptyState>
+			</section>
+		} @else if (status === 'loading' && factor === null) {
+			<section class="ui-card">
+				<p class="ui-table__empty">{t('auth.security.mfa.loading')}</p>
+			</section>
+		} @else {
+			<>
+				@if (error) {
+					<Alert>{error}</Alert>
+				}
+				@if (notice) {
+					<Alert tone="info">{notice}</Alert>
+				}
+				<section class="ui-card">
+					<div class="ui-card__head">
+						<span class="ui-card__title">
+							{t('auth.security.mfa.title')}
+							<small>{t('auth.security.mfa.description')}</small>
+						</span>
+						@if (factor?.enrolled) {
+							<Tag tone="success" dot>{t('auth.security.mfa.active')}</Tag>
+						}
+					</div>
+					<div class="ui-card__body auth-security-body">
+						@if (!factor?.available) {
+							<EmptyState
+								icon="shield"
+								title={t('auth.security.mfa.unavailableTitle')}
+							>{t('auth.security.mfa.unavailableDescription')}</EmptyState>
+						} @else if (enrollment) {
+							<div class="auth-security-setup">
+								@if (enrollment.secret) {
+									<>
+										<p>{t('auth.security.mfa.setupDescription')}</p>
+										<a
+											class="ui-btn ui-btn--secondary"
+											href={enrollment.otpauthUrl}
+										>{t('auth.security.mfa.openAuthenticator')}</a>
+										<div>
+											<small class="ui-label">{t(
+												'auth.security.mfa.manualSecret',
+											)}</small>
+											<code
+												class="auth-security-secret"
+											>{enrollment.secret}</code>
+										</div>
+									</>
+								}
+								<div>
+									<strong>{t('auth.security.mfa.recoveryCodesTitle')}</strong>
+									<p>{t('auth.security.mfa.recoveryCodes')}</p>
+									<ul class="auth-security-codes">
+										@for (const recoveryCode of enrollment.recoveryCodes; key recoveryCode) {
+											<li>
+												<code>{recoveryCode}</code>
+											</li>
+										}
+									</ul>
+								</div>
+								@if (enrollment.secret) {
+									<form class="auth-security-confirm" onSubmit={confirm}>
+										<FormField label={t('auth.security.mfa.code')} required>
+											<input
+												class="ui-input ui-mono"
+												name="code"
+												inputmode="numeric"
+												autocomplete="one-time-code"
+												pattern="[0-9]{6}"
+												maxlength={6}
+												required
+											/>
+										</FormField>
+										<Button
+											variant="primary"
+											type="submit"
+											disabled={status === 'submitting'}
+										>
+											{status === 'submitting'
+												? t('auth.common.wait')
+												: t('auth.security.mfa.confirm')}
+										</Button>
+									</form>
+								} @else {
+									<Button onClick={() => setEnrollment(null)}>{t(
+										'auth.security.mfa.codesSaved',
+									)}</Button>
+								}
+							</div>
+						} @else if (factor?.enrolled) {
+							<EmptyState
+								icon="shield"
+								title={t('auth.security.mfa.enabledTitle')}
+							>{t('auth.security.mfa.enabledDescription')}</EmptyState>
+						} @else {
+							<div class="auth-security-enable">
+								<p>{t('auth.security.mfa.enableDescription')}</p>
+								<Button
+									variant="primary"
+									disabled={status === 'submitting'}
+									onClick={() => void beginEnrollment()}
+								>
+									{status === 'submitting'
+										? t('auth.common.wait')
+										: t('auth.security.mfa.start')}
+								</Button>
+							</div>
+						}
+					</div>
+				</section>
+			</>
+		}
+	</div>
+}

package/modules/auth/src/client/settings/PreferencesCard.tsrx

@@ -0,0 +1,65 @@
+import { useMemo } from 'octane';
+import { t } from '@flowdular/sdk/client';
+import { Button, SettingRow } from '@flowdular/sdk/ui';
+import { cell, createStore, useValue } from 'segment-state';
+import type { LocaleSetting } from './api.ts';
+
+export interface PreferencesCardProps {
+	readonly locale: LocaleSetting;
+	readonly canManage: boolean;
+	readonly busy: boolean;
+	readonly result: { readonly ok: boolean; readonly message: string } | null;
+	readonly onSave: (locale: string) => void;
+}
+
+/* Workspace defaults for members. The locale list comes from the workspace
+   configuration; the value is the auth.core defaultLocale tenant setting. */
+export function PreferencesCard(props: PreferencesCardProps) @{
+	const draft = useMemo(
+		() => createStore({ value: cell(props.locale.value) }),
+		[
+			props.locale.value,
+		],
+	);
+	const [value, setValue] = useValue(draft.state.value);
+	const dirty = value !== props.locale.value;
+
+	<section class="ui-card">
+		<div class="ui-card__head">
+			<span class="ui-card__title">
+				{t('auth.settings.preferences.title')}
+				<small>{t('auth.settings.preferences.subtitle')}</small>
+			</span>
+		</div>
+		<SettingRow
+			label={t('auth.settings.locale.label')}
+			description={t('auth.settings.locale.description') +
+				(props.locale.hasValue
+					? ' ' + t('auth.settings.locale.default', {
+							locale: props.locale.defaultValue,
+						})
+					: '')}
+			status={props.result}
+		>
+			<select
+				class="ui-select"
+				aria-label={t('auth.settings.locale.label')}
+				value={value}
+				disabled={!props.canManage || props.busy}
+				onInput={(event) => setValue(
+					(event.currentTarget as HTMLSelectElement).value,
+				)}
+			>
+				@for (const option of props.locale.options; key option) {
+					<option value={option}>{option}</option>
+				}
+			</select>
+			<Button
+				size="sm"
+				variant="primary"
+				disabled={!props.canManage || props.busy || !dirty}
+				onClick={() => props.onSave(value)}
+			>{t('auth.common.save')}</Button>
+		</SettingRow>
+	</section>
+}

package/modules/auth/src/client/settings/SettingsView.tsrx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo } from 'octane';
+import { t } from '@flowdular/sdk/client';
+import { Alert, Button, EmptyState, Icon, PageHeader } from '@flowdular/sdk/ui';
+import { cell, createStore, useValue } from 'segment-state';
+import {
+	ApiError,
+	loadDefaultLocale,
+	renameWorkspace,
+	updateDefaultLocale,
+	type LocaleSetting,
+} from './api.ts';
+import { PreferencesCard } from './PreferencesCard.tsrx';
+import { WorkspaceCard } from './WorkspaceCard.tsrx';
+
+export interface SettingsViewProps {
+	readonly csrfToken: string;
+	readonly canManage: boolean;
+}
+
+/* Fired after a change the shell shows (the workspace name); the
+   authentication root reloads the session so the principal stays current. */
+export const SESSION_REFRESH_EVENT = 'flowdular:session-refresh';
+
+type SettingsStatus = 'loading' | 'idle' | 'denied' | 'error';
+
+interface RowResult {
+	readonly ok: boolean;
+	readonly message: string;
+}
+
+interface WorkspaceIdentity {
+	readonly name: string;
+	readonly slug: string;
+}
+
+function createSettingsState() {
+	const store = createStore({
+		workspace: cell<WorkspaceIdentity | null>(null),
+		locale: cell<LocaleSetting | null>(null),
+		status: cell<SettingsStatus>('loading'),
+		error: '',
+		busyKey: cell<string | null>(null),
+		workspaceResult: cell<RowResult | null>(null),
+		localeResult: cell<RowResult | null>(null),
+	});
+	return { store, state: store.state };
+}
+
+async function loadWorkspace(): Promise<WorkspaceIdentity | null> {
+	const response = await fetch('/api/auth/session', {
+		headers: { accept: 'application/json' },
+		credentials: 'same-origin',
+	});
+	if (!response.ok) return null;
+	const body = await response.json() as {
+		principal: {
+			tenantId: string;
+			tenants: { tenantId: string; name: string; slug: string }[];
+		};
+	};
+	const tenant = body.principal.tenants.find(
+		(entry) => entry.tenantId === body.principal.tenantId,
+	);
+	return tenant ? { name: tenant.name, slug: tenant.slug } : null;
+}
+
+function message(error: unknown, fallback: string): string {
+	return error instanceof Error ? error.message : fallback;
+}
+
+/* Workspace-only settings: identity and defaults of this organization. A
+   module's declared settings are edited in its drawer under
+   Administration > Modules, served by system.core. */
+export function SettingsView(props: SettingsViewProps) @{
+	const client = useMemo(() => createSettingsState(), []);
+	const [workspace] = useValue(client.state.workspace);
+	const [locale] = useValue(client.state.locale);
+	const [status, setStatus] = useValue(client.state.status);
+	const [error, setError] = useValue(client.state.error);
+	const [busyKey, setBusyKey] = useValue(client.state.busyKey);
+	const [workspaceResult] = useValue(client.state.workspaceResult);
+	const [localeResult] = useValue(client.state.localeResult);
+
+	const refresh = async () => {
+		setStatus('loading');
+		setError('');
+		try {
+			const [loadedLocale, identity] = await Promise.all([
+				loadDefaultLocale(),
+				loadWorkspace(),
+			]);
+			client.store.act((transaction) => {
+				transaction.set(client.state.locale, loadedLocale);
+				transaction.set(client.state.workspace, identity);
+				transaction.set(client.state.status, 'idle');
+			}, 'settings/loaded');
+		} catch (loadError) {
+			setError(message(loadError, t('auth.settings.error.load')));
+			setStatus(
+				loadError instanceof ApiError && loadError.status === 403
+					? 'denied'
+					: 'error',
+			);
+		}
+	};
+
+	useEffect(() => {
+		void refresh();
+	}, []);
+
+	const saveLocale = async (value: string) => {
+		setBusyKey('locale');
+		try {
+			const updated = await updateDefaultLocale(value, props.csrfToken);
+			client.store.act((transaction) => {
+				transaction.set(client.state.locale, updated);
+				transaction.set(client.state.localeResult, {
+					ok: true,
+					message: t('auth.common.saved'),
+				});
+				transaction.set(client.state.busyKey, null);
+			}, 'settings/locale-saved');
+		} catch (saveError) {
+			client.store.act((transaction) => {
+				transaction.set(client.state.localeResult, {
+					ok: false,
+					message: message(saveError, t('auth.settings.error.locale')),
+				});
+				transaction.set(client.state.busyKey, null);
+			}, 'settings/locale-save-failed');
+		}
+	};
+
+	const rename = async (name: string) => {
+		setBusyKey('workspace');
+		try {
+			const tenant = await renameWorkspace(name, props.csrfToken);
+			client.store.act((transaction) => {
+				transaction.set(client.state.workspace, {
+					name: tenant.name,
+					slug: workspace?.slug ?? '',
+				});
+				transaction.set(client.state.workspaceResult, {
+					ok: true,
+					message: t('auth.common.saved'),
+				});
+				transaction.set(client.state.busyKey, null);
+			}, 'settings/workspace-renamed');
+			window.dispatchEvent(new Event(SESSION_REFRESH_EVENT));
+		} catch (renameError) {
+			client.store.act((transaction) => {
+				transaction.set(client.state.workspaceResult, {
+					ok: false,
+					message: message(renameError, t('auth.settings.error.rename')),
+				});
+				transaction.set(client.state.busyKey, null);
+			}, 'settings/workspace-rename-failed');
+		}
+	};
+
+	<div class="ui-view">
+		<PageHeader
+			eyebrow={t('auth.common.administration')}
+			title={t('auth.settings.title')}
+			description={t('auth.settings.description')}
+		>
+			<Button size="sm" onClick={() => void refresh()}>
+				<Icon name="refresh" size={14} />
+				{t('auth.common.refresh')}
+			</Button>
+		</PageHeader>
+		@if (status === 'denied') {
+			<section class="ui-card">
+				<EmptyState icon="shield" title={t('auth.common.accessDenied')}>{t(
+					'auth.settings.denied',
+				)}</EmptyState>
+			</section>
+		} @else if (status === 'loading' && workspace === null) {
+			<section class="ui-card">
+				<p class="ui-table__empty">{t('auth.settings.loading')}</p>
+			</section>
+		} @else {
+			<>
+				@if (status === 'error') {
+					<Alert>{error}</Alert>
+				}
+				@if (!props.canManage) {
+					<Alert tone="info">{t('auth.settings.readOnly')}</Alert>
+				}
+				@if (workspace) {
+					<WorkspaceCard
+						name={workspace.name}
+						slug={workspace.slug}
+						canManage={props.canManage}
+						busy={busyKey === 'workspace'}
+						result={workspaceResult}
+						onRename={(name) => void rename(name)}
+					/>
+				}
+				@if (locale) {
+					<PreferencesCard
+						locale={locale}
+						canManage={props.canManage}
+						busy={busyKey === 'locale'}
+						result={localeResult}
+						onSave={(value) => void saveLocale(value)}
+					/>
+				}
+			</>
+		}
+	</div>
+}

package/modules/auth/src/client/settings/WorkspaceCard.tsrx

@@ -0,0 +1,59 @@
+import { useMemo } from 'octane';
+import { t } from '@flowdular/sdk/client';
+import { Button, SettingRow } from '@flowdular/sdk/ui';
+import { cell, createStore, useValue } from 'segment-state';
+
+export interface WorkspaceCardProps {
+	readonly name: string;
+	readonly slug: string;
+	readonly canManage: boolean;
+	readonly busy: boolean;
+	readonly result: { readonly ok: boolean; readonly message: string } | null;
+	readonly onRename: (name: string) => void;
+}
+
+/* The workspace name lives on the tenant record, not in module settings, so
+   the shell and every principal keep reading one value. */
+export function WorkspaceCard(props: WorkspaceCardProps) @{
+	const draft = useMemo(() => createStore({ name: cell(props.name) }), [
+		props.name,
+	]);
+	const [name, setName] = useValue(draft.state.name);
+	const trimmed = name.trim();
+	const dirty = trimmed !== props.name && trimmed.length >= 2;
+
+	<section class="ui-card">
+		<div class="ui-card__head">
+			<span class="ui-card__title">
+				{t('auth.settings.workspace.title')}
+				<small>{t('auth.settings.workspace.subtitle')}</small>
+			</span>
+		</div>
+		<SettingRow
+			label={t('auth.settings.workspace.name')}
+			description={<>
+				{t('auth.settings.workspace.description') + ' '}
+				<code>{props.slug}</code>
+			</>}
+			status={props.result}
+		>
+			<input
+				class="ui-input"
+				aria-label={t('auth.settings.workspace.name')}
+				value={name}
+				minlength={2}
+				maxlength={120}
+				disabled={!props.canManage || props.busy}
+				onInput={(event) => setName(
+					(event.currentTarget as HTMLInputElement).value,
+				)}
+			/>
+			<Button
+				size="sm"
+				variant="primary"
+				disabled={!props.canManage || props.busy || !dirty}
+				onClick={() => props.onRename(trimmed)}
+			>{t('auth.common.save')}</Button>
+		</SettingRow>
+	</section>
+}

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

@@ -0,0 +1,115 @@
+import { t } from '@flowdular/sdk/client/i18n';
+
+export interface LocaleSetting {
+	readonly value: string;
+	readonly defaultValue: string;
+	readonly options: readonly string[];
+	readonly hasValue: boolean;
+}
+
+interface ErrorEnvelope {
+	readonly error?: { readonly message?: string };
+}
+
+/* The shape of one entry served by system.core's GET /api/settings; only the
+   fields the workspace screen reads. */
+interface WireSetting {
+	readonly key: string;
+	readonly value: unknown;
+	readonly defaultValue: unknown;
+	readonly hasValue: boolean;
+	readonly enum?: readonly string[];
+}
+
+export class ApiError extends Error {
+	readonly status: number;
+
+	constructor(status: number, message: string) {
+		super(message);
+		this.name = 'ApiError';
+		this.status = status;
+	}
+}
+
+async function payload<T>(response: Response, fallback: string): Promise<T> {
+	const value = (await response.json()) as T & ErrorEnvelope;
+	if (!response.ok) {
+		throw new ApiError(response.status, value.error?.message ?? fallback);
+	}
+	return value;
+}
+
+function localeOf(entry: WireSetting | undefined): LocaleSetting | null {
+	if (!entry) return null;
+	return {
+		value: typeof entry.value === 'string' ? entry.value : '',
+		defaultValue:
+			typeof entry.defaultValue === 'string' ? entry.defaultValue : '',
+		options: entry.enum ?? [],
+		hasValue: entry.hasValue === true,
+	};
+}
+
+/* The default locale is the auth.core defaultLocale tenant setting; it is
+   read and stored through the platform settings API served by system.core. */
+export async function loadDefaultLocale(): Promise<LocaleSetting | null> {
+	const response = await fetch('/api/settings', {
+		headers: { accept: 'application/json' },
+		credentials: 'same-origin',
+	});
+	const body = await payload<{
+		readonly modules: readonly {
+			readonly moduleId: string;
+			readonly settings: readonly WireSetting[];
+		}[];
+	}>(response, t('auth.settings.error.load'));
+	return localeOf(
+		body.modules
+			.find((module) => module.moduleId === 'auth.core')
+			?.settings.find((setting) => setting.key === 'defaultLocale'),
+	);
+}
+
+export async function updateDefaultLocale(
+	value: string | null,
+	csrfToken: string,
+): Promise<LocaleSetting | null> {
+	const response = await fetch('/api/settings/update', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+			'x-csrf-token': csrfToken,
+		},
+		credentials: 'same-origin',
+		body: JSON.stringify({
+			moduleId: 'auth.core',
+			key: 'defaultLocale',
+			value,
+		}),
+	});
+	const body = await payload<{ readonly setting: WireSetting | null }>(
+		response,
+		t('auth.settings.error.locale'),
+	);
+	return localeOf(body.setting ?? undefined);
+}
+
+export async function renameWorkspace(
+	name: string,
+	csrfToken: string,
+): Promise<{ readonly tenantId: string; readonly name: string }> {
+	const response = await fetch('/api/auth/workspace', {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json',
+			'x-csrf-token': csrfToken,
+		},
+		credentials: 'same-origin',
+		body: JSON.stringify({ name }),
+	});
+	return (
+		await payload<{
+			readonly tenant: { readonly tenantId: string; readonly name: string };
+		}>(response, t('auth.settings.error.rename'))
+	).tenant;
+}