From 45d0db3f229c36d18d9c890505f9b0a352ade538 Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias@zusor.io>
Date: Tue, 26 Nov 2024 15:13:50 +0100
Subject: [PATCH] feat: Allow users to copy t4c token from session viewer

Closes #2010
---
 .../floating-window-manager.component.html    | 41 +++++++++++++------
 .../floating-window-manager.component.ts      | 10 ++++-
 .../session/session-viewer.service.ts         |  9 +++-
 .../session/session-viewer.stories.ts         |  1 +
 .../tiling-window-manager.component.html      | 16 ++++++++
 .../tiling-window-manager.component.ts        | 17 +++++++-
 6 files changed, 78 insertions(+), 16 deletions(-)

diff --git a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
index 1913fb7ee..e3c343b26 100644
--- a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
+++ b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.html
@@ -40,18 +40,35 @@
             }
           </div>
 
-          @if ((sessionViewerService.allSessions$ | async)!.length > 1) {
-            <button
-              class="m-0 flex items-center"
-              (click)="sessionViewerService.toggleFullscreen(session)"
-            >
-              @if (session.fullscreen) {
-                <mat-icon>fullscreen_exit</mat-icon>
-              } @else {
-                <mat-icon>fullscreen</mat-icon>
-              }
-            </button>
-          }
+          <div class="flex items-center gap-2">
+            @if (session.t4cToken) {
+              <button
+                class="m-0 flex items-center"
+                matTooltip="Copy TeamForCapella token"
+                [cdkCopyToClipboard]="session.t4cToken"
+                (click)="
+                  toastService.showSuccess(
+                    'T4C Token copied',
+                    'The T4C Token was copied to your clipboard.'
+                  )
+                "
+              >
+                <mat-icon>key</mat-icon>
+              </button>
+            }
+            @if ((sessionViewerService.allSessions$ | async)!.length > 1) {
+              <button
+                class="m-0 flex items-center"
+                (click)="sessionViewerService.toggleFullscreen(session)"
+              >
+                @if (session.fullscreen) {
+                  <mat-icon>fullscreen_exit</mat-icon>
+                } @else {
+                  <mat-icon>fullscreen</mat-icon>
+                }
+              </button>
+            }
+          </div>
         </div>
 
         <app-session-iframe class="flex h-full" [session]="session" />
diff --git a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
index 75712b31a..a9db54119 100644
--- a/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
+++ b/frontend/src/app/sessions/session/floating-window-manager/floating-window-manager.component.ts
@@ -2,12 +2,15 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { NgClass, AsyncPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { debounceTime, fromEvent } from 'rxjs';
+import { ToastService } from '../../../helpers/toast/toast.service';
 import { SessionIFrameComponent } from '../session-iframe/session-iframe.component';
 import { SessionViewerService, ViewerSession } from '../session-viewer.service';
 
@@ -22,11 +25,16 @@ import { SessionViewerService, ViewerSession } from '../session-viewer.service';
     MatIcon,
     SessionIFrameComponent,
     AsyncPipe,
+    MatTooltip,
+    CdkCopyToClipboard,
   ],
 })
 @UntilDestroy()
 export class FloatingWindowManagerComponent implements OnInit {
-  constructor(public sessionViewerService: SessionViewerService) {}
+  constructor(
+    public sessionViewerService: SessionViewerService,
+    public toastService: ToastService,
+  ) {}
 
   ngOnInit(): void {
     fromEvent(window, 'resize')
diff --git a/frontend/src/app/sessions/session/session-viewer.service.ts b/frontend/src/app/sessions/session/session-viewer.service.ts
index 37b3844c5..30f0c7c89 100644
--- a/frontend/src/app/sessions/session/session-viewer.service.ts
+++ b/frontend/src/app/sessions/session/session-viewer.service.ts
@@ -95,7 +95,11 @@ export class SessionViewerService {
       connectionInfo.redirect_url,
     );
 
-    this.updateOrInsertSession(session, safeResourceURL);
+    this.updateOrInsertSession(
+      session,
+      safeResourceURL,
+      connectionInfo.t4c_token ?? undefined,
+    );
   }
 
   focusSession(session: Session): void {
@@ -178,6 +182,7 @@ export class SessionViewerService {
   private updateOrInsertSession(
     session: Session,
     safeResourceURL?: SafeResourceUrl,
+    t4cToken?: string,
   ): void {
     const currentSessions = this._sessions.value;
 
@@ -185,6 +190,7 @@ export class SessionViewerService {
       ...session,
       focused: false,
       safeResourceURL: safeResourceURL,
+      t4cToken: t4cToken,
       reloadToResize: false,
       fullscreen: false,
       disabled: false,
@@ -218,6 +224,7 @@ export class SessionViewerService {
 
 export type ViewerSession = Session & {
   safeResourceURL?: SafeResourceUrl;
+  t4cToken?: string;
   focused: boolean;
   reloadToResize: boolean;
   fullscreen: boolean;
diff --git a/frontend/src/app/sessions/session/session-viewer.stories.ts b/frontend/src/app/sessions/session/session-viewer.stories.ts
index c7606e750..c0d669c39 100644
--- a/frontend/src/app/sessions/session/session-viewer.stories.ts
+++ b/frontend/src/app/sessions/session/session-viewer.stories.ts
@@ -45,6 +45,7 @@ const mockPersistentViewerSession: ViewerSession = {
   reloadToResize: false,
   fullscreen: false,
   disabled: false,
+  t4cToken: 'token',
 };
 
 const mockReadOnlyViewerSession: ViewerSession = {
diff --git a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
index 2a97f526c..586a15b95 100644
--- a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
+++ b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.html
@@ -28,6 +28,22 @@
         </div>
 
         <div class="flex items-center gap-2">
+          @if (session.t4cToken) {
+            <button
+              class="m-0 flex items-center"
+              matTooltip="Copy TeamForCapella token"
+              [cdkCopyToClipboard]="session.t4cToken"
+              (click)="
+                toastService.showSuccess(
+                  'T4C Token copied',
+                  'The T4C Token was copied to your clipboard.'
+                )
+              "
+            >
+              <mat-icon>key</mat-icon>
+            </button>
+          }
+
           <div class="flex items-center gap-1">
             @if (session.index !== 0) {
               <button class="m-0" (click)="onLeftArrowClick(session)">
diff --git a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
index c31f256fd..239c4c82f 100644
--- a/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
+++ b/frontend/src/app/sessions/session/tiling-window-manager/tiling-window-manager.component.ts
@@ -2,11 +2,14 @@
  * SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
  * SPDX-License-Identifier: Apache-2.0
  */
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
 import { AsyncPipe, NgClass } from '@angular/common';
 import { Component, HostListener, OnInit } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter } from 'rxjs';
+import { ToastService } from '../../../helpers/toast/toast.service';
 import { SessionIFrameComponent } from '../session-iframe/session-iframe.component';
 import { SessionViewerService, ViewerSession } from '../session-viewer.service';
 
@@ -14,7 +17,14 @@ import { SessionViewerService, ViewerSession } from '../session-viewer.service';
   selector: 'app-tiling-window-manager',
   templateUrl: './tiling-window-manager.component.html',
   standalone: true,
-  imports: [MatIcon, SessionIFrameComponent, NgClass, AsyncPipe],
+  imports: [
+    MatIcon,
+    SessionIFrameComponent,
+    NgClass,
+    AsyncPipe,
+    MatTooltip,
+    CdkCopyToClipboard,
+  ],
 })
 @UntilDestroy()
 export class TilingWindowManagerComponent implements OnInit {
@@ -28,7 +38,10 @@ export class TilingWindowManagerComponent implements OnInit {
 
   private minimumSessionWidth = 0;
 
-  constructor(public sessionViewerService: SessionViewerService) {}
+  constructor(
+    public sessionViewerService: SessionViewerService,
+    public toastService: ToastService,
+  ) {}
 
   ngOnInit(): void {
     this.sessionViewerService.sessions$