ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: key rotation shows new key in dedicated reveal, not sub-key div; clarify account ID label

This commit is contained in:
M1 2026-03-17 06:29:58 +04:00
parent b80f4673b2
commit 9d8982ae50
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web/src/views/settings.ejs
View File

@ -15,11 +15,11 @@
<h2 class="text-sm font-semibold text-gray-300 mb-4">Account</h2> <h2 class="text-sm font-semibold text-gray-300 mb-4">Account</h2>
<div class="space-y-3"> <div class="space-y-3">
<div> <div>
<label class="block text-xs text-gray-500 mb-1">Account ID</label> <label class="block text-xs text-gray-500 mb-1">Account ID <span class="text-gray-700 normal-case font-normal">(internal — not your login key)</span></label>
<div class="flex gap-2"> <div class="flex gap-2">
<code id="account-id" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-400 text-sm"><%= it.account.id %></code> <code id="account-id" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-600 text-sm"><%= it.account.id %></code>
</div> </div>
<p class="text-xs text-gray-600 mt-1.5">Your secret key was shown once at registration and cannot be displayed again. Use "Rotate Key" below to generate a new one.</p> <p class="text-xs text-gray-600 mt-1.5">Your login key was shown once at registration. Use "Rotate Key" below to replace it — the new key will be shown immediately.</p>
</div> </div>
<div> <div>
<label class="block text-xs text-gray-500 mb-1">Member since</label> <label class="block text-xs text-gray-500 mb-1">Member since</label>
@ -47,6 +47,15 @@
<h2 class="text-sm font-semibold text-gray-300 mb-1">Rotate Primary Key</h2> <h2 class="text-sm font-semibold text-gray-300 mb-1">Rotate Primary Key</h2>
<p class="text-xs text-gray-600 mb-4">Generates a new primary key. Your old key will stop working immediately. Sub-keys are not affected.</p> <p class="text-xs text-gray-600 mb-4">Generates a new primary key. Your old key will stop working immediately. Sub-keys are not affected.</p>
<button onclick="confirmReset()" class="px-4 py-2.5 bg-gray-800 hover:bg-gray-700 border border-red-900/50 hover:border-red-700/50 text-red-400 rounded-lg text-sm transition-colors">Rotate Key</button> <button onclick="confirmReset()" class="px-4 py-2.5 bg-gray-800 hover:bg-gray-700 border border-red-900/50 hover:border-red-700/50 text-red-400 rounded-lg text-sm transition-colors">Rotate Key</button>
<!-- New primary key reveal (shown after rotation) -->
<div id="rotated-key-reveal" class="hidden mt-4 p-4 bg-yellow-950/30 rounded-lg border border-yellow-900/50">
<p class="text-xs text-yellow-400 mb-2">⚠️ New primary key — copy it now. This is the only time it will be shown.</p>
<div class="flex gap-2">
<code id="rotated-key-value" class="flex-1 bg-gray-900 border border-gray-800 rounded-lg px-3 py-2 text-blue-400 text-sm font-mono select-all"></code>
<button onclick="copyRotatedKey()" class="px-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg text-gray-400 hover:text-white text-xs transition-colors">Copy</button>
</div>
</div>
</section> </section>
<!-- Sub-keys --> <!-- Sub-keys -->
@ -131,10 +140,17 @@
async function confirmReset() { async function confirmReset() {
if (!confirm('Rotate your primary key?\n\nYour current key will stop working immediately. Make sure to copy the new one.')) return; if (!confirm('Rotate your primary key?\n\nYour current key will stop working immediately. Make sure to copy the new one.')) return;
const data = await api('/account/reset-key', { method: 'POST', body: {} }); const data = await api('/account/reset-key', { method: 'POST', body: {} });
// New key is shown once — display it in the new-key-reveal area document.getElementById('rotated-key-value').textContent = data.key;
document.getElementById('new-key-value').textContent = data.key; document.getElementById('rotated-key-reveal').classList.remove('hidden');
document.getElementById('new-key-reveal').classList.remove('hidden'); document.getElementById('rotated-key-reveal').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
// Cookie is set server-side by reset-key endpoint }
function copyRotatedKey() {
const val = document.getElementById('rotated-key-value').textContent;
navigator.clipboard.writeText(val);
const btn = event.target;
btn.textContent = 'Copied!'; btn.classList.add('text-green-400');
setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('text-green-400'); }, 1500);
} }
function showCreateKey() { function showCreateKey() {