Move details of granted access

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

@@ -55,22 +55,6 @@
               getPublicUrl(element.id)
             }}</a>
           </div>
-          @if (user()?.settings?.isExperimentalFeatures) {
-            <div>
-              <code
-                >GET {{ baseUrl }}/api/v1/public/{{
-                  element.id
-                }}/portfolio</code
-              >
-            </div>
-          }
-        } @else if (element.type === 'MCP' && hasPermissionToEnableMcp) {
-          <div>
-            <code>{{ baseUrl }}{{ mcpEndpoint }}</code>
-          </div>
-          <div>
-            <code>Authorization: Bearer {{ element.id }}</code>
-          </div>
         }
       </td>
     </ng-container>

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

@@ -1,4 +1,3 @@
-import { MCP_ENDPOINT } from '@ghostfolio/common/config';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { Access, User } from '@ghostfolio/common/interfaces';
@@ -81,14 +80,15 @@ export class GfAccessTableComponent {
   protected readonly dataSource = new MatTableDataSource<Access>();
 
   protected readonly displayedColumns = computed(() => {
-    const columns = [
+    const columns = ['alias', 'grantee', 'type', 'lastUsedAt', 'expiresAt'];
-      'alias',
+
-      'grantee',
+    if (
-      'type',
+      this.accesses()?.some(({ type }) => {
-      'lastUsedAt',
+        return type === 'PUBLIC';
-      'expiresAt',
+      })
-      'details'
+    ) {
-    ];
+      columns.push('details');
+    }
 
     if (this.showActions()) {
       columns.push('actions');
@@ -109,8 +109,6 @@ export class GfAccessTableComponent {
     return !this.accesses();
   });
 
-  protected readonly mcpEndpoint = MCP_ENDPOINT;
-
   private readonly clipboard = inject(Clipboard);
   private readonly dataService = inject(DataService);
   private readonly notificationService = inject(NotificationService);

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

@@ -1,5 +1,5 @@
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { DEFAULT_LOCALE } from '@ghostfolio/common/config';
+import { DEFAULT_LOCALE, MCP_ENDPOINT } from '@ghostfolio/common/config';
 import { CreateAccessDto, UpdateAccessDto } from '@ghostfolio/common/dtos';
 import { canApplyFiltersToAccess } from '@ghostfolio/common/helper';
 import { Filter, PortfolioPosition } from '@ghostfolio/common/interfaces';
@@ -88,6 +88,8 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
   public tags: Filter[] = [];
 
   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());
@@ -222,6 +224,10 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
     this.loadHoldings();
   }
 
+  protected get accessId() {
+    return this.data.access?.id;
+  }
+
   protected get accessLevel(): AccessLevel {
     return this.accessForm?.get('accessLevel')?.value as AccessLevel;
   }
@@ -238,6 +244,22 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
     return this.accessForm?.get('expiresAt')?.invalid === true;
   }
 
+  protected get showMcpDetails() {
+    return (
+      this.accessType === 'MCP' &&
+      this.hasPermissionToEnableMcp &&
+      this.mode === 'update'
+    );
+  }
+
+  protected get showPublicDetails() {
+    return (
+      this.hasExperimentalFeatures &&
+      this.isPublicAccess &&
+      this.mode === 'update'
+    );
+  }
+
   protected onCancel() {
     this.dialogRef.close();
   }

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

@@ -133,6 +133,21 @@
         [tags]="tags"
       />
     }
+    @if (showMcpDetails || showPublicDetails) {
+      <h2 class="h6" i18n>Details</h2>
+      @if (showMcpDetails) {
+        <div>
+          <code>{{ baseUrl }}{{ mcpEndpoint }}</code>
+        </div>
+        <div>
+          <code>Authorization: Bearer {{ accessId }}</code>
+        </div>
+      } @else if (showPublicDetails) {
+        <div>
+          <code>GET {{ baseUrl }}/api/v1/public/{{ accessId }}/portfolio</code>
+        </div>
+      }
+    }
   </div>
   <div class="justify-content-end" mat-dialog-actions>
     <button mat-button type="button" (click)="onCancel()">