From 4ddb5a890fa9a0aaf22cef82dac5dc9b4b9a55ba Mon Sep 17 00:00:00 2001 From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com> Date: Mon, 18 Jul 2022 19:48:03 -0400 Subject: [PATCH 1/2] Several improvements for the UI --- .../layout/button/button.component.ts | 7 +++ .../confirmation/confirmation.component.html | 2 +- .../confirmation/confirmation.component.ts | 2 +- .../layout/dialog/dialog.component.ts | 31 +++++++++- .../edit-label/edit-label.component.html | 2 +- .../layout/edit-label/edit-label.component.ts | 2 +- .../filters-selection.component.html | 2 +- .../filters-selection.component.ts | 2 +- .../select-language.component.html | 2 +- .../select-language.component.ts | 2 +- .../select-option.component.html | 2 +- .../select-option/select-option.component.ts | 2 +- .../layout/top-bar/top-bar.component.scss | 2 +- .../update-all/update-all.component.html | 2 +- .../layout/update-all/update-all.component.ts | 2 +- .../layout/update/update.component.html | 2 +- .../layout/update/update.component.ts | 2 +- .../initial-setup.component.html | 2 +- .../initial-setup/initial-setup.component.ts | 4 ++ .../pages/login/login.component.html | 2 +- .../pages/node-list/node-list.component.html | 26 +++++---- .../pages/node-list/node-list.component.scss | 4 ++ .../pages/node-list/node-list.component.ts | 9 --- .../basic-terminal.component.html | 1 + .../basic-terminal.component.ts | 1 + .../log/log-filter/log-filter.component.html | 2 +- .../log/log-filter/log-filter.component.ts | 2 +- .../node-apps-list/log/log.component.html | 2 +- .../apps/node-apps-list/log/log.component.ts | 1 + .../edit-skysocks-client-note.component.html | 2 +- .../edit-skysocks-client-note.component.ts | 2 +- .../skysocks-client-filter.component.html | 2 +- .../skysocks-client-filter.component.ts | 2 +- .../skysocks-client-password.component.html | 2 +- .../skysocks-client-password.component.ts | 2 +- .../skysocks-client-settings.component.html | 10 +++- .../skysocks-client-settings.component.ts | 9 ++- .../skysocks-settings.component.html | 9 ++- .../skysocks-settings.component.ts | 9 ++- .../router-config.component.html | 4 +- .../router-config/router-config.component.ts | 9 ++- .../route-details.component.html | 2 +- .../route-details/route-details.component.ts | 2 +- .../create-transport.component.html | 9 +-- .../create-transport.component.ts | 9 ++- .../transport-details.component.html | 2 +- .../transport-details.component.ts | 1 + .../settings/password/password.component.html | 6 +- .../settings/password/password.component.ts | 7 +++ .../pages/settings/settings.component.html | 9 ++- .../pages/settings/settings.component.scss | 9 +++ .../pages/settings/settings.component.ts | 56 +++++++++++++++++-- .../add-vpn-server.component.html | 2 +- .../add-vpn-server.component.ts | 2 +- .../edit-vpn-server-value.component.html | 2 +- .../edit-vpn-server-value.component.ts | 2 +- .../enter-vpn-server-password.component.html | 2 +- .../enter-vpn-server-password.component.ts | 2 +- .../src/app/utils/generalUtils.ts | 2 +- .../src/assets/i18n/en.json | 1 + .../src/assets/i18n/es.json | 1 + .../src/assets/i18n/es_base.json | 1 + .../src/assets/scss/_forms.scss | 6 ++ .../src/assets/scss/_responsive_tables.scss | 10 +++- static/skywire-manager-src/src/styles.scss | 4 ++ 65 files changed, 252 insertions(+), 83 deletions(-) diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.ts b/static/skywire-manager-src/src/app/components/layout/button/button.component.ts index e2016e91cf..8d602a4de2 100644 --- a/static/skywire-manager-src/src/app/components/layout/button/button.component.ts +++ b/static/skywire-manager-src/src/app/components/layout/button/button.component.ts @@ -91,4 +91,11 @@ export class ButtonComponent implements OnDestroy { this.disabled = false; } } + + /** + * Returns true if the button is showing the loading animation. + */ + get isLoading(): boolean { + return this.state === ButtonStates.Loading; + } } diff --git a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html index 20f5edb545..651ddbb3b7 100644 --- a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html +++ b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html @@ -1,4 +1,4 @@ - +
{{ (state !== confirmationStates.Done ? data.text : doneText) | translate }}
diff --git a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts index da76fb5c27..7ceadf1aab 100644 --- a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts +++ b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts @@ -79,7 +79,7 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy { @Output() operationAccepted = new EventEmitter(); constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: ConfirmationData, ) { this.disableDismiss = !!data.disableDismiss; diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts index ab17e114b6..527ee7f909 100644 --- a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts +++ b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts @@ -1,4 +1,5 @@ -import { Component, Input } from '@angular/core'; +import { Component, HostListener, Input } from '@angular/core'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; /** * Base component for all the modal windows. Its main function is to show the title bar. @@ -11,7 +12,7 @@ import { Component, Input } from '@angular/core'; export class DialogComponent { @Input() headline: string; /** - * Hides the close button. + * Disables all the ways provided by default by the UI for closing the modal window. */ @Input() disableDismiss: boolean; /** @@ -23,4 +24,30 @@ export class DialogComponent { * If true, vertical margins will be added to the content. */ @Input() includeVerticalMargins = true; + + // MatDialogRef of the modal window component which is using this component for wrapping + // the contents. + private dialogInternal: MatDialogRef; + @Input() set dialog(val: MatDialogRef) { + val.disableClose = true; + this.dialogInternal = val; + } + + constructor( + private matDialog: MatDialog, + ) { } + + @HostListener('window:keyup.esc') + onKeyUp() { + this.closePopup(); + } + + closePopup() { + if (!this.disableDismiss) { + // Continue only if the current modal window is the topmost one. + if (this.matDialog.openDialogs[this.matDialog.openDialogs.length - 1].id === this.dialogInternal.id) { + this.dialogInternal.close(); + } + } + } } diff --git a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html index 3ee6fb0bf7..dd35dca8a8 100644 --- a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html +++ b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html @@ -1,4 +1,4 @@ - +
diff --git a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts index 19853770ca..359348ec5c 100644 --- a/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts +++ b/static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.ts @@ -33,7 +33,7 @@ export class EditLabelComponent implements OnInit, AfterViewInit { } constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private data: LabelInfo, private formBuilder: FormBuilder, private storageService: StorageService, diff --git a/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html b/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html index 1885ef4e37..9468229d4e 100644 --- a/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html +++ b/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html @@ -1,4 +1,4 @@ - + diff --git a/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts b/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts index 99f14e2146..cc7a92e902 100644 --- a/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts +++ b/static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.ts @@ -51,7 +51,7 @@ export class FiltersSelectionComponent implements OnInit { constructor( @Inject(MAT_DIALOG_DATA) public data: FiltersSelectiondParams, - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private formBuilder: FormBuilder, ) { } diff --git a/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.html b/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.html index 5ff09bf055..53f935019b 100644 --- a/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.html +++ b/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.html @@ -1,4 +1,4 @@ - +
- + @@ -185,7 +189,7 @@ cellspacing="0" cellpadding="0" > - +
{{ 'tables.sorting-title' | translate }}
@@ -200,7 +204,7 @@
- +
@@ -235,7 +239,7 @@
- +
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss index ce07e8576f..c08156023f 100644 --- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss +++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss @@ -26,3 +26,7 @@ .small-column { width: 1px; } + +.non-selectable { + cursor: not-allowed; +} diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts index f3b8d13ead..2e53d47d02 100644 --- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts @@ -677,13 +677,4 @@ export class NodeListComponent implements OnInit, OnDestroy { } }); } - - /** - * Opens the page with the details of the node. - */ - open(node: Node) { - if (node.online) { - this.router.navigate(['nodes', node.localPk]); - } - } } diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html b/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html index 187eb2cdde..d2199e52ae 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html @@ -2,6 +2,7 @@ [headline]="('actions.terminal.title' | translate) + ' - ' + this.data.label + ' (' + this.data.pk + ')'" [includeScrollableArea]="false" [includeVerticalMargins]="false" + [dialog]="dialogRef" >
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts b/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts index 08c5cb42fa..9b514a65c0 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts @@ -64,6 +64,7 @@ export class BasicTerminalComponent implements AfterViewInit, OnDestroy { constructor( @Inject(MAT_DIALOG_DATA) public data: BasicTerminalData, + public dialogRef: MatDialogRef, private renderer: Renderer2, private apiService: ApiService, private translate: TranslateService, diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.html index 8fa8d73c28..a01b91f7af 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log-filter/log-filter.component.html @@ -1,4 +1,4 @@ - + , + public dialogRef: MatDialogRef, private formBuilder: FormBuilder, ) { } diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html index 850245116d..feeff43238 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.html @@ -1,4 +1,4 @@ - +
{{ 'apps.log.filter-button' | translate }}  diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.ts index 9142492a67..58596d5380 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/log/log.component.ts @@ -66,6 +66,7 @@ export class LogComponent implements OnInit, OnDestroy { constructor( @Inject(MAT_DIALOG_DATA) private data: Application, + public dialogRef: MatDialogRef, private appsService: AppsService, private dialog: MatDialog, private snackbarService: SnackbarService, diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.html index 6494ab59b8..5e8f842dce 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.html @@ -1,4 +1,4 @@ - + diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts index a30691bd0a..edb71d9a90 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/edit-skysocks-client-note/edit-skysocks-client-note.component.ts @@ -33,7 +33,7 @@ export class EditSkysocksClientNoteComponent implements OnInit { } constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private data: string, private formBuilder: FormBuilder, ) { } diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.html index 13a8f99f1a..f5846b77b4 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.html @@ -1,4 +1,4 @@ - + diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts index 188cd5e8a9..f7543b84aa 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-filter/skysocks-client-filter.component.ts @@ -53,7 +53,7 @@ export class SkysocksClientFilterComponent implements OnInit { constructor( @Inject(MAT_DIALOG_DATA) public data: FilterWindowData, - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private formBuilder: FormBuilder, ) { } diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.html index 9d9c6ad795..08524f15da 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.html @@ -1,4 +1,4 @@ - +
{{ 'apps.vpn-socks-client-settings.password-dialog.info' | translate }}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.ts index 44c7af88d1..3830eca05c 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-password/skysocks-client-password.component.ts @@ -32,7 +32,7 @@ export class SkysocksClientPasswordComponent implements OnInit { } constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private formBuilder: FormBuilder, ) { } diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html index 5c6676eae1..dbf31e6e85 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html @@ -1,9 +1,13 @@ - + - + - + , + public dialogRef: MatDialogRef, private appsService: AppsService, private formBuilder: FormBuilder, private snackbarService: SnackbarService, @@ -199,6 +199,13 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy { } } + /** + * If true, all the ways provided by default by the UI for closing the modal window are disabled. + */ + get disableDismiss(): boolean { + return this.button && this.settingsButton ? (this.button.isLoading || this.settingsButton.isLoading) : false; + } + // Used by the checkbox for the killswitch setting. setKillswitch(event) { if (!this.working) { diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.html index 30044f2673..1c2cf90673 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.html @@ -1,8 +1,10 @@ - + - + - + {{ 'apps.vpn-socks-server-settings.secure-mode-check' | translate }} help diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts index c7252c6a65..168279437e 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts @@ -51,7 +51,7 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy { @Inject(MAT_DIALOG_DATA) private data: Application, private appsService: AppsService, private formBuilder: FormBuilder, - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private snackbarService: SnackbarService, private dialog: MatDialog, ) { @@ -94,6 +94,13 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy { } } + /** + * If true, all the ways provided by default by the UI for closing the modal window are disabled. + */ + get disableDismiss(): boolean { + return this.button ? this.button.isLoading : false; + } + // Used by the checkbox for the secure mode setting. setSecureMode(event) { if (!this.button.disabled) { diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/router-config/router-config.component.html b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/router-config/router-config.component.html index e0a850568c..6ba44bc956 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/router-config/router-config.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/router-config/router-config.component.html @@ -1,7 +1,7 @@ - +
{{'router-config.info' | translate}}
- + , + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private data: RouterConfigParams, private formBuilder: FormBuilder, private snackbarService: SnackbarService, @@ -80,6 +80,13 @@ export class RouterConfigComponent implements OnInit, OnDestroy { } } + /** + * If true, all the ways provided by default by the UI for closing the modal window are disabled. + */ + get disableDismiss(): boolean { + return this.button ? this.button.isLoading : false; + } + save() { if (!this.form.valid || this.operationSubscription) { return; diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html index 4135dfbb27..6003a71b8d 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html @@ -1,4 +1,4 @@ - +
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.ts index 71ebe39d29..00fe37bb77 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.ts @@ -39,7 +39,7 @@ export class RouteDetailsComponent { constructor( @Inject(MAT_DIALOG_DATA) data: Route, - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private storageService: StorageService, ) { this.routeRule = data; diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html index fc01da9c8e..49a6f2c42a 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html @@ -1,7 +1,7 @@ - + - + - + - + {{ 'transports.dialog.make-persistent' | translate }} help diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts index 425f483574..e5ee39aa1f 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts @@ -50,7 +50,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy { constructor( private transportService: TransportService, private formBuilder: FormBuilder, - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private snackbarService: SnackbarService, private storageService: StorageService, private nodeService: NodeService, @@ -79,6 +79,13 @@ export class CreateTransportComponent implements OnInit, OnDestroy { } } + /** + * If true, all the ways provided by default by the UI for closing the modal window are disabled. + */ + get disableDismiss(): boolean { + return this.button ? this.button.isLoading : false; + } + /** * Used by the checkbox for the persistent setting. */ diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html index 900d27e54b..d1818d5704 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html +++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html @@ -1,4 +1,4 @@ - +
list{{ 'transports.details.basic.title' | translate }} diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.ts index 9e9ded2cc2..ff21e20c65 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.ts @@ -28,5 +28,6 @@ export class TransportDetailsComponent { constructor( @Inject(MAT_DIALOG_DATA) public data: Transport, + public dialogRef: MatDialogRef, ) { } } diff --git a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html index 81d80cc8a6..c74b495aa1 100644 --- a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html +++ b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html @@ -5,7 +5,7 @@
- + - + - +
- + + +
+ {{ 'settings.checking-auth' | translate }} +
+ +
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/settings.component.scss b/static/skywire-manager-src/src/app/components/pages/settings/settings.component.scss index a1def407f5..05f9440d2f 100644 --- a/static/skywire-manager-src/src/app/components/pages/settings/settings.component.scss +++ b/static/skywire-manager-src/src/app/components/pages/settings/settings.component.scss @@ -1,5 +1,14 @@ @import "variables"; +.checking-container { + font-size: 10px; + opacity: 0.5; + + .mat-spinner { + display: inline-block; + } +} + .show-link { cursor: pointer; font-size: $font-size-smaller; diff --git a/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts b/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts index 0ae96677ef..0ae9b54112 100644 --- a/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts @@ -1,9 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { MatDialog } from '@angular/material/dialog'; +import { of, Subscription } from 'rxjs'; +import { delay, flatMap } from 'rxjs/operators'; import { TabButtonData, MenuOptionData } from '../../layout/top-bar/top-bar.component'; -import { AuthService } from '../../../services/auth.service'; +import { AuthService, AuthStates } from '../../../services/auth.service'; import { SnackbarService } from '../../../services/snackbar.service'; import GeneralUtils from 'src/app/utils/generalUtils'; import { UpdaterStorageKeys } from 'src/app/services/node.service'; @@ -16,10 +18,20 @@ import { UpdaterStorageKeys } from 'src/app/services/node.service'; templateUrl: './settings.component.html', styleUrls: ['./settings.component.scss'] }) -export class SettingsComponent { +export class SettingsComponent implements OnInit, OnDestroy { tabsData: TabButtonData[] = []; options: MenuOptionData[] = []; - mustShowUpdaterSettings = !!localStorage.getItem(UpdaterStorageKeys.UseCustomSettings); + + // If true, the animation telling the user that the auth settings are being checked isn't shown. + waitBeforeShowingLoading = true; + authChecked = false; + // Removes the password settings if the auth option is not active in the back-end. + authActive = false; + + private authSubscription: Subscription; + + // TODO: must be removed if the old updater is removed. + //mustShowUpdaterSettings = !!localStorage.getItem(UpdaterStorageKeys.UseCustomSettings); constructor( private authService: AuthService, @@ -56,6 +68,39 @@ export class SettingsComponent { ]; } + ngOnInit() { + setTimeout(() => { + this.waitBeforeShowingLoading = false; + }, 500); + + this.checkAuth(0); + } + + /** + * Checks if the auth options are active and the user is authenticated. + */ + private checkAuth(delayMilliseconds: number) { + this.authSubscription = of(1).pipe( + // Wait the delay. + delay(delayMilliseconds), + // Load the data. The node pk is obtained from the currently openned node page. + flatMap(() => this.authService.checkLogin()) + ).subscribe( + result => { + //this.authChecked = true; + this.authActive = result === AuthStates.Logged; + }, + () => { + // Retry after a small delay. + this.checkAuth(15000); + }, + ); + } + + ngOnDestroy() { + this.authSubscription.unsubscribe(); + } + /** * Called when an option form the top bar is selected. * @param actionName Name of the selected option, as defined in the this.options array. @@ -79,6 +124,8 @@ export class SettingsComponent { }); } + // TODO: must be removed, with the text, if the old updater is removed. + /* // Opens the updater settings, if the user confirms the operation. showUpdaterSettings() { const confirmationDialog = GeneralUtils.createConfirmationDialog(this.dialog, 'settings.updater-config.open-confirmation'); @@ -89,4 +136,5 @@ export class SettingsComponent { this.mustShowUpdaterSettings = true; }); } + */ } diff --git a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.html b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.html index ab37fe3723..cab49fde4e 100644 --- a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.html +++ b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.html @@ -1,4 +1,4 @@ - + diff --git a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.ts b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.ts index 7434f31e1b..de2cd33059 100644 --- a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.ts +++ b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.ts @@ -44,7 +44,7 @@ export class AddVpnServerComponent implements OnInit { } constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) private data: string, private formBuilder: FormBuilder, private dialog: MatDialog, diff --git a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.html b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.html index 4ec2206c31..1febad25e9 100644 --- a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.html +++ b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.html @@ -1,4 +1,4 @@ - + diff --git a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.ts b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.ts index fb4532f1ea..aab972f364 100644 --- a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.ts +++ b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/edit-vpn-server-value/edit-vpn-server-value.component.ts @@ -45,7 +45,7 @@ export class EditVpnServerValueComponent implements OnInit { } constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: EditVpnServerParams, private formBuilder: FormBuilder, private snackbarService: SnackbarService, diff --git a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.html b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.html index fa5e50f579..0d1bf6dd10 100644 --- a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.html +++ b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.html @@ -1,4 +1,4 @@ - + diff --git a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.ts b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.ts index 61e479c9d1..01f4d31e06 100644 --- a/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.ts +++ b/static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/enter-vpn-server-password/enter-vpn-server-password.component.ts @@ -32,7 +32,7 @@ export class EnterVpnServerPasswordComponent implements OnInit { } constructor( - private dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: boolean, private formBuilder: FormBuilder, ) { } diff --git a/static/skywire-manager-src/src/app/utils/generalUtils.ts b/static/skywire-manager-src/src/app/utils/generalUtils.ts index a2dfa6dd69..46aeab4bbc 100644 --- a/static/skywire-manager-src/src/app/utils/generalUtils.ts +++ b/static/skywire-manager-src/src/app/utils/generalUtils.ts @@ -17,7 +17,7 @@ export default class GeneralUtils { headerText: 'confirmation.header-text', confirmButtonText: 'confirmation.confirm-button', cancelButtonText: 'confirmation.cancel-button', - disableDismiss: true, + disableDismiss: false, }; const config = new MatDialogConfig(); diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json index cd1277780b..003b00561f 100644 --- a/static/skywire-manager-src/src/assets/i18n/en.json +++ b/static/skywire-manager-src/src/assets/i18n/en.json @@ -217,6 +217,7 @@ "settings": { "title": "Settings", + "checking-auth": "Checking authentication settings.", "password" : { "initial-config-help": "Use this option for setting the initial password. After a password has been set, it is not possible to use this option to modify it.", "help": "Options for changing your password.", diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json index 8b6ed52663..ee8f2540be 100644 --- a/static/skywire-manager-src/src/assets/i18n/es.json +++ b/static/skywire-manager-src/src/assets/i18n/es.json @@ -221,6 +221,7 @@ "settings": { "title": "Configuración", + "checking-auth": "Revisando configuración de autenticación.", "password" : { "initial-config-help": "Use esta opción para establecer la contraseña inicial. Después de establecer una contraseña no es posible usar esta opción para modificarla.", "help": "Opciones para cambiar la contraseña.", diff --git a/static/skywire-manager-src/src/assets/i18n/es_base.json b/static/skywire-manager-src/src/assets/i18n/es_base.json index d9e6b2db45..221fa7098a 100644 --- a/static/skywire-manager-src/src/assets/i18n/es_base.json +++ b/static/skywire-manager-src/src/assets/i18n/es_base.json @@ -221,6 +221,7 @@ "settings": { "title": "Settings", + "checking-auth": "Checking authentication settings.", "password" : { "initial-config-help": "Use this option for setting the initial password. After a password has been set, it is not possible to use this option to modify it.", "help": "Options for changing your password.", diff --git a/static/skywire-manager-src/src/assets/scss/_forms.scss b/static/skywire-manager-src/src/assets/scss/_forms.scss index 128c4ca190..58194b6e65 100644 --- a/static/skywire-manager-src/src/assets/scss/_forms.scss +++ b/static/skywire-manager-src/src/assets/scss/_forms.scss @@ -34,3 +34,9 @@ mat-form-field { @extend .form-help-icon-container; color: scale-color($white, $alpha: -20%); } + +// Used for showing a form field disabled. +.element-disabled { + pointer-events: none !important; + opacity: 0.5 !important; +} diff --git a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss index cf382edad5..aecb3c16ad 100644 --- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss +++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss @@ -18,7 +18,7 @@ $responsive-table-colors: ( td, th { color: nth($colors, 3) !important; - padding: 12px 10px !important; + padding: 12px 10px; border-bottom: 1px solid $separator; } @@ -46,6 +46,14 @@ $responsive-table-colors: ( } } + .link-row { + display: table-row; + + &:hover { + text-decoration: none; + } + } + // Column used for the check boxes. .selection-col { width: 30px; diff --git a/static/skywire-manager-src/src/styles.scss b/static/skywire-manager-src/src/styles.scss index edf9dd2684..a78129063a 100644 --- a/static/skywire-manager-src/src/styles.scss +++ b/static/skywire-manager-src/src/styles.scss @@ -124,3 +124,7 @@ button:focus { line-height: 1.8; padding: 7px 14px !important; } + +.mat-tooltip-panel { + pointer-events: none !important; +} From 02631f27a542859bb0b4355f3a6158d9c89bdc9d Mon Sep 17 00:00:00 2001 From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com> Date: Mon, 18 Jul 2022 19:55:55 -0400 Subject: [PATCH 2/2] Small fix --- .../src/app/components/pages/settings/settings.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts b/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts index 0ae9b54112..a205e4698c 100644 --- a/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/settings/settings.component.ts @@ -87,7 +87,7 @@ export class SettingsComponent implements OnInit, OnDestroy { flatMap(() => this.authService.checkLogin()) ).subscribe( result => { - //this.authChecked = true; + this.authChecked = true; this.authActive = result === AuthStates.Logged; }, () => {