From ab4f60e1592c3d03f878f01c632faf20ca270a85 Mon Sep 17 00:00:00 2001
From: M1 <m1-pro@M1s-MacBook-Pro.local>
Date: Tue, 17 Mar 2026 06:34:57 +0400
Subject: [PATCH] fix: rotate button inline with key field, updates in place

---
 apps/web/src/views/settings.ejs | 29 +++++++----------------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/views/settings.ejs b/apps/web/src/views/settings.ejs
index 6c76d0d..395f313 100644
--- a/apps/web/src/views/settings.ejs
+++ b/apps/web/src/views/settings.ejs
@@ -17,8 +17,9 @@
         <div>
           <label class="block text-xs text-gray-500 mb-1">Login Key</label>
           <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>
-            <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>
+            <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="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>
@@ -42,21 +43,7 @@
       <p id="email-status" class="text-xs mt-2 hidden"></p>
     </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 -->
     <section class="bg-gray-900 rounded-xl border border-gray-800 p-6">
@@ -138,15 +125,13 @@
     }
 
     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: {} });
-      document.getElementById('rotated-key-value').textContent = data.key;
-      document.getElementById('rotated-key-reveal').classList.remove('hidden');
-      document.getElementById('rotated-key-reveal').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      document.getElementById('login-key-display').textContent = data.key;
     }
 
-    function copyRotatedKey() {
-      const val = document.getElementById('rotated-key-value').textContent;
+    function copyLoginKey() {
+      const val = document.getElementById('login-key-display').textContent;
       navigator.clipboard.writeText(val);
       const btn = event.target;
       btn.textContent = 'Copied!'; btn.classList.add('text-green-400');