General was a 547-line catch-all mixing seven concerns, destructive
actions (image prune) inches away from form fields, and Cloudflare DNS
buried under four unrelated cards. A single "Save" committed everything
at once — one invalid field blocked valid edits elsewhere.
Splits:
- /settings Overview: timezone, core infra, proxy choice
- /settings/integrations outgoing notification URL + incoming webhook
- /settings/dns wildcard + Cloudflare provider
- /settings/maintenance stale threshold, prune threshold, prune action
(in a dedicated "Danger zone" card)
- /settings/credentials removed (was an 18-line redirect stub)
Sidebar is grouped (Overview / Routing / System / Security) with
section headers; NPM & Traefik items remain conditional on the
proxy-provider choice. Each page loads settings and PUTs only its own
subset, so mistakes on one page can't block edits on another.
No backend changes — the API already accepts Partial<Settings>.
This commit is contained in:
@@ -0,0 +1,144 @@
|
||||
<!--
|
||||
Settings › Integrations
|
||||
|
||||
Outward-facing hooks: where Tinyforge *sends* events (notification URL)
|
||||
and where other systems send events *to* Tinyforge (webhook URL).
|
||||
Keeps discovery in one place instead of burying webhook regen at the
|
||||
bottom of the General page.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl } from '$lib/api';
|
||||
import FormField from '$lib/components/FormField.svelte';
|
||||
import Skeleton from '$lib/components/Skeleton.svelte';
|
||||
import { toasts } from '$lib/stores/toast';
|
||||
import { t } from '$lib/i18n';
|
||||
import { IconLoader, IconCopy, IconRefresh } from '$lib/components/icons';
|
||||
|
||||
let loading = $state(true);
|
||||
let saving = $state(false);
|
||||
let regenerating = $state(false);
|
||||
|
||||
let notificationUrl = $state('');
|
||||
let webhookUrl = $state('');
|
||||
let errors = $state<Record<string, string>>({});
|
||||
|
||||
function validateUrl(value: string): string {
|
||||
if (!value.trim()) return '';
|
||||
try { new URL(value.trim()); return ''; } catch { return $t('validation.invalidUrl'); }
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
try {
|
||||
const [settings, hook] = await Promise.all([getSettings(), getWebhookUrl().catch(() => ({ webhook_url: '' }))]);
|
||||
notificationUrl = settings.notification_url ?? '';
|
||||
webhookUrl = hook.webhook_url ?? '';
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.loadFailed'));
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const urlErr = validateUrl(notificationUrl);
|
||||
errors = urlErr ? { notificationUrl: urlErr } : {};
|
||||
if (urlErr) return;
|
||||
saving = true;
|
||||
try {
|
||||
await updateSettings({ notification_url: notificationUrl.trim() } as any);
|
||||
toasts.success($t('settingsGeneral.saved'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.saveFailed'));
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRegenerateWebhook() {
|
||||
regenerating = true;
|
||||
try {
|
||||
const result = await regenerateWebhookUrl();
|
||||
webhookUrl = result.webhook_url;
|
||||
toasts.success($t('settingsGeneral.regenerated'));
|
||||
} catch (err) {
|
||||
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.regenerateFailed'));
|
||||
} finally {
|
||||
regenerating = false;
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => { load(); });
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t('settingsIntegrations.title')} - {$t('app.name')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="space-y-6">
|
||||
{#if loading}
|
||||
<div class="space-y-4">
|
||||
<Skeleton height="2rem" width="12rem" />
|
||||
<Skeleton height="6rem" />
|
||||
<Skeleton height="6rem" />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Outgoing: notification URL -->
|
||||
<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 shadow-[var(--shadow-sm)]">
|
||||
<h2 class="mb-1 text-lg font-semibold text-[var(--text-primary)]">{$t('settingsIntegrations.outgoing')}</h2>
|
||||
<p class="mb-4 text-sm text-[var(--text-secondary)]">{$t('settingsIntegrations.outgoingDesc')}</p>
|
||||
|
||||
<FormField
|
||||
label={$t('settingsGeneral.notificationUrl')}
|
||||
name="notificationUrl"
|
||||
bind:value={notificationUrl}
|
||||
placeholder="https://notify.example.com/webhook"
|
||||
error={errors.notificationUrl ?? ''}
|
||||
helpText={$t('settingsGeneral.notificationUrlHelp')}
|
||||
/>
|
||||
|
||||
<div class="mt-6">
|
||||
<button onclick={handleSave} disabled={saving} class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-brand-600)] px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-150 hover:bg-[var(--color-brand-700)] disabled:opacity-50 active:animate-press">
|
||||
{#if saving}<IconLoader size={16} />{/if}
|
||||
{saving ? $t('settingsGeneral.saving') : $t('settingsGeneral.saveSettings')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Incoming: webhook URL + regenerate -->
|
||||
<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 shadow-[var(--shadow-sm)]">
|
||||
<h2 class="mb-1 text-lg font-semibold text-[var(--text-primary)]">{$t('settingsIntegrations.incoming')}</h2>
|
||||
<p class="mb-4 text-sm text-[var(--text-secondary)]">{$t('settingsGeneral.webhookDesc')}</p>
|
||||
|
||||
{#if webhookUrl}
|
||||
<div class="flex items-center gap-3">
|
||||
<code class="flex-1 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-card-hover)] px-3 py-2.5 font-mono text-sm text-[var(--text-secondary)] break-all">
|
||||
{webhookUrl}
|
||||
</code>
|
||||
<button
|
||||
onclick={() => { navigator.clipboard.writeText(webhookUrl); toasts.info($t('settingsGeneral.copied')); }}
|
||||
class="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border-primary)] px-3 py-2.5 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] transition-colors"
|
||||
>
|
||||
<IconCopy size={16} />
|
||||
{$t('settingsGeneral.copy')}
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-sm text-[var(--text-tertiary)] italic">{$t('settingsGeneral.noWebhookUrl')}</p>
|
||||
{/if}
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
onclick={handleRegenerateWebhook}
|
||||
disabled={regenerating}
|
||||
class="inline-flex items-center gap-2 rounded-lg border border-[var(--color-danger)] px-4 py-2 text-sm font-medium text-[var(--color-danger)] hover:bg-[var(--color-danger-light)] transition-colors disabled:opacity-50 active:animate-press"
|
||||
>
|
||||
{#if regenerating}<IconLoader size={16} />{/if}
|
||||
<IconRefresh size={16} />
|
||||
{regenerating ? $t('settingsGeneral.regenerating') : $t('settingsGeneral.regenerateUrl')}
|
||||
</button>
|
||||
<p class="mt-1 text-xs text-[var(--text-tertiary)]">{$t('settingsGeneral.regenerateWarning')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user