feat: edit API keys (name, rights); quick dump text above its buttons; inline note badges

- PATCH /keys/{id} renames a key or changes its scopes; the secret stays. Settings → API gets an edit button per key with the same switches as for a new key. - Quick dump: a multiline text gets the full width, the buttons move to their own row below; the bar only goes back to one line once the text is clearly shorter (no flip-flopping). - Notes: the "Erweitert"/"Unteraufgabe" badges sit right after the checkbox text. v0.38.0. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-01 13:34:27 +01:00
1 parent 6f2eb08489
commit 1e3ac9786f
@@ -3,6 +3,7 @@ import {
  Key,
  Plus,
  Trash2,
+  Pencil,
  Copy,
  Check,
  Webhook,
@@ -73,6 +74,58 @@ export const ApiKeysPanel: React.FC<ApiKeysPanelProps> = ({ onIngested }) => {
    api.getTaskLists().then(setTaskLists).catch(() => {});
  }, []);

+  // Editing an existing key: name and rights (the secret stays the same)
+  const [editKeyId, setEditKeyId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editScopes, setEditScopes] = useState<ApiKeyScope[]>([]);
+  const [editError, setEditError] = useState<string | null>(null);
+
+  const startEdit = (k: APIKey) => {
+    setEditKeyId(k.id);
+    setEditName(k.name);
+    setEditScopes(k.scopes.split(',').filter(Boolean) as ApiKeyScope[]);
+    setEditError(null);
+  };
+
+  const toggleEditScope = (id: ApiKeyScope) => {
+    setEditScopes((prev) => {
+      const next = prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id];
+      return next.length > 0 ? next : prev; // at least one
+    });
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editKeyId) return;
+    try {
+      await api.updateAPIKey(editKeyId, { name: editName.trim(), scopes: editScopes });
+      triggerHaptic(15);
+      setEditKeyId(null);
+      await loadKeys();
+    } catch (err: any) {
+      setEditError(err?.message || 'Speichern fehlgeschlagen');
+    }
+  };
+
+  // Switches grouped by tasks, lists and inbox (same layout for a new and an existing key)
+  const renderScopeSwitches = (selected: ApiKeyScope[], toggle: (id: ApiKeyScope) => void, label: string) => (
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-3" role="group" aria-label={label}>
+      {SCOPE_GROUPS.map(([group, heading]) => (
+        <div key={group} className="border border-border rounded-card bg-panel px-3 py-1.5">
+          <p className="text-[11px] text-muted pt-1 pb-0.5 font-semibold">{heading}</p>
+          {SCOPES.filter((sc) => sc.group === group).map((sc) => (
+            <div key={sc.id} className="flex items-center justify-between gap-3 min-h-[44px] sm:min-h-[36px]">
+              <div className="min-w-0">
+                <span className="block text-xs text-main">{sc.label}</span>
+                <span className="block text-[11px] text-muted">{sc.hint}</span>
+              </div>
+              <ToggleSwitch checked={selected.includes(sc.id)} onChange={() => toggle(sc.id)} title={sc.chip} />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+
  const toggleScope = (id: ApiKeyScope) => {
    setNewKeyScopes((prev) => {
      const next = prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id];
@@ -211,25 +264,7 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
              <span>API-Key erzeugen</span>
            </button>
          </div>
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3" role="group" aria-label="Berechtigungen des Schlüssels">
-            {SCOPE_GROUPS.map(([group, heading]) => (
-              <div key={group} className="border border-border rounded-card bg-panel px-3 py-1.5">
-                <p className="text-[11px] text-muted pt-1 pb-0.5 font-semibold">{heading}</p>
-                {SCOPES.filter((sc) => sc.group === group).map((sc) => {
-                  const on = newKeyScopes.includes(sc.id);
-                  return (
-                    <div key={sc.id} className="flex items-center justify-between gap-3 min-h-[44px] sm:min-h-[36px]">
-                      <div className="min-w-0">
-                        <span className="block text-xs text-main">{sc.label}</span>
-                        <span className="block text-[11px] text-muted">{sc.hint}</span>
-                      </div>
-                      <ToggleSwitch checked={on} onChange={() => toggleScope(sc.id)} title={sc.chip} />
-                    </div>
-                  );
-                })}
-              </div>
-            ))}
-          </div>
+          {renderScopeSwitches(newKeyScopes, toggleScope, 'Berechtigungen des Schlüssels')}
        </form>

        {newlyCreatedKey && (
@@ -250,7 +285,39 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
          {keys.length === 0 ? (
            <p className="text-xs text-faint px-3 py-2">Noch keine dedizierten API-Schlüssel hinterlegt.</p>
          ) : (
-            keys.map((k) => (
+            keys.map((k) =>
+              editKeyId === k.id ? (
+                <div key={k.id} className="px-3 py-3 bg-canvas space-y-2">
+                  <div className="flex flex-col sm:flex-row gap-2">
+                    <input
+                      type="text"
+                      value={editName}
+                      onChange={(e) => setEditName(e.target.value)}
+                      aria-label="Name des Schlüssels"
+                      className="w-full sm:flex-1 min-w-0 h-11 sm:h-9 px-3 input-field text-base sm:text-sm"
+                    />
+                    <div className="flex gap-2">
+                      <button type="button" onClick={() => setEditKeyId(null)} className="btn-action h-11 sm:h-9 px-3 text-xs flex-1 sm:flex-none">
+                        Abbrechen
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleSaveEdit}
+                        disabled={!editName.trim()}
+                        className="btn-primary h-11 sm:h-9 px-4 text-xs flex-1 sm:flex-none disabled:opacity-40"
+                      >
+                        Speichern
+                      </button>
+                    </div>
+                  </div>
+                  {renderScopeSwitches(editScopes, toggleEditScope, `Berechtigungen von ${k.name}`)}
+                  <p className="text-[11px] text-faint">
+                    Der Schlüssel selbst bleibt gleich; Geräte und Agenten, die ihn nutzen, müssen nichts ändern. Die neuen
+                    Rechte gelten ab sofort.
+                  </p>
+                  {editError && <p className="text-[11px] text-status-err">{editError}</p>}
+                </div>
+              ) : (
              <div key={k.id} className="px-3 py-2 bg-canvas flex items-center justify-between gap-3">
                <div className="min-w-0 flex flex-wrap items-center gap-x-3 gap-y-1">
                  <span className="text-sm font-medium text-main">{k.name}</span>
@@ -269,15 +336,26 @@ http_headers = { "X-API-Key" = "${exampleToken}" }`
                    </span>
                  )}
                </div>
-                <button
-                  onClick={() => handleDeleteKey(k.id)}
-                  className="btn-icon btn-icon-danger w-7 h-7 shrink-0"
-                  aria-label={`API-Key ${k.name} löschen`}
-                >
-                  <Trash2 className="w-3.5 h-3.5" />
-                </button>
+                <div className="flex items-center gap-1 shrink-0">
+                  <button
+                    onClick={() => startEdit(k)}
+                    className="btn-icon w-7 h-7"
+                    aria-label={`API-Key ${k.name} bearbeiten`}
+                    title="Name und Rechte ändern"
+                  >
+                    <Pencil className="w-3.5 h-3.5" />
+                  </button>
+                  <button
+                    onClick={() => handleDeleteKey(k.id)}
+                    className="btn-icon btn-icon-danger w-7 h-7"
+                    aria-label={`API-Key ${k.name} löschen`}
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
              </div>
-            ))
+              )
+            )
          )}
        </div>
      </div>