Add Pterodactyl API key form to /account/edit page

Author: ddrayko

public/js/app.js

@@ -1241,11 +1241,62 @@ function renderAccountEdit() {
           <button type="submit" class="btn btn-primary btn-full" id="change-pw-btn">Change Password</button>
         </form>
       </div>
+
+      <div class="card">
+        <h2 class="card-title" style="margin-bottom:8px">Pterodactyl API Key</h2>
+        <p style="color:var(--text-secondary);font-size:0.85rem;line-height:1.6;margin-bottom:16px">
+          Add your Pterodactyl Client API key to enable live resource monitoring and server power state detection directly in the dashboard.
+          Generate one at <a href="https://panel.zero-host.org/account/api" target="_blank">panel.zero-host.org/account/api</a>.
+        </p>
+        <form id="api-key-form">
+          <div class="api-key-input-group">
+            <input type="password" id="ptero-api-key-input" placeholder="ptla_..." autocomplete="off" />
+            <button type="submit" class="btn btn-primary" id="save-api-key-btn">Save</button>
+          </div>
+        </form>
+        <div id="api-key-status" style="margin-top:8px;font-size:0.82rem;color:var(--text-muted)"></div>
+      </div>
     </div>
   `;
 
   $('#change-email-form').addEventListener('submit', handleChangeEmail);
   $('#change-password-form').addEventListener('submit', handleChangePassword);
+  $('#api-key-form').addEventListener('submit', handleSaveApiKey);
+}
+
+async function handleSaveApiKey(e) {
+  e.preventDefault();
+  const btn = $('#save-api-key-btn');
+  const input = $('#ptero-api-key-input');
+  const status = $('#api-key-status');
+  const key = input.value.trim();
+
+  if (!key) {
+    status.textContent = 'Please enter an API key.';
+    status.style.color = 'var(--accent-red)';
+    return;
+  }
+
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner"></span>';
+  status.textContent = '';
+
+  try {
+    await api('/servers/client-api-key', {
+      method: 'PUT',
+      body: JSON.stringify({ apiKey: key }),
+    });
+    status.textContent = 'API key saved successfully!';
+    status.style.color = 'var(--accent-green)';
+    input.value = '';
+    showToast('Pterodactyl API key saved', 'success');
+  } catch (err) {
+    status.textContent = err.message;
+    status.style.color = 'var(--accent-red)';
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = 'Save';
+  }
 }
 
 function renderAccountLinks() {