Merge pull request #304 from GNS3/adding-server-validation

Adding server validation & running local server on custom ports

local-server.js

@@ -56,6 +56,14 @@ exports.stopAllLocalServers = async () => {
 
 function getServerArguments(server, overrides) {
   let serverArguments = [];
+  if(server.host) {
+    serverArguments.push('--host');
+    serverArguments.push(server.host);
+  }
+  if(server.port) {
+    serverArguments.push('--port');
+    serverArguments.push(server.port);
+  }
   return serverArguments;
 }
 

src/app/components/servers/add-server-dialog/add-server-dialog.component.html

@@ -1,34 +1,47 @@
 <h1 mat-dialog-title>Add server</h1>
+<form [formGroup]="serverForm">
 <div mat-dialog-content>
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.name" placeholder="Name" /> </mat-form-field>
+    <mat-form-field>
+      <input matInput tabindex="1" formControlName="name" placeholder="Name" />
+      <mat-error *ngIf="serverForm.get('name').hasError('required')">You must enter a value</mat-error>
+    </mat-form-field>
 
-  <mat-form-field>
+   <mat-form-field>
-    <mat-select placeholder="Location" [(value)]="server.location">
+      <mat-select placeholder="Location" formControlName="location" >
-      <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
+        <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
-    </mat-select>
+      </mat-select>
-  </mat-form-field>
+    </mat-form-field>
 
-  <mat-form-field *ngIf="server.location === 'local'">
+    <mat-form-field *ngIf="serverForm.get('location').value === 'local'">
-    <input matInput tabindex="1" [(ngModel)]="server.path" placeholder="Local server path" />
+      <input matInput tabindex="1" formControlName="path" placeholder="Local server path" />
-  </mat-form-field>
+    </mat-form-field>
 
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.host" placeholder="Host" /> </mat-form-field>
+    <mat-form-field>
-  <mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.port" placeholder="Port" /> </mat-form-field>
+      <input matInput tabindex="1" formControlName="host" placeholder="Host" />
+    </mat-form-field>
 
-  <mat-form-field>
+    <mat-form-field>
-    <mat-select placeholder="Authorization" [(value)]="server.authorization">
+      <input matInput tabindex="1" formControlName="port" placeholder="Port" />
-      <mat-option *ngFor="let auth of authorizations" [value]="auth.key"> {{ auth.name }} </mat-option>
+    </mat-form-field>
-    </mat-select>
-  </mat-form-field>
 
-  <mat-form-field *ngIf="server.authorization === 'basic'">
+    <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
-    <input matInput tabindex="1" [(ngModel)]="server.login" placeholder="Login" />
+      <mat-select placeholder="Authorization" formControlName="authorization" >
-  </mat-form-field>
+        <mat-option *ngFor="let auth of authorizations" [value]="auth.key"> {{ auth.name }} </mat-option>
-  <mat-form-field *ngIf="server.authorization === 'basic'">
+      </mat-select>
-    <input matInput tabindex="1" [(ngModel)]="server.password" placeholder="Password" />
+    </mat-form-field>
-  </mat-form-field>
+
-</div>
+    <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
-<div mat-dialog-actions>
+      <input matInput tabindex="1" formControlName="login" placeholder="Login" />
-  <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
+    </mat-form-field>
-  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
+
-</div>
+    <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
+      <input matInput tabindex="1" formControlName="password" placeholder="Password" />
+    </mat-form-field>
+
+  </div>
+  <div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
+  </div>
+</form>
+  

src/app/components/servers/add-server-dialog/add-server-dialog.component.ts

@@ -2,6 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { Server } from '../../../models/server';
 import { ElectronService } from 'ngx-electron';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 
 @Component({
@@ -9,11 +10,20 @@ import { ElectronService } from 'ngx-electron';
   templateUrl: 'add-server-dialog.component.html'
 })
 export class AddServerDialogComponent implements OnInit {
-  server: Server = new Server();
-
   authorizations = [{ key: 'none', name: 'No authorization' }, { key: 'basic', name: 'Basic authorization' }];
   locations = [];
 
+  serverForm = new FormGroup({
+    'name': new FormControl('', [ Validators.required ]),
+    'location': new FormControl(''),
+    'path': new FormControl(''),
+    'host': new FormControl('', [ Validators.required ]),
+    'port': new FormControl('', [ Validators.required, Validators.min(1) ]),
+    'authorization': new FormControl('none'),
+    'login': new FormControl(''),
+    'password': new FormControl('')
+  });
+
   constructor(
     public dialogRef: MatDialogRef<AddServerDialogComponent>,
     private electronService: ElectronService,
@@ -36,6 +46,14 @@ export class AddServerDialogComponent implements OnInit {
     return 'remote';
   }
 
+  getDefaultHost() {
+    return '127.0.0.1';
+  }
+
+  getDefaultPort() {
+    return 3080;
+  }
+
   async getDefaultLocalServerPath() {
     if(this.electronService.isElectronApp) {
       return await this.electronService.remote.require('./local-server.js').getLocalServerPath();
@@ -45,17 +63,61 @@ export class AddServerDialogComponent implements OnInit {
 
   async ngOnInit() {
     this.locations = this.getLocations();
-    this.server.authorization = 'none';
+
-    this.server.location = this.getDefaultLocation();
+    const defaultLocalServerPath = await this.getDefaultLocalServerPath();
-    this.server.path = await this.getDefaultLocalServerPath();
+
+    this.serverForm.get('location').valueChanges.subscribe((location: string) => {
+      const pathControl = this.serverForm.get('path');
+
+      if(location === 'local') {
+        pathControl.setValue(defaultLocalServerPath);
+        pathControl.setValidators([Validators.required]);
+      }
+      else {
+        pathControl.setValue('');
+        pathControl.clearValidators();
+      }
+
+      [pathControl].forEach((control) => {
+        control.updateValueAndValidity({
+          onlySelf: true
+        });
+      })
+    });
+    
+    this.serverForm.get('authorization').valueChanges.subscribe((authorization: string) => {
+      const loginControl = this.serverForm.get('login');
+      const passwordControl = this.serverForm.get('password');
+
+      if(authorization === 'none') {
+        loginControl.clearValidators();
+        passwordControl.clearValidators();
+      }
+      else {
+        loginControl.setValidators([Validators.required]);
+        passwordControl.setValidators([Validators.required]);
+      }
+
+      [loginControl, passwordControl].forEach((control) => {
+        control.updateValueAndValidity({
+          onlySelf: true
+        });
+      })
+    });
+
+    this.serverForm.get('location').setValue(this.getDefaultLocation());
+    this.serverForm.get('host').setValue(this.getDefaultHost());
+    this.serverForm.get('port').setValue(this.getDefaultPort());
+    this.serverForm.get('authorization').setValue('none');
   }
 
   onAddClick(): void {
-    // clear path if not local server
+    if(!this.serverForm.valid) {
-    if(this.server.location !== 'local') {
+      return;
-      this.server.path = null;
     }
-    this.dialogRef.close(this.server);
+
+    const server: Server = Object.assign({}, this.serverForm.value);
+    this.dialogRef.close(server);
   }
 
   onNoClick(): void {