go-loose/web/roles.html
Daniel Noulet 3fdc8cb489 roles
2026-10-04 16:57:30 +02:00

90 lines
4.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-theme="tokyo" data-mode="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark light">
<title>Go Loose · Roles</title>
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<div class="noise"></div>
<header>
<a class="brand" href="/"><span class="brand-mark">GL</span><span>Go Loose</span></a>
<nav>
<a href="/">Console</a>
<a href="/docs">API docs</a>
<label class="compact">Tenant<select id="tenant-context"></select></label>
<label class="compact">Theme
<select id="theme"><option value="tokyo">Tokyo Night</option><option value="catppuccin">Catppuccin</option><option value="tomorrow">Tomorrow</option><option value="kanagawa">Kanagawa</option></select>
</label>
<button id="mode" class="icon-button" title="Toggle light/dark mode">◐</button>
<a id="identity" class="identity" href="/profile"><img id="identity-avatar" alt="" width="22" height="22" hidden><span id="identity-name"></span></a>
<form action="/auth/logout" method="post"><button class="ghost" type="submit">Log out</button></form>
</nav>
</header>
<main>
<section class="hero">
<div>
<p class="eyebrow">ROLE MANAGEMENT</p>
<h1>Who may do<br><span>what, per tenant.</span></h1>
<p class="lede">A role is a named bundle of permissions. Built-in roles are shared by every tenant and cannot be edited; your own tenant can define as many more as it needs.</p>
</div>
<div class="status-card">
<div class="pulse"></div>
<div><strong id="role-summary">Roles</strong><span id="role-tenant">—</span></div>
<code id="role-count">—</code>
</div>
</section>
<div id="notice" class="notice" hidden></div>
<section class="stats" id="stats">
<article><span>Roles</span><strong id="stat-roles">—</strong></article>
<article><span>Built-in</span><strong id="stat-system">—</strong></article>
<article><span>Custom</span><strong id="stat-custom">—</strong></article>
<article><span>Assignable to you</span><strong id="stat-assignable">—</strong></article>
</section>
<section class="panel active" id="roles">
<div class="panel-head">
<div><p class="eyebrow">PERMISSION CATALOG</p><h2>Roles</h2></div>
<button id="new-role">New role</button>
</div>
<div class="table-wrap">
<table>
<thead><tr><th>Role</th><th>Slug</th><th>Permissions</th><th>Members</th><th>Assignable to you</th><th></th></tr></thead>
<tbody id="role-list"></tbody>
</table>
</div>
<p class="muted">You can only create and assign roles that grant no more than you already hold, so managing members can never be used to gain authority.</p>
</section>
<section class="panel active" id="permission-reference">
<div class="panel-head"><div><p class="eyebrow">VOCABULARY</p><h2>Permissions</h2></div></div>
<div class="table-wrap">
<table>
<thead><tr><th>Permission</th><th>What it allows</th></tr></thead>
<tbody id="permission-list"></tbody>
</table>
</div>
</section>
</main>
<dialog id="role-dialog">
<form id="role-form">
<div class="dialog-head"><h3 id="role-dialog-title">New role</h3><button type="button" class="close">×</button></div>
<input type="hidden" name="role_id">
<label id="role-slug-label">Slug<input name="slug" required pattern="[a-z0-9][a-z0-9-]{1,62}" placeholder="release-manager"></label>
<label>Name<input name="name" required maxlength="100" placeholder="Release manager"></label>
<label>Description <small>(optional)</small><textarea name="description" maxlength="500" placeholder="Prepares releases."></textarea></label>
<fieldset><legend>Permissions</legend><div id="role-permissions" class="check-list"></div></fieldset>
<p class="muted" id="role-hint"></p>
<button type="submit">Save role</button>
</form>
</dialog>
<script src="/assets/roles.js" defer></script>
</body>
</html>