Add a netifc field in the UI for configuring the VPN server

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.html

@@ -27,6 +27,15 @@
         {{ 'apps.vpn-socks-server-settings.passwords-not-match' | translate }}
       </mat-error>
     </mat-form-field>
+    <mat-form-field *ngIf="configuringVpn">
+      <input
+        id="netifc"
+        type="text"
+        formControlName="netifc"
+        [placeholder]="'apps.vpn-socks-server-settings.netifc' | translate"
+        matInput
+      >
+    </mat-form-field>
     <div class="main-theme settings-option" *ngIf="configuringVpn">
       <mat-checkbox
         color="primary"

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts

@@ -58,27 +58,32 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy {
     if (data.name.toLocaleLowerCase().indexOf('vpn') !== -1) {
       this.configuringVpn = true;
     }
-
-    // Get the current values saved on the visor, if returned by the API.
-    if (this.data.args && this.data.args.length > 0) {
-      for (const arg of this.data.args) {
-        if ((arg as string).toLowerCase().includes('-secure')) {
-          this.secureMode = (arg as string).toLowerCase().includes('true');
-        }
-      }
-    }
   }
 
   ngOnInit() {
     this.form = this.formBuilder.group({
       password: [''],
       passwordConfirmation: ['', this.validatePasswords.bind(this)],
+      netifc: [''],
     });
 
     this.formSubscription = this.form.get('password').valueChanges.subscribe(() => {
       this.form.get('passwordConfirmation').updateValueAndValidity();
     });
 
+    // Get the current values saved on the visor, if returned by the API.
+    if (this.data.args && this.data.args.length > 0) {
+      for (let i = 0; i < this.data.args.length; i++) {
+        const arg = this.data.args[i];
+        if ((arg as string).toLowerCase().includes('-secure')) {
+          this.secureMode = (arg as string).toLowerCase().includes('true');
+        }
+        if ((arg as string).toLowerCase().includes('-netifc') && i < this.data.args.length - 1) {
+          this.form.get('netifc').setValue(this.data.args[i + 1]);
+        }
+      }
+    }
+
     setTimeout(() => (this.firstInput.nativeElement as HTMLElement).focus());
   }
 
@@ -123,6 +128,7 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy {
     // The "secure" value is only for the VPN app.
     if (this.configuringVpn) {
       data['secure'] = this.secureMode;
+      data['netifc'] = this.form.get('netifc').value;
     }
 
     this.operationSubscription = this.appsService.changeAppSettings(

static/skywire-manager-src/src/assets/i18n/en.json

@@ -375,6 +375,7 @@
       "vpn-title": "VPN-Server Settings",
       "new-password": "New password (Leave empty to remove the password)",
       "repeat-password": "Repeat password",
+      "netifc": "Default network interface (optional)",
       "passwords-not-match": "Passwords do not match.",
       "secure-mode-check": "Use secure mode",
       "secure-mode-info": "When active, the server doesn't allow client/server SSH and doesn't allow any traffic from VPN clients to the server local network.",

static/skywire-manager-src/src/assets/i18n/es.json

@@ -379,6 +379,7 @@
       "vpn-title": "Configuración de VPN-Server",
       "new-password": "Nueva contraseña (dejar en blanco para eliminar la contraseña)",
       "repeat-password": "Repita la contraseña",
+      "netifc": "Interfaz de red predeterminada (opcional)",
       "passwords-not-match": "Las contraseñas no coinciden.",
       "secure-mode-check": "Usar modo seguro",
       "secure-mode-info": "Cuando está activo, el servidor no permite SSH con los clientes y no permite ningún tráfico de clientes VPN a la red local del servidor.",

static/skywire-manager-src/src/assets/i18n/es_base.json

@@ -379,6 +379,7 @@
       "vpn-title": "VPN-Server Settings",
       "new-password": "New password (Leave empty to remove the password)",
       "repeat-password": "Repeat password",
+      "netifc": "Default network interface (optional)",
       "passwords-not-match": "Passwords do not match.",
       "secure-mode-check": "Use secure mode",
       "secure-mode-info": "When active, the server doesn't allow client/server SSH and doesn't allow any traffic from VPN clients to the server local network.",