feat(webhook): per-project and per-site webhook URLs
Build / build (push) Successful in 10m25s

Replace the single global webhook secret with entity-scoped secrets stored
on each project and static site. Webhook-driven project autocreate is
removed — projects must exist before their URL can trigger deploys.

Also wires static-site webhooks (sync_trigger=push|tag), turning the
previously inert "push" trigger into a functional one: POST the site's
webhook URL from a Git provider and Tinyforge re-syncs on matching refs.

- Adds webhook_secret columns + unique indexes to projects and static_sites
- Per-entity GET/regenerate endpoints under /api/projects/{id}/webhook
  and /api/sites/{id}/webhook (admin-only)
- Removes /api/settings/webhook-url and the global webhook panel
- Reusable WebhookPanel Svelte component on both detail pages, i18n in en/ru
- Tests for matcher (siteRefMatches, ParseImageRef) and handler (project
  match/mismatch/404 and site push/manual/branch-skip)
This commit is contained in:
2026-04-23 15:18:19 +03:00
parent e08acf5c0e
commit 0632f512e6
21 changed files with 1119 additions and 363 deletions
+19 -4
View File
@@ -319,12 +319,27 @@ export function updateSettings(data: Partial<Settings>): Promise<Settings> {
return put<Settings>('/api/settings', data);
}
export function getWebhookUrl(): Promise<{ webhook_url: string }> {
return get<{ webhook_url: string }>('/api/settings/webhook-url');
// ── Webhooks ───────────────────────────────────────────────────────
export interface WebhookUrlResponse {
webhook_url: string;
webhook_secret: string;
}
export function regenerateWebhookUrl(): Promise<{ webhook_url: string }> {
return post<{ webhook_url: string }>('/api/settings/webhook-url/regenerate');
export function getProjectWebhook(projectId: string): Promise<WebhookUrlResponse> {
return get<WebhookUrlResponse>(`/api/projects/${projectId}/webhook`);
}
export function regenerateProjectWebhook(projectId: string): Promise<WebhookUrlResponse> {
return post<WebhookUrlResponse>(`/api/projects/${projectId}/webhook/regenerate`);
}
export function getStaticSiteWebhook(siteId: string): Promise<WebhookUrlResponse> {
return get<WebhookUrlResponse>(`/api/sites/${siteId}/webhook`);
}
export function regenerateStaticSiteWebhook(siteId: string): Promise<WebhookUrlResponse> {
return post<WebhookUrlResponse>(`/api/sites/${siteId}/webhook/regenerate`);
}
// ── Proxy Routes ───────────────────────────────────────────────────
+136
View File
@@ -0,0 +1,136 @@
<!--
WebhookPanel
Generic panel that displays an entity-scoped webhook URL and exposes a
"regenerate" action. Used by both project and static-site detail pages.
Parent supplies a fetch + regenerate pair returning { webhook_url, webhook_secret }.
Panel absolutises the URL with window.location.origin for easy copy/paste.
-->
<script lang="ts">
import { onMount } from 'svelte';
import { toasts } from '$lib/stores/toast';
import { t } from '$lib/i18n';
import { IconCopy, IconRefresh, IconLoader } from '$lib/components/icons';
interface WebhookUrlResponse {
webhook_url: string;
webhook_secret: string;
}
interface Props {
title: string;
description: string;
fetchWebhook: () => Promise<WebhookUrlResponse>;
regenerateWebhook: () => Promise<WebhookUrlResponse>;
}
let { title, description, fetchWebhook, regenerateWebhook }: Props = $props();
let relativeUrl = $state('');
let loading = $state(true);
let regenerating = $state(false);
let confirmOpen = $state(false);
const absoluteUrl = $derived(
relativeUrl && typeof window !== 'undefined' ? window.location.origin + relativeUrl : relativeUrl
);
async function load() {
loading = true;
try {
const res = await fetchWebhook();
relativeUrl = res.webhook_url;
} catch (err) {
toasts.error(err instanceof Error ? err.message : $t('webhookPanel.loadFailed'));
} finally {
loading = false;
}
}
async function handleRegenerate() {
confirmOpen = false;
regenerating = true;
try {
const res = await regenerateWebhook();
relativeUrl = res.webhook_url;
toasts.success($t('webhookPanel.regenerated'));
} catch (err) {
toasts.error(err instanceof Error ? err.message : $t('webhookPanel.regenerateFailed'));
} finally {
regenerating = false;
}
}
function handleCopy() {
if (!absoluteUrl) return;
navigator.clipboard.writeText(absoluteUrl).then(
() => toasts.info($t('webhookPanel.copied')),
() => toasts.error($t('webhookPanel.copyFailed'))
);
}
onMount(() => {
load();
});
</script>
<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)]">{title}</h2>
<p class="mb-4 text-sm text-[var(--text-secondary)]">{description}</p>
{#if loading}
<div class="h-11 rounded-lg bg-[var(--surface-card-hover)]"></div>
{:else if relativeUrl}
<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">
{absoluteUrl}
</code>
<button
type="button"
onclick={handleCopy}
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('webhookPanel.copy')}
</button>
</div>
{:else}
<p class="text-sm text-[var(--text-tertiary)] italic">{$t('webhookPanel.noUrl')}</p>
{/if}
<div class="mt-4">
{#if confirmOpen}
<div class="flex items-center gap-2">
<span class="text-sm text-[var(--text-secondary)]">{$t('webhookPanel.confirmRegenerate')}</span>
<button
type="button"
onclick={handleRegenerate}
disabled={regenerating}
class="inline-flex items-center gap-2 rounded-lg bg-[var(--color-danger)] px-3 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50 active:animate-press"
>
{#if regenerating}<IconLoader size={14} />{/if}
{$t('webhookPanel.confirmYes')}
</button>
<button
type="button"
onclick={() => (confirmOpen = false)}
class="inline-flex items-center rounded-lg border border-[var(--border-primary)] px-3 py-1.5 text-sm font-medium text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)]"
>
{$t('webhookPanel.confirmNo')}
</button>
</div>
{:else}
<button
type="button"
onclick={() => (confirmOpen = true)}
disabled={regenerating || loading}
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"
>
<IconRefresh size={16} />
{$t('webhookPanel.regenerate')}
</button>
<p class="mt-1 text-xs text-[var(--text-tertiary)]">{$t('webhookPanel.regenerateWarning')}</p>
{/if}
</div>
</div>
+20 -1
View File
@@ -74,6 +74,8 @@
"noMatchingProjects": "No projects match your search."
},
"projectDetail": {
"webhookTitle": "Project webhook",
"webhookDesc": "POST an image reference to this URL from your CI pipeline to trigger a deploy. Stage routing uses each stage's tag pattern.",
"deleteProject": "Delete Project",
"envVars": "Environment Variables",
"volumes": "Volume Mounts",
@@ -570,6 +572,8 @@
"lastChecked": "Last checked"
},
"sites": {
"webhookTitle": "Site webhook",
"webhookDesc": "Point your Git provider's push webhook at this URL. Tinyforge will re-sync the site on matching refs (branch for push trigger, tag pattern for tag trigger). Send an empty body for an unconditional sync.",
"title": "Static Sites",
"addSite": "New Site",
"newSite": "New Static Site",
@@ -1099,7 +1103,22 @@
"title": "Integrations",
"outgoing": "Outgoing notifications",
"outgoingDesc": "Where Tinyforge posts deploy and alert events. Paste a webhook URL (Apprise, Discord, Slack, your own handler).",
"incoming": "Incoming webhook"
"incoming": "Incoming webhooks",
"incomingMovedDesc": "Inbound webhooks are now scoped per entity. Open a project or static site to view and rotate its webhook URL."
},
"webhookPanel": {
"copy": "Copy",
"copied": "Webhook URL copied to clipboard",
"copyFailed": "Failed to copy to clipboard",
"noUrl": "No webhook URL configured",
"loadFailed": "Failed to load webhook URL",
"regenerate": "Regenerate URL",
"regenerated": "Webhook URL regenerated",
"regenerateFailed": "Failed to regenerate webhook URL",
"regenerateWarning": "Regenerating invalidates the current URL. Update any CI pipeline or Git webhook that uses it.",
"confirmRegenerate": "Replace the current URL?",
"confirmYes": "Regenerate",
"confirmNo": "Cancel"
},
"settingsMaintenance": {
"title": "Maintenance",
+20 -1
View File
@@ -74,6 +74,8 @@
"noMatchingProjects": "Проекты не найдены."
},
"projectDetail": {
"webhookTitle": "Webhook проекта",
"webhookDesc": "Отправьте POST с image-ссылкой на этот URL из CI — и Tinyforge запустит деплой. Стейдж выбирается по tag_pattern.",
"deleteProject": "Удалить проект",
"envVars": "Переменные окружения",
"volumes": "Тома",
@@ -570,6 +572,8 @@
"lastChecked": "Последняя проверка"
},
"sites": {
"webhookTitle": "Webhook сайта",
"webhookDesc": "Укажите этот URL в push-вебхуке Git-провайдера. Tinyforge пересинхронизирует сайт при подходящей ref-ссылке (ветка для push, шаблон тега для tag). Пустое тело запускает синхронизацию безусловно.",
"title": "Статические сайты",
"addSite": "Новый сайт",
"newSite": "Новый статический сайт",
@@ -1099,7 +1103,22 @@
"title": "Интеграции",
"outgoing": "Исходящие уведомления",
"outgoingDesc": "Куда Tinyforge отправляет события деплоев и алертов. Укажите webhook-URL (Apprise, Discord, Slack, свой обработчик).",
"incoming": "Входящий вебхук"
"incoming": "Входящие вебхуки",
"incomingMovedDesc": "Входящие вебхуки теперь привязаны к конкретному проекту или сайту. Откройте страницу проекта или статического сайта, чтобы увидеть и перегенерировать URL."
},
"webhookPanel": {
"copy": "Копировать",
"copied": "Webhook-URL скопирован в буфер обмена",
"copyFailed": "Не удалось скопировать",
"noUrl": "Webhook-URL не настроен",
"loadFailed": "Не удалось загрузить webhook-URL",
"regenerate": "Перегенерировать URL",
"regenerated": "Webhook-URL перегенерирован",
"regenerateFailed": "Не удалось перегенерировать webhook-URL",
"regenerateWarning": "Перегенерация инвалидирует текущий URL. Обновите CI-пайплайны и Git-вебхуки, использующие его.",
"confirmRegenerate": "Заменить текущий URL?",
"confirmYes": "Перегенерировать",
"confirmNo": "Отмена"
},
"settingsMaintenance": {
"title": "Обслуживание",
@@ -13,6 +13,7 @@
import ForgeHero from '$lib/components/ForgeHero.svelte';
import FormField from '$lib/components/FormField.svelte';
import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
import WebhookPanel from '$lib/components/WebhookPanel.svelte';
import EntityPicker from '$lib/components/EntityPicker.svelte';
import type { EntityPickerItem } from '$lib/types';
import { IconShield } from '$lib/components/icons';
@@ -767,6 +768,14 @@
</div>
{/if}
<!-- Webhook -->
<WebhookPanel
title={$t('projectDetail.webhookTitle')}
description={$t('projectDetail.webhookDesc')}
fetchWebhook={() => api.getProjectWebhook(projectId)}
regenerateWebhook={() => api.regenerateProjectWebhook(projectId)}
/>
<!-- Deploy History Timeline -->
<div>
<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('projectDetail.recentDeploys')}</h2>
@@ -1,25 +1,22 @@
<!--
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.
Outward-facing hooks: where Tinyforge *sends* events (notification URL).
Inbound webhooks are per-project / per-site and live on their respective
detail pages — this page no longer exposes a global "master" webhook.
-->
<script lang="ts">
import { getSettings, updateSettings, getWebhookUrl, regenerateWebhookUrl } from '$lib/api';
import { getSettings, updateSettings } 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';
import { IconLoader } 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 {
@@ -30,9 +27,8 @@
async function load() {
loading = true;
try {
const [settings, hook] = await Promise.all([getSettings(), getWebhookUrl().catch(() => ({ webhook_url: '' }))]);
const settings = await getSettings();
notificationUrl = settings.notification_url ?? '';
webhookUrl = hook.webhook_url ?? '';
} catch (err) {
toasts.error(err instanceof Error ? err.message : $t('settingsGeneral.loadFailed'));
} finally {
@@ -55,19 +51,6 @@
}
}
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>
@@ -80,7 +63,6 @@
<div class="space-y-4">
<Skeleton height="2rem" width="12rem" />
<Skeleton height="6rem" />
<Skeleton height="6rem" />
</div>
{:else}
<!-- Outgoing: notification URL -->
@@ -105,40 +87,10 @@
</div>
</div>
<!-- Incoming: webhook URL + regenerate -->
<!-- Inbound hooks now live per-entity. -->
<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>
<p class="text-sm text-[var(--text-secondary)]">{$t('settingsIntegrations.incomingMovedDesc')}</p>
</div>
{/if}
</div>
+9
View File
@@ -8,6 +8,7 @@
import FormField from '$lib/components/FormField.svelte';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import ForgeHero from '$lib/components/ForgeHero.svelte';
import WebhookPanel from '$lib/components/WebhookPanel.svelte';
import { IconRefresh, IconGlobe, IconTrash, IconPlus, IconLoader, IconLock, IconUnlock, IconPlay, IconStop } from '$lib/components/icons';
let site = $state<StaticSite | null>(null);
@@ -250,6 +251,14 @@
{/if}
</div>
<!-- Webhook -->
<WebhookPanel
title={$t('sites.webhookTitle')}
description={$t('sites.webhookDesc')}
fetchWebhook={() => api.getStaticSiteWebhook(siteId!)}
regenerateWebhook={() => api.regenerateStaticSiteWebhook(siteId!)}
/>
<!-- Secrets -->
<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6">
<div class="flex items-center justify-between mb-4">