dnoulet/go-loose
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: account menu, database roles, and single logout

Browse source 
Bundles the console work from the current branch: the header account
control, database-backed roles and permissions, and signing out across
the applications that share this sign-in.

The account control replaces a separate identity chip and a separate
sign-out button, which meant the header carried two controls describing
one fact. web/account.js is mounted into every page by a placeholder and
owns the keyboard handling, the outside-click behaviour and the sign-out
form once. It also fills the trigger's name, which the previous markup
left empty.

Signing out revokes the hosted-login bearer sessions this installation
issued, then redirects to the provider's end_session_endpoint when the
discovery document advertises one. Applications that authenticate
against this installation therefore lose their session too; one pointed
straight at an identity provider is out of its reach and is unchanged.

Roles and permissions become rows rather than a closed enum, so a tenant
can extend the catalog without a migration, and a role can no longer be
granted a capability that is not in it. requireSameOrigin now compares
against the origin the request arrived on instead of the configured base
URL, which defaulted to http://localhost:8080 and so rejected every
write in a deployment that never set it.

Two bugs found while verifying in a browser:

  - A profile picture never rendered. avatarURL built an absolute URL
    from the configured base URL, and the page's own img-src 'self'
    blocked it. The console's own pages now take a root-relative path;
    only /connect/userinfo, read from another origin, needs an absolute
    one, and it follows the request.
  - absoluteURL preferred the configuration over the request while its
    comment claimed the opposite, which also misdirected the logout
    redirect.

Card layout: the footer was one two-column row shared between a label
and a forty-character identifier, so the identifier took the width and
crushed its label into three stacked words. Each pair is a line now, the
value truncates with the full text in the title, and cards align their
footers across a row.
This commit is contained in:
Daniel Noulet 2026-10-05 19:18:07 +02:00
parent 3fdc8cb489
commit c7c81fb65c
43 changed files with 2248 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

132
web/account.js Normal file
View file

@ -0,0 +1,132 @@
// The header account control.
//
// One component, mounted into every page by the placeholder below it, so the
// identity and the two things a person can do about their own account live
// together. It replaced a separate sign-out button, which meant the header showed
// two controls describing one fact.
//
// The menu is rendered here rather than duplicated into each page's markup so that
// the keyboard handling, the outside-click behaviour and the sign-out form exist
// once. The trade is one small request for the profile, which the pages that show a
// tenant context were making anyway.
//
// The sign-out item is a real form posting to /auth/logout rather than a fetch, so
// signing out works without JavaScript and cannot be triggered by a stray
// cross-site request: the endpoint only accepts POST.
//
// Everything is wrapped in an IIFE and exposed only as window.mountAccountMenu.
// These are classic scripts sharing one global scope, so a top-level const here
// would collide with the escapeHTML and initials that each page already declares,
// and the collision is a SyntaxError that stops the whole script before it runs.
(function () {
const escapeHTML = value => String(value ?? '').replace(/[&<>"']/g, character => ({
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#39;'
}[character]));
const initials = name => String(name || '?')
.split(/[\s@._-]+/)
.filter(Boolean)
.slice(0, 2)
.map(part => part[0].toUpperCase())
.join('') || '?';
async function loadProfile() {
const response = await fetch('/api/v1/profile', {
credentials: 'same-origin',
headers: {accept: 'application/json'}
});
if (response.status === 401) {
// Signed out: the page itself will redirect, so there is nothing to show.
return null
}
if (!response.ok) return null;
return response.json()
}
// Mounts the control into a placeholder element. Exported on window because the
// pages load their own script and there is no module loader here; the alternative
// would be repeating this markup and this wiring in every page.
function mount(host) {
if (!host || host.dataset.mounted === 'true') return;
host.dataset.mounted = 'true';
host.classList.add('account');
host.innerHTML = `
<button type="button" class="account-trigger" aria-haspopup="true" aria-expanded="false" hidden>
<span class="account-avatar-slot"></span>
<span class="account-name"></span>
<span class="account-caret" aria-hidden="true">▾</span>
</button>
<div class="account-menu" role="menu" hidden>
<div class="account-identity">
<strong class="account-display-name"></strong>
<span class="account-email"></span>
</div>
<a class="account-profile" role="menuitem" href="/profile">Edit profile</a>
<form method="post" action="/auth/logout">
<button type="submit" role="menuitem">Log out</button>
</form>
<p class="account-note" hidden>Signing out here also ends your sessions in the applications that use this sign-in.</p>
</div>`;
const trigger = host.querySelector('.account-trigger');
const menu = host.querySelector('.account-menu');
const note = host.querySelector('.account-note');
const setOpen = open => {
menu.hidden = !open;
trigger.setAttribute('aria-expanded', String(open));
};
trigger.addEventListener('click', event => {
event.stopPropagation();
setOpen(menu.hidden)
});
// Escape closes and returns focus, which is the one keyboard path a menu has to
// get right: without it the menu is a trap for anyone not using a mouse.
document.addEventListener('keydown', event => {
if (event.key !== 'Escape' || menu.hidden) return;
setOpen(false);
trigger.focus()
});
// A click anywhere else dismisses it. Capture phase, so a click that also
// dismisses a dialog underneath does not race this.
document.addEventListener('click', () => setOpen(false), true);
loadProfile().then(profile => {
if (!profile) {
// No session: leave the control hidden rather than showing an empty name.
return
}
const name = profile.display_name || profile.email || '';
// The trigger and the menu both carry the name. Filling only the menu
// leaves the header showing a picture and a caret with no name beside
// them, which is the one thing the control exists to say.
host.querySelector('.account-name').textContent = name;
host.querySelector('.account-display-name').textContent = name;
host.querySelector('.account-email').textContent = profile.email || '';
const slot = host.querySelector('.account-avatar-slot');
slot.innerHTML = profile.avatar_url
? `<img class="avatar" src="${escapeHTML(profile.avatar_url)}" alt="" width="24" height="24">`
: `<span class="avatar avatar-empty">${escapeHTML(initials(name))}</span>`;
trigger.hidden = false;
// Only explain the cross-application effect when it is true. A person with
// no hosted-login sessions has nothing to sign out of elsewhere.
const usesHostedLogin = (profile.memberships || []).length > 0;
note.hidden = !usesHostedLogin
})
};
window.mountAccountMenu = mount
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('[data-account-menu]').forEach(mount)
})
})()