From 51d166017d52e58af9e52978c8827f8f2d2acd9e Mon Sep 17 00:00:00 2001
From: xavix-yo <daniele.guiducci@gmail.com>
Date: Fri, 17 Jul 2026 13:43:14 +0100
Subject: [PATCH] Add OAuth callback page (oauth/show.html)

Client-side page that captures the OAuth authorization code from
Google's redirect URL (?code=...) and displays it in a textarea
for copy-paste into Skald. Shows error details on failure.

Access at https://connectors.skaldagent.net/oauth/show.html
---
 connectors/oauth/show.html | 141 +++++++++++++++++++++++++++++++++++++
 1 file changed, 141 insertions(+)
 create mode 100644 connectors/oauth/show.html
diff --git a/connectors/oauth/show.html b/connectors/oauth/show.html
new file mode 100644
index 0000000..9abcc51
--- /dev/null
+++ b/connectors/oauth/show.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>OAuth Callback · Skald Connectors</title>
+  <style>
+    *{margin:0;padding:0;box-sizing:border-box}
+    body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;padding:2rem;max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
+    .card{background:#1e293b;border-radius:12px;padding:2rem;box-shadow:0 4px 24px rgba(0,0,0,.4)}
+    h1{font-size:1.5rem;color:#38bdf8;margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem}
+    .sub{color:#64748b;margin-bottom:1.5rem;font-size:.875rem}
+    .code-block{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:1rem;margin-bottom:1.5rem;position:relative}
+    .code-block textarea{width:100%;min-height:100px;background:transparent;border:none;color:#a5f3fc;font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:.875rem;line-height:1.5;resize:vertical;outline:none}
+    .copy-btn{background:#334155;color:#e2e8f0;border:none;border-radius:6px;padding:.4rem .8rem;font-size:.75rem;cursor:pointer;position:absolute;top:.75rem;right:.75rem;transition:background .15s}
+    .copy-btn:hover{background:#475569}
+    .copy-btn.copied{background:#059669;color:#fff}
+    .detail-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #1e293b;font-size:.875rem}
+    .detail-row:last-child{border-bottom:none}
+    .detail-label{color:#64748b}
+    .detail-value{color:#f1f5f9;font-family:monospace;font-size:.8125rem;word-break:break-all;text-align:right;max-width:70%}
+    .detail-value.ok{color:#22c55e}
+    .detail-value.err{color:#ef4444}
+    .empty-state{text-align:center;padding:2rem 0;color:#475569}
+    .empty-state .icon{font-size:3rem;margin-bottom:1rem}
+    .empty-state p{font-size:.875rem;margin-bottom:.5rem}
+    .footer{text-align:center;margin-top:2rem;color:#475569;font-size:.8125rem}
+    .pill{padding:2px 8px;border-radius:4px;font-size:.75rem}
+    .pill.ok{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
+    .pill.err{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
+  </style>
+</head>
+<body>
+  <div class="card" id="app">
+    <h1>
+      <span>🔐</span>
+      <span>OAuth Callback</span>
+    </h1>
+    <p class="sub">Skald Connectors · authorization code receiver</p>
+    <div id="content"></div>
+  </div>
+  <p class="footer">
+    <a href="/" style="color:#475569">← back to connectors</a>
+  </p>
+  <script>
+    const params = new URLSearchParams(location.search);
+    const code = params.get('code');
+    const error = params.get('error');
+    const state = params.get('state');
+    const scope = params.get('scope');
+    const authuser = params.get('authuser');
+    const hd = params.get('hd');
+    const prompt = params.get('prompt');
+
+    const el = document.getElementById('content');
+
+    function detail(label, value, cls) {
+      return '<div class="detail-row">' +
+        '<span class="detail-label">' + label + '</span>' +
+        '<span class="detail-value ' + (cls || '') + '">' + escape(value) + '</span>' +
+        '</div>';
+    }
+
+    function escape(s) {
+      const d = document.createElement('div');
+      d.textContent = s;
+      return d.innerHTML;
+    }
+
+    if (error) {
+      const desc = params.get('error_description') || '';
+      el.innerHTML =
+        '<div class="empty-state">' +
+        '<div class="icon">❌</div>' +
+        '<p style="color:#ef4444;font-weight:600">Authorization denied</p>' +
+        '<p style="color:#94a3b8;margin-top:.5rem">' + escape(error) + '</p>' +
+        (desc ? '<p style="color:#64748b;margin-top:.25rem;font-size:.8125rem">' + escape(desc) + '</p>' : '') +
+        '</div>' +
+        '<div style="margin-top:1rem">' +
+        detail('error', error, 'err') +
+        (desc ? detail('description', desc) : '') +
+        (state ? detail('state', state) : '') +
+        '</div>';
+    } else if (code) {
+      el.innerHTML =
+        '<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:1rem">' +
+        '<span class="pill ok">✓ code received</span>' +
+        '</div>' +
+        '<label class="code-block">' +
+        '<textarea id="auth-code" readonly onclick="this.select()">' + escape(code) + '</textarea>' +
+        '<button class="copy-btn" id="copy-btn" onclick="copyCode()">📋 Copy</button>' +
+        '</label>' +
+        '<div>' +
+        detail('authorization code', code.substring(0, 20) + '…' + code.substring(code.length - 8), 'ok') +
+        (scope ? detail('scope', scope) : '') +
+        (state ? detail('state', state) : '') +
+        (authuser ? detail('authuser', authuser) : '') +
+        (hd ? detail('hosted domain', hd) : '') +
+        (prompt ? detail('prompt', prompt) : '') +
+        '</div>' +
+        '<p style="color:#64748b;font-size:.8rem;margin-top:1rem;padding:.75rem;background:#0f172a;border-radius:6px">' +
+        '⚠️ This code is shown only once. Copy it now — Google will not display it again. ' +
+        'The code expires in ~1 minute. Paste it into Skald when prompted.' +
+        '</p>';
+      
+      document.getElementById('copy-btn').addEventListener('click', copyCode);
+    } else {
+      el.innerHTML =
+        '<div class="empty-state">' +
+        '<div class="icon">👀</div>' +
+        '<p>Waiting for an OAuth authorization code…</p>' +
+        '<p style="font-size:.8rem">This page receives callbacks from Google</p>' +
+        '<p style="font-size:.8rem">after you authorize a Skald connector.</p>' +
+        '</div>' +
+        '<div style="margin-top:1rem;padding:.75rem;background:#0f172a;border-radius:6px">' +
+        '<p style="color:#64748b;font-size:.8rem;margin-bottom:.5rem">🔧 Debug — current URL params:</p>' +
+        '<p style="color:#475569;font-size:.75rem;font-family:monospace;word-break:break-all">' +
+        escape(location.href) + '</p>' +
+        '</div>';
+    }
+
+    function copyCode() {
+      const ta = document.getElementById('auth-code');
+      const btn = document.getElementById('copy-btn');
+      if (!ta || !btn) return;
+      ta.select();
+      ta.setSelectionRange(0, 999999);
+      navigator.clipboard.writeText(ta.value).then(() => {
+        btn.textContent = '✓ Copied!';
+        btn.classList.add('copied');
+        setTimeout(() => { btn.textContent = '📋 Copy'; btn.classList.remove('copied'); }, 2000);
+      }).catch(() => {
+        document.execCommand('copy');
+        btn.textContent = '✓ Copied!';
+        btn.classList.add('copied');
+        setTimeout(() => { btn.textContent = '📋 Copy'; btn.classList.remove('copied'); }, 2000);
+      });
+    }
+  </script>
+</body>
+</html>
