bsodfather/crank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: use hidden state for api key modal sections

Browse Source
This commit is contained in:
a.tolmachev
2026-05-02 14:56:39 +00:00
parent 46585fb445
commit b938192f0d
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ui/html/api-keys.html
+3 -3
View File
@@ -211,7 +211,7 @@
</div>
</div>
</div>
<div class="modal-body" id="modal-reveal-body" style="display:none;">
<div class="modal-body" id="modal-reveal-body" hidden>
<div class="callout warning" style="margin-bottom:16px;">
<svg class="callout-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--amber)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
<polygon points="8,1.5 15.5,14.5 0.5,14.5" fill="none"/><path d="M8 6v4M8 11.5v.5"/>
@@ -232,7 +232,7 @@
<button class="btn-secondary" id="modal-cancel-btn" type="button" data-i18n="apikeys.modal.cancel">Cancel</button>
<button class="btn-primary" id="modal-confirm-btn" type="button" data-i18n="apikeys.modal.create">Create key</button>
</div>
<div class="modal-footer" id="modal-footer-done" style="display:none;">
<div class="modal-footer" id="modal-footer-done" hidden>
<button class="btn-primary" id="modal-done-btn" type="button" data-i18n="apikeys.modal.done">Done — I've copied the key</button>
</div>
</div>
@@ -263,7 +263,7 @@
<button class="btn-icon" data-i18n-title="apikeys.action.copy_prefix" title="Copy key prefix"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M11 5V3.5A1.5 1.5 0 009.5 2H3.5A1.5 1.5 0 002 3.5v6A1.5 1.5 0 003.5 11H5"/></svg></button>
<button class="btn-icon danger" data-i18n-title="apikeys.action.revoke" title="Revoke key"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.5"/><path d="M5.5 10.5l5-5M10.5 10.5l-5-5"/></svg></button>
</span>
<span class="actions-revoked" style="display:none;">
<span class="actions-revoked" hidden>
<button class="btn-icon" data-i18n-title="apikeys.action.delete" title="Delete"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2h4M2.5 4h11M5 4l.5 9h5l.5-9"/></svg></button>
</span>
</td>
apps/ui/js/api-keys.js
+10 -10
View File
@@ -228,8 +228,8 @@ function renderTable(errorMessage) {
revokeKey(key.id);
});
} else {
actionsActive.style.display = 'none';
actionsRevoked.style.display = '';
actionsActive.hidden = true;
actionsRevoked.hidden = false;
actionsRevoked.querySelector('[title=\"Delete\"]').addEventListener('click', function() {
deleteKey(key.id);
});
@@ -242,10 +242,10 @@ function renderTable(errorMessage) {
var modal = document.getElementById('modal-create');
function openModal() {
document.getElementById('modal-form-body').style.display = '';
document.getElementById('modal-reveal-body').style.display = 'none';
document.getElementById('modal-footer-create').style.display = '';
document.getElementById('modal-footer-done').style.display = 'none';
document.getElementById('modal-form-body').hidden = false;
document.getElementById('modal-reveal-body').hidden = true;
document.getElementById('modal-footer-create').hidden = false;
document.getElementById('modal-footer-done').hidden = true;
document.getElementById('new-key-name').value = '';
selectedScopes = new Set(['read']);
renderScopes();
@@ -289,10 +289,10 @@ document.getElementById('modal-confirm-btn').addEventListener('click', async fun
var created = await createKey(name, Array.from(selectedScopes));
KEYS.unshift(created.record);
document.getElementById('reveal-key-value').textContent = created.rawKey;
document.getElementById('modal-form-body').style.display = 'none';
document.getElementById('modal-reveal-body').style.display = '';
document.getElementById('modal-footer-create').style.display = 'none';
document.getElementById('modal-footer-done').style.display = '';
document.getElementById('modal-form-body').hidden = true;
document.getElementById('modal-reveal-body').hidden = false;
document.getElementById('modal-footer-create').hidden = true;
document.getElementById('modal-footer-done').hidden = false;
renderTable();
if (window.CrankUi) {
window.CrankUi.success(