refactor(webapp): Update libraries, modernize Angular control flow, consolidate clipboard base, fix reconnect style loss

webapp/apps/gateway-ui/package.json

@@ -17,22 +17,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.5",
+    "@angular/animations": "20.3.18",
     "@angular/cdk": "20.2.14",
-    "@angular/common": "20.3.5",
-    "@angular/compiler": "20.3.5",
-    "@angular/core": "20.3.5",
-    "@angular/forms": "20.3.5",
-    "@angular/platform-browser": "20.3.5",
-    "@angular/platform-browser-dynamic": "20.3.5",
-    "@angular/router": "20.3.5",
+    "@angular/common": "20.3.18",
+    "@angular/compiler": "20.3.18",
+    "@angular/core": "20.3.18",
+    "@angular/forms": "20.3.18",
+    "@angular/platform-browser": "20.3.18",
+    "@angular/platform-browser-dynamic": "20.3.18",
+    "@angular/router": "20.3.18",
     "@devolutions/icons": "^5.0.10",
     "@devolutions/iron-remote-desktop": "^0.10.1",
     "@devolutions/iron-remote-desktop-rdp": "^0.6.1",
     "@devolutions/iron-remote-desktop-vnc": "^0.7.0",
-    "@devolutions/terminal-shared": "^1.4.0",
-    "@devolutions/web-ssh-gui": "^0.6.2",
-    "@devolutions/web-telnet-gui": "^0.4.0",
+    "@devolutions/terminal-shared": "^1.4.1",
+    "@devolutions/web-ssh-gui": "^0.7.0",
+    "@devolutions/web-telnet-gui": "^0.4.4",
     "@xterm/addon-clipboard": "^0.1.0",
     "@xterm/xterm": "^5.5.0",
     "i18next": "^25.5.3",
@@ -43,7 +43,7 @@
     "primeflex": "4.0.0",
     "primeicons": "^7.0.0",
     "primeng": "20.3.0",
-    "prismjs": "1.29.0",
+    "prismjs": "1.30.0",
     "rxjs": "^7.8.1",
     "tslib": "2.6.1",
     "ua-parser-js": "^2.0.4",
@@ -52,15 +52,15 @@
     "zone.js": "0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.3.13",
-    "@angular-devkit/core": "20.3.5",
-    "@angular/cli": "20.3.5",
-    "@angular/compiler-cli": "20.3.5",
+    "@angular-devkit/build-angular": "20.3.21",
+    "@angular-devkit/core": "20.3.21",
+    "@angular/cli": "20.3.21",
+    "@angular/compiler-cli": "20.3.18",
     "@biomejs/biome": "2.1.3",
     "@types/node": "^20.19.0",
     "@types/uuid": "^9.0.8",
-    "typescript": "~5.8.2",
-    "undici": "^7.16.0",
+    "typescript": "~5.9.0",
+    "undici": "7.24.0",
     "undici-types": "^6.21.0"
   },
   "optionalDependencies": {

webapp/apps/gateway-ui/src/client/app/app.component.html

@@ -1,8 +1,10 @@
 <div class="app-content">
   <router-outlet #outlet="outlet"></router-outlet>
-  <div id="gateway-loading" *ngIf="!outlet.isActivated">
-    <i class="dvl-icon dvl-icon-logo-gateway"></i>
-  </div>
+  @if (!outlet.isActivated) {
+    <div id="gateway-loading">
+      <i class="dvl-icon dvl-icon-logo-gateway"></i>
+    </div>
+  }
 </div>
 
 <gateway-alert-message></gateway-alert-message>

webapp/apps/gateway-ui/src/client/app/modules/base/menu/app-menu.component.html

@@ -12,10 +12,12 @@
       </svg>
 
     </div>
-    <div class="title" *ngIf="!isMenuSlim">
-      <span class="header">Devolutions</span>
-      <span class="sub-header">Gateway</span>
-    </div>
+    @if (!isMenuSlim) {
+      <div class="title">
+        <span class="header">Devolutions</span>
+        <span class="sub-header">Gateway</span>
+      </div>
+    }
 
     <div class="menu-mode-toggler" (click)="onMenuModeTogglerClick()">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -31,10 +33,12 @@
 
   <!-- Primary -->
   <gateway-menu-group-list-item class="primary-menu-group-list" [accordion]="false">
-    <gateway-menu-list-item *ngFor="let menuKVP of mainMenus | keyvalue: asIsOrder"
-                            [label]="menuKVP.value.label"
-                            [icon]="menuKVP.value.icon"
-                            [iconOnly]="isMenuSlim"></gateway-menu-list-item>
+    @for (menuKVP of mainMenus | keyvalue: asIsOrder; track menuKVP.key) {
+      <gateway-menu-list-item
+                              [label]="menuKVP.value.label"
+                              [icon]="menuKVP.value.icon"
+                              [iconOnly]="isMenuSlim"></gateway-menu-list-item>
+    }
 
     <gateway-menu-list-active-sessions [isMenuSlim]="isMenuSlim">
     </gateway-menu-list-active-sessions>
@@ -50,34 +54,40 @@
   </gateway-menu-group-list-item>
 
   <!-- Logout -->
-  <gateway-menu-group-list-item
-    *ngIf="!isAutoLoginOn"
-    class="primary-menu-group-list"
-    [accordion]="false">
+  @if (!isAutoLoginOn) {
+    <gateway-menu-group-list-item
+      class="primary-menu-group-list"
+      [accordion]="false">
 
-    <div class="footer-group-list">
-      <div class="menu-list-item footer-menu-list"
-           [pTooltip]="isMenuSlim ? 'Logout' : ''"
-           [tooltipDisabled]="!isMenuSlim"
-           (click)="logout()">
-        <i class="dvl-icon dvl-icon-logout"></i>
-        <span *ngIf="!isMenuSlim" class="menu-list-item-label">Logout</span>
+      <div class="footer-group-list">
+        <div class="menu-list-item footer-menu-list"
+             [pTooltip]="isMenuSlim ? 'Logout' : ''"
+             [tooltipDisabled]="!isMenuSlim"
+             (click)="logout()">
+          <i class="dvl-icon dvl-icon-logout"></i>
+          @if (!isMenuSlim) {
+            <span class="menu-list-item-label">Logout</span>
+          }
+        </div>
       </div>
-    </div>
-  </gateway-menu-group-list-item>
+    </gateway-menu-group-list-item>
+  }
 
     <div class="dgw-version">
       <label for="version">
         {{ version }}
       </label>
         <a [href]="gatewayLatestUpdateLink" [pTooltip]="downloadVersionToolTip()">
-          <i class="dvl-icon dvl-icon-download download-icon" *ngIf="hasNewVersion()"></i>
+          @if (hasNewVersion()) {
+            <i class="dvl-icon dvl-icon-download download-icon"></i>
+          }
         </a>
     </div>
-  
+
   <!-- Resize Handle -->
-  <div class="resize-handle" 
-    *ngIf="!isMenuSlim"
-    (mousedown)="onResizeStart($event)"></div>
+  @if (!isMenuSlim) {
+    <div class="resize-handle"
+      (mousedown)="onResizeStart($event)"></div>
+  }
 
 </div>

webapp/apps/gateway-ui/src/client/app/modules/base/menu/menu-group-list-item/menu-group-list-item.component.html

@@ -5,26 +5,31 @@
   [class.isSlim]="isMenuSlim"
   [class.closed]="isClosed">
 
-  <div
-    *ngIf="hasHeader"
-    class="menu-group-list-header"
-    [class.menu-group-list-header--slim]="isMenuSlim"
-    (click)="onToggleMenuGroupList($event)"
-    (mouseover)="onMenuGroupMouseOver()"
-    (mouseleave)="onMenuGroupMouseLeave()">
+  @if (hasHeader) {
+    <div
+      class="menu-group-list-header"
+      [class.menu-group-list-header--slim]="isMenuSlim"
+      (click)="onToggleMenuGroupList($event)"
+      (mouseover)="onMenuGroupMouseOver()"
+      (mouseleave)="onMenuGroupMouseLeave()">
 
-    <ng-container *ngIf="accordion">
-      <i class="dvl-icon" [class.dvl-icon-arrow-up]="isClosed" [class.dvl-icon-arrow-down]="!isClosed"> </i>
+      @if (accordion) {
+        <i class="dvl-icon" [class.dvl-icon-arrow-up]="isClosed" [class.dvl-icon-arrow-down]="!isClosed"> </i>
 
-      <ng-container *ngIf="isMenuSlim">
-        <i class="dvl-icon" [ngClass]="accordionIcon" [pTooltip]="title"></i>
-      </ng-container>
-    </ng-container>
-    <span *ngIf="title && !isMenuSlim">{{ title }}</span>
-  </div>
+        @if (isMenuSlim) {
+          <i class="dvl-icon" [ngClass]="accordionIcon" [pTooltip]="title"></i>
+        }
+      }
+      @if (title && !isMenuSlim) {
+        <span>{{ title }}</span>
+      }
+    </div>
+  }
 
-  <div class="menu-group-list-body" *ngIf="!isClosed">
-    <ng-content></ng-content>
-  </div>
+  @if (!isClosed) {
+    <div class="menu-group-list-body">
+      <ng-content></ng-content>
+    </div>
+  }
 
 </div>

webapp/apps/gateway-ui/src/client/app/modules/base/menu/menu-list-active-sessions/menu-list-active-sessions.component.html

@@ -1,14 +1,15 @@
-<ng-container *ngFor="let activeWebSession of activeWebSessions;">
+@for (activeWebSession of activeWebSessions; track activeWebSession.id) {
   <div class="menu-list-item-container">
     <div class="menu-list-item"
          [class.selected]="activeWebSessionIndex === activeWebSession.tabIndex"
          (click)="onMenuListItemClick($event, activeWebSession)">
 
       <div class="left-content">
-        <i *ngIf="activeWebSession.icon"
-           class="dvl-icon"
-           [pTooltip]="activeWebSession.iconTooltip"
-           [ngClass]="activeWebSession.icon"></i>
+        @if (activeWebSession.icon) {
+          <i class="dvl-icon"
+             [pTooltip]="activeWebSession.iconTooltip"
+             [ngClass]="activeWebSession.icon"></i>
+        }
         <span class="menu-list-item-label" tooltipEllipsis>{{activeWebSession.name}}</span>
       </div>
       <p-button (onClick)="onCloseButtonClick($event, activeWebSession)"
@@ -18,4 +19,4 @@
                 iconPos="left"></p-button>
     </div>
   </div>
-</ng-container>
+}

webapp/apps/gateway-ui/src/client/app/modules/base/menu/menu-list-item/menu-list-item.component.html

@@ -1,4 +1,6 @@
-<i *ngIf="icon" class="dvl-icon" [ngClass]="icon"></i>
+@if (icon) {
+  <i class="dvl-icon" [ngClass]="icon"></i>
+}
 <div class="menu-list-label">
   <span class="menu-label" [pTooltip]="label" tooltipEllipsis>{{ label }}</span>
 </div>

webapp/apps/gateway-ui/src/client/app/modules/login/login.component.html

@@ -1,8 +1,11 @@
-<div id="gateway-loading" *ngIf="!autoLoginAttempted">
-  <i class="dvl-icon dvl-icon-logo-gateway"></i>
-</div>
+@if (!autoLoginAttempted) {
+  <div id="gateway-loading">
+    <i class="dvl-icon dvl-icon-logo-gateway"></i>
+  </div>
+}
 
-<div *ngIf="autoLoginAttempted" class="login-background">
+@if (autoLoginAttempted) {
+<div class="login-background">
 
   <div class="login-box">
     <div class="login-box-header">
@@ -22,9 +25,14 @@
         Login to Continue
       </span>
       <div class="login-form-message">
-        <p-messages *ngIf="messages.length > 0"
-                    [closable]="false"
-                    [value]="messages"></p-messages>
+        @for (msg of messages; track $index) {
+          <p-message [severity]="$any(msg.severity)" [closable]="false">
+            <span class="msg-summary">{{ msg.summary }}</span>
+            @if (msg.detail) {
+              <div class="msg-detail" [innerHTML]="msg.detail"></div>
+            }
+          </p-message>
+        }
       </div>
       <form name="login-form" [formGroup]="loginForm" autocomplete="on">
         <div class="login-form-content grid nomargin nopad">
@@ -39,11 +47,11 @@
                      formControlName="username"
                      required/>
             </div>
-            <div class="form-helper-text"
-                 *ngIf="loginForm.get('username').hasError('required') &&
-                    loginForm.get('username').touched">
-              Username is required.
-            </div>
+            @if (loginForm.get('username').hasError('required') && loginForm.get('username').touched) {
+              <div class="form-helper-text">
+                Username is required.
+              </div>
+            }
           </div>
 
           <div class="col-12 login-form-group">
@@ -61,11 +69,11 @@
                   <i (click)="toggleShowPassword()" class="dvl-icon dvl-icon-view"></i>
                 </span>
               </div>
-            <div class="form-helper-text"
-                 *ngIf="loginForm.get('password').hasError('required') &&
-                    loginForm.get('password').touched">
-              Password is required.
-            </div>
+            @if (loginForm.get('password').hasError('required') && loginForm.get('password').touched) {
+              <div class="form-helper-text">
+                Password is required.
+              </div>
+            }
           </div>
 
           <div class="col-12 login-form-group">
@@ -82,3 +90,4 @@
     </div>
   </div>
 </div>
+}

webapp/apps/gateway-ui/src/client/app/modules/web-client/ard/web-client-ard.component.html

@@ -1,12 +1,4 @@
-<div #sessionArdContainer>
-  <div *ngIf="currentStatus.isDisabled" class="session-form">
-    <web-client-form
-      [webSessionId]="webSessionId"
-      [inputFormData]="formData"
-      [sessionTerminationMessage]="sessionTerminationMessage"
-      [isFormExists]="true"></web-client-form>
-  </div>
-
+<div #sessionArdContainer class="session-ard-container">
   <session-toolbar
     [sessionContainerParent]="sessionContainerElement"
     [middleButtons]="middleToolbarButtons"
@@ -16,11 +8,15 @@
     [clipboardActionButtons]="clipboardActionButtons">
   </session-toolbar>
 
-  <div class="loading-info-container" *ngIf="loading">
-    <div class="loading-info">
-      <p-progressSpinner *ngIf="!hideSpinnerOnly"></p-progressSpinner>
+  @if (loading) {
+    <div class="loading-info-container">
+      <div class="loading-info">
+        @if (!hideSpinnerOnly) {
+          <p-progressSpinner></p-progressSpinner>
+        }
+      </div>
     </div>
-  </div>
+  }
 
   <iron-remote-desktop #ironRemoteDesktopElement targetplatform="web" verbose="true" scale="fit" flexcenter="true" [module]="backendRef"></iron-remote-desktop>