Form for supporting servers with credentials, Ref: #100

src/app/app.module.ts

@@ -23,6 +23,7 @@ import {
   MatListModule,
   MatExpansionModule,
   MatSortModule,
+  MatSelectModule
 } from '@angular/material';
 
 import { D3Service } from 'd3-ng2-service';
@@ -126,6 +127,7 @@ Raven
     MatListModule,
     MatExpansionModule,
     MatSortModule,
+    MatSelectModule,
     CartographyModule,
     HotkeyModule.forRoot(),
     PersistenceModule,

src/app/default-layout/default-layout.component.css

@@ -66,3 +66,7 @@ header {
 .example-container > * {
   width: 100%;
 }
+
+.mat-dialog-content > * {
+  width: 100%;
+}

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

@@ -9,6 +9,22 @@
   <mat-form-field>
     <input matInput tabindex="1" [(ngModel)]="server.port" placeholder="Port">
   </mat-form-field>
+
+  <mat-form-field>
+    <mat-select placeholder="Authorization" [(value)]="server.authorization">
+      <mat-option *ngFor="let auth of authorizations" [value]="auth.key">
+        {{ auth.name }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field *ngIf="server.authorization === 'basic'">
+    <input matInput tabindex="1" [(ngModel)]="server.login" placeholder="Login">
+  </mat-form-field>
+  <mat-form-field *ngIf="server.authorization === 'basic'">
+    <input matInput tabindex="1" [(ngModel)]="server.password" placeholder="Password">
+  </mat-form-field>
+
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">No Thanks</button>

src/app/servers/servers.component.ts

@@ -38,7 +38,7 @@ export class ServersComponent implements OnInit {
 
   createModal() {
     const dialogRef = this.dialog.open(AddServerDialogComponent, {
-      width: '250px',
+      width: '350px',
     });
 
     dialogRef.afterClosed().subscribe(server => {
@@ -62,14 +62,23 @@ export class ServersComponent implements OnInit {
   selector: 'app-add-server-dialog',
   templateUrl: 'add-server-dialog.html',
 })
-export class AddServerDialogComponent {
+export class AddServerDialogComponent implements OnInit {
   server: Server = new Server();
 
+  authorizations = [
+    {'key': 'none', name: 'No authorization'},
+    {'key': 'basic', name: 'Basic authorization'}
+  ];
+
   constructor(
     public dialogRef: MatDialogRef<AddServerDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
+  ngOnInit() {
+    this.server.authorization = 'none';
+  }
+
   onAddClick(): void {
     this.dialogRef.close(this.server);
   }