Improvements for the VPN client

static/skywire-manager-src/src/app/app-routing.module.ts

@@ -129,6 +129,10 @@ const routes: Routes = [
       },
     ],
   },
+  {
+    path: 'vpnlogin/:key',
+    component: LoginComponent
+  },
   {
     path: 'vpn',
     canActivate: [VpnAuthGuardService],

static/skywire-manager-src/src/app/app.component.ts

@@ -50,7 +50,7 @@ export class AppComponent {
 
     // Check if the app is showing the VPN client.
     router.events.subscribe(() => {
-      this.inVpnClient = router.url.includes('/vpn/');
+      this.inVpnClient = router.url.includes('/vpn/') || router.url.includes('vpnlogin');
 
       // Show the correct document title.
       if (router.url.length > 2) {

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

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -22,23 +22,34 @@ import { processServiceError } from '../../../utils/errors';
 export class LoginComponent implements OnInit, OnDestroy {
   form: FormGroup;
   loading = false;
+  isForVpn = false;
+  vpnKey = '';
 
   private verificationSubscription: Subscription;
   private loginSubscription: Subscription;
+  private routeSubscription: Subscription;
 
   constructor(
     private authService: AuthService,
     private router: Router,
     private snackbarService: SnackbarService,
     private dialog: MatDialog,
+    private route: ActivatedRoute,
   ) { }
 
   ngOnInit() {
-    // Check if the user is already logged.
-    this.verificationSubscription = this.authService.checkLogin().subscribe(response => {
-      if (response !== AuthStates.NotLogged) {
-        this.router.navigate(['nodes'], { replaceUrl: true });
-      }
+    this.routeSubscription = this.route.paramMap.subscribe(params => {
+      this.vpnKey = params.get('key');
+
+      this.isForVpn = window.location.href.indexOf('vpnlogin') !== -1;
+
+      // Check if the user is already logged.
+      this.verificationSubscription = this.authService.checkLogin().subscribe(response => {
+        if (response !== AuthStates.NotLogged) {
+          const destination = !this.isForVpn ? ['nodes'] : ['vpn', this.vpnKey, 'status'];
+          this.router.navigate(destination, { replaceUrl: true });
+        }
+      });
     });
 
     this.form = new FormGroup({
@@ -52,6 +63,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
 
     this.verificationSubscription.unsubscribe();
+    this.routeSubscription.unsubscribe();
   }
 
   login() {
@@ -71,7 +83,8 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   private onLoginSuccess() {
-    this.router.navigate(['nodes'], { replaceUrl: true });
+    const destination = !this.isForVpn ? ['nodes'] : ['vpn', this.vpnKey, 'status'];
+    this.router.navigate(destination, { replaceUrl: true });
   }
 
   private onLoginError(err: OperationError) {

static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.ts

@@ -7,7 +7,7 @@ import { NodeComponent } from '../../node.component';
 import TimeUtils, { ElapsedTime } from 'src/app/utils/timeUtils';
 import { LabeledElementTypes, StorageService } from 'src/app/services/storage.service';
 import { NodeService, HealthStatus } from 'src/app/services/node.service';
-import { RouterConfigComponent } from './router-config/router-config.component';
+import { RouterConfigComponent, RouterConfigParams } from './router-config/router-config.component';
 
 /**
  * Shows the basic info of a node.
@@ -52,7 +52,8 @@ export class NodeInfoContentComponent {
   }
 
   changeRouterConfig() {
-    RouterConfigComponent.openDialog(this.dialog, this.node).afterClosed().subscribe((changed: boolean) => {
+    const params: RouterConfigParams = {nodePk: this.node.localPk, minHops: this.node.minHops};
+    RouterConfigComponent.openDialog(this.dialog, params).afterClosed().subscribe((changed: boolean) => {
       if (changed) {
         NodeComponent.refreshCurrentDisplayedData();
       }

static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/router-config/router-config.component.ts

@@ -11,6 +11,20 @@ import { OperationError } from 'src/app/utils/operation-error';
 import { processServiceError } from 'src/app/utils/errors';
 import { RouteService } from 'src/app/services/route.service';
 
+/**
+ * Params for RouterConfigComponent.
+ */
+export interface RouterConfigParams {
+  /**
+   * PK of the node.
+   */
+  nodePk: string;
+  /**
+   * Current value of the min hops property in the node.
+   */
+   minHops: number;
+}
+
 /**
  * Modal window for changing the configuration related to the router. It changes the values
  * and shows a confirmation msg by itself.
@@ -31,7 +45,7 @@ export class RouterConfigComponent implements OnInit, OnDestroy {
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
    */
-  public static openDialog(dialog: MatDialog, node: Node): MatDialogRef<RouterConfigComponent, any> {
+  public static openDialog(dialog: MatDialog, node: RouterConfigParams): MatDialogRef<RouterConfigComponent, any> {
     const config = new MatDialogConfig();
     config.data = node;
     config.autoFocus = false;
@@ -42,7 +56,7 @@ export class RouterConfigComponent implements OnInit, OnDestroy {
 
   constructor(
     private dialogRef: MatDialogRef<RouterConfigComponent>,
-    @Inject(MAT_DIALOG_DATA) private data: Node,
+    @Inject(MAT_DIALOG_DATA) private data: RouterConfigParams,
     private formBuilder: FormBuilder,
     private snackbarService: SnackbarService,
     private routeService: RouteService,
@@ -74,7 +88,7 @@ export class RouterConfigComponent implements OnInit, OnDestroy {
     this.button.showLoading();
 
     this.operationSubscription = this.routeService.setMinHops(
-      this.data.localPk,
+      this.data.nodePk,
       Number.parseInt(this.form.get('min').value, 10)
     ).subscribe({
       next: this.onSuccess.bind(this),

static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/vpn-server-list.component.html

@@ -145,6 +145,8 @@
               <mat-icon *ngIf="dataSorter.currentSortingColumn === pkSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
             </div>
           </th>
+          <!--
+          // TODO: these columns are for data not yet available in the discovery service. should be reactivated or removed later.
           <th *ngIf="currentList === lists.Public" class="sortable-column short-column center click-effect" (click)="dataSorter.changeSortingOrder(congestionSortData)" [matTooltip]="'vpn.server-list.congestion-info' | translate">
             <div class="header-container">
               <mat-icon [inline]="true">person</mat-icon>
@@ -185,6 +187,7 @@
               <mat-icon *ngIf="dataSorter.currentSortingColumn === hopsSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
             </div>
           </th>
+          -->
           <th class="sortable-column note-column center click-effect" (click)="dataSorter.changeSortingOrder(noteSortData)" [matTooltip]="'vpn.server-list.note-info' | translate">
             <div class="header-container">
               <mat-icon [inline]="true">info_outline</mat-icon>
@@ -231,9 +234,15 @@
               {{ 'vpn.server-list.unknown' | translate }}
             </ng-container>
           </td>
+          <!--
+          // TODO: this should be used, instead of the currently active version, if the extra columns are reactivated.
           <td class="pk-column" [ngClass]="{'public-pk-column': currentList === lists.Public, 'history-pk-column': currentList === lists.History}">
+          -->
+          <td class="pk-column history-pk-column">
             <app-copy-to-clipboard-text (click)="$event.stopPropagation()" class="d-inline-block w-100" [shortSimple]="true" [text]="server.pk"></app-copy-to-clipboard-text>
           </td>
+          <!--
+          // TODO: these columns are for data not yet available in the discovery service. should be reactivated or removed later.
           <td *ngIf="currentList === lists.Public" [class]="getCongestionTextColorClass(server.congestion) + ' center short-column'">
             {{ server.congestion }}%
           </td>
@@ -257,6 +266,7 @@
           <td *ngIf="currentList === lists.Public" [class]="getHopsTextColorClass(server.hops) + ' center mini-column'">
             {{ server.hops }}
           </td>
+          -->
           <td class="center note-column">
             <mat-icon
               *ngIf="server.note || server.personalNote"
@@ -285,7 +295,7 @@
       *ngIf="numberOfPages > 1"
       [currentPage]="currentPage"
       [numberOfPages]="numberOfPages"
-      [linkParts]="['/vpn']"
+      [linkParts]="['/vpn', currentLocalPk, 'servers', currentList]"
       [queryParams]="dataFilterer.currentUrlQueryParams">
     </app-paginator>
 

static/skywire-manager-src/src/app/components/vpn/pages/vpn-server-list/vpn-server-list.component.scss

@@ -114,7 +114,6 @@ tr {
 }
 
 .date-column {
-  max-width: 0;
   width: 150px;
   @extend .single-line;
 }
@@ -140,7 +139,8 @@ tr {
 .history-pk-column {
   width: 20% !important;
 }
-
+/*
+// TODO: for currently commented columns, must be deleted or reactivated depending on what happens to the columns.
 .public-pk-column {
   width: 12% !important;
 }
@@ -158,7 +158,7 @@ tr {
   min-width: 60px;
   @extend .single-line;
 }
-
+*/
 .icon-fixer {
   line-height: 0px;
 }
@@ -193,7 +193,8 @@ tr {
     @extend .single-line;
     flex-grow: 1;
   }
-
+  /*
+  // TODO: for currently commented columns, must be deleted or reactivated depending on what happens to the columns.
   .star-container {
     height: 0px;
     position: relative;
@@ -203,6 +204,7 @@ tr {
       font-size: 10px;
     }
   }
+  */
 }
 
 .flag {
@@ -220,17 +222,18 @@ tr {
   }
 }
 
+.center {
+  text-align: center;
+}
+/*
+// TODO: for currently commented columns, must be deleted or reactivated depending on what happens to the columns.
 .rating {
   width: 14px;
   height: 14px;
   display: inline-block;
   background-size: contain;
 }
 
-.center {
-  text-align: center;
-}
-
 .green-value {
   color: $green-clear !important;
 }
@@ -242,7 +245,7 @@ tr {
 .red-value {
   color: $red-clear !important;
 }
-
+*/
 .alert-icon {
   vertical-align: middle;
   margin-right: 10px;