mcp key

listify-client/src/app/account/account.component.html

@@ -17,6 +17,68 @@
           {{ auth.user()?.onboardingCompleted ? 'Onboarding abgeschlossen' : 'Onboarding offen' }}
         </span>
       </div>
+
+      <div class="mcp-key-panel">
+        <div class="mcp-key-header">
+          <div>
+            <h2>MCP Connector</h2>
+            <p>
+              @if (mcpApiKeyLoading()) {
+                Status wird geladen
+              } @else if (mcpApiKeyCreatedAt()) {
+                Key aktiv seit {{ formatDate(mcpApiKeyCreatedAt()!) }}
+              } @else {
+                Kein MCP-Key aktiv
+              }
+            </p>
+          </div>
+          <mat-icon aria-hidden="true">key</mat-icon>
+        </div>
+
+        @if (generatedMcpApiKey()) {
+          <div class="generated-key">
+            <code>{{ generatedMcpApiKey() }}</code>
+            <button
+              mat-icon-button
+              type="button"
+              aria-label="MCP-Key kopieren"
+              (click)="copyMcpApiKey()"
+            >
+              <mat-icon aria-hidden="true">content_copy</mat-icon>
+            </button>
+          </div>
+          <p class="key-hint">Der Key wird nur jetzt angezeigt.</p>
+        }
+
+        @if (mcpApiKeyMessage()) {
+          <p class="mcp-key-message">{{ mcpApiKeyMessage() }}</p>
+        }
+
+        <div class="mcp-key-actions">
+          <button
+            mat-flat-button
+            type="button"
+            [disabled]="mcpApiKeyLoading() || mcpApiKeySaving()"
+            (click)="createMcpApiKey()"
+          >
+            @if (mcpApiKeySaving()) {
+              <mat-progress-spinner mode="indeterminate" diameter="18" />
+            } @else {
+              <mat-icon aria-hidden="true">vpn_key</mat-icon>
+            }
+            {{ mcpApiKeyCreatedAt() ? 'Key rotieren' : 'Key erzeugen' }}
+          </button>
+          <button
+            mat-stroked-button
+            type="button"
+            [disabled]="!mcpApiKeyCreatedAt() || mcpApiKeyLoading() || mcpApiKeySaving()"
+            (click)="revokeMcpApiKey()"
+          >
+            <mat-icon aria-hidden="true">block</mat-icon>
+            Widerrufen
+          </button>
+        </div>
+      </div>
     </mat-card-content>
 
     <mat-card-actions align="end">