[WIP] VPN desktop client #603

Senyoret1 · 2020-11-12T21:26:43Z

Did you run make format && make check?
The go code was not changed. npm run lint and npm run build were used.

Changes:

The front end for the VPN desktop client is being added. At least for now, it is being added inside the Skywire manager.

How to test this PR:
Recompile the Skywire manager, open it and navigate to {URL}/#/vpn.

Note: some changes affect the Skywire manager, modifications will be made later to revert the changes for the manager, if appropriate.

Senyoret1 · 2020-11-13T20:27:18Z

The last commit includes the following changes:

Several improvements were added to the server list of the VPN client, including fixing several small bugs, improving how the elements at the top are organized, making the design work better if the window is resized, and others.
Filtering options for the countries were added. With this, the general-purpose filtering window received some improvements that can be used in the Skywire manager.
The base code for getting the server list from the discovery service was added.

Senyoret1 · 2020-11-15T17:31:45Z

The last commit adds the design for the main page of the VPN client.

Senyoret1 · 2020-11-19T23:16:09Z

The last commit includes the following changes:

The initial code for starting, stopping and getting the state of the VPN client app was added.

Senyoret1 · 2020-11-24T20:18:13Z

The last commit includes the following changes:

Errors with the navigation inside the VPN client were fixed.
Now it is possible to change the language in the VPN client.
The header now uses the basic VPN info service to update the data. At this moment only the “connected” and “disconnected” states are shown, as the rest of the data is still not available.
Several other small changes and improvements.

Senyoret1 · 2020-11-29T13:19:23Z

The last commits include the following changes:

Now the server list works for changing the server and connecting to it. It takes into account special cases, like selecting the same server and having to stop the connection for making the change.
Now it is possible to enter the server pk and password manually.
Now the general VPN client service centralizes the code for modifying the state of the VPN client app and not just checking its state. It also has several improvements to avoid problems caused by the async communications between the font-end and the visor.
There is now a new page for informing the user when there is an error accessing the VPN client app.
The UI of the initial tab was improved to give more feedback to the user when an operation is being made.
Several other bug fixes and improvements to the code.

Senyoret1 · 2020-12-14T01:36:11Z

The last commits include the following changes:

Now the VPN desktop client is able to manage server lists (history, favorites and blocked), in the code and UI. A lot of changes were made internally.
Severall small changes and fixes.

Senyoret1 · 2020-12-16T20:13:47Z

The last commits include the following changes:

A settings page was added. It is possible to change the killswitch setting using it. Future settings should be added to it.
The status returned by the backend is now used in the status page.
The public ip is obtained using the ipify.org service and shown in the UI.

Senyoret1 · 2020-12-21T22:53:00Z

The last commit includes several changes, including:

The country of the current IP is obtained using ip2c.org.
Now a warning is shown if the browser window is too small, as the design is not responsive.
The way in which the VPN client makes redirects if the URL is not correct was improved.
The loading animation in the server list now reacts well if there are problems checking the backend.
Several other improvements and bug fixes.

Senyoret1 · 2020-12-24T12:40:40Z

The last commits include the following changes:

Several improvements to how the IPs and geolocation are managed.
Now the UI shows the data transmisison stats (depends on Additional app stats #649)
Several additional small improvements and fixes.

Senyoret1 · 2020-12-25T21:40:00Z

The last commit includes the following changes:

Several problems in the data storage synchronization that were present if the app was openned in more than one tab/window were solved.
Now the app automatically creates a transport for connecting with the server before activating the VPN client app, if needed.
A latency graph was added.
The code now reacts well is the server pk is changed directly in the node or another instance of the app.
An error page was added to prevent problems if the user tries to manage more than one visor with the same app instance.
A problem which made the app stop working if the server pk is not valid was solved.
Improvements were made to how the blocked servers are managed.
A new option for not using external services for getting the IP info was added.
The countries tab was removed.
Several other smaller improvements and bug fixes.

Senyoret1 · 2021-01-04T22:59:56Z

While creating the last commit, most of the code was reviewed and commented. Apart from the code comments, it includes various small fixes and the Spanish translation. Some additional problems were detected and will be fixed next.

Senyoret1 · 2021-01-07T20:31:36Z

The last commit includes the following changes:

Now the client is able to connect to a server using a password. Several options for managing the passwords were added. The password are not saved in the front-end.
A workaround for solving a rendering bug on Chrome was added. The bug made some texts clearer while some animation were being played and while the vertical scrollbar was being shown.
Now the top bar is able to show the VPN status the state tab shows.
Some improvements for the general app error management were added.
A generic component for showing the server name was added, to ensure consistency in the app, as the server names are shown with several optional elements.
If the user opens the app in a remote computer, a warning is shown.
Several other smaller improvements and bug fixes.

Senyoret1 · 2021-01-08T21:54:02Z

The last commit includes several additional improvements for the Skywire VPN desktop client, including the following:

Now the UI works well when no server has been set in the backend.
Improvements were added to the settings page.
The browser tab now shows the correct title.
Several other smaller bug fixes and improvements.

Senyoret1 · 2021-01-15T22:14:03Z

The last commit includes the following changes:

A Skywire logo was added at the top.
Now the user is asked for confirmation when changing the killswitch setting if the VPN is running, because the connection is stopped for a moment for making the change.
Now the user is not asked for confirmation when stopping the VPN if the killswitch option is not turned on.
The dots at the end of one word tooltips were removed.

Senyoret1 · 2021-02-26T21:06:51Z

The last commit includes the following changes:

The data graphs now always start at 0, to make them easier to underestand.
The sorting mechanism for the server list was improved.
Some other improvements based on the changes made in the Android client.

Senyoret1 · 2021-03-21T23:06:42Z

The last commit includes the following changes:

Now the data starts are shown by default using the standard units (bits for speed and bytes for volume)
Now AutoScalePipe can process bits.
Options for changing the default units for the data stats were added.

SkycoinSynth · 2021-03-26T15:57:09Z

static/skywire-manager-src/src/app/components/vpn/vpn-helpers.ts

+      },
+      {
+        icon: 'settings',
+        label: 'vpn.settings',


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

label: 'vpn.settings',

label: "vpn.settings",

SkycoinSynth · 2021-03-26T15:57:10Z

static/skywire-manager-src/src/app/components/vpn/pages/vpn-settings/vpn-settings.component.ts

+import { BackendState, VpnClientService, VpnServiceStates } from 'src/app/services/vpn-client.service';
+import { SnackbarService } from 'src/app/services/snackbar.service';
+import { AppsService } from 'src/app/services/apps.service';
+import { processServiceError } from 'src/app/utils/errors';


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

import { processServiceError } from 'src/app/utils/errors';

import { processServiceError } from "src/app/utils/errors";

SkycoinSynth · 2021-03-26T15:57:11Z

...kywire-manager-src/src/app/components/vpn/pages/vpn-server-list/vpn-server-list.component.ts

+import { SortingModes, SortingColumn, DataSorter } from 'src/app/utils/lists/data-sorter';
+import { DataFilterer } from 'src/app/utils/lists/data-filterer';
+import { FilterProperties, FilterFieldTypes, PrintableLabel } from 'src/app/utils/filters';
+import { countriesList } from 'src/app/utils/countries-list';


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

import { countriesList } from 'src/app/utils/countries-list';

import { countriesList } from "src/app/utils/countries-list";

SkycoinSynth · 2021-03-26T15:57:12Z

static/skywire-manager-src/src/app/components/vpn/vpn-helpers.ts

+      (newServerFromDiscovery && (newServerFromHistory || newServerManually)) ||
+      (newServerManually && (newServerFromHistory || newServerFromDiscovery))
+    ) {
+      throw new Error('Invalid call');


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

throw new Error('Invalid call');

throw new Error("Invalid call");

SkycoinSynth · 2021-03-26T15:57:13Z

...kywire-manager-src/src/app/components/vpn/pages/vpn-server-list/vpn-server-list.component.ts

+          this.listId = 'vbs';
+        } else if (params.get('type') === Lists.History) {
+          this.currentList = Lists.History;
+          this.listId = 'vhs';


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

this.listId = 'vhs';

this.listId = "vhs";

SkycoinSynth · 2021-03-26T15:57:14Z

static/skywire-manager-src/src/app/services/vpn-auth-guard.service.ts

+ * must be used in the canActivate and canActivateChild properties of the routing module.
+ */
+@Injectable({
+  providedIn: 'root'


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

providedIn: 'root'

providedIn: "root"

SkycoinSynth · 2021-03-26T15:57:15Z

static/skywire-manager-src/src/app/components/vpn/pages/vpn-error/vpn-error.component.ts

+ * KnownProblems.UnableToConnectWithTheVpnClientApp is used.
+ */
+@Component({
+  selector: 'app-vpn-error',


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

selector: 'app-vpn-error',

selector: "app-vpn-error",

SkycoinSynth · 2021-03-26T15:57:16Z

static/skywire-manager-src/src/app/services/vpn-client-discovery.service.ts

+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { retryWhen, delay, map } from 'rxjs/operators';


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

import { retryWhen, delay, map } from 'rxjs/operators';

import { retryWhen, delay, map } from "rxjs/operators";

SkycoinSynth · 2021-03-26T15:57:17Z

static/skywire-manager-src/src/app/components/vpn/pages/vpn-settings/vpn-settings.component.ts

+ * Page for changing the configuration of the VPN client.
+ */
+@Component({
+  selector: 'app-vpn-settings-list',


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

selector: 'app-vpn-settings-list',

selector: "app-vpn-settings-list",

SkycoinSynth · 2021-03-26T15:57:18Z

...kywire-manager-src/src/app/components/vpn/pages/vpn-server-list/vpn-server-list.component.ts

+
+      // Get the PK of the current local visor.
+      if (params.has('key')) {
+        this.currentLocalPk = params.get('key');


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

this.currentLocalPk = params.get('key');

this.currentLocalPk = params.get("key");

SkycoinSynth · 2021-03-26T15:57:20Z

static/skywire-manager-src/src/app/services/vpn-client.service.ts

+        // Check if the local visor already has a transport for connecting with the server.
+        let transportFound = false;
+        if (nodeInfo.transports && nodeInfo.transports.length > 0) {
+          (nodeInfo.transports as any[]).forEach(transport => {


Codacy has a fix for the issue: Expected parentheses around arrow function argument.

Suggested change

(nodeInfo.transports as any[]).forEach(transport => {

(nodeInfo.transports as any[]).forEach((transport) => {

SkycoinSynth · 2021-03-26T15:57:21Z

...kywire-manager-src/src/app/components/vpn/pages/vpn-server-list/vpn-server-list.component.ts

+ * Page for showing the vpn server lists.
+ */
+@Component({
+  selector: 'app-vpn-server-list',


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

selector: 'app-vpn-server-list',

selector: "app-vpn-server-list",

SkycoinSynth · 2021-03-26T15:57:22Z

static/skywire-manager-src/src/app/pipes/auto-scale.pipe.ts

+  private static readonly accumulatedMeasurements = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  private static readonly measurementsPerSec = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'];
+  private static readonly accumulatedMeasurementsInBits = ['b', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb', 'Eb', 'Zb', 'Yb'];
+  private static readonly measurementsPerSecInBits = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s', 'Pb/s', 'Eb/s', 'Zb/s', 'Yb/s'];


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

private static readonly measurementsPerSecInBits = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s', 'Pb/s', 'Eb/s', 'Zb/s', 'Yb/s'];

private static readonly measurementsPerSecInBits = ["b/s", 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s', 'Pb/s', 'Eb/s', 'Zb/s', 'Yb/s'];

SkycoinSynth · 2021-03-26T15:57:23Z

...-src/src/app/components/vpn/pages/vpn-server-list/add-vpn-server/add-vpn-server.component.ts

@@ -0,0 +1,102 @@
+import { Component, ViewChild, ElementRef, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { FormBuilder, FormGroup, Validators } from "@angular/forms";

SkycoinSynth · 2021-03-26T15:57:24Z

static/skywire-manager-src/src/app/components/layout/top-bar/top-bar.component.ts

+          this.vpnData.stateClass = 'red-clear-text';
+        } else if (data.vpnClientAppData.appState === AppState.Connecting) {
+          this.vpnData.state = 'vpn.connection-info.state-connecting';
+          this.vpnData.stateClass = 'yellow-clear-text';


Codacy has a fix for the issue: Strings must use doublequote.

Suggested change

this.vpnData.stateClass = 'yellow-clear-text';

this.vpnData.stateClass = "yellow-clear-text";

jdknives · 2021-04-29T13:24:18Z

@Senyoret1 as discussed, I will merge this as it works reasonably well and will make a ticket to address the rest of the open issues in another PR.

Senyoret1 added 2 commits November 12, 2020 17:15

Initial VPN client commit

5752ea4

Improvements for the VPN server list

27f71d1

Design for the main VPN client page

55d6590

Initial code for connecting the VPN client UI with the backend

5720145

Improvements for the VPN client

1af9766

Senyoret1 added 4 commits November 26, 2020 08:09

Add server selection to the VPN client

fe840f8

Centralize the VPN client state management in a service

b8a3c13

Improvements for the VPN client service and server selection

1f29fdd

More improvements for the VPN client

8cbf30e

Senyoret1 added 4 commits December 1, 2020 09:25

Initial code for saving lists in the VPN desktop client

6300f98

Improvements for server list management code of the VPN client

b9b2eb2

Make the VPN client show all the server lists

29028e1

Improvements for the server list

cbc0b64

Senyoret1 added 3 commits December 16, 2020 10:04

Add the settings page to the desktop VPN client

0b9f7d3

More status info for the desktop VPN client

4ff9c32

Merge remote-tracking branch 'upstream/develop' into vpn-client

d73221d

Improvements for the VPN desktop client

bde4849

Senyoret1 added 2 commits December 23, 2020 11:45

Improvements for the IP management of the VPN desktop client

a6bdf3d

Show data stats in the VPN desktop client

3fbf7dd

Improvements for the Skywire VPN desktop client

0c23ecb

General improvements for the VPN desktop client

b5f5d71

More improvements for the VPN desktop client

1cff7db

Improvements for the VPN client

ed63f60

Improvements for the VPN client

3dc4658

Show correct units in the VPN client

7fb2713

Senyoret1 added 2 commits March 21, 2021 19:55

Merge remote-tracking branch 'upstream/develop' into vpn-client

2de08af

Changes requested by the linter

773c98e

SkycoinSynth reviewed Mar 26, 2021

View reviewed changes

jdknives merged commit 6b16ae8 into skycoin:develop Apr 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] VPN desktop client #603

[WIP] VPN desktop client #603

Senyoret1 commented Nov 12, 2020

Senyoret1 commented Nov 13, 2020

Senyoret1 commented Nov 15, 2020

Senyoret1 commented Nov 19, 2020

Senyoret1 commented Nov 24, 2020

Senyoret1 commented Nov 29, 2020

Senyoret1 commented Dec 14, 2020

Senyoret1 commented Dec 16, 2020

Senyoret1 commented Dec 21, 2020

Senyoret1 commented Dec 24, 2020

Senyoret1 commented Dec 25, 2020

Senyoret1 commented Jan 4, 2021

Senyoret1 commented Jan 7, 2021

Senyoret1 commented Jan 8, 2021

Senyoret1 commented Jan 15, 2021

Senyoret1 commented Feb 26, 2021

Senyoret1 commented Mar 21, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

SkycoinSynth Mar 26, 2021

jdknives commented Apr 29, 2021

	import { processServiceError } from 'src/app/utils/errors';
	import { processServiceError } from "src/app/utils/errors";

	import { countriesList } from 'src/app/utils/countries-list';
	import { countriesList } from "src/app/utils/countries-list";

	throw new Error('Invalid call');
	throw new Error("Invalid call");

	import { retryWhen, delay, map } from 'rxjs/operators';
	import { retryWhen, delay, map } from "rxjs/operators";

	selector: 'app-vpn-settings-list',
	selector: "app-vpn-settings-list",

	this.currentLocalPk = params.get('key');
	this.currentLocalPk = params.get("key");

	(nodeInfo.transports as any[]).forEach(transport => {
	(nodeInfo.transports as any[]).forEach((transport) => {

	selector: 'app-vpn-server-list',
	selector: "app-vpn-server-list",

	private static readonly measurementsPerSecInBits = ['b/s', 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s', 'Pb/s', 'Eb/s', 'Zb/s', 'Yb/s'];
	private static readonly measurementsPerSecInBits = ["b/s", 'Kb/s', 'Mb/s', 'Gb/s', 'Tb/s', 'Pb/s', 'Eb/s', 'Zb/s', 'Yb/s'];

		@@ -0,0 +1,102 @@
		import { Component, ViewChild, ElementRef, Inject, OnInit } from '@angular/core';
		import { FormBuilder, FormGroup, Validators } from '@angular/forms';

	this.vpnData.stateClass = 'yellow-clear-text';
	this.vpnData.stateClass = "yellow-clear-text";

[WIP] VPN desktop client #603

[WIP] VPN desktop client #603

Conversation

Senyoret1 commented Nov 12, 2020

Senyoret1 commented Nov 13, 2020

Senyoret1 commented Nov 15, 2020

Senyoret1 commented Nov 19, 2020

Senyoret1 commented Nov 24, 2020

Senyoret1 commented Nov 29, 2020

Senyoret1 commented Dec 14, 2020

Senyoret1 commented Dec 16, 2020

Senyoret1 commented Dec 21, 2020

Senyoret1 commented Dec 24, 2020

Senyoret1 commented Dec 25, 2020

Senyoret1 commented Jan 4, 2021

Senyoret1 commented Jan 7, 2021

Senyoret1 commented Jan 8, 2021

Senyoret1 commented Jan 15, 2021

Senyoret1 commented Feb 26, 2021

Senyoret1 commented Mar 21, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdknives commented Apr 29, 2021