Extending direct link with adding server option

src/app/components/direct-link/direct-link.component.html

@@ -0,0 +1,46 @@
+<div [hidden]="!serverOptionsVisibility" class="content">
+    <div class="default-header">
+        <div class="row">
+            <h1 class="col">Add new server</h1>
+        </div>
+    </div>
+    <div class="default-content">
+        <mat-card class="matCard">
+            <form [formGroup]="serverForm">
+                <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-select placeholder="Location" formControlName="location">
+                      <mat-option *ngFor="let location of locations" [value]="location.key"> {{ location.name }} </mat-option>
+                    </mat-select>
+                </mat-form-field>
+    
+                <mat-form-field>
+                    <mat-select placeholder="Protocol" formControlName="protocol">
+                        <mat-option *ngFor="let protocol of protocols" [value]="protocol.key"> {{ protocol.name }} </mat-option>
+                    </mat-select>
+                </mat-form-field>
+    
+                <mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
+                    <mat-select placeholder="Authorization" formControlName="authorization">
+                        <mat-option *ngFor="let auth of authorizations" [value]="auth.key"> {{ auth.name }} </mat-option>
+                    </mat-select>
+                </mat-form-field>
+    
+                <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
+                    <input matInput tabindex="1" formControlName="login" placeholder="Login" />
+                </mat-form-field>
+            
+                <mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
+                    <input matInput type="password" tabindex="1" formControlName="password" placeholder="Password" />
+                </mat-form-field>
+            </form>
+        </mat-card>
+        <div class="buttons-bar">
+            <button mat-raised-button color="primary" (click)="createServer()">Add server</button>
+        </div>
+    </div>
+</div>

src/app/components/direct-link/direct-link.component.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+    width: 100%;
+}

src/app/components/direct-link/direct-link.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Server } from '../../models/server';
 import { ServerDatabase } from '../../services/server.database';
@@ -12,6 +13,33 @@ import { ToasterService } from '../../services/toaster.service';
   encapsulation: ViewEncapsulation.None,
 })
 export class DirectLinkComponent implements OnInit {
+  public serverOptionsVisibility = false;
+  public serverIp;
+  public serverPort;
+  public projectId;
+
+  authorizations = [
+    { key: 'none', name: 'No authorization' },
+    { key: 'basic', name: 'Basic authorization' },
+  ];
+  protocols = [
+    { key: 'http:', name: 'HTTP' },
+    { key: 'https:', name: 'HTTPS' },
+  ];
+  locations = [
+    { key: 'local', name: 'Local' },
+    { key: 'remote', name: 'Remote' },
+  ];
+
+  serverForm = new FormGroup({
+    name: new FormControl('', [Validators.required]),
+    location: new FormControl(''),
+    protocol: new FormControl('http:'),
+    authorization: new FormControl('none'),
+    login: new FormControl(''),
+    password: new FormControl(''),
+  });
+
   constructor(
     private serverService: ServerService,
     private serverDatabase: ServerDatabase,
@@ -31,25 +59,45 @@ export class DirectLinkComponent implements OnInit {
   }
 
   private async getServers() {
-    const serverIp = this.route.snapshot.paramMap.get('server_ip');
+    this.serverIp = this.route.snapshot.paramMap.get('server_ip');
-    const serverPort = +this.route.snapshot.paramMap.get('server_port');
+    this.serverPort = +this.route.snapshot.paramMap.get('server_port');
-    const projectId = this.route.snapshot.paramMap.get('project_id');
+    this.projectId = this.route.snapshot.paramMap.get('project_id');
 
     const servers = await this.serverService.findAll();
-    const server = servers.filter((server) => server.host === serverIp && server.port === serverPort)[0];
+    const server = servers.filter((server) => server.host === this.serverIp && server.port === this.serverPort)[0];
 
+    console.log(servers);
     if (server) {
-      this.router.navigate(['/server', server.id, 'project', projectId]);
+      this.router.navigate(['/server', server.id, 'project', this.projectId]);
     } else {
-      let serverToAdd: Server = new Server();
+      this.serverOptionsVisibility = true;
-      serverToAdd.host = serverIp;
-      serverToAdd.port = serverPort;
-      serverToAdd.location = 'bundled';
-      serverToAdd.name = serverIp;
-
-      this.serverService.create(serverToAdd).then((addedServer: Server) => {
-        this.router.navigate(['/server', addedServer.id, 'project', projectId]);
-      });
     }
   }
+
+  public createServer() {
+    if (!this.serverForm.get('name').hasError && !this.serverForm.get('location').hasError && !this.serverForm.get('protocol').hasError) {
+      this.toasterService.error('Please use correct values');
+      return;
+    }
+
+    if (this.serverForm.get('authorization').value === 'basic' && !this.serverForm.get('login').value && !this.serverForm.get('password').value) {
+      this.toasterService.error('Please use correct values');
+      return;
+    }
+
+    let serverToAdd: Server = new Server();
+    serverToAdd.host = this.serverIp;
+    serverToAdd.port = this.serverPort;
+
+    serverToAdd.name = this.serverForm.get('name').value;
+    serverToAdd.location = this.serverForm.get('location').value;
+    serverToAdd.protocol = this.serverForm.get('protocol').value;
+    serverToAdd.authorization = this.serverForm.get('authorization').value;
+    serverToAdd.login = this.serverForm.get('login').value;
+    serverToAdd.password = this.serverForm.get('password').value;
+
+    this.serverService.create(serverToAdd).then((addedServer: Server) => {
+      this.router.navigate(['/server', addedServer.id, 'project', this.projectId]);
+    });
+  }
 }

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

@@ -163,6 +163,7 @@ export class AddServerDialogComponent implements OnInit {
         }
       },
       (error) => {
+        console.log("error ", error);
         this.toasterService.error('Cannot connect to the server: ' + error);
       }
     );