131 lines
6.2 KiB
HTML
131 lines
6.2 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-box{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.5rem;position:relative;word-break:break-all;font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:.875rem;line-height:1.6;color:#a5f3fc;cursor:text;user-select:all}
|
|
.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;z-index:1}
|
|
.copy-btn:hover{background:#475569}
|
|
.copy-btn.ok{background:#059669;color:#fff}
|
|
.detail-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #1e293b;font-size:.875rem;gap:1rem}
|
|
.detail-row:last-child{border-bottom:none}
|
|
.detail-label{color:#64748b;white-space:nowrap}
|
|
.detail-value{color:#f1f5f9;font-family:monospace;font-size:.8125rem;word-break:break-all;text-align:right}
|
|
.detail-value.ok{color:#22c55e}
|
|
.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{display:inline-block;padding:2px 10px;border-radius:4px;font-size:.75rem;font-weight:500}
|
|
.pill.ok{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
|
|
.pill.err{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
|
|
.note{color:#64748b;font-size:.8rem;margin-top:1rem;padding:.75rem;background:#0f172a;border-radius:6px;line-height:1.5}
|
|
.debug-url{color:#475569;font-size:.75rem;font-family:monospace;word-break:break-all;background:#0f172a;padding:.75rem;border-radius:6px;margin-top:1rem}
|
|
a{color:#475569;text-decoration:none}
|
|
a:hover{color:#64748b}
|
|
</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="/">← back to connectors</a></p>
|
|
<script>
|
|
const p = new URLSearchParams(location.search);
|
|
const code = p.get('code');
|
|
const err = p.get('error');
|
|
const edesc = p.get('error_description') || '';
|
|
const state = p.get('state');
|
|
const scope = p.get('scope');
|
|
const extra = ['authuser','hd','prompt','redirect_uri'].filter(k => p.has(k)).map(k => [k, p.get(k)]);
|
|
|
|
const el = document.getElementById('content');
|
|
|
|
function esc(s) {
|
|
const d = document.createElement('div');
|
|
d.textContent = s;
|
|
return d.innerHTML;
|
|
}
|
|
|
|
function detail(label, value, cls) {
|
|
return '<div class="detail-row"><span class="detail-label">'+esc(label)+'</span><span class="detail-value '+(cls||'')+'">'+esc(value)+'</span></div>';
|
|
}
|
|
|
|
function makeCodeBox(text) {
|
|
const e = document.createElement('div');
|
|
e.className = 'code-box';
|
|
e.textContent = text;
|
|
|
|
const btn = document.createElement('button');
|
|
btn.className = 'copy-btn';
|
|
btn.textContent = '📋 Copy';
|
|
btn.onclick = async function(ev) {
|
|
ev.stopPropagation();
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
} catch {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
ta.style.position = 'fixed'; ta.style.left = '-9999px';
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
}
|
|
btn.textContent = '✓ Copied!';
|
|
btn.className = 'copy-btn ok';
|
|
setTimeout(() => { btn.textContent = '📋 Copy'; btn.className = 'copy-btn'; }, 2000);
|
|
};
|
|
e.appendChild(btn);
|
|
return e;
|
|
}
|
|
|
|
if (err) {
|
|
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">'+esc(err)+'</p>' +
|
|
(edesc ? '<p style="color:#64748b;margin-top:.25rem;font-size:.8125rem">'+esc(edesc)+'</p>' : '') +
|
|
'</div>' +
|
|
'<div style="margin-top:1rem">' +
|
|
detail('error', err, 'err') +
|
|
(edesc ? detail('description', edesc) : '') +
|
|
(state ? detail('state', state) : '') +
|
|
'</div>';
|
|
} else if (code) {
|
|
el.innerHTML =
|
|
'<div style="margin-bottom:1rem"><span class="pill ok">✓ code received</span></div>';
|
|
|
|
const box = makeCodeBox(code);
|
|
el.appendChild(box);
|
|
|
|
const info = document.createElement('div');
|
|
info.innerHTML =
|
|
detail('authorization code', code.substring(0,20)+'…'+code.substring(code.length-8), 'ok') +
|
|
(scope ? detail('scope', scope) : '') +
|
|
(state ? detail('state', state) : '') +
|
|
extra.map(([k,v]) => detail(k, v)).join('') +
|
|
'<div class="note">⚠️ 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.</div>';
|
|
el.appendChild(info);
|
|
} 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 after you authorize a Skald connector.</p>' +
|
|
'</div>' +
|
|
'<div class="debug-url">🔧 '+esc(location.href)+'</div>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|