@jeffusion/bungee-core 5.26.0 → 6.0.2

package/dist/plugins/user-auth/ui/ConnectionEditor.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { onDestroy, onMount, untrack } from 'svelte';
+  import { _, isLoading } from 'svelte-i18n';
+  import { requestPluginControl } from '$api/client';
+  import { IndustrialDialog, IndustrialToggle } from '$components/industrial';
+  import { Button } from '$components/ui/button';
+  import type { Connection, ConnectionInput, DiscoveryMetadata, LoginProvider, MicrosoftConfiguration, OidcConfiguration } from './contracts';
+
+  let {open = $bindable(), pluginName, connection, connectionId, publicOrigin, busy, error, onsave}: {
+    open: boolean; pluginName: string; connection: Connection | null; connectionId: string; publicOrigin?: string;
+    busy: boolean; error: string; onsave: (input: ConnectionInput) => Promise<void>;
+  } = $props();
+  const id = $props.id();
+  const t = (key: string) => $isLoading ? '' : $_(`plugins.user-auth.${key}`);
+  const existing = untrack(() => connection);
+  const initial = existing?.configuration;
+  const custom = existing?.provider === 'oidc' ? initial as OidcConfiguration : undefined;
+  const microsoft = existing?.provider === 'microsoft' ? initial as MicrosoftConfiguration : undefined;
+  const providers: LoginProvider[] = ['google', 'microsoft', 'github', 'oidc'];
+  const guides: Record<LoginProvider, string> = {
+    google: 'https://console.cloud.google.com/auth/clients',
+    microsoft: 'https://entra.microsoft.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade',
+    github: 'https://github.com/settings/applications/new',
+    oidc: 'https://openid.net/developers/how-connect-works/',
+  };
+  let provider = $state<LoginProvider | ''>(existing?.provider ?? '');
+  let label = $state(existing?.label ?? ''), enabled = $state(existing?.enabled ?? false);
+  let clientId = $state(existing?.clientId ?? ''), clientSecret = $state('');
+  let accountType = $state<MicrosoftConfiguration['accountType']>(microsoft?.accountType ?? 'tenant'), tenantId = $state(microsoft?.tenantId ?? '');
+  let mode = $state<OidcConfiguration['mode']>(custom?.mode ?? 'issuer');
+  let source = $state(custom?.mode === 'discovery' ? custom.discoveryUrl ?? '' : custom?.issuer ?? '');
+  let manualIssuer = $state(custom?.issuer ?? ''), authorizationEndpoint = $state(custom?.authorizationEndpoint ?? '');
+  let tokenEndpoint = $state(custom?.tokenEndpoint ?? ''), jwksUri = $state(custom?.jwksUri ?? '');
+  let tokenEndpointAuthMethod = $state<'client_secret_basic' | 'client_secret_post'>(custom?.tokenEndpointAuthMethod ?? 'client_secret_basic');
+  let idTokenSigningAlg = $state<'RS256' | 'PS256' | 'ES256'>(custom?.idTokenSigningAlg ?? 'RS256');
+  let scopes = $state(existing?.scopes.join(' ') ?? 'openid profile email');
+  let metadata = $state<DiscoveryMetadata | null>(null), metadataKey = $state(''), discovering = $state(false), discoveryError = $state(''), localError = $state(''), copied = $state(false);
+  let activeRequest: AbortController | undefined, requestVersion = 0, destroyed = false;
+  const callback = $derived(publicOrigin ? `${publicOrigin.replace(/\/$/, '')}/api/auth/login/callback/${encodeURIComponent(connectionId)}` : '');
+  const currentKey = $derived(`${provider}:${mode}:${source.trim()}`);
+  const metadataCurrent = $derived(metadata !== null && metadataKey === currentKey);
+  const urlFields = $derived([manualIssuer, authorizationEndpoint, tokenEndpoint, jwksUri]);
+  const configurationValid = $derived(provider === 'microsoft'
+    ? accountType !== 'tenant' || /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(tenantId.trim())
+    : provider !== 'oidc' || (mode === 'manual' ? urlFields.every(validUrl) : metadataCurrent));
+  const canSave = $derived(!!provider && !!label.trim() && !!clientId.trim() && (!!clientSecret || !!existing?.hasSecret) && configurationValid && (provider !== 'oidc' || scopes.split(/\s+/).includes('openid')) && (!enabled || !!publicOrigin));
+
+  function validUrl(value: string): boolean {
+    try { const url = new URL(value); return !url.username && !url.password && !url.hash && (url.protocol === 'https:' || (url.protocol === 'http:' && ['localhost', '127.0.0.1', '[::1]'].includes(url.hostname))); }
+    catch { return false; }
+  }
+  function cancelDiscovery() { requestVersion++; activeRequest?.abort(); activeRequest = undefined; discovering = false; metadata = null; metadataKey = ''; discoveryError = ''; }
+  function choose(value: LoginProvider) { if (existing || busy) return; cancelDiscovery(); provider = value; localError = ''; }
+  function changeMode(value: string) { cancelDiscovery(); mode = value as OidcConfiguration['mode']; source = ''; localError = ''; }
+  function invalidateSource() { cancelDiscovery(); localError = ''; }
+  async function discover() {
+    if (!open || provider !== 'oidc' || mode === 'manual' || busy) return;
+    const url = source.trim();
+    if (!validUrl(url)) { cancelDiscovery(); if (url) discoveryError = t('connections.invalidUrl'); return; }
+    if (metadataCurrent || discovering) return;
+    cancelDiscovery();
+    const version = requestVersion, key = currentKey, controller = new AbortController(); activeRequest = controller; discovering = true;
+    try {
+      const result = await requestPluginControl<DiscoveryMetadata>(pluginName, '/login-connections/discover', 'POST', {mode, url}, controller.signal);
+      if (destroyed || !open || controller.signal.aborted || version !== requestVersion || key !== currentKey) return;
+      if (![result.issuer, result.authorizationEndpoint, result.tokenEndpoint, result.jwksUri, result.discoveryUrl].every(validUrl)) throw new Error('oidc_metadata_invalid');
+      metadata = result; metadataKey = key;
+    } catch { if (!destroyed && open && !controller.signal.aborted && version === requestVersion && key === currentKey) discoveryError = t('connections.discoveryFailed'); }
+    finally { if (version === requestVersion) { discovering = false; activeRequest = undefined; } }
+  }
+  async function copyCallback() {
+    try { await navigator.clipboard.writeText(callback); copied = true; }
+    catch { localError = t('connections.copyFailed'); }
+  }
+  async function save(event: SubmitEvent) {
+    event.preventDefault(); if (busy || !canSave || !provider) return;
+    let configuration: Connection['configuration'] = {};
+    if (provider === 'microsoft') configuration = {accountType, ...(accountType === 'tenant' ? {tenantId: tenantId.trim()} : {})};
+    if (provider === 'oidc') {
+      if (mode === 'manual') configuration = {mode, issuer: manualIssuer.trim(), authorizationEndpoint: authorizationEndpoint.trim(), tokenEndpoint: tokenEndpoint.trim(), jwksUri: jwksUri.trim(), tokenEndpointAuthMethod, idTokenSigningAlg};
+      else if (metadataCurrent && metadata) configuration = mode === 'issuer' ? {mode, issuer: source.trim()} : {mode, issuer: metadata.issuer, discoveryUrl: source.trim()};
+      else return;
+    }
+    await onsave({id: connectionId, label: label.trim(), enabled, provider, clientId: clientId.trim(), configuration,
+      ...(existing ? {version: existing.version} : {}), ...(clientSecret ? {clientSecret} : {}), ...(provider === 'oidc' ? {scopes: scopes.split(/\s+/).filter(Boolean)} : {})});
+  }
+  onMount(() => { if (existing?.provider === 'oidc' && mode !== 'manual') void discover(); });
+  onDestroy(() => { destroyed = true; cancelDiscovery(); clientSecret = ''; });
+</script>
+
+{#snippet body()}
+  <form id={id + '-connection'} class="space-y-4" onsubmit={save} aria-label={t('connections.editor')}>
+    <div class="space-y-2">
+      <p class="nx-field-label" id={id + '-provider-label'}>{t('connections.provider')}</p>
+      {#if existing}<p class="text-sm text-zinc-200">{t('providers.' + existing.provider)}</p><p class="text-sm text-zinc-400">{t('connections.providerFixed')}</p>
+      {:else}<div class="grid grid-cols-2 gap-2" role="group" aria-labelledby={id + '-provider-label'}>{#each providers as value}<Button type="button" variant={provider === value ? 'default' : 'outline'} disabled={busy} aria-pressed={provider === value} onclick={() => choose(value)}>{t('providers.' + value)}</Button>{/each}</div>{/if}
+    </div>
+    <div class="space-y-2">
+      <label class="grid gap-1"><span class="nx-field-label">{t('connections.callback')}</span><input class="nx-input font-mono" readonly value={callback} data-testid="login-callback" /></label>
+      {#if callback}<Button type="button" variant="ghost" onclick={copyCallback}>{t(copied ? 'connections.copied' : 'connections.copy')}</Button>{:else}<p role="alert" class="text-sm text-red-400">{t('connections.missingOrigin')}</p>{/if}
+    </div>
+    {#if provider}
+      <div class="space-y-1"><a class="text-sm text-nexus-300 underline" href={guides[provider]} target="_blank" rel="noreferrer">{t(provider === 'oidc' ? 'connections.oidcGuide' : 'connections.createApp')}</a><p class="text-sm text-zinc-400">{t('guides.' + provider)}</p></div>
+      <label class="grid gap-1"><span class="nx-field-label">{t('connections.label')}</span><input class="nx-input" required bind:value={label} disabled={busy} /></label>
+      {#if provider === 'microsoft'}
+        <label class="grid gap-1"><span class="nx-field-label">{t('connections.accountType')}</span><select class="nx-input" bind:value={accountType} disabled={busy}>{#each ['tenant', 'organizations', 'consumers', 'common'] as value}<option value={value}>{t('accounts.' + value)}</option>{/each}</select></label>
+        {#if accountType === 'tenant'}<label class="grid gap-1"><span class="nx-field-label">Tenant ID</span><input class="nx-input" required bind:value={tenantId} disabled={busy} placeholder="00000000-0000-0000-0000-000000000000" pattern={'[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}'} /></label>{/if}
+      {/if}
+      {#if provider === 'oidc'}
+        <label class="grid gap-1"><span class="nx-field-label">{t('connections.mode')}</span><select class="nx-input" value={mode} onchange={event => changeMode(event.currentTarget.value)} disabled={busy}><option value="issuer">{t('connections.modeIssuer')}</option><option value="discovery">{t('connections.modeDiscovery')}</option><option value="manual">{t('connections.modeManual')}</option></select></label>
+        {#if mode !== 'manual'}
+          <label class="grid gap-1"><span class="nx-field-label">{t(mode === 'issuer' ? 'connections.issuer' : 'connections.discoveryUrl')}</span><input class="nx-input" required type="url" bind:value={source} oninput={invalidateSource} onblur={discover} disabled={busy} /></label>
+          {#if discovering}<p class="text-sm text-zinc-400" role="status">{t('connections.discovering')}</p>{/if}
+          {#if discoveryError}<p role="alert" class="text-sm text-red-400">{discoveryError}</p>{/if}
+          {#if metadataCurrent && metadata}<dl class="space-y-2" data-testid="discovered-metadata">{#each [['connections.issuer', metadata.issuer], ['connections.authorizationEndpoint', metadata.authorizationEndpoint], ['connections.tokenEndpoint', metadata.tokenEndpoint], ['connections.jwksUri', metadata.jwksUri]] as [key, value]}<div><dt class="nx-field-label">{t(key)}</dt><dd class="break-all text-sm text-zinc-200">{value}</dd></div>{/each}</dl>{/if}
+        {:else}
+          <label class="grid gap-1"><span class="nx-field-label">{t('connections.issuer')}</span><input class="nx-input" required type="url" bind:value={manualIssuer} disabled={busy} /></label>
+          <label class="grid gap-1"><span class="nx-field-label">{t('connections.authorizationEndpoint')}</span><input class="nx-input" required type="url" bind:value={authorizationEndpoint} disabled={busy} /></label>
+          <label class="grid gap-1"><span class="nx-field-label">{t('connections.tokenEndpoint')}</span><input class="nx-input" required type="url" bind:value={tokenEndpoint} disabled={busy} /></label>
+          <label class="grid gap-1"><span class="nx-field-label">{t('connections.jwksUri')}</span><input class="nx-input" required type="url" bind:value={jwksUri} disabled={busy} /></label>
+          <label class="grid gap-1"><span class="nx-field-label">{t('connections.authMethod')}</span><select class="nx-input" bind:value={tokenEndpointAuthMethod} disabled={busy}><option value="client_secret_basic">HTTP Basic</option><option value="client_secret_post">POST</option></select></label>
+          <label class="grid gap-1"><span class="nx-field-label">{t('connections.signingAlg')}</span><select class="nx-input" bind:value={idTokenSigningAlg} disabled={busy}>{#each ['RS256', 'PS256', 'ES256'] as value}<option value={value}>{value}</option>{/each}</select></label>
+        {/if}
+      {/if}
+      {#if provider !== 'oidc' || mode === 'manual' || metadataCurrent}
+        <label class="grid gap-1"><span class="nx-field-label">{t('connections.clientId')}</span><input class="nx-input" required bind:value={clientId} disabled={busy} /></label>
+        <label class="grid gap-1"><span class="nx-field-label">{t('connections.secret')}</span><input class="nx-input" type="password" autocomplete="new-password" required={!existing?.hasSecret} bind:value={clientSecret} disabled={busy} placeholder={existing?.hasSecret ? t('admin.secretRetained') : ''} /></label>
+      {/if}
+      {#if provider === 'oidc'}<details><summary class="cursor-pointer text-sm text-zinc-400">{t('connections.advanced')}</summary><label class="mt-3 grid gap-1"><span class="nx-field-label">{t('connections.scopes')}</span><input class="nx-input" required bind:value={scopes} disabled={busy} /></label></details>{/if}
+      {#if existing}<div class="flex items-center gap-2"><IndustrialToggle id={id + '-enabled'} bind:checked={enabled} disabled={busy} label={t('connections.enabled')} /><label for={id + '-enabled'} class="nx-field-label cursor-pointer">{t('connections.enabled')}</label></div>{/if}
+      <p class="text-sm text-zinc-400">{t('connections.saveNote')}</p>
+    {/if}
+    {#if error || localError}<p role="alert" class="text-sm text-red-400">{error || localError}</p>{/if}
+  </form>
+{/snippet}
+{#snippet footer()}<Button type="submit" form={id + '-connection'} disabled={busy || !canSave || discovering}>{t('admin.save')}</Button>{/snippet}
+<IndustrialDialog bind:open title={t(existing ? 'connections.edit' : 'connections.new')} description={t('connections.description')} {busy} closeLabel={t('admin.close')} {body} {footer} scrollBody onOpenChange={value => {if (!value) {cancelDiscovery(); clientSecret = '';}}} />

package/dist/plugins/user-auth/ui/Login.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import { isLoading } from 'svelte-i18n';
+  import { _, isManagementLoginStaleError, type ManagementLoginContext } from '@bungee/plugin-sdk';
+  import TurnstileChallenge from './TurnstileChallenge.svelte';
+  import RecoveryHelp from './RecoveryHelp.svelte';
+  import type { LoginProvider } from './contracts';
+  import { loginFailure, requireLoginSuccess } from './login-errors';
+
+  let { context }: { context: ManagementLoginContext } = $props();
+  const t = (key: string, values: Record<string, string> = {}) => $isLoading ? '' : $_(`plugins.user-auth.${key}`, { values });
+  let username = $state(''), password = $state(''), busy = $state(false);
+  let error = $state(''), detail = $state('');
+  type LoginOptions = {local: {enabled: true; turnstile: {enabled: boolean; siteKey?: string}}; methods: {id: string; label: string; provider: LoginProvider}[]};
+  let options = $state<LoginOptions | null>(null), optionsBusy = $state(true), token = $state(''), resetKey = $state(0);
+  let destroyed = false;
+  async function loadOptions() {
+    optionsBusy = true; error = ''; detail = '';
+    const activeContext = context;
+    try {
+      const result = await activeContext.loginOptions<LoginOptions>();
+      if (destroyed || context !== activeContext) return;
+      if (!result?.local || result.local.enabled !== true || typeof result.local.turnstile?.enabled !== 'boolean' || !Array.isArray(result.methods)
+        || result.methods.some(item => !item || typeof item.id !== 'string' || !item.id || typeof item.label !== 'string' || !item.label || !['google', 'microsoft', 'github', 'oidc'].includes(item.provider))
+        || (result.local.turnstile.enabled && !result.local.turnstile.siteKey)) throw new Error('provider_unavailable');
+      options = result;
+    } catch (cause) { if (!destroyed && context === activeContext && !isManagementLoginStaleError(cause)) { const failure = loginFailure(cause); error = failure.key; detail = failure.detail; } }
+    finally { if (!destroyed && context === activeContext) optionsBusy = false; }
+  }
+  onMount(() => {
+    void loadOptions().then(() => {
+      const code = new URLSearchParams(window.location.hash.split('?')[1] ?? '').get('oidcError');
+      if (code && !destroyed) { const failure = loginFailure(new Error(code)); error = failure.key; detail = failure.key === 'login.errors.unknown' ? 'oidc_failed' : failure.detail; }
+    });
+  });
+  async function begin(methodId: string) {
+    if (busy) return; busy = true; error = ''; detail = '';
+    const activeContext = context;
+    try {
+      const result = await activeContext.beginLogin({methodId});
+      if (destroyed || context !== activeContext) return;
+      const url = new URL(result.authorizationUrl);
+      if (!['https:', 'http:'].includes(url.protocol)) throw new Error('oidc_failed');
+      window.location.assign(url.href);
+    } catch (cause) { if (!destroyed && context === activeContext && !isManagementLoginStaleError(cause)) { const failure = loginFailure(cause); error = failure.key; detail = failure.detail; } }
+    finally { if (!destroyed && context === activeContext) busy = false; }
+  }
+  onDestroy(() => { destroyed = true; });
+
+  async function login(event: SubmitEvent) {
+    event.preventDefault();
+    if (busy) return;
+    if (!options || optionsBusy || (options.local.turnstile.enabled && !token)) return;
+    const activeContext = context;
+    busy = true; error = ''; detail = '';
+    try {
+      const result = await activeContext.login({ username, password, transport: 'cookie', ...(options.local.turnstile.enabled ? { turnstileToken: token } : {}) });
+      if (destroyed || context !== activeContext || result === undefined) return;
+      requireLoginSuccess(result);
+      await activeContext.complete();
+    } catch (cause) {
+      if (destroyed || context !== activeContext || isManagementLoginStaleError(cause)) return;
+      const failure = loginFailure(cause);
+      error = failure.key; detail = failure.detail;
+    } finally {
+      password = ''; token = ''; resetKey++;
+      if (!destroyed && context === activeContext) busy = false;
+    }
+  }
+</script>
+
+<form onsubmit={login} aria-label={t('login.title')} aria-busy={busy} class="space-y-4">
+  <label class="grid gap-1"><span class="nx-field-label">{t('login.username')}</span><input class="nx-input" bind:value={username} autocomplete="username" required maxlength="64" disabled={busy} /></label>
+  <label class="grid gap-1"><span class="nx-field-label">{t('login.password')}</span><input class="nx-input" bind:value={password} type="password" autocomplete="current-password" required disabled={busy} /></label>
+  {#if error}
+    <p role="alert" class="text-sm text-red-400">{t(error)}</p>
+    {#if detail === 'invalid_origin' && context.provider.publicOrigin}<a class="text-sm text-nexus-300 underline break-all" href={`${context.provider.publicOrigin}/#/login`}>{t('login.correctAddress', { origin: context.provider.publicOrigin })}</a>{/if}
+    <details class="text-sm text-zinc-400"><summary>{t('login.technicalDetails')}</summary><pre class="whitespace-pre-wrap break-all">{detail}</pre></details>
+  {/if}
+  {#if options?.local.turnstile.enabled && options.local.turnstile.siteKey}<TurnstileChallenge siteKey={options.local.turnstile.siteKey} {resetKey} onToken={value => { token = value; }} retryLabel={t('login.retryChallenge')} failureLabel={t('login.challengeFailed')} />{/if}
+  {#if !options && !optionsBusy}<button type="button" class="nx-btn-ghost" onclick={loadOptions}>{t('session.reload')}</button>{/if}
+  <RecoveryHelp />
+  <button class="nx-btn-primary w-full justify-center" disabled={busy || optionsBusy || !options || (options.local.turnstile.enabled && !token)}>{busy ? t('login.busy') : t('login.submit')}</button>
+</form>
+{#if options?.methods.length}<div class="mt-4 grid gap-3" aria-label={t('login.methods')}>
+  {#each options.methods as connection (connection.id)}<button type="button" class="nx-btn-ghost w-full justify-center gap-2 break-words" aria-label={`${connection.label} · ${t('providers.' + connection.provider)}`} disabled={busy} onclick={() => begin(connection.id)}><span>{connection.label}</span><span class="text-sm text-zinc-400">{t('providers.' + connection.provider)}</span></button>{/each}
+</div>{/if}

package/dist/plugins/user-auth/ui/LoginProviderIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Globe } from 'lucide-svelte';
+  import github from './assets/github.svg';
+  import google from './assets/google.svg';
+  import microsoft from './assets/microsoft.svg';
+  import type { LoginProvider } from './contracts';
+
+  let {provider}: {provider: LoginProvider} = $props();
+  const marks = {github, google, microsoft};
+</script>
+
+<!-- Brand marks: Simple Icons 11.15.0, CC0; see assets/LICENSE.txt. -->
+<span class="flex h-10 w-10 shrink-0 items-center justify-center text-zinc-100" aria-hidden="true">
+  {#if provider === 'oidc'}
+    <Globe size={28} strokeWidth={1.5} />
+  {:else}
+    <img src={marks[provider]} alt="" class="h-7 w-7 brightness-0 invert" />
+  {/if}
+</span>

package/dist/plugins/user-auth/ui/LoginSettings.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { _, isLoading } from 'svelte-i18n';
+  import { v4 as uuid } from 'uuid';
+  import { requestPluginControl } from '$api/client';
+  import { logout, getAuthStateRevision, isAuthenticationStateCurrent } from '$stores/auth';
+  import { IndustrialToggle, IndustrialDialog, BSelect, StatusBadge } from '$components/industrial';
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+  import { Plus } from 'lucide-svelte';
+  import type { Connection, ConnectionInput } from './contracts';
+  import ConnectionEditor from './ConnectionEditor.svelte';
+  import SettingsSection from './SettingsSection.svelte';
+  import TurnstileSettings from './TurnstileSettings.svelte';
+  let {pluginName}: {pluginName: string} = $props();
+  const id = $props.id();
+  const t = (key: string) => $isLoading ? '' : $_(`plugins.user-auth.${key}`);
+  const lifetime = new AbortController(), ownerRevision = getAuthStateRevision();
+  const current = () => !lifetime.signal.aborted && isAuthenticationStateCurrent(ownerRevision);
+  const call = <T,>(path: string, method: 'GET'|'POST'|'PUT'|'DELETE', body?: unknown) => requestPluginControl<T>(pluginName, path, method, body, lifetime.signal);
+  type LoginSettings = {version: number; autoCreateUsers: boolean};
+  let connections = $state<Connection[]>([]), settings = $state<LoginSettings | null>(null);
+  let editorOpen = $state(false), deleteOpen = $state(false);
+  let deleteTarget = $state<Connection | null>(null), search = $state(''), status = $state('all');
+  let visibleConnections = $derived(connections.filter(connection =>
+    (status === 'all' || connection.enabled === (status === 'enabled')) &&
+    [connection.label, connection.provider, connection.issuer, connection.clientId].some(value => value.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()))));
+  let editing = $state<Connection | null>(null), draftId = $state('');
+  let busy = $state(false), loading = $state(true), error = $state(''), notice = $state('');
+  let publicOrigin = $state<string | undefined>();
+  async function load() {
+    loading = true;
+    try { const [methods, login] = await Promise.all([call<{connections: Connection[]; publicOrigin: string | null}>('/login-connections', 'GET'), call<LoginSettings>('/login-settings', 'GET')]); if (current()) { connections = methods.connections; publicOrigin = methods.publicOrigin ?? undefined; settings = login; } }
+    finally { if (current()) loading = false; }
+  }
+  function edit(connection?: Connection) {
+    editing = connection ?? null; draftId = connection?.id ?? uuid();
+    editorOpen = true; error = ''; notice = '';
+  }
+  async function action(operation: () => Promise<void>) {
+    if (busy || !current()) return; busy = true; error = ''; notice = '';
+    try { await operation(); if (current()) notice ||= t('admin.saved'); }
+    catch (cause) { if (!current()) return; const code = cause instanceof Error ? cause.message : '';
+      if (code === 'version_conflict') { const editing = editorOpen, editingId = draftId; deleteOpen = false; deleteTarget = null; try { await load(); if (current() && editing) edit(connections.find(connection => connection.id === editingId)); } catch {} if (current()) error = t('admin.errors.version_conflict'); }
+      else error = ["invalid_input", "invalid_origin", "invalid_provider", "invalid_microsoft_configuration", "invalid_microsoft_tenant", "microsoft_account_scope", "microsoft_signing_key_issuer", "invalid_oidc_configuration", "invalid_oauth_identity", "oidc_metadata_failed", "oidc_metadata_invalid", "oidc_metadata_limit", "oidc_network_failed", "oidc_pkce_unsupported", "oidc_signing_alg_unsupported", "preset_scopes_fixed", "verified_identity_required", "invalid_oidc_url", "oidc_issuer_mismatch", "oidc_auth_method_unsupported", "oidc_secret_required"].includes(code) ? t(`admin.errors.${code}`) : t('settings.errors.failed');
+    } finally { if (current()) busy = false; }
+  }
+  async function saveConnection(input: ConnectionInput) { await action(async () => {
+    const result = await call<{connection: Connection}>('/login-connections', editing ? 'PUT' : 'POST', input);
+    if (!current()) return;
+    applyConnection(result.connection); editorOpen = false;
+    notice = t('connections.saved');
+  }); }
+  function confirmDelete(connection: Connection) { deleteTarget = connection; error = ''; notice = ''; deleteOpen = true; }
+  function applyConnection(connection: Connection) { if (current()) connections = [...connections.filter(item => item.id !== connection.id), connection]; }
+  async function toggleConnection(connection: Connection) { await action(async () => {
+    const result = await call<{connection: Connection}>('/login-connections', 'PUT', {
+      id: connection.id, version: connection.version, label: connection.label, enabled: !connection.enabled,
+      provider: connection.provider, configuration: connection.configuration, clientId: connection.clientId, ...(connection.provider === 'oidc' ? {scopes: connection.scopes} : {}),
+    });
+    applyConnection(result.connection);
+  }); }
+  async function removeConnection() { await action(async () => {
+    if (!deleteTarget) return;
+    const target = deleteTarget;
+    try {
+      const result = await call<{ok: true; sessionRevoked: boolean}>('/login-connections', 'DELETE', {id: target.id, version: target.version});
+      if (!current()) return;
+      if (result.sessionRevoked) { logout(); window.location.hash = '#/login'; return; }
+    } catch (cause) {
+      if (!current()) return;
+      if (cause instanceof Error && cause.message === 'version_conflict') throw cause;
+      const result = await call<{connections: Connection[]}>('/login-connections', 'GET');
+      if (!current()) return;
+      connections = result.connections;
+      if (connections.some(connection => connection.id === target.id)) throw cause;
+    }
+    connections = connections.filter(connection => connection.id !== target.id); deleteOpen = false; deleteTarget = null;
+  }); }
+  async function toggleAuto(value: boolean) { await action(async () => { if (!settings) return; const result = await call<LoginSettings>('/login-settings', 'PUT', {version: settings.version, autoCreateUsers: value}); if (current()) settings = result; }); }
+  onMount(() => { void load().catch(() => { if (current()) error = t('settings.errors.failed'); }); });
+  onDestroy(() => { lifetime.abort(); });
+</script>
+<div data-testid="auth-login-settings">
+  <SettingsSection title={t('connections.title')}>
+    <div class="space-y-4">
+      {#if loading}<p class="text-sm text-zinc-400">{t('settings.loading')}</p>{:else}
+        <div class="flex items-start gap-3 border-b border-carbon-600 pb-4"><IndustrialToggle id={id + '-login-auto'} checked={settings?.autoCreateUsers ?? false} label={t('connections.autoCreate')} disabled={busy || !settings} onchange={toggleAuto} /><div class="min-w-0 pt-2"><label for={id + '-login-auto'} class="nx-field-label cursor-pointer">{t('connections.autoCreate')}</label><p class="text-sm text-zinc-400 mt-1">{t('connections.autoCreateWarning')}</p></div></div>
+        {#if connections.length}
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between" data-testid="login-connections-toolbar">
+            <Button variant="ghost" class="self-start shrink-0 gap-2" disabled={busy} onclick={() => edit()}><Plus class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />{t('connections.add')}</Button>
+            <div class="flex w-full min-w-0 flex-col gap-3 sm:ml-auto sm:w-auto sm:flex-row sm:items-center" data-testid="login-connections-filters">
+              <Input class="min-w-0 sm:w-80" type="search" bind:value={search} placeholder={t('connections.searchPlaceholder')} aria-label={t('connections.search')} />
+              <div class="w-full shrink-0 sm:w-auto sm:min-w-36"><BSelect autoWidth={false} bind:value={status} options={[{value: 'all', label: t('connections.all')}, {value: 'enabled', label: t('users.enabled')}, {value: 'disabled', label: t('users.disabled')}]} ariaLabel={t('connections.status')} /></div>
+            </div>
+          </div>
+          <div class="overflow-x-auto" role="region" aria-label={t('connections.title')}>
+          <table class="w-full min-w-[48rem] text-left text-base border border-carbon-600" aria-label={t('connections.title')}>
+            <thead class="bg-carbon-900 text-zinc-400"><tr>
+              <th class="px-2 py-3" scope="col">{t('connections.label')}</th><th class="px-2 py-3" scope="col">{t('connections.provider')}</th><th class="px-2 py-3" scope="col">{t('connections.clientId')}</th><th class="px-2 py-3" scope="col">{t('connections.status')}</th><th class="px-2 py-3" scope="col">{t('connections.actions')}</th>
+            </tr></thead>
+            <tbody>{#each visibleConnections as connection (connection.id)}
+              <tr class="border-t border-carbon-600" data-testid="login-connection-row">
+                <th class="max-w-48 break-words px-2 py-4 font-normal text-zinc-200" scope="row">{connection.label}</th>
+                <td class="max-w-64 break-all px-2 py-3 font-mono text-zinc-400">{t('providers.' + connection.provider)}</td>
+                <td class="px-2 py-3 text-zinc-300"><span class="block max-w-64 truncate font-mono text-sm" title={connection.clientId}>{connection.clientId}</span></td>
+                <td class="px-2 py-3"><StatusBadge variant={connection.enabled ? 'active' : 'muted'}>{connection.enabled ? t('users.enabled') : t('users.disabled')}</StatusBadge></td>
+                <td class="px-2 py-3"><div class="flex gap-2">
+                  <Button variant="ghost" disabled={busy} onclick={() => edit(connection)}>{t('admin.edit')}</Button>
+                  <Button variant="ghost" disabled={busy || (!connection.enabled && !publicOrigin)} title={!connection.enabled && !publicOrigin ? t('connections.missingOrigin') : undefined} onclick={() => toggleConnection(connection)}>{t(connection.enabled ? 'connections.disable' : 'connections.enable')}</Button>
+                  <Button variant="destructive" disabled={busy} onclick={() => confirmDelete(connection)}>{t('connections.remove')}</Button>
+                </div></td>
+              </tr>
+            {:else}<tr><td colspan="5" class="px-2 py-6 text-zinc-400">{t('connections.noMatches')}</td></tr>{/each}</tbody>
+          </table>
+          </div>
+        {:else}
+          <div class="flex flex-col items-start gap-3 py-4" data-testid="login-connections-empty">
+            <p class="text-sm text-zinc-400">{t('connections.empty')}</p>
+            <Button class="gap-2" disabled={busy} onclick={() => edit()}><Plus class="h-3.5 w-3.5 shrink-0" aria-hidden="true" />{t('connections.add')}</Button>
+          </div>
+        {/if}
+
+      {/if}
+    </div>
+  </SettingsSection>
+  <TurnstileSettings {pluginName} />
+  {#if notice && !editorOpen && !deleteOpen}<p class="text-sm text-emerald-400" role="status">{notice}</p>{/if}
+  {#if error && !editorOpen && !deleteOpen}<p class="text-sm text-red-400" role="alert">{error}</p><Button variant="ghost" disabled={busy} onclick={() => action(load)}>{t('session.reload')}</Button>{/if}
+</div>
+
+{#if editorOpen}
+  {#key `${draftId}:${editing?.version ?? 0}`}<ConnectionEditor bind:open={editorOpen} {pluginName} connection={editing} connectionId={draftId} {publicOrigin} {busy} {error} onsave={saveConnection} />{/key}
+{/if}
+
+{#snippet deleteBody()}
+  <p class="break-words text-sm text-zinc-200">{deleteTarget?.label}</p>
+  {#if error}<p role="alert" class="text-sm text-red-400">{error}</p>{/if}
+{/snippet}
+{#snippet deleteFooter()}<Button variant="destructive" disabled={busy || !deleteTarget} onclick={removeConnection}>{t('connections.remove')}</Button>{/snippet}
+<IndustrialDialog bind:open={deleteOpen} title={t('connections.delete')} description={t('connections.deleteWarning')} {busy} closeLabel={t('admin.cancel')} body={deleteBody} footer={deleteFooter} onOpenChange={value => {if (!value) {deleteTarget = null; error = '';}}} />

package/dist/plugins/user-auth/ui/Profile.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { _, isLoading } from 'svelte-i18n';
+  import { requestPluginControl } from '$api/client';
+  import { endSession } from '$api/auth';
+  import { logout, getAuthStateRevision, isAuthenticationStateCurrent } from '$stores/auth';
+  import { PanelCard, LoadingIndicator, StatusBadge, IndustrialDialog } from '$components/industrial';
+  import { Button } from '$components/ui/button';
+  import LoginProviderIcon from './LoginProviderIcon.svelte';
+  import { validPassword, authorizationUrl, type User, type Connection, type Identity } from './contracts';
+
+  let { pluginName = 'user-auth' }: { pluginName?: string; apiBase?: string } = $props();
+  const id = $props.id();
+  const t = (key: string) => $isLoading ? '' : $_(`plugins.user-auth.${key}`);
+  const lifetime = new AbortController();
+  const revision = getAuthStateRevision();
+  const current = () => !lifetime.signal.aborted && isAuthenticationStateCurrent(revision);
+  const call = <T,>(path: string, method: 'GET' | 'POST' | 'DELETE', body?: unknown) => requestPluginControl<T>(pluginName, path, method, body, lifetime.signal);
+  let administrator = $state<User | null>(null), identities = $state<Identity[]>([]), connections = $state<Connection[]>([]);
+  let currentPassword = $state(''), password = $state(''), confirmation = $state('');
+  let busy = $state(false), loading = $state(true), error = $state(''), detail = $state('');
+  let passwordOpen = $state(false), unlinkTarget = $state<Identity | null>(null), unlinkOpen = $state(false);
+  let bindingRows = $derived(connections
+    .filter(connection => connection.enabled || identities.some(identity => identity.connectionId === connection.id))
+    .map(connection => ({connection, identities: identities.filter(identity => identity.connectionId === connection.id)})));
+  let unmatchedIdentities = $derived(identities.filter(identity => !connections.some(connection => connection.id === identity.connectionId)));
+  let unlinkConnection = $derived(connections.find(connection => connection.id === unlinkTarget?.connectionId));
+  function failure(cause: unknown) {
+    detail = cause instanceof Error ? cause.message : String(cause);
+    const key = ['invalid_password', 'password_confirmation', 'password_unchanged'].includes(detail) ? 'settings.errors.' + detail
+      : ['management_origin_required', 'invalid_origin', 'invalid_oidc_url', 'oidc_unavailable', 'oidc_network_failed', 'oidc_metadata_failed', 'oidc_metadata_invalid', 'oidc_pkce_unsupported', 'identity_exists'].includes(detail) ? 'admin.errors.' + detail : 'settings.errors.failed';
+    error = key;
+  }
+  function signedOut() { if (current()) { logout(); window.location.hash = '#/login'; } }
+  async function load() {
+    loading = true; error = ''; detail = '';
+    try {
+      const result = await call<{administrator: User}>('/self', 'GET');
+      if (!current()) return;
+      administrator = result.administrator;
+      const [bound, methods] = await Promise.all([
+        call<{identities: Identity[]}>(`/identities?userId=${encodeURIComponent(result.administrator.id)}`, 'GET'),
+        call<{connections: Connection[]}>('/login-connections', 'GET'),
+      ]);
+      if (current()) { identities = bound.identities; connections = methods.connections; }
+    } catch (cause) { if (current()) failure(cause); }
+    finally { if (current()) loading = false; }
+  }
+  async function action(operation: () => Promise<void>) {
+    if (busy || !current()) return;
+    busy = true; error = ''; detail = '';
+    try { await operation(); } catch (cause) { if (current()) failure(cause); }
+    finally { if (current()) busy = false; }
+  }
+  async function change(event: SubmitEvent) {
+    event.preventDefault();
+    await action(async () => {
+      validPassword(password, confirmation);
+      try {
+        await requestPluginControl(pluginName, '/password', 'POST', {currentPassword, password, passwordConfirmation: confirmation}, lifetime.signal, {preserveSessionOnUnauthorized: true});
+        signedOut();
+      } finally { currentPassword = ''; password = ''; confirmation = ''; }
+    });
+  }
+  async function leave() { await action(async () => { await endSession({onCompleted: () => { if (!lifetime.signal.aborted) window.location.hash = '#/login'; }}); }); }
+  async function link(connection: Connection) { await action(async () => {
+    if (!connection.enabled || identities.some(identity => identity.connectionId === connection.id)) return;
+    const result = await call<{authorizationUrl: string}>('/identities/link/start', 'POST', {connectionId: connection.id});
+    if (current()) window.location.assign(authorizationUrl(result.authorizationUrl));
+  }); }
+  function confirmUnbind(identity: Identity) { error = ''; detail = ''; unlinkTarget = identity; unlinkOpen = true; }
+  async function unbind(identity: Identity) { await action(async () => { await call('/identities', 'DELETE', {id: identity.id}); signedOut(); }); }
+  onMount(() => {
+    const flowId = new URLSearchParams(window.location.hash.split('?')[1] ?? '').get('oidcLink');
+    if (flowId) {
+      window.history.replaceState(null, '', window.location.pathname + window.location.search + window.location.hash.split('?')[0]);
+      loading = false;
+      void action(async () => { await call('/identities/link/finish', 'POST', {flowId}); signedOut(); });
+    } else void load();
+  });
+  onDestroy(() => { lifetime.abort(); currentPassword = ''; password = ''; confirmation = ''; });
+</script>
+
+<div class="space-y-4" data-testid="auth-user-profile">
+  <div class="space-y-2">
+    <h1 class="nx-display text-xl text-zinc-50">{t('profile.title')}</h1>
+  </div>
+  <PanelCard title={t('settings.accountTitle')} tag={t('settings.accountTag')}>
+    <div data-testid="account-summary">
+      {#if loading}<LoadingIndicator label={t('settings.loading')} height="sm" />
+      {:else if administrator}
+        <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+          <div class="min-w-0 space-y-3" data-testid="account-details">
+            <dl class="space-y-2">
+              <div><dt class="sr-only">{t('login.username')}</dt><dd class="break-all text-xl font-semibold text-zinc-100">{administrator.username}</dd></div>
+              <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1 text-sm"><dt class="text-zinc-400">{t('users.displayName')}</dt><dd class="min-w-0 break-words text-zinc-300">{administrator.displayName || administrator.username}</dd></div>
+            </dl>
+            <StatusBadge variant="active">{t(administrator.hasLocalPassword ? 'users.local' : 'users.sso')}</StatusBadge>
+            {#if !administrator.hasLocalPassword}<p class="max-w-xl text-sm text-zinc-400">{t('profile.noPassword')}</p>{/if}
+          </div>
+          <div class="flex shrink-0 flex-col gap-2 sm:border-l sm:border-carbon-600 sm:pl-6" data-testid="account-actions">
+            {#if administrator.hasLocalPassword}<Button class="w-full sm:min-w-32" disabled={busy} onclick={() => {error = ''; detail = ''; passwordOpen = true;}}>{t('profile.changePassword')}</Button>{/if}
+            <Button class="w-full sm:min-w-32" variant="ghost" disabled={busy} onclick={leave}>{t('settings.logout')}</Button>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </PanelCard>
+  <PanelCard title={t('users.identities')} tag="SSO">
+    <div class="space-y-4" data-testid="identity-bindings">
+      <p class="text-sm text-zinc-400">{t('profile.bindingDescription')}</p>
+      {#if loading}<LoadingIndicator label={t('settings.loading')} height="sm" />
+      {:else if bindingRows.length || unmatchedIdentities.length}
+        <ul class="divide-y divide-carbon-600" aria-label={t('users.identities')}>
+          {#each bindingRows as row (row.connection.id)}
+            {@const connection = row.connection}
+            <li class="flex flex-col gap-3 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-center" data-connection-id={connection.id}>
+              <div class="flex min-w-0 items-center gap-3 sm:w-1/3 sm:shrink-0">
+                <LoginProviderIcon provider={connection.provider} />
+                <div class="min-w-0 flex-1 space-y-1">
+                  <h3 class="break-words text-base font-semibold text-zinc-100">{connection.provider === 'oidc' ? connection.label : t('providers.' + connection.provider)}</h3>
+                  {#if connection.provider === 'oidc' || connection.label !== t('providers.' + connection.provider)}
+                    <p class="break-words text-sm text-zinc-400">{connection.provider === 'oidc' ? t('providers.oidc') : connection.label}</p>
+                  {/if}
+                  {#if !row.identities.length}<p class="text-sm text-zinc-400">{t('profile.notBound')}</p>{/if}
+                  {#if !connection.enabled}<StatusBadge variant="muted">{t('connections.disable')}</StatusBadge>{/if}
+                </div>
+              </div>
+              <div class="min-w-0 flex-1 space-y-3">
+                {#if !row.identities.length}
+                  <div class="flex justify-end"><Button variant="ghost" disabled={busy || !administrator || !connection.enabled} aria-label={`${t('profile.bind')} ${connection.label}`} onclick={() => link(connection)}>{t('profile.bind')}</Button></div>
+                {:else}
+                  {#each row.identities as identity (identity.id)}
+                    <div class="flex flex-wrap items-center gap-3">
+                      <p class="min-w-0 flex-1 break-all text-sm text-zinc-400">{t('profile.identityId')}<span class="ml-2 font-mono text-zinc-300">{identity.subject}</span></p>
+                      <StatusBadge variant="active">{t('profile.bound')}</StatusBadge>
+                      <Button variant="destructive" disabled={busy || !administrator} aria-label={`${t('users.unbind')} ${connection.label} ${identity.subject}`} onclick={() => confirmUnbind(identity)}>{t('users.unbind')}</Button>
+                    </div>
+                  {/each}
+                {/if}
+              </div>
+            </li>
+          {/each}
+          {#each unmatchedIdentities as identity (identity.id)}
+            <li class="flex flex-wrap items-center gap-3 py-4 last:pb-0">
+              <LoginProviderIcon provider="oidc" />
+              <div class="min-w-0 flex-1 space-y-1"><h3 class="break-all text-base text-zinc-100">{identity.issuer}</h3><p class="break-all text-sm text-zinc-400">{t('profile.identityId')} <span class="font-mono">{identity.subject}</span></p></div>
+              <Button variant="destructive" disabled={busy || !administrator} aria-label={`${t('users.unbind')} ${identity.subject}`} onclick={() => confirmUnbind(identity)}>{t('users.unbind')}</Button>
+            </li>
+          {/each}
+        </ul>
+        <p class="border-t border-carbon-600 pt-3 text-sm text-zinc-400">{t('users.bindingNote')}</p>
+      {:else}<p class="text-sm text-zinc-400">{t('profile.noConnections')}</p>{/if}
+    </div>
+  </PanelCard>
+  {#if error && !passwordOpen && !unlinkOpen}
+    <p role="alert" class="text-sm text-red-400">{t(error)}</p>
+    <details class="text-sm text-zinc-400"><summary>{t('login.technicalDetails')}</summary><pre class="whitespace-pre-wrap break-all">{detail}</pre></details>
+    <Button variant="ghost" disabled={busy} onclick={load}>{t('session.reload')}</Button>
+  {/if}
+</div>
+
+{#snippet passwordBody()}
+      <form id={id + '-password'} class="space-y-3" onsubmit={change} aria-busy={busy} aria-label={t('settings.passwordTitle')}>
+        <label class="grid gap-1"><span class="nx-field-label">{t('settings.currentPassword')}</span><input class="nx-input" type="password" autocomplete="current-password" bind:value={currentPassword} required disabled={busy || !administrator} /></label>
+        <label class="grid gap-1"><span class="nx-field-label">{t('settings.newPassword')}</span><input class="nx-input" type="password" autocomplete="new-password" bind:value={password} required disabled={busy || !administrator} /></label>
+        <label class="grid gap-1"><span class="nx-field-label">{t('settings.confirmation')}</span><input class="nx-input" type="password" autocomplete="new-password" bind:value={confirmation} required disabled={busy || !administrator} /></label>
+        {#if error}<p role="alert" class="text-sm text-red-400">{t(error)}</p>{/if}
+      </form>
+{/snippet}
+{#snippet passwordFooter()}<Button type="submit" form={id + '-password'} disabled={busy || !administrator}>{busy ? t('settings.updating') : t('settings.submit')}</Button>{/snippet}
+<IndustrialDialog bind:open={passwordOpen} title={t('settings.passwordTitle')} description={t('settings.passwordDescription')} {busy} closeLabel={t('admin.close')} body={passwordBody} footer={passwordFooter} scrollBody onOpenChange={value => {if (!value) {currentPassword = ''; password = ''; confirmation = ''; error = ''; detail = '';}}} />
+
+{#snippet unlinkBody()}
+  {#if unlinkTarget}
+    <div class="flex items-start gap-3">
+      <LoginProviderIcon provider={unlinkConnection?.provider ?? 'oidc'} />
+      <div class="min-w-0 space-y-1"><p class="break-words font-semibold text-zinc-100">{unlinkConnection?.label ?? unlinkTarget.issuer}</p><p class="break-all text-sm text-zinc-400">{t('profile.identityId')} <span class="font-mono">{unlinkTarget.subject}</span></p></div>
+    </div>
+    <p class="text-sm text-zinc-300">{t('profile.unbindWarning')}</p>
+  {/if}
+  {#if error}<p role="alert" class="text-sm text-red-400">{t(error)}</p>{/if}
+{/snippet}
+{#snippet unlinkFooter()}<Button type="button" variant="destructive" disabled={busy || !administrator || !unlinkTarget} onclick={() => {if (unlinkTarget) void unbind(unlinkTarget);}}>{t('users.unbind')}</Button>{/snippet}
+<IndustrialDialog bind:open={unlinkOpen} title={t('profile.unbindTitle')} description="" {busy} closeLabel={t('admin.cancel')} body={unlinkBody} footer={unlinkFooter} scrollBody onOpenChange={value => {if (!value) {unlinkTarget = null; error = ''; detail = '';}}} />

package/dist/plugins/{local-accounts → user-auth}/ui/RecoveryHelp.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { isLoading } from 'svelte-i18n';
   import { _ } from '@bungee/plugin-sdk';
-  const t = (key: string) => $isLoading ? '' : $_(`plugins.local-accounts.recovery.${key}`);
+  const t = (key: string) => $isLoading ? '' : $_(`plugins.user-auth.recovery.${key}`);
 </script>
 
 <details class="text-sm text-zinc-400 space-y-2">
@@ -12,7 +12,7 @@
     <li>{t('step2')}</li>
     <li>{t('step3')}</li>
   </ol>
-  <code class="block border border-carbon-600 p-3 font-mono text-xs whitespace-pre-wrap break-all">bun packages/core/dist/main.js --recover-admin /path/to/data/bungee.db</code>
+  <code class="block border border-carbon-600 p-3 font-mono text-xs whitespace-pre-wrap break-all">bungee recover --plugin user-auth --action reset</code>
   <p>{t('docker')}</p>
-  <p class="text-xs">{t('note')}</p>
+  <code class="block border border-carbon-600 p-3 font-mono text-xs whitespace-pre-wrap break-all">bun packages/core/dist/main.js --recover /usr/app/data/bungee.db --plugin user-auth --action reset</code>
 </details>