oauth/show.html: simpler layout, fix HTML escaping, no textarea
This commit is contained in:
+74
-85
@@ -10,131 +10,120 @@
|
|||||||
.card{background:#1e293b;border-radius:12px;padding:2rem;box-shadow:0 4px 24px rgba(0,0,0,.4)}
|
.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}
|
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}
|
.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-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}
|
||||||
.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;z-index:1}
|
||||||
.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:hover{background:#475569}
|
||||||
.copy-btn.copied{background:#059669;color:#fff}
|
.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}
|
.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-row:last-child{border-bottom:none}
|
||||||
.detail-label{color:#64748b}
|
.detail-label{color:#64748b;white-space:nowrap}
|
||||||
.detail-value{color:#f1f5f9;font-family:monospace;font-size:.8125rem;word-break:break-all;text-align:right;max-width:70%}
|
.detail-value{color:#f1f5f9;font-family:monospace;font-size:.8125rem;word-break:break-all;text-align:right}
|
||||||
.detail-value.ok{color:#22c55e}
|
.detail-value.ok{color:#22c55e}
|
||||||
.detail-value.err{color:#ef4444}
|
|
||||||
.empty-state{text-align:center;padding:2rem 0;color:#475569}
|
.empty-state{text-align:center;padding:2rem 0;color:#475569}
|
||||||
.empty-state .icon{font-size:3rem;margin-bottom:1rem}
|
.empty-state .icon{font-size:3rem;margin-bottom:1rem}
|
||||||
.empty-state p{font-size:.875rem;margin-bottom:.5rem}
|
.empty-state p{font-size:.875rem;margin-bottom:.5rem}
|
||||||
.footer{text-align:center;margin-top:2rem;color:#475569;font-size:.8125rem}
|
.footer{text-align:center;margin-top:2rem;color:#475569;font-size:.8125rem}
|
||||||
.pill{padding:2px 8px;border-radius:4px;font-size:.75rem}
|
.pill{display:inline-block;padding:2px 10px;border-radius:4px;font-size:.75rem;font-weight:500}
|
||||||
.pill.ok{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
|
.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,.15);color:#ef4444;border:1px solid rgba(239,68,68,.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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card" id="app">
|
<div class="card" id="app">
|
||||||
<h1>
|
<h1><span>🔐</span><span>OAuth Callback</span></h1>
|
||||||
<span>🔐</span>
|
|
||||||
<span>OAuth Callback</span>
|
|
||||||
</h1>
|
|
||||||
<p class="sub">Skald Connectors · authorization code receiver</p>
|
<p class="sub">Skald Connectors · authorization code receiver</p>
|
||||||
<div id="content"></div>
|
<div id="content"></div>
|
||||||
</div>
|
</div>
|
||||||
<p class="footer">
|
<p class="footer"><a href="/">← back to connectors</a></p>
|
||||||
<a href="/" style="color:#475569">← back to connectors</a>
|
|
||||||
</p>
|
|
||||||
<script>
|
<script>
|
||||||
const params = new URLSearchParams(location.search);
|
const p = new URLSearchParams(location.search);
|
||||||
const code = params.get('code');
|
const code = p.get('code');
|
||||||
const error = params.get('error');
|
const err = p.get('error');
|
||||||
const state = params.get('state');
|
const edesc = p.get('error_description') || '';
|
||||||
const scope = params.get('scope');
|
const state = p.get('state');
|
||||||
const authuser = params.get('authuser');
|
const scope = p.get('scope');
|
||||||
const hd = params.get('hd');
|
const extra = ['authuser','hd','prompt','redirect_uri'].filter(k => p.has(k)).map(k => [k, p.get(k)]);
|
||||||
const prompt = params.get('prompt');
|
|
||||||
|
|
||||||
const el = document.getElementById('content');
|
const el = document.getElementById('content');
|
||||||
|
|
||||||
function detail(label, value, cls) {
|
function esc(s) {
|
||||||
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');
|
const d = document.createElement('div');
|
||||||
d.textContent = s;
|
d.textContent = s;
|
||||||
return d.innerHTML;
|
return d.innerHTML;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
function detail(label, value, cls) {
|
||||||
const desc = params.get('error_description') || '';
|
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 =
|
el.innerHTML =
|
||||||
'<div class="empty-state">' +
|
'<div class="empty-state"><div class="icon">❌</div>' +
|
||||||
'<div class="icon">❌</div>' +
|
|
||||||
'<p style="color:#ef4444;font-weight:600">Authorization denied</p>' +
|
'<p style="color:#ef4444;font-weight:600">Authorization denied</p>' +
|
||||||
'<p style="color:#94a3b8;margin-top:.5rem">' + escape(error) + '</p>' +
|
'<p style="color:#94a3b8;margin-top:.5rem">'+esc(err)+'</p>' +
|
||||||
(desc ? '<p style="color:#64748b;margin-top:.25rem;font-size:.8125rem">' + escape(desc) + '</p>' : '') +
|
(edesc ? '<p style="color:#64748b;margin-top:.25rem;font-size:.8125rem">'+esc(edesc)+'</p>' : '') +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div style="margin-top:1rem">' +
|
'<div style="margin-top:1rem">' +
|
||||||
detail('error', error, 'err') +
|
detail('error', err, 'err') +
|
||||||
(desc ? detail('description', desc) : '') +
|
(edesc ? detail('description', edesc) : '') +
|
||||||
(state ? detail('state', state) : '') +
|
(state ? detail('state', state) : '') +
|
||||||
'</div>';
|
'</div>';
|
||||||
} else if (code) {
|
} else if (code) {
|
||||||
el.innerHTML =
|
el.innerHTML =
|
||||||
'<div style="display:flex;align-items:center;gap:.5rem;margin-bottom:1rem">' +
|
'<div style="margin-bottom:1rem"><span class="pill ok">✓ code received</span></div>';
|
||||||
'<span class="pill ok">✓ code received</span>' +
|
|
||||||
'</div>' +
|
const box = makeCodeBox(code);
|
||||||
'<label class="code-block">' +
|
el.appendChild(box);
|
||||||
'<textarea id="auth-code" readonly onclick="this.select()">' + escape(code) + '</textarea>' +
|
|
||||||
'<button class="copy-btn" id="copy-btn" onclick="copyCode()">📋 Copy</button>' +
|
const info = document.createElement('div');
|
||||||
'</label>' +
|
info.innerHTML =
|
||||||
'<div>' +
|
|
||||||
detail('authorization code', code.substring(0,20)+'…'+code.substring(code.length-8), 'ok') +
|
detail('authorization code', code.substring(0,20)+'…'+code.substring(code.length-8), 'ok') +
|
||||||
(scope ? detail('scope', scope) : '') +
|
(scope ? detail('scope', scope) : '') +
|
||||||
(state ? detail('state', state) : '') +
|
(state ? detail('state', state) : '') +
|
||||||
(authuser ? detail('authuser', authuser) : '') +
|
extra.map(([k,v]) => detail(k, v)).join('') +
|
||||||
(hd ? detail('hosted domain', hd) : '') +
|
'<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>';
|
||||||
(prompt ? detail('prompt', prompt) : '') +
|
el.appendChild(info);
|
||||||
'</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 {
|
} else {
|
||||||
el.innerHTML =
|
el.innerHTML =
|
||||||
'<div class="empty-state">' +
|
'<div class="empty-state">' +
|
||||||
'<div class="icon">👀</div>' +
|
'<div class="icon">👀</div>' +
|
||||||
'<p>Waiting for an OAuth authorization code…</p>' +
|
'<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">This page receives callbacks from Google after you authorize a Skald connector.</p>' +
|
||||||
'<p style="font-size:.8rem">after you authorize a Skald connector.</p>' +
|
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'<div style="margin-top:1rem;padding:.75rem;background:#0f172a;border-radius:6px">' +
|
'<div class="debug-url">🔧 '+esc(location.href)+'</div>';
|
||||||
'<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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user