Move details of granted access

apps/client/src/app/components/access-table/access-table.component.html

@@ -83,14 +83,6 @@
               </span>
             </button>
           }
-          @if (element.type === 'MCP' && hasPermissionToEnableMcp) {
-            <button mat-menu-item (click)="onCopyTokenToClipboard(element.id)">
-              <span class="align-items-center d-flex">
-                <ion-icon class="mr-2" name="copy-outline" />
-                <span i18n>Copy token to clipboard</span>
-              </span>
-            </button>
-          }
           @if (
             (!isReceivedAccess() && user()?.settings?.isExperimentalFeatures) ||
             element.type === 'PUBLIC' ||

apps/client/src/app/components/access-table/access-table.component.ts

@@ -130,18 +130,6 @@ export class GfAccessTableComponent {
     return `${this.baseUrl}/${languageCode}/${publicRoutes.public.path}/${aId}`;
   }
 
-  protected onCopyTokenToClipboard(aId: string) {
-    this.clipboard.copy(aId);
-
-    this.snackBar.open(
-      '✅ ' + $localize`Token has been copied to the clipboard`,
-      undefined,
-      {
-        duration: ms('3 seconds')
-      }
-    );
-  }
-
   protected onCopyUrlToClipboard(aId: string) {
     this.clipboard.copy(this.getPublicUrl(aId));
 

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -27,6 +27,7 @@ import {
 } from '@ghostfolio/ui/portfolio-filter-form';
 import { DataService } from '@ghostfolio/ui/services';
 
+import { JsonPipe } from '@angular/common';
 import type { HttpErrorResponse } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
@@ -69,6 +70,7 @@ import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
     FormsModule,
     GfAccessLevelIconComponent,
     GfPortfolioFilterFormComponent,
+    JsonPipe,
     MatButtonModule,
     MatDatepickerModule,
     MatDialogModule,
@@ -89,7 +91,6 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
 
   protected accessForm: FormGroup;
   protected readonly baseUrl = window.location.origin;
-  protected readonly mcpEndpoint = MCP_ENDPOINT;
   protected minExpiresAt: Date;
   protected readonly mode: 'create' | 'update';
   protected readonly today = startOfDay(new Date());
@@ -244,6 +245,16 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
     return this.accessType === 'PUBLIC';
   }
 
+  protected get mcpConfiguration() {
+    return {
+      headers: {
+        Authorization: `Bearer ${this.accessId}`
+      },
+      type: 'https',
+      url: `${this.baseUrl}${MCP_ENDPOINT}`
+    };
+  }
+
   protected get showExpiresAtErrorMessage() {
     return this.accessForm?.get('expiresAt')?.invalid === true;
   }

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.html

@@ -136,12 +136,7 @@
     @if (showMcpDetails || showPublicDetails) {
       <h2 class="h6" i18n>Details</h2>
       @if (showMcpDetails) {
-        <div>
-          <code class="text-break">{{ baseUrl }}{{ mcpEndpoint }}</code>
-        </div>
-        <div>
-          <code class="text-break">Authorization: Bearer {{ accessId }}</code>
-        </div>
+        <pre class="m-0"><code>{{ mcpConfiguration | json }}</code></pre>
       } @else if (showPublicDetails) {
         <div>
           <code class="text-break"