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

fix: rotate button inline with key field, updates in place

This commit is contained in:
M1 2026-03-17 06:34:57 +04:00
parent 0c65b5e3fa
commit ab4f60e159
1 changed files with 7 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,9 @@
<div> <div>
<label class="block text-xs text-gray-500 mb-1">Login Key</label> <label class="block text-xs text-gray-500 mb-1">Login Key</label>
<div class="flex gap-2"> <div class="flex gap-2">
<code class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-blue-400 text-sm font-mono select-all"><%= it.loginKey %></code> <code id="login-key-display" class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-blue-400 text-sm font-mono select-all"><%= it.loginKey %></code>
<button onclick="navigator.clipboard.writeText('<%= it.loginKey %>'); this.textContent='Copied!'; setTimeout(()=>this.textContent='Copy',1500)" 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> <button onclick="copyLoginKey()" 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>
<button onclick="confirmReset()" class="px-3 bg-gray-800 hover:bg-gray-700 border border-red-900/50 hover:border-red-700/50 text-red-400 rounded-lg text-xs transition-colors">Rotate</button>
</div> </div>
</div> </div>
<div> <div>
@ -42,21 +43,7 @@
<p id="email-status" class="text-xs mt-2 hidden"></p> <p id="email-status" class="text-xs mt-2 hidden"></p>
</section> </section>
<!-- Reset primary key -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
<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>
<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>
<!-- Sub-keys --> <!-- Sub-keys -->
<section class="bg-gray-900 rounded-xl border border-gray-800 p-6"> <section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
@ -138,15 +125,13 @@
} }
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 login key? Your current key stops working immediately.')) return;
const data = await api('/account/reset-key', { method: 'POST', body: {} }); const data = await api('/account/reset-key', { method: 'POST', body: {} });
document.getElementById('rotated-key-value').textContent = data.key; document.getElementById('login-key-display').textContent = data.key;
document.getElementById('rotated-key-reveal').classList.remove('hidden');
document.getElementById('rotated-key-reveal').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} }
function copyRotatedKey() { function copyLoginKey() {
const val = document.getElementById('rotated-key-value').textContent; const val = document.getElementById('login-key-display').textContent;
navigator.clipboard.writeText(val); navigator.clipboard.writeText(val);
const btn = event.target; const btn = event.target;
btn.textContent = 'Copied!'; btn.classList.add('text-green-400'); btn.textContent = 'Copied!'; btn.classList.add('text-green-400');