Examples: simplify profile demo to print the result code
This commit is contained in:
+20
-24
@@ -10,10 +10,10 @@
|
|||||||
}
|
}
|
||||||
.section a, .section button {
|
.section a, .section button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0.2em 0.6em;
|
padding: 0.4em;
|
||||||
margin: 1px 4px 1px 0;
|
margin-right: 0.3em;
|
||||||
border: none;
|
border: none;
|
||||||
background: #ccc8;
|
background: #aaa2;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -38,10 +38,10 @@
|
|||||||
<div class="section">
|
<div class="section">
|
||||||
<h2>API Mode (not leaving the page)</h2>
|
<h2>API Mode (not leaving the page)</h2>
|
||||||
<p>For SPAs and fetch() calls - shows auth in an iframe overlay:</p>
|
<p>For SPAs and fetch() calls - shows auth in an iframe overlay:</p>
|
||||||
|
<button onclick="profileDemo()">👤 Login/Profile</button>
|
||||||
<button onclick="apiCall('/auth/api/user-info', 'GET')">📋 Get User Info</button>
|
<button onclick="apiCall('/auth/api/user-info', 'GET')">📋 Get User Info</button>
|
||||||
<button onclick="apiCall('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
|
<button onclick="apiCall('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
|
||||||
<button onclick="apiCall('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
|
<button onclick="apiCall('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
|
||||||
<button onclick="profileDemo()">👤 Profile Summary</button>
|
|
||||||
<button onclick="logout()">🚪 Logout</button>
|
<button onclick="logout()">🚪 Logout</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -60,51 +60,47 @@
|
|||||||
<script type="module">
|
<script type="module">
|
||||||
import { apiFetch, apiJson, AuthCancelledError, profile } from '/paskia-js/dist/paskia.js'
|
import { apiFetch, apiJson, AuthCancelledError, profile } from '/paskia-js/dist/paskia.js'
|
||||||
|
|
||||||
const output = document.getElementById('output');
|
|
||||||
|
|
||||||
function log(msg) {
|
function log(msg) {
|
||||||
output.textContent = msg;
|
console.log(msg)
|
||||||
|
document.getElementById('output').textContent = msg
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make an API call using paskia module (handles 401/403 automatically)
|
// Make an API call using paskia module (handles 401/403 automatically)
|
||||||
window.apiCall = async function(url, method = 'GET') {
|
window.apiCall = async function(url, method = 'GET') {
|
||||||
log(`${method} ${url}...`);
|
log(`${method} ${url}...`)
|
||||||
try {
|
try {
|
||||||
const response = await apiFetch(url, { method });
|
const response = await apiFetch(url, { method })
|
||||||
|
|
||||||
// Forward endpoint returns 204 on success
|
// Forward endpoint returns 204 on success
|
||||||
if (response.status === 204) {
|
if (response.status === 204) {
|
||||||
log('✓ Success (204 No Content)');
|
log('✓ Success (204 No Content)')
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
log(`Error: ${response.status} ${response.statusText}`);
|
log(`Error: ${response.status} ${response.statusText}`)
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json()
|
||||||
log('✓ Response:\n' + JSON.stringify(data, null, 2));
|
log('✓ Response:\n' + JSON.stringify(data, null, 2))
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof AuthCancelledError) {
|
if (e instanceof AuthCancelledError) {
|
||||||
log('Authentication cancelled');
|
log('Authentication cancelled')
|
||||||
} else {
|
} else {
|
||||||
log(`Error: ${e.message}`);
|
log(`Error: ${e.message}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.logout = async function() {
|
window.logout = async function() {
|
||||||
await fetch('/auth/api/logout', { method: 'POST' });
|
await fetch('/auth/api/logout', { method: 'POST' })
|
||||||
log('Logged out');
|
log('Logged out')
|
||||||
}
|
}
|
||||||
|
|
||||||
// Profile dialog: resolves 'logout' if the user signed out inside the
|
// Profile dialog: resolves 'login' / 'logout' / 'back'
|
||||||
// frame, 'back' if closed without action.
|
|
||||||
window.profileDemo = async function() {
|
window.profileDemo = async function() {
|
||||||
log('Opening profile dialog...');
|
log(`Profile return: ${await profile()}`)
|
||||||
const result = await profile();
|
|
||||||
log(result === 'logout' ? 'Logged out inside the profile dialog' : 'Profile dialog closed (Back)');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user