86 lines
3.5 KiB
HTML
86 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Universal Auth Test</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/dist/pocketbase.umd.js"></script>
|
|
<script src="auth-universal.js"></script>
|
|
<style>
|
|
body { font-family: sans-serif; background: #f3f4f6; margin: 0; padding: 2em; }
|
|
.test-block { background: #fff; border-radius: 1em; box-shadow: 0 2px 12px #0001; padding: 2em; margin-bottom: 2em; }
|
|
.pattern-btn { margin: 0.2em 0.5em 0.2em 0; padding: 0.5em 1.2em; border-radius: 0.5em; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 1em; }
|
|
.pattern-btn.active { background: #059669; }
|
|
#output { font-family: monospace; background: #f9fafb; border-radius: 0.5em; padding: 1em; margin-top: 1em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-block">
|
|
<h2>Choose Auth Pattern</h2>
|
|
<div id="patterns"></div>
|
|
<div style="margin-top:1em;">
|
|
<button onclick="clearAll()" class="pattern-btn" style="background:#b91c1c;">Clear All Tokens</button>
|
|
</div>
|
|
</div>
|
|
<div class="test-block">
|
|
<h2>Test Actions</h2>
|
|
<button onclick="testToken('pb-user')" class="pattern-btn">Test PB User</button>
|
|
<button onclick="testToken('pb-agent')" class="pattern-btn">Test PB Agent</button>
|
|
<button onclick="testToken('graph-user')" class="pattern-btn">Test Graph User</button>
|
|
<button onclick="testToken('graph-agent')" class="pattern-btn">Test Graph Agent</button>
|
|
<button onclick="showUserInfo()" class="pattern-btn" style="background:#6d28d9;">Show User Info</button>
|
|
<div id="output"></div>
|
|
</div>
|
|
<script>
|
|
const patterns = [
|
|
'pb-user',
|
|
'pb-agent',
|
|
'graph-user',
|
|
'graph-agent',
|
|
'pb-user+graph-user',
|
|
'pb-user+graph-agent',
|
|
'pb-agent+graph-user',
|
|
'pb-agent+graph-agent',
|
|
'pb-user+pb-agent+graph-user+graph-agent'
|
|
];
|
|
let currentPattern = patterns[0];
|
|
function setPattern(p) {
|
|
currentPattern = p;
|
|
Auth.use(p);
|
|
document.querySelectorAll('.pattern-btn').forEach(btn => btn.classList.remove('active'));
|
|
document.querySelectorAll('.pattern-btn[data-pattern="' + p + '"]').forEach(btn => btn.classList.add('active'));
|
|
document.getElementById('output').textContent = `Pattern set: ${p}`;
|
|
}
|
|
function renderPatterns() {
|
|
const el = document.getElementById('patterns');
|
|
el.innerHTML = '';
|
|
patterns.forEach(p => {
|
|
const btn = document.createElement('button');
|
|
btn.textContent = p;
|
|
btn.className = 'pattern-btn' + (p === currentPattern ? ' active' : '');
|
|
btn.setAttribute('data-pattern', p);
|
|
btn.onclick = () => setPattern(p);
|
|
el.appendChild(btn);
|
|
});
|
|
}
|
|
renderPatterns();
|
|
setPattern(currentPattern);
|
|
async function testToken(type) {
|
|
try {
|
|
const token = await Auth.ensureToken(type);
|
|
document.getElementById('output').textContent = `${type} token: ${token ? token.substring(0, 40) + '...' : 'NONE'}`;
|
|
} catch (err) {
|
|
document.getElementById('output').textContent = `Error: ${err.message}`;
|
|
}
|
|
}
|
|
function clearAll() {
|
|
['pb-user','pb-agent','graph-user','graph-agent'].forEach(Auth.clearToken);
|
|
document.getElementById('output').textContent = 'All tokens cleared.';
|
|
}
|
|
function showUserInfo() {
|
|
const info = Auth.getUserInfo();
|
|
document.getElementById('output').textContent = 'User Info: ' + JSON.stringify(info, null, 2);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|