feat(webapp): allow ssh connection to use encrypted ssh key

webapp/package.json

@@ -22,8 +22,8 @@
     "@devolutions/icons": "3.4.6",
     "@devolutions/iron-remote-gui": "^0.11.5",
     "@devolutions/iron-remote-gui-vnc": "^0.2.2",
+    "@devolutions/web-ssh-gui": "^0.2.15",
     "@devolutions/web-telnet-gui": "^0.2.15",
-    "@devolutions/web-ssh-gui": "^0.2.14",
     "primeflex": "3.3.1",
     "primeicons": "6.0.1",
     "primeng": "16.2.0",

webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.html

@@ -16,8 +16,14 @@
       [isEnabled]="formInputVisibility.showPasswordInput"></web-client-password-control>
   </div>
 
+  <div class="col-12 gateway-form-group" *ngIf="formInputVisibility.showPrivateKeyInput">
+      <web-client-password-control [parentForm]="form" [inputFormData]="inputFormData" [label]="'Passpharse'" [formKey]="'passpharse'">
+      </web-client-password-control>    
+  </div>
+
   <div *ngIf="formInputVisibility.showPrivateKeyInput">
     <app-file-control privateKeyFileForm ></app-file-control>
   </div>
 
+
 </div>

webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.scss

@@ -58,3 +58,7 @@
   gap: 10px;
   display: inline-flex
 }
+
+.mb-18px{
+  margin-bottom: 18px;
+}

webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.ts

@@ -15,6 +15,7 @@ import { map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
 import { SshAuthMode } from '@gateway/shared/enums/web-client-auth-mode.enum';
 import { Observable, of } from 'rxjs';
 import { SshKeyService } from '@gateway/shared/services/ssh-key.service';
+import { ChangeDetectorRef } from '@angular/core';
 
 interface FormInputVisibility {
   showUsernameInput?: boolean;
@@ -45,7 +46,8 @@ export class SshFormComponent
 
   constructor(
     private formService: WebFormService,
-    private sshKeyService: SshKeyService
+    private sshKeyService: SshKeyService,
+    private ChangeDetectorRef: ChangeDetectorRef
   ) {
     super();
   }
@@ -100,7 +102,8 @@ export class SshFormComponent
       .valueChanges.pipe(
         takeUntil(this.destroyed$),
         startWith(this.form.get('authMode').value as SshAuthMode),
-        switchMap((authMode) => this.getFormInputVisibility(authMode))
+        switchMap((authMode) => this.getFormInputVisibility(authMode)),
+        tap(()=>this.ChangeDetectorRef.detectChanges())
       )
       .subscribe(() => {});
   }

webapp/src/client/app/modules/web-client/form/form-controls/password-control/password-control.component.html

@@ -1,20 +1,20 @@
 <div [formGroup]="parentForm">
-  <label for="password">Password</label>
+  <label for="password">{{label}}</label>
   <div class="gateway-form-input password-container">
     <input pPassword
            id="password"
            [type]=" showPasswordToggle ? 'text' : 'password' "
            autocomplete="current-password"
-           placeholder="Enter password"
-           formControlName="password"
+           placeholder="Enter {{label}}"
+           formControlName="{{formKey}}"
            showPassword="showPassword"
            required/>
     <span>
       <i (click)="toggleShowPassword()" class="dvl-icon dvl-icon-view"></i>
     </span>
   </div>
   <div class="form-helper-text"
-       *ngIf="parentForm.get('password').hasError('required') && parentForm.get('password').touched">
-    Password is required.
+       *ngIf="parentForm.get(formKey).hasError('required') && parentForm.get(formKey).touched">
+       {{label}} is required
   </div>
 </div>

webapp/src/client/app/modules/web-client/form/form-controls/password-control/password-control.component.ts

@@ -14,6 +14,8 @@ export class PasswordControlComponent extends BaseComponent implements  OnInit {
   @Input() parentForm: FormGroup;
   @Input() inputFormData: any;
   @Input() isEnabled: boolean = true;
+  @Input() label: string = 'Password';
+  @Input() formKey: string = 'password';
 
   showPasswordToggle: boolean = false;
 
@@ -22,7 +24,7 @@ export class PasswordControlComponent extends BaseComponent implements  OnInit {
   }
 
   ngOnInit(): void {
-    this.formService.addControlToForm(this.parentForm, 'password', this.inputFormData);
+    this.formService.addControlToForm(this.parentForm,this.formKey, this.inputFormData);
     this.toggleControl();
   }
 
@@ -37,7 +39,7 @@ export class PasswordControlComponent extends BaseComponent implements  OnInit {
   }
 
   private toggleControl(): void {
-    const control: AbstractControl<any, any> = this.parentForm.get('password');
+    const control: AbstractControl<any, any> = this.parentForm.get(this.formKey);
     if (control) {
       this.isEnabled ? control.enable() : control.disable();
     }

webapp/src/client/app/modules/web-client/ssh/web-client-ssh.component.ts

@@ -76,7 +76,7 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
   }
 
   ngOnInit(): void {
-    sshLoggingService.setLevel(LoggingLevel.FATAL)
+    sshLoggingService.setLevel(LoggingLevel.DEBUG)
     this.removeWebClientGuiElement();
     this.initializeStatus();
 
@@ -192,6 +192,7 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
         connectionParameters.gatewayAddress+`?token=${connectionParameters.token}`,
         connectionParameters.password,
         connectionParameters.privateKey,
+        connectionParameters.privateKeyPassphrase,
       )
     ).pipe(
       catchError(error => throwError(error)),
@@ -212,15 +213,16 @@ export class WebClientSshComponent extends WebClientBaseComponent implements OnI
     const gatewayHttpAddress: URL = new URL(WebClientSshComponent.JET_SSH_URL+`/${sessionId}`, window.location.href);
     const gatewayAddress: string = gatewayHttpAddress.toString().replace("http", "ws");
     const privateKey: string | null = formData.extraData?.sshPrivateKey || null;
-
+    const privateKeyPassphrase: string = formData.passpharse || null;
     const connectionParameters: SshConnectionParameters = {
       host: extractedData.hostname,
       username: username,
       password: password,
       port: extractedData.port,
       gatewayAddress: gatewayAddress,
       sessionId: sessionId,
-      privateKey: privateKey
+      privateKey: privateKey,
+      privateKeyPassphrase: privateKeyPassphrase
     }
     return of(connectionParameters);
   }

webapp/src/client/app/shared/interfaces/connection-params.interfaces.ts

@@ -75,4 +75,5 @@ export interface SshConnectionParameters {
   token?: string;
   sessionId?: string,
   privateKey?: string
+  privateKeyPassphrase?: string
 }

webapp/src/client/app/shared/interfaces/forms.interfaces.ts

@@ -57,6 +57,7 @@ export interface SSHFormDataInput {
   hostname: string,
   username?: string,
   password?: string,
+  passpharse?: string,
   extraData?:{
     sshPrivateKey?: string,
   }

webapp/src/client/app/shared/services/ssh-key.service.ts

@@ -67,12 +67,6 @@ export class SshKeyService {
             error: 'Invalid key format',
             content: value.content,
           });
-        } else if (value.format == SshKeyFormat.PKCS8_Encrypted) {
-          observer.next({
-            valid: false,
-            error: 'Encrypted key not supported',
-            content: value.content,
-          });
         } else {
           observer.next({ valid: true, content: value.content });
         }