76 lines
4.1 KiB
Django/Jinja
76 lines
4.1 KiB
Django/Jinja
{% 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 — 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 %}
|