ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-31 00:23:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Local and Remote server adding validation, Ref. #295

Browse Source
This commit is contained in:
ziajka 2019-02-26 16:04:05 +01:00
parent bb9cfc988b
commit e0bae16093
2 changed files with 110 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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-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-select>
</mat-form-field>
<mat-form-field *ngIf="server.location === 'local'">
<input matInput tabindex="1" [(ngModel)]="server.path" placeholder="Local server path" />
<mat-form-field *ngIf="serverForm.get('location').value === 'local'">
<input matInput tabindex="1" formControlName="path" placeholder="Local server path" />
</mat-form-field>
<mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.host" placeholder="Host" /> </mat-form-field>
<mat-form-field> <input matInput tabindex="1" [(ngModel)]="server.port" placeholder="Port" /> </mat-form-field>
<mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
<input matInput tabindex="1" formControlName="host" placeholder="Host" />
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Authorization" [(value)]="server.authorization">
<mat-form-field *ngIf="serverForm.get('location').value === 'remote'">
<input matInput tabindex="1" formControlName="port" placeholder="Port" />
</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="server.authorization === 'basic'">
<input matInput tabindex="1" [(ngModel)]="server.login" placeholder="Login" />
<mat-form-field *ngIf="serverForm.get('authorization').value === 'basic'">
<input matInput tabindex="1" formControlName="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 *ngIf="serverForm.get('authorization').value === 'basic'">
<input matInput tabindex="1" formControlName="password" placeholder="Password" />
</mat-form-field>
</div>
<div mat-dialog-actions>
</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>
</div>
</form>

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

@ -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(''),
'port': new FormControl(''),
'authorization': new FormControl('none'),
'login': new FormControl(''),
'password': new FormControl('')
});
constructor(
public dialogRef: MatDialogRef<AddServerDialogComponent>,
private electronService: ElectronService,
@ -45,17 +55,68 @@ export class AddServerDialogComponent implements OnInit {
async ngOnInit() {
this.locations = this.getLocations();
this.server.authorization = 'none';
this.server.location = this.getDefaultLocation();
this.server.path = await this.getDefaultLocalServerPath();
const defaultLocalServerPath = await this.getDefaultLocalServerPath();
this.serverForm.get('location').valueChanges.subscribe((location: string) => {
const pathControl = this.serverForm.get('path');
const portControl = this.serverForm.get('port');
const hostControl = this.serverForm.get('host');
if(location === 'local') {
pathControl.setValue(defaultLocalServerPath);
pathControl.setValidators([Validators.required]);
portControl.clearValidators();
hostControl.clearValidators();
}
else {
pathControl.setValue('');
pathControl.clearValidators();
portControl.setValidators([Validators.required, Validators.min(0)]);
hostControl.setValidators([Validators.required]);
}
[pathControl, portControl, hostControl].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('authorization').setValue('none');
}
onAddClick(): void {
// clear path if not local server
if(this.server.location !== 'local') {
this.server.path = null;
if(!this.serverForm.valid) {
return;
}
this.dialogRef.close(this.server);
const server: Server = Object.assign({}, this.serverForm.value);
this.dialogRef.close(server);
}
onNoClick(): void {