diff --git a/webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.ts b/webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.ts index 20823049f..c1de4a0ec 100644 --- a/webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.ts +++ b/webapp/src/client/app/modules/web-client/form/form-components/ssh/ssh-form.component.ts @@ -6,7 +6,7 @@ import { OnDestroy, OnInit, } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; +import { FormGroup } from '@angular/forms'; import { BaseComponent } from '@shared/bases/base.component'; import { SelectItem } from 'primeng/api'; @@ -71,16 +71,26 @@ export class SshFormComponent private addControlsToParentForm(inputFormData?: any): void { if (this.form) { - this.form.addControl( + this.clearForm(); + + this.formService.addControlToForm( + this.form, 'authMode', - new FormControl( - inputFormData?.authMode || SshAuthMode.Username_and_Password - ) - ); + inputFormData, + true, + false, + SshAuthMode.Username_and_Password); + this.subscribeToAuthModeChanges(); } } + private clearForm(): void { + if (this.form.contains('authMode')) { + this.form.removeControl('authMode'); + } + } + private initializeFormOptions(): void { this.formService .getAuthModeOptions('ssh') @@ -102,20 +112,26 @@ export class SshFormComponent startWith(this.form.get('authMode').value as SshAuthMode), switchMap((authMode) => this.getFormInputVisibility(authMode)) ) - .subscribe(() => {}); + .subscribe({ + error: (error) => console.error('Error subscribing to auth mode changes', error) + }); } private getFormInputVisibility( authMode: SshAuthMode ): Observable { return of(this.formInputVisibility).pipe( - tap((visibility) => { + tap((visibility: FormInputVisibility) => { + const authModeAsNumber: number = +authMode; + visibility.showUsernameInput = - authMode === SshAuthMode.Username_and_Password || - authMode === SshAuthMode.Private_Key; + authModeAsNumber === SshAuthMode.Username_and_Password || + authModeAsNumber === SshAuthMode.Private_Key; + visibility.showPasswordInput = - authMode === SshAuthMode.Username_and_Password; - visibility.showPrivateKeyInput = authMode === SshAuthMode.Private_Key; + authModeAsNumber === SshAuthMode.Username_and_Password; + + visibility.showPrivateKeyInput = authModeAsNumber === SshAuthMode.Private_Key; }), map(() => { return authMode; diff --git a/webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.ts b/webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.ts index acbae629a..1692b85d7 100644 --- a/webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.ts +++ b/webapp/src/client/app/modules/web-client/form/form-components/vnc/vnc-form.component.ts @@ -1,12 +1,12 @@ import {ChangeDetectorRef, Component, Input, OnInit} from '@angular/core'; -import {FormControl, FormGroup} from "@angular/forms"; +import {FormGroup} from "@angular/forms"; import {BaseComponent} from "@shared/bases/base.component"; import {SelectItem} from "primeng/api"; import {map, startWith, switchMap, takeUntil, tap} from "rxjs/operators"; import {WebFormService} from "@shared/services/web-form.service"; import {Observable, of} from "rxjs"; -import { VncAuthMode as AuthMode } from '@shared/enums/web-client-auth-mode.enum'; +import {VncAuthMode} from '@shared/enums/web-client-auth-mode.enum'; interface FormInputVisibility { showUsernameInput?: boolean; @@ -42,11 +42,26 @@ export class VncFormComponent extends BaseComponent implements OnInit { private addControlsToParentForm(inputFormData?: any): void { if (this.form) { - this.form.addControl('authMode', new FormControl(inputFormData?.authMode || AuthMode.VNC_Password)); + this.clearForm(); + + this.formService.addControlToForm( + this.form, + 'authMode', + inputFormData, + true, + false, + VncAuthMode.VNC_Password); + this.subscribeToAuthModeChanges(); } } + private clearForm(): void { + if (this.form.contains('authMode')) { + this.form.removeControl('authMode'); + } + } + showUsernameInput(): boolean { return this.formInputVisibility.showUsernameInput; } @@ -68,24 +83,21 @@ export class VncFormComponent extends BaseComponent implements OnInit { private subscribeToAuthModeChanges(): void { this.form.get('authMode').valueChanges.pipe( - startWith(this.form.get('authMode').value as AuthMode), takeUntil(this.destroyed$), + startWith(this.form.get('authMode').value as VncAuthMode), switchMap((authMode) => this.getFormInputVisibility(authMode)) - ).subscribe(() => { - this.formService.detectFormChanges(this.cdr); + ).subscribe({ + error: (error) => console.error('Error subscribing to auth mode changes', error) }); } - private getFormInputVisibility(authMode: AuthMode): Observable { + private getFormInputVisibility(authMode: VncAuthMode): Observable { return of(this.formInputVisibility).pipe( - tap((visibility) => { - if (authMode === 0) { - visibility.showUsernameInput = false; - visibility.showPasswordInput = false; - } else { - visibility.showUsernameInput = authMode === AuthMode.Username_and_Password; - visibility.showPasswordInput = [AuthMode.VNC_Password, AuthMode.Username_and_Password].includes(authMode); - } + tap((visibility: FormInputVisibility) => { + const authModeAsNumber: number = +authMode; + + visibility.showUsernameInput = authModeAsNumber === VncAuthMode.Username_and_Password + visibility.showPasswordInput = [VncAuthMode.VNC_Password, VncAuthMode.Username_and_Password].includes(authModeAsNumber); }), map(() => { return authMode; diff --git a/webapp/src/client/app/modules/web-client/form/web-client-form.component.ts b/webapp/src/client/app/modules/web-client/form/web-client-form.component.ts index d8ece00ca..ab289d17c 100644 --- a/webapp/src/client/app/modules/web-client/form/web-client-form.component.ts +++ b/webapp/src/client/app/modules/web-client/form/web-client-form.component.ts @@ -23,7 +23,7 @@ import {WebSessionService} from "@shared/services/web-session.service"; import {WebFormService} from "@shared/services/web-form.service"; import {AutoCompleteInput, HostnameObject} from "@shared/interfaces/forms.interfaces"; import {SelectItemWithTooltip} from "@shared/interfaces/select-item-tooltip.interface"; -import { NetScanService } from '@gateway/shared/services/net-scan.services'; +import {NetScanEntry, NetScanService} from '@gateway/shared/services/net-scan.services'; @Component({ selector: 'web-client-form', @@ -322,17 +322,17 @@ export class WebClientFormComponent return this.formService.canConnect(this.connectSessionForm); } - subscribeToNetscanFillEvent() { - this.netscanService.onServiceSelected().subscribe((entry) => { - let protocol = this.connectSessionForm.get('protocol') - if (protocol && protocol.value!==entry.protocol) { - protocol.setValue(entry.protocol) - this.formService.detectFormChanges(this.cdr); - } + subscribeToNetscanFillEvent(): void { + this.netscanService.onServiceSelected().subscribe((entry: NetScanEntry) => { this.connectSessionForm.get('hostname')?.setValue(entry.ip) this.connectSessionForm.get('autoComplete')?.setValue({ hostname: entry.ip }) - }); + + let protocol: AbstractControl = this.connectSessionForm.get('protocol') + if (protocol && protocol.value!==entry.protocol) { + protocol.setValue(entry.protocol) + } + }); } } diff --git a/webapp/src/client/app/shared/enums/web-client-auth-mode.enum.ts b/webapp/src/client/app/shared/enums/web-client-auth-mode.enum.ts index f5de54d0e..7b8ad0efd 100644 --- a/webapp/src/client/app/shared/enums/web-client-auth-mode.enum.ts +++ b/webapp/src/client/app/shared/enums/web-client-auth-mode.enum.ts @@ -19,9 +19,9 @@ namespace WebClientAuthMode { export function getSelectVncItems(): SelectItem[] { return Object.keys(VncAuthMode) - .filter((key) => isNaN(Number(key)) && typeof VncAuthMode[key as any] === 'number') - .map((key) => { - const label = key.replaceAll('_and_', '_&_').replaceAll('_', ' '); + .filter((key: string) => isNaN(Number(key)) && typeof VncAuthMode[key as any] === 'number') + .map((key: string): {label:string, value:VncAuthMode} => { + const label: string = key.replaceAll('_', ' ').replaceAll('_', ' '); const value: VncAuthMode = VncAuthMode[key as keyof typeof VncAuthMode]; return { label, value }; @@ -30,9 +30,9 @@ namespace WebClientAuthMode { export function getSelectSshItems(): SelectItem[] { return Object.keys(SshAuthMode) - .filter((key) => isNaN(Number(key)) && typeof SshAuthMode[key as any] === 'number') - .map((key) => { - const label = key.replaceAll('_', ' '); + .filter((key: string) => isNaN(Number(key)) && typeof SshAuthMode[key as any] === 'number') + .map((key: string): {label:string, value:SshAuthMode} => { + const label: string = key.replaceAll('_', ' '); const value: SshAuthMode = SshAuthMode[key as keyof typeof SshAuthMode]; return { label, value }; diff --git a/webapp/src/client/app/shared/services/web-form.service.ts b/webapp/src/client/app/shared/services/web-form.service.ts index baf2a78ef..410c6e390 100644 --- a/webapp/src/client/app/shared/services/web-form.service.ts +++ b/webapp/src/client/app/shared/services/web-form.service.ts @@ -46,7 +46,7 @@ export class WebFormService extends BaseComponent { inputFormData?: any, isRequired: boolean = true, isDisabled: boolean = false, - defaultValue: string | null = '', + defaultValue: string | number | null = '', additionalValidator?: ValidatorFn | ValidatorFn[] ): void { if (!formGroup) return;