diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts index cf5651012..da0f210d0 100644 --- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts +++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts @@ -2,6 +2,7 @@ import { Component, Input, OnDestroy } from '@angular/core'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Observable, Subscription } from 'rxjs'; import { ActivatedRoute, Router } from '@angular/router'; +import { TranslateService } from '@ngx-translate/core'; import { Application } from '../../../../../app.datatypes'; import { AppsService } from '../../../../../services/apps.service'; @@ -16,7 +17,6 @@ import { SkysocksSettingsComponent } from '../node-apps/skysocks-settings/skysoc import { processServiceError } from 'src/app/utils/errors'; import { OperationError } from 'src/app/utils/operation-error'; import { SkysocksClientSettingsComponent } from '../node-apps/skysocks-client-settings/skysocks-client-settings.component'; -import { TranslateService } from '@ngx-translate/core'; import { FilterProperties, FilterFieldTypes } from 'src/app/utils/filters'; import { SortingColumn, SortingModes, DataSorter } from 'src/app/utils/lists/data-sorter'; import { DataFilterer } from 'src/app/utils/lists/data-filterer'; @@ -70,6 +70,8 @@ export class NodeAppsListComponent implements OnDestroy { appsWithConfig = new Map([ ['skysocks', true], ['skysocks-client', true], + ['vpn-client', true], + ['vpn-server', true], ]); allApps: Application[]; @@ -411,9 +413,9 @@ export class NodeAppsListComponent implements OnDestroy { * Shows the appropriate modal window for configuring the app. */ config(app: Application): void { - if (app.name === 'skysocks') { + if (app.name === 'skysocks' || app.name === 'vpn-server') { SkysocksSettingsComponent.openDialog(this.dialog, app); - } else if (app.name === 'skysocks-client') { + } else if (app.name === 'skysocks-client' || app.name === 'vpn-client') { SkysocksClientSettingsComponent.openDialog(this.dialog, app); } else { this.snackbarService.showError('apps.error'); 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 4227fff34..418bb940b 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,7 +1,7 @@ - +
- + {{ 'common.save' | translate }}
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 07f33236e..91baac3e1 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,11 +1,38 @@ - +
+ + + + + {{ 'apps.vpn-socks-client-settings.filter-dialog.any-country' | translate }} + +
+
+
+ {{ completeCountriesList[country.toUpperCase()] }} + {{ country.toUpperCase() }} +
+ + + {{ 'apps.vpn-socks-client-settings.filter-dialog.any-country' | translate }} + + +
+
+
+ {{ completeCountriesList[form.get('country').value] }} + {{ form.get('country').value }} +
+
+
+
+ @@ -14,7 +41,7 @@ @@ -27,7 +54,7 @@ color="primary" class="float-right" > - {{ 'apps.skysocks-client-settings.filter-dialog.apply' | translate }} + {{ 'apps.vpn-socks-client-settings.filter-dialog.apply' | translate }}
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 1cce74de9..dc55381fb 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 @@ -3,18 +3,28 @@ import { FormBuilder, FormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { AppConfig } from 'src/app/app.config'; +import { countriesList } from 'src/app/utils/countries-list'; /** * Filters the user selected using SkysocksClientFilterComponent. It is prepopulated with default * data which indicates that no filter has been selected. */ export class SkysocksClientFilters { + country = ''; location = ''; key = ''; } /** - * Modal window for selecting the filters for the proxy list shown by + * Data for SkysocksClientFilterComponent. + */ +export interface FilterWindowData { + currentFilters: SkysocksClientFilters; + availableCountries: string[]; +} + +/** + * Modal window for selecting the filters for the elements list shown by * SkysocksClientSettingsComponent. If the user accepts the changes, the modal window is closed * and an instance of SkysocksClientFilters is returned in the "afterClosed" envent, with the * selected filters. @@ -27,12 +37,14 @@ export class SkysocksClientFilters { export class SkysocksClientFilterComponent implements OnInit { form: FormGroup; + completeCountriesList = countriesList; + /** * Opens the modal window. Please use this function instead of opening the window "by hand". */ - public static openDialog(dialog: MatDialog, currentFilters: SkysocksClientFilters): MatDialogRef { + public static openDialog(dialog: MatDialog, data: FilterWindowData): MatDialogRef { const config = new MatDialogConfig(); - config.data = currentFilters; + config.data = data; config.autoFocus = false; config.width = AppConfig.smallModalWidth; @@ -40,15 +52,18 @@ export class SkysocksClientFilterComponent implements OnInit { } constructor( - @Inject(MAT_DIALOG_DATA) private data: SkysocksClientFilters, + @Inject(MAT_DIALOG_DATA) public data: FilterWindowData, private dialogRef: MatDialogRef, private formBuilder: FormBuilder, ) { } ngOnInit() { + // The '-' value is used when the country field is empty, to be able to show the "any" label, + // due to the way in which Angular works. this.form = this.formBuilder.group({ - 'location-text': [this.data.location], - 'key-text': [this.data.key], + 'country': [this.data.currentFilters.country ? this.data.currentFilters.country : '-'], + 'location-text': [this.data.currentFilters.location], + 'key-text': [this.data.currentFilters.key], }); } @@ -56,6 +71,13 @@ export class SkysocksClientFilterComponent implements OnInit { apply() { const response = new SkysocksClientFilters(); + // If the value of the country field is '-', it means that no country was selected. + let country = (this.form.get('country').value as string).trim(); + if (country === '-') { + country = ''; + } + + response.country = country; response.location = (this.form.get('location-text').value as string).trim(); response.key = (this.form.get('key-text').value as string).trim(); 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 b14f853ae..0f4b31cc2 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,24 +1,24 @@ - + - +
- {{ 'apps.skysocks-client-settings.remote-key-length-error' | translate }} + {{ 'apps.vpn-socks-client-settings.remote-key-length-error' | translate }} - {{ 'apps.skysocks-client-settings.remote-key-chars-error' | translate }} + {{ 'apps.vpn-socks-client-settings.remote-key-chars-error' | translate }} @@ -29,18 +29,18 @@ color="primary" class="float-right" > - {{ 'apps.skysocks-client-settings.save' | translate }} + {{ 'apps.vpn-socks-client-settings.save' | translate }}
- +
error - {{ 'apps.skysocks-client-settings.no-elements' | translate }} + {{ 'apps.vpn-socks-client-settings.no-elements' | translate }}
@@ -56,14 +56,14 @@
- {{ 'apps.skysocks-client-settings.no-filter' | translate }} + {{ 'apps.vpn-socks-client-settings.no-filter' | translate }}
{{ filterTexts[0] | translate }} {{ filterTexts[1] | translate }} {{ filterTexts[2] }}
-
{{ 'apps.skysocks-client-settings.click-to-change' | translate }}
+
{{ 'apps.vpn-socks-client-settings.click-to-change' | translate }}
@@ -71,7 +71,7 @@
error - {{ 'apps.skysocks-client-settings.no-elements-for-filters' | translate }} + {{ 'apps.vpn-socks-client-settings.no-elements-for-filters' | translate }}
@@ -83,16 +83,23 @@ >
- {{ 'apps.skysocks-client-settings.key' | translate }} + {{ 'apps.vpn-socks-client-settings.key' | translate }}   {{ part }}
- {{ 'apps.skysocks-client-settings.location' | translate }} -   - {{ part }} - + {{ 'apps.vpn-socks-client-settings.location' | translate }} +   + +
+
+
+
+ + {{ part }} + +
@@ -101,7 +108,7 @@
- {{ 'apps.skysocks-client-settings.pagination-info' | translate:{currentElementsRange: currentRange, totalElements: filteredProxiesFromDiscovery.length} }} + {{ 'apps.vpn-socks-client-settings.pagination-info' | translate:{currentElementsRange: currentRange, totalElements: filteredProxiesFromDiscovery.length} }}
- +
error - {{ 'apps.skysocks-client-settings.no-history' | translate:{number: maxHistoryElements} }} + {{ 'apps.vpn-socks-client-settings.no-history' | translate:{number: maxHistoryElements} }}
@@ -146,20 +153,20 @@
- {{ 'apps.skysocks-client-settings.key' | translate }} + {{ 'apps.vpn-socks-client-settings.key' | translate }} {{ entry.key }}
- {{ 'apps.skysocks-client-settings.note' | translate }} + {{ 'apps.vpn-socks-client-settings.note' | translate }} {{ entry.note }} - {{ 'apps.skysocks-client-settings.note-entered-manually' | translate }} + {{ 'apps.vpn-socks-client-settings.note-entered-manually' | translate }} - {{ 'apps.skysocks-client-settings.note-obtained' | translate }} + {{ 'apps.vpn-socks-client-settings.note-obtained' | translate }} ({{ entry.location }}) @@ -172,7 +179,7 @@