81 lines
4.8 KiB
Django/Jinja
81 lines
4.8 KiB
Django/Jinja
{% extends "base.html.jinja" %}
|
|
|
|
{% block content %}
|
|
<section class="max-w-2xl mx-auto px-4 py-12">
|
|
<div class="mb-8">
|
|
<a href="/orgs/{{ current_org }}/settings/integrations" class="text-sm text-gray-500 hover:text-gray-700">← All integrations</a>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4 mb-8">
|
|
<div class="w-14 h-14 rounded-lg border border-gray-200 flex items-center justify-center bg-white shrink-0">
|
|
<svg class="w-7 h-7 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Install Webhook</h1>
|
|
<p class="text-sm text-gray-500 mt-1">Send HTTP POST requests to your endpoint when deployment events occur in <strong>{{ current_org }}</strong>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if error is defined and error %}
|
|
<div class="mb-6 px-4 py-3 text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg">{{ error }}</div>
|
|
{% endif %}
|
|
|
|
{# ── How it works ──────────────────────────────────────────── #}
|
|
<div class="mb-8 p-4 bg-gray-50 border border-gray-200 rounded-lg">
|
|
<h3 class="text-sm font-semibold text-gray-700 mb-2">How it works</h3>
|
|
<ul class="text-sm text-gray-600 space-y-1.5">
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-gray-400 mt-0.5">1.</span>
|
|
<span>Forage sends a <code class="text-xs bg-gray-200 px-1 py-0.5 rounded">POST</code> request with a JSON payload to your URL</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-gray-400 mt-0.5">2.</span>
|
|
<span>Payloads include event type, release metadata, project, and organisation</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-gray-400 mt-0.5">3.</span>
|
|
<span>Optional HMAC-SHA256 signing via <code class="text-xs bg-gray-200 px-1 py-0.5 rounded">X-Forage-Signature</code> header</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<span class="text-gray-400 mt-0.5">4.</span>
|
|
<span>Failed deliveries are retried up to 3 times with exponential backoff</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{# ── Setup form ────────────────────────────────────────────── #}
|
|
<form method="POST" action="/orgs/{{ current_org }}/settings/integrations/webhook" class="space-y-5">
|
|
<input type="hidden" name="_csrf" value="{{ csrf_token }}">
|
|
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
|
<input type="text" id="name" name="name" placeholder="e.g. Production alerts" required
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent">
|
|
<p class="text-xs text-gray-400 mt-1">A friendly name to identify this webhook</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="url" class="block text-sm font-medium text-gray-700 mb-1">Payload URL</label>
|
|
<input type="url" id="url" name="url" placeholder="https://example.com/webhooks/forage" required
|
|
class="w-full px-3 py-2 text-sm font-mono border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent">
|
|
<p class="text-xs text-gray-400 mt-1">Must use HTTPS (HTTP allowed for localhost only)</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="secret" class="block text-sm font-medium text-gray-700 mb-1">Secret <span class="font-normal text-gray-400">(optional)</span></label>
|
|
<input type="text" id="secret" name="secret" placeholder="whsec_..."
|
|
class="w-full px-3 py-2 text-sm font-mono border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent">
|
|
<p class="text-xs text-gray-400 mt-1">Used to compute <code class="bg-gray-200 px-1 py-0.5 rounded">X-Forage-Signature</code> (HMAC-SHA256) so you can verify payloads are from Forage</p>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<button type="submit" class="w-full px-4 py-2.5 text-sm font-medium bg-gray-900 text-white rounded-md hover:bg-gray-800 transition-colors">
|
|
Install webhook
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
{% endblock %}
|