peertube-openid-discord/templates/status.html

99 lines
5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OIDC Bridge Status</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.status-ok { color: #4ade80; } /* green-400 */
.status-fail { color: #f87171; } /* red-400 */
.status-info { color: #60a5fa; } /* blue-400 */
</style>
</head>
<body class="bg-gray-900 text-white flex items-center justify-center min-h-screen p-4">
<div class="bg-gray-800 p-8 rounded-lg shadow-2xl w-full max-w-4xl">
<h1 class="text-2xl font-bold text-cyan-400 mb-6">OIDC Bridge Service Status</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Left Column -->
<div class="space-y-6">
<!-- Environment Variable Checks -->
<div>
<h2 class="text-lg font-semibold text-gray-300 border-b border-gray-600 pb-2 mb-3">Configuration Checks</h2>
<ul class="space-y-2 text-sm">
{% for key, value in env_checks.items() %}
<li class="flex justify-between items-center bg-gray-700 p-3 rounded-md">
<span class="font-mono text-gray-400">{{ key }}</span>
{% if value == True or value == 'Set' %}
<span class="font-bold status-ok">SET</span>
{% else %}
<span class="font-bold status-fail">NOT SET</span>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<!-- Connectivity Checks -->
<div>
<h2 class="text-lg font-semibold text-gray-300 border-b border-gray-600 pb-2 mb-3">Connectivity Checks</h2>
<ul class="space-y-2 text-sm">
<li class="flex justify-between items-center bg-gray-700 p-3 rounded-md">
<span class="font-mono text-gray-400">Discord API</span>
{% if discord_api_status == 'OK' %}
<span class="font-bold status-ok">OK</span>
{% else %}
<span class="font-bold status-fail">{{ discord_api_status }}</span>
{% endif %}
</li>
</ul>
</div>
</div>
<!-- Right Column for Recent Requests -->
<div>
<h2 class="text-lg font-semibold text-gray-300 border-b border-gray-600 pb-2 mb-3">Recent Incoming Requests</h2>
<div class="bg-gray-700 rounded-md p-1 max-h-80 overflow-y-auto">
<table class="w-full text-sm text-left">
<thead class="text-xs text-gray-400 uppercase bg-gray-700 sticky top-0">
<tr>
<th scope="col" class="px-4 py-2">Timestamp</th>
<th scope="col" class="px-4 py-2">Endpoint</th>
<th scope="col" class="px-4 py-2">Status</th>
</tr>
</thead>
<tbody>
{% if requests %}
{% for req in requests %}
<tr class="border-b border-gray-600">
<td class="px-4 py-2 text-gray-300 font-mono">{{ req.timestamp }}</td>
<td class="px-4 py-2 font-mono">{{ req.endpoint }}</td>
<td class="px-4 py-2 font-bold">
{% if req.status == 'OK' %}
<span class="status-ok">{{ req.status }}</span>
{% elif req.status == 'FAIL' %}
<span class="status-fail" title="{{ req.error }}">{{ req.status }}</span>
{% else %}
<span class="status-info">{{ req.status }}</span>
{% endif %}
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="3" class="text-center py-4 text-gray-500">No requests from PeerTube received yet.</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
<p class="text-xs text-gray-500 mt-8 text-center">This page can be used to diagnose issues with the OIDC Bridge service.</p>
</div>
</body>
</html>