CubeCraftLabs/CTXD
11
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: OAuth client list scopes button matches admin theme

Browse Source
This commit is contained in:
Joshua
2026-06-25 14:07:32 +00:00
parent 9e85c1b8ec
commit 451732c867
1 changed files with 46 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/ctxd/ui.html
+46 -7
View File
@@ -896,14 +896,15 @@ body {
display: flex;
flex-direction: column;
gap: 0.35rem;
align-items: flex-end;
align-items: stretch;
min-width: 5.5rem;
}
.admin-oauth-row .oauth-row-actions button {
font-size: 0.58rem;
padding: 0.25rem 0.45rem;
width: 100%;
}
.dialog.dialog-admin button.oauth-revoke,
.dialog.dialog-admin .manage-user-actions button {
.dialog.dialog-admin .manage-user-actions button,
.dialog.dialog-admin .oauth-row-actions button {
font-family: var(--font);
font-size: 0.62rem;
text-transform: uppercase;
@@ -917,6 +918,7 @@ body {
border-radius: 0;
-webkit-appearance: none;
}
.dialog.dialog-admin .oauth-row-actions button.oauth-scopes:hover,
.dialog.dialog-admin .manage-user-actions button:hover {
background: var(--hover);
border-color: var(--accent);
@@ -932,6 +934,39 @@ body {
border-color: #d4ae5c;
color: var(--bg);
}
.dialog.dialog-admin .oauth-row-actions button.oauth-scopes {
color: var(--ink);
background: var(--input-bg);
}
.dialog.dialog-admin .oauth-row-actions button.oauth-scopes.active {
border-color: var(--accent);
color: var(--accent);
background: var(--hover);
}
.oauth-scope-edit {
margin-top: 0.45rem;
padding: 0.45rem 0.5rem;
border: 1px solid var(--border);
background: var(--input-bg);
}
.dialog.dialog-admin .oauth-scope-edit button.primary {
font-family: var(--font);
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.28rem 0.5rem;
min-height: 1.85rem;
cursor: pointer;
border: 1px solid var(--accent);
border-radius: 0;
background: var(--accent);
color: var(--bg);
-webkit-appearance: none;
}
.dialog.dialog-admin .oauth-scope-edit button.primary:hover {
background: #d4ae5c;
border-color: #d4ae5c;
}
.dialog.dialog-admin button.oauth-revoke {
border-color: var(--border-light);
color: var(--danger);
@@ -1805,7 +1840,7 @@ async function loadOAuthClients() {
</div>
</div>
<div class="oauth-row-actions">
<button type="button" data-toggle-scopes="${esc}" onclick="toggleOAuthScopeEdit(this.dataset.toggleScopes)">scopes</button>
<button type="button" class="oauth-scopes" data-toggle-scopes="${esc}" onclick="toggleOAuthScopeEdit(this.dataset.toggleScopes, this)">scopes</button>
<button type="button" class="oauth-revoke" data-client-id="${esc}" onclick="revokeOAuthClient(this.dataset.clientId)">revoke</button>
</div>
</div>`;
@@ -1817,10 +1852,14 @@ async function loadOAuthClients() {
}
}
function toggleOAuthScopeEdit(clientId) {
function toggleOAuthScopeEdit(clientId, btn) {
const panel = document.getElementById(`oauth-scope-edit-${clientId}`);
if (!panel) return;
panel.style.display = panel.style.display === 'none' ? 'flex' : 'none';
const open = panel.style.display === 'none';
panel.style.display = open ? 'flex' : 'none';
const row = document.querySelector(`.admin-oauth-row[data-client-id="${CSS.escape(clientId)}"]`);
const toggleBtn = btn || row?.querySelector('button.oauth-scopes');
if (toggleBtn) toggleBtn.classList.toggle('active', open);
}
async function saveOAuthClientScopes(clientId) {