dguiducci
51d166017d
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
142 lines
6.6 KiB
HTML
142 lines
6.6 KiB
HTML
<!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>
|