feat: add integrations

Signed-off-by: kjuulh <contact@kjuulh.io>
This commit is contained in:
2026-03-08 23:00:14 +01:00
parent 5a5f9a3003
commit 646581ff44
65 changed files with 7774 additions and 127 deletions

View File

@@ -0,0 +1,75 @@
{% extends "base.html.jinja" %}
{% block content %}
<section class="max-w-2xl mx-auto px-4 py-12">
<div class="text-center mb-8">
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-50 mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<h1 class="text-2xl font-bold">{{ integration.type_display }} installed</h1>
<p class="text-sm text-gray-500 mt-1"><strong>{{ integration.name }}</strong> is now active in {{ current_org }}.</p>
</div>
{# ── API Token (shown once) ───────────────────────────────── #}
{% if api_token %}
<div class="mb-8 p-5 bg-amber-50 border border-amber-200 rounded-lg">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
<div class="min-w-0 flex-1">
<h3 class="text-sm font-semibold text-amber-800 mb-1">API Token</h3>
<p class="text-sm text-amber-700 mb-3">This token allows the integration to query the Forage API. Copy it now &mdash; it won't be shown again.</p>
<div class="relative">
<code id="api-token" class="block w-full px-3 py-2 text-sm font-mono bg-white border border-amber-300 rounded-md text-gray-900 break-all select-all">{{ api_token }}</code>
<button type="button" onclick="copyToken()" id="copy-btn" class="absolute top-1.5 right-1.5 px-2 py-1 text-xs bg-amber-100 text-amber-700 rounded hover:bg-amber-200 transition-colors">
Copy
</button>
</div>
</div>
</div>
</div>
{% endif %}
{# ── What's next ──────────────────────────────────────────── #}
<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">What's next</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>Configure which events trigger notifications on the integration settings page</span>
</li>
<li class="flex items-start gap-2">
<span class="text-gray-400 mt-0.5">2.</span>
<span>Use the API token to query releases, projects, and notifications from your service</span>
</li>
<li class="flex items-start gap-2">
<span class="text-gray-400 mt-0.5">3.</span>
<span>Send a test event to verify your endpoint receives payloads correctly</span>
</li>
</ul>
</div>
<div class="flex gap-3">
<a href="/orgs/{{ current_org }}/settings/integrations/{{ integration.id }}" class="flex-1 text-center px-4 py-2.5 text-sm font-medium bg-gray-900 text-white rounded-md hover:bg-gray-800 transition-colors">
Configure integration
</a>
<a href="/orgs/{{ current_org }}/settings/integrations" class="flex-1 text-center px-4 py-2.5 text-sm font-medium border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
Back to integrations
</a>
</div>
</section>
<script>
function copyToken() {
var token = document.getElementById('api-token').textContent;
navigator.clipboard.writeText(token).then(function() {
var btn = document.getElementById('copy-btn');
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
});
}
</script>
{% endblock %}