Skip to content

Commit 5844b87

Browse files
Akeruagccie
Akeru
authored and
agccie
committedSep 26, 2018
Fix #22 and #27 by refactoring user add/edit logic (#43)
Fix #28 by adding API call at load Fix #30 and #31 by refactoring fabric add/edit logic Fix #32 Fix #42 by disabling animation globally Work #41 by updating CSS classes
·
v1.1.0
1 parent 980b165 commit 5844b87

14 files changed

+212
-228
lines changed
 

‎UIAssets/src/app/_model/fabric.ts

+17-1
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,29 @@ export class Fabric {
1515
apic_password: string;
1616
controllers: string[];
1717
fabric: string;
18+
validate: boolean;
19+
is_new: boolean;
20+
password_confirm: string;
1821

19-
constructor(apic_cert?: string, apic_hostname?: string, apic_username?: string, apic_password?: string, controllers?: string[], fabric?: string) {
22+
constructor(
23+
apic_cert: string = '',
24+
apic_hostname: string = '',
25+
apic_username: string = '',
26+
apic_password: string = '',
27+
controllers: string[] = [],
28+
fabric: string = '',
29+
validate: boolean = true,
30+
is_new: boolean = true,
31+
password_confirm: string = ''
32+
) {
2033
this.apic_cert = apic_cert;
2134
this.apic_hostname = apic_hostname;
2235
this.apic_username = apic_username;
2336
this.apic_password = apic_password;
2437
this.controllers = controllers;
2538
this.fabric = fabric;
39+
this.validate = validate;
40+
this.is_new = is_new;
41+
this.password_confirm = password_confirm;
2642
}
2743
}

‎UIAssets/src/app/_model/user.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,25 @@ export class UserList {
1010

1111
export class User {
1212
username: string;
13-
role: any;
13+
role: number;
1414
password: string;
1515
last_login: number;
16+
is_new: boolean;
17+
password_confirm: string;
1618

17-
public constructor() {
19+
constructor(
20+
username: string = '',
21+
role: number = 2,
22+
password: string = '',
23+
last_login: number = 0,
24+
is_new: boolean = false,
25+
password_confirm: string = ''
26+
) {
27+
this.username = username;
28+
this.role = role;
29+
this.password = password;
30+
this.last_login = last_login;
31+
this.is_new = is_new;
32+
this.password_confirm = password_confirm;
1833
}
1934
}

‎UIAssets/src/app/_service/backend.service.ts

+49-12
Original file line numberDiff line numberDiff line change
@@ -52,19 +52,30 @@ export class BackendService {
5252
}
5353

5454
createUser(user: User): Observable<any> {
55-
return this.http.post(this.baseUrl + 'users', user);
55+
let toSave = new User(
56+
user.username,
57+
user.role,
58+
user.password
59+
);
60+
delete toSave.last_login;
61+
delete toSave.is_new;
62+
delete toSave.password_confirm;
63+
return this.http.post(this.baseUrl + 'users', toSave);
5664
}
5765

5866
updateUser(user: User): Observable<any> {
59-
if (user.role === 'Admin') {
60-
user.role = 0;
61-
} else if (user.role === 'User') {
62-
user.role = 1;
63-
} else if (user.role === 'Blacklist') {
64-
user.role = 2;
67+
let toSave = new User(
68+
user.username,
69+
user.role,
70+
user.password
71+
);
72+
delete toSave.is_new;
73+
delete toSave.password_confirm;
74+
delete toSave.last_login;
75+
if (toSave.password == '') {
76+
delete toSave.password;
6577
}
66-
delete user.last_login;
67-
return this.http.patch(this.baseUrl + 'users/' + user.username, user);
78+
return this.http.patch(this.baseUrl + 'users/' + toSave.username, toSave);
6879
}
6980

7081
deleteUser(user: User): Observable<any> {
@@ -110,7 +121,19 @@ export class BackendService {
110121
}
111122

112123
createFabric(fabric: Fabric): Observable<any> {
113-
return this.http.post(this.baseUrl + 'aci/fabrics', fabric);
124+
let toSave = new Fabric(
125+
fabric.apic_cert,
126+
fabric.apic_hostname,
127+
fabric.apic_username,
128+
fabric.apic_password,
129+
fabric.controllers,
130+
fabric.fabric
131+
);
132+
delete toSave.controllers;
133+
delete toSave.validate;
134+
delete toSave.is_new;
135+
delete toSave.password_confirm;
136+
return this.http.post(this.baseUrl + 'aci/fabrics', toSave);
114137
}
115138

116139
getFabrics(): Observable<FabricList> {
@@ -121,8 +144,22 @@ export class BackendService {
121144
}
122145

123146
updateFabric(fabric: Fabric): Observable<any> {
124-
delete fabric.controllers;
125-
return this.http.patch(this.baseUrl + 'aci/fabrics/' + fabric.fabric, fabric);
147+
let toSave = new Fabric(
148+
fabric.apic_cert,
149+
fabric.apic_hostname,
150+
fabric.apic_username,
151+
fabric.apic_password,
152+
fabric.controllers,
153+
fabric.fabric
154+
);
155+
delete toSave.controllers;
156+
delete toSave.validate;
157+
delete toSave.is_new;
158+
delete toSave.password_confirm;
159+
if (toSave.apic_password == '') {
160+
delete toSave.apic_password;
161+
}
162+
return this.http.patch(this.baseUrl + 'aci/fabrics/' + toSave.fabric, toSave);
126163
}
127164

128165
deleteFabric(fabric: Fabric): Observable<any> {

‎UIAssets/src/app/app.component.ts

+5
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {environment} from '../environments/environment';
77
import {BackendService} from './_service/backend.service';
88
import {Title} from '@angular/platform-browser';
99
import {CookieService} from 'ngx-cookie-service';
10+
import {UserList} from "./_model/user";
1011

1112
@Component({
1213
selector: 'app-root',
@@ -53,6 +54,10 @@ export class AppComponent implements OnInit, OnDestroy {
5354
} else {
5455
this.app_loaded = true;
5556
}
57+
if (environment.login_required) {
58+
this.backendService.getUsers().subscribe((results: UserList) => {
59+
});
60+
}
5661
this.login_required = (localStorage.getItem('isLoggedIn') != 'true' && environment.login_required);
5762
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
5863
this.login_required = (localStorage.getItem('isLoggedIn') != 'true' && environment.login_required);

‎UIAssets/src/app/comparison-detail/comparison-detail.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -241,7 +241,7 @@ <h3>Parameters</h3>
241241
[sortable]="true"
242242
[flexGrow]="0.2">
243243
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
244-
<span *ngIf="row['node_id'] === 0 ; spanElse">Global</span>
244+
<span *ngIf="row['node_id'] === 0">Global</span>
245245
<span *ngIf="row['node_id'] !== 0">{{ row['node_id'] | number }}</span>
246246
</ng-template>
247247
</ngx-datatable-column>

‎UIAssets/src/app/comparison-result-detail/comparison-result-detail.component.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -88,11 +88,11 @@ <h6>
8888
<div *ngIf="type=='modified'" class="row">
8989
<div class="col-md-4">
9090
<div class="row">
91-
<div class="col-md-6">
91+
<div class="col-md-4">
9292
Line diff mode
9393
</div>
94-
<div class="col-md-6">
95-
<label class="switch-icon">
94+
<div class="col-md-8">
95+
<label class="switch">
9696
<input
9797
#diffModeCheckBox
9898
id="diffModeCheckBox"

‎UIAssets/src/app/comparison/comparison.component.html

+9-1
Original file line numberDiff line numberDiff line change
@@ -171,27 +171,35 @@ <h6>
171171
</div>
172172
</div>
173173
<div class="col-md-12">
174-
<div class="form-group">
174+
<div class="form-group form-group--inline">
175175
<label class="checkbox">
176176
<input type="checkbox" [(ngModel)]="comparison.dynamic" name="dynamic">
177177
<span class="checkbox__input"></span>
178178
<span class="checkbox__label">Dynamic</span>
179179
</label>
180+
</div>
181+
<div class="form-group form-group--inline">
180182
<label class="checkbox">
181183
<input type="checkbox" [(ngModel)]="comparison.remap" name="remap">
182184
<span class="checkbox__input"></span>
183185
<span class="checkbox__label">Remap</span>
184186
</label>
187+
</div>
188+
<div class="form-group form-group--inline">
185189
<label class="checkbox">
186190
<input type="checkbox" [(ngModel)]="comparison.serialize" name="serialize">
187191
<span class="checkbox__input"></span>
188192
<span class="checkbox__label">Serialize</span>
189193
</label>
194+
</div>
195+
<div class="form-group form-group--inline">
190196
<label class="checkbox">
191197
<input type="checkbox" [(ngModel)]="comparison.statistic" name="statistic">
192198
<span class="checkbox__input"></span>
193199
<span class="checkbox__label">Statistic</span>
194200
</label>
201+
</div>
202+
<div class="form-group form-group--inline">
195203
<label class="checkbox">
196204
<input type="checkbox" [(ngModel)]="comparison.timestamp" name="timestamp">
197205
<span class="checkbox__input"></span>

‎UIAssets/src/app/fabric/fabric.component.html

+20-59
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ <h4>
7777
</ngx-datatable-column>
7878
<ngx-datatable-column name="Actions" [flexGrow]="0.1">
7979
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
80-
<a class="btn btn--small btn--icon btn--primary" title="Update" (click)='openModal(editTemplate,row)'>
81-
<span data-balloon="Update" data-balloon-pos="left">
80+
<a class="btn btn--small btn--icon btn--primary" title="Edit" (click)='openModal(addtemplate,row)'>
81+
<span data-balloon="Edit" data-balloon-pos="left">
8282
<span class="icon-pencil"></span>
8383
</span>
8484
</a>
@@ -112,14 +112,14 @@ <h4>
112112
<ng-template #addtemplate>
113113
<form #fabricForm="ngForm" (ngSubmit)="onSubmit()">
114114
<div class="modal-body">
115-
<h6>
116-
Add a new fabric
117-
</h6>
115+
<h6 *ngIf="fabric.is_new"> Add a new fabric </h6>
116+
<h6 *ngIf="!fabric.is_new"> Edit fabric </h6>
118117
<div class="row">
119118
<div class="col-md-12">
120119
<div class="form-group">
121120
<div class="form-group__text">
122-
<input id="fabric" type="text" required [(ngModel)]="fabric.fabric" name="name">
121+
<input id="fabric" type="text" [disabled]="!fabric.is_new" [required]="fabric.is_new"
122+
[(ngModel)]="fabric.fabric" name="name">
123123
<label for="fabric">Name</label>
124124
</div>
125125
</div>
@@ -137,65 +137,24 @@ <h6>
137137
</div>
138138
<div class="form-group">
139139
<div class="form-group__text">
140-
<input id="apic_password" type="password" required [(ngModel)]="fabric.apic_password"
140+
<input id="apic_password" type="password" [required]="fabric.is_new" [(ngModel)]="fabric.apic_password"
141141
name="apic_password">
142142
<label for="apic_password">Password</label>
143143
</div>
144144
</div>
145-
</div>
146-
<div class="col-md-12">
147-
&nbsp;
148-
</div>
149-
</div>
150-
</div>
151-
<br>
152-
<div class="modal-footer">
153-
<button type="submit" class="btn btn--small btn--primary" [disabled]="!fabricForm.form.valid">Add</button>
154-
<button type="reset" class="btn btn--small" (click)="hideModal()">Cancel</button>
155-
</div>
156-
</form>
157-
</ng-template>
158-
<ng-template #editTemplate>
159-
<form #editfabricForm="ngForm" (ngSubmit)="updateValue()">
160-
<div class="modal-body">
161-
<h6>
162-
Edit fabric
163-
</h6>
164-
<div class="row">
165-
<div class="col-md-12">
166-
<div class="form-group">
145+
<div class="form-group" [ngClass]="{'form-group--error':fabric.apic_password !== fabric.password_confirm}">
167146
<div class="form-group__text">
168-
<input id="editfabric" type="text" required [ngModel]="fabric.fabric" name="name" readonly>
169-
<label for="editfabric">Name</label>
147+
<input id="password_confirm" type="password" [required]="fabric.is_new" [(ngModel)]="fabric.password_confirm"
148+
name="password_confirm">
149+
<label for="password_confirm">Confirm password</label>
170150
</div>
171151
</div>
172-
<div class="form-group">
173-
<div class="form-group__text">
174-
<input id="edit_apic_hostname" type="text" required [(ngModel)]="fabric.apic_hostname"
175-
name="apic_hostname">
176-
<label for="edit_apic_hostname">Hostname</label>
177-
</div>
178-
</div>
179-
<div class="form-group">
180-
<div class="form-group__text">
181-
<input id="edit_apic_username" type="text" required [(ngModel)]="fabric.apic_username"
182-
name="apic_username">
183-
<label for="edit_apic_username">Username</label>
184-
</div>
185-
</div>
186-
<div class="form-group">
187-
<div class="form-group__text">
188-
<input id="edit_apic_password" type="password" required [(ngModel)]="fabric.apic_password"
189-
name="apic_password">
190-
<label for="edit_apic_password">Password</label>
191-
</div>
192-
</div>
193-
<div class="form-group">
194-
<div class="form-group__text">
195-
<input id="confirm_apic_password" type="password" required [(ngModel)]="confirmPassword"
196-
name="confirm_apic_password">
197-
<label for="confirm_apic_password">Confirm Password</label>
198-
</div>
152+
<div class="form-group form-group--inline">
153+
<label class="checkbox">
154+
<input type="checkbox" [(ngModel)]="fabric.validate" name="validate">
155+
<span class="checkbox__input"></span>
156+
<span class="checkbox__label">Validate credentials</span>
157+
</label>
199158
</div>
200159
</div>
201160
<div class="col-md-12">
@@ -205,7 +164,9 @@ <h6>
205164
</div>
206165
<br>
207166
<div class="modal-footer">
208-
<button type="submit" class="btn btn--small btn--primary" [disabled]="!editfabricForm.form.valid">Update</button>
167+
<button type="submit" class="btn btn--small btn--primary" [disabled]="!fabricForm.form.valid">
168+
{{ fabric.is_new?'Add':'Save'}}
169+
</button>
209170
<button type="reset" class="btn btn--small" (click)="hideModal()">Cancel</button>
210171
</div>
211172
</form>

‎UIAssets/src/app/fabric/fabric.component.ts

+59-61
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, OnInit, TemplateRef, ViewChild} from "@angular/core";
1+
import {Component, OnInit, TemplateRef} from "@angular/core";
22
import {NotificationsService} from "angular2-notifications";
33
import {BsModalRef, BsModalService} from "ngx-bootstrap";
44
import {Fabric, FabricList} from "../_model/fabric";
@@ -16,12 +16,8 @@ export class FabricComponent implements OnInit {
1616
loadingMessage: string;
1717
selectedFabric: Fabric;
1818
fabric: Fabric;
19-
editing = {};
2019
fabrics: Fabric[];
21-
confirmPassword: string;
22-
fromAddTemplate = false;
2320
fabricSorts: any;
24-
@ViewChild('editTemplate') editModal: TemplateRef<any>;
2521

2622
constructor(private backendService: BackendService, private notificationService: NotificationsService,
2723
private modalService: BsModalService) {
@@ -30,21 +26,18 @@ export class FabricComponent implements OnInit {
3026
}
3127

3228
ngOnInit(): void {
33-
this.getFabrics(false);
29+
this.getFabrics();
3430
}
3531

3632
onSort(event) {
3733
this.backendService.prefs.fabric_sort = event.sorts;
3834
}
3935

40-
getFabrics(toBeVerified) {
36+
getFabrics() {
4137
this.loading = true;
4238
this.backendService.getFabrics().subscribe((results: FabricList) => {
4339
this.fabrics = results.objects;
4440
this.rows = results.objects;
45-
if (toBeVerified) {
46-
this.verifyFabric(this.fabric);
47-
}
4841
this.loading = false;
4942
}, (err) => {
5043
if (err['error'] !== undefined && err['error']['error'] !== undefined) {
@@ -57,51 +50,44 @@ export class FabricComponent implements OnInit {
5750
}
5851

5952
verifyFabric(fabric: Fabric) {
60-
const fromAdd = this.fromAddTemplate;
61-
this.fromAddTemplate = false;
53+
const oldLoadingMessage = this.loadingMessage;
54+
this.loadingMessage = 'Validating fabric ' + fabric.fabric;
55+
this.loading = true;
6256
this.backendService.verifyFabric(fabric).subscribe((results) => {
6357
if (results['success']) {
6458
this.notificationService.success('Success', 'Credentials validated, fetching controllers');
6559
this.backendService.updateFabricControllers(fabric).subscribe((results) => {
6660
if (results['success']) {
6761
this.notificationService.success('Success', 'Controllers fetched');
68-
this.getFabrics(false);
69-
this.modalRef.hide();
62+
this.loadingMessage = oldLoadingMessage;
63+
this.getFabrics();
7064
} else {
7165
this.notificationService.error('Error', results['error']);
72-
if (fromAdd) {
73-
this.modalRef.hide();
74-
this.openModal(this.editModal, fabric);
75-
}
66+
this.loading = false;
67+
this.loadingMessage = oldLoadingMessage;
7668
}
7769
}, (err) => {
7870
this.notificationService.error('Error', 'Could not get controllers');
79-
if (fromAdd) {
80-
this.modalRef.hide();
81-
this.openModal(this.editModal, fabric);
82-
}
71+
this.loading = false;
72+
this.loadingMessage = oldLoadingMessage;
8373
});
8474
} else {
8575
this.notificationService.error('Error', results['error']);
86-
if (fromAdd) {
87-
this.modalRef.hide();
88-
this.openModal(this.editModal, fabric);
89-
}
76+
this.loading = false;
77+
this.loadingMessage = oldLoadingMessage;
9078
}
9179
}, (err) => {
9280
this.notificationService.error('Error', 'Could not verify APIC');
93-
if (fromAdd) {
94-
this.modalRef.hide();
95-
this.openModal(this.editModal, fabric);
96-
}
81+
this.loading = false;
82+
this.loadingMessage = oldLoadingMessage;
9783
});
9884
}
9985

10086
deleteFabric() {
10187
this.loading = true;
10288
this.backendService.deleteFabric(this.selectedFabric).subscribe((results) => {
103-
this.getFabrics(false);
104-
this.modalRef.hide();
89+
this.hideModal();
90+
this.getFabrics();
10591
}, (err) => {
10692
if (err['error'] !== undefined && err['error']['error'] !== undefined) {
10793
this.notificationService.error(err['error']['error']);
@@ -113,32 +99,40 @@ export class FabricComponent implements OnInit {
11399
}
114100

115101
public onSubmit() {
116-
this.loading = true;
117-
this.backendService.createFabric(this.fabric).subscribe((results) => {
118-
this.getFabrics(true);
119-
}, (err) => {
120-
if (err['error'] !== undefined && err['error']['error'] !== undefined) {
121-
this.notificationService.error(err['error']['error']);
102+
if (this.fabric.apic_password !== undefined && this.fabric.apic_password != '' && this.fabric.apic_password == this.fabric.password_confirm) {
103+
const validate = this.fabric.validate;
104+
if (this.fabric.is_new) {
105+
this.backendService.createFabric(this.fabric).subscribe((results) => {
106+
if (validate) {
107+
this.verifyFabric(this.fabric);
108+
} else {
109+
this.getFabrics();
110+
}
111+
}, (err) => {
112+
if (err['error'] !== undefined && err['error']['error'] !== undefined) {
113+
this.notificationService.error(err['error']['error']);
114+
} else {
115+
this.notificationService.error('Error', 'Could not add fabric');
116+
}
117+
this.loading = false;
118+
});
122119
} else {
123-
this.notificationService.error('Error', 'Could not add fabric');
120+
this.backendService.updateFabric(this.fabric).subscribe((results) => {
121+
if (validate) {
122+
this.verifyFabric(this.fabric);
123+
} else {
124+
this.getFabrics();
125+
}
126+
}, (err) => {
127+
if (err['error'] !== undefined && err['error']['error'] !== undefined) {
128+
this.notificationService.error(err['error']['error']);
129+
} else {
130+
this.notificationService.error('Error', 'Could not update fabric');
131+
}
132+
this.loading = false;
133+
});
124134
}
125-
this.loading = false;
126-
});
127-
}
128-
129-
public updateValue() {
130-
if (this.confirmPassword !== this.fabric.apic_password) {
131-
this.notificationService.error('Passwords do not match');
132-
return;
133135
}
134-
this.confirmPassword = '';
135-
this.backendService.updateFabric(this.fabric).subscribe((results) => {
136-
this.notificationService.success('Success', 'Changes saved');
137-
this.getFabrics(true);
138-
}, (err) => {
139-
this.notificationService.error('Error', 'Could not update fabric');
140-
this.loading = false;
141-
});
142136
}
143137

144138
updateFilter(event) {
@@ -150,7 +144,6 @@ export class FabricComponent implements OnInit {
150144

151145
public openAddModal(template: TemplateRef<any>) {
152146
this.fabric = new Fabric();
153-
this.fromAddTemplate = true;
154147
this.modalRef = this.modalService.show(template, {
155148
animated: true,
156149
keyboard: true,
@@ -162,11 +155,16 @@ export class FabricComponent implements OnInit {
162155

163156
public openModal(template: TemplateRef<any>, fabric: Fabric) {
164157
this.selectedFabric = fabric;
165-
if (this.editModal === template) {
166-
this.fabric = new Fabric(
167-
fabric.apic_cert, fabric.apic_hostname, fabric.apic_username, fabric.apic_password, fabric.controllers, fabric.fabric
168-
);
169-
}
158+
this.fabric = new Fabric(
159+
fabric.apic_cert,
160+
fabric.apic_hostname,
161+
fabric.apic_username,
162+
fabric.apic_password,
163+
fabric.controllers,
164+
fabric.fabric,
165+
false,
166+
false
167+
);
170168
this.modalRef = this.modalService.show(template, {
171169
animated: true,
172170
keyboard: true,

‎UIAssets/src/app/login/login.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export class LoginComponent implements OnInit {
2929
localStorage.setItem('userName', this.username);
3030
this.backendService.getUserDetails(this.username).subscribe((response) => {
3131
const userDetails = response['objects'][0];
32-
console.log(this.cookieService.get('session'));
3332
localStorage.setItem('userRole', userDetails['role']);
3433
}, (error) => {
3534
this.notificationService.error('Could not get user details');

‎UIAssets/src/app/snapshot/snapshot.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,6 @@ export class SnapshotComponent implements OnInit {
218218
if (row.status === 'complete') {
219219
this.backendService.downloadSnapshot(row._id, row.filename).subscribe(
220220
(data) => {
221-
console.log(data);
222221
const blob = new Blob([data.data], {type: 'application/gzip'});
223222
const blobUrl = window.URL.createObjectURL(blob);
224223
const a = document.createElement('a');

‎UIAssets/src/app/user/user.component.html

+15-56
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h4>
7373
<ngx-datatable-column name="Actions" [flexGrow]="0.1">
7474
<ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
7575
<a class="btn btn--small btn--icon btn--primary" *ngIf="row.username === userName || userRole === 0"
76-
(click)="editMode(editTemplate,row)">
76+
(click)="openModal(addtemplate,row)">
7777
<span class="icon-pencil"></span>
7878
</a>
7979
<a class="btn btn--small btn--icon btn--negative" *ngIf="row.username === userName || userRole === 0"
@@ -104,79 +104,36 @@ <h4>
104104
<ng-template #addtemplate>
105105
<form #userForm="ngForm" (ngSubmit)="onSubmit()">
106106
<div class="modal-body">
107-
<h6>
108-
Add a new user
109-
</h6>
107+
<h6 *ngIf="user.is_new"> Add a new user </h6>
108+
<h6 *ngIf="!user.is_new"> Edit user </h6>
110109
<div class="row">
111110
<div class="col-md-12">
112111
<div class="form-group">
113112
<div class="form-group__text">
114-
<input id="username" type="text" required [(ngModel)]="user.username" name="username">
113+
<input id="username" type="text" [disabled]="!user.is_new" [required]="user.is_new"
114+
[(ngModel)]="user.username" name="username">
115115
<label for="username">Username</label>
116116
</div>
117117
</div>
118118
<div class="form-group">
119119
<div class="form-group__text">
120-
<input id="password" type="password" required [(ngModel)]="user.password" name="password">
120+
<input id="password" type="password" [required]="user.is_new" [(ngModel)]="user.password" name="password">
121121
<label for="password">Password</label>
122122
</div>
123123
</div>
124-
<div class="form-group">
125-
<div class="form-group__text select">
126-
<select class="form-control" id="role" required [(ngModel)]="user.role" name="role">
127-
<option *ngFor="let role of roles" [value]="role.id">{{ role.name }}</option>
128-
</select>
129-
<label for="role">Role</label>
130-
</div>
131-
</div>
132-
</div>
133-
<div class="col-md-12">
134-
&nbsp;
135-
</div>
136-
</div>
137-
</div>
138-
<br>
139-
<div class="modal-footer">
140-
<button type="submit" class="btn btn--small btn--primary" [disabled]="!userForm.form.valid">Add</button>
141-
<button type="reset" class="btn btn--small" (click)="hideModal()">Cancel</button>
142-
</div>
143-
</form>
144-
</ng-template>
145-
<ng-template #editTemplate>
146-
<form #editForm="ngForm" (ngSubmit)="updateValue()">
147-
<div class="modal-body">
148-
<h6>
149-
Update user
150-
</h6>
151-
<div class="row">
152-
<div class="col-md-12">
153-
<div class="form-group">
124+
<div class="form-group" [ngClass]="{'form-group--error':user.password !== user.password_confirm}">
154125
<div class="form-group__text">
155-
<input id="update_username" name="update_username" [ngModel]="user.username" readonly>
156-
<label for="update_username">Username</label>
126+
<input id="password_confirm" type="password" [required]="user.is_new" [(ngModel)]="user.password_confirm"
127+
name="password_confirm">
128+
<label for="password_confirm">Confirm password</label>
157129
</div>
158130
</div>
159131
<div class="form-group">
160132
<div class="form-group__text select">
161-
<select class="form-control" id="update_role" required [(ngModel)]="user.role" name="update_role"
162-
[disabled]="userRole === 1">
133+
<select class="form-control" id="role" required [(ngModel)]="user.role" name="role">
163134
<option *ngFor="let role of roles" [value]="role.id">{{ role.name }}</option>
164135
</select>
165-
<label for="update_role">Role</label>
166-
</div>
167-
</div>
168-
<div class="form-group">
169-
<div class="form-group__text">
170-
<input id="update_password" type="password" [required]="userRole === 1" [(ngModel)]="user.password"
171-
name="update_password">
172-
<label for="update_password">Password</label>
173-
</div>
174-
</div>
175-
<div class="form-group">
176-
<div class="form-group__text">
177-
<input id="confirmPassword" [required]="userRole === 1" type="password" [(ngModel)]="confirmPassword"
178-
name="confirmPassword">
179-
<label for="confirmPassword">Confirm Password</label>
136+
<label for="role">Role</label>
180137
</div>
181138
</div>
182139
</div>
@@ -187,7 +144,9 @@ <h6>
187144
</div>
188145
<br>
189146
<div class="modal-footer">
190-
<button type="submit" class="btn btn--small btn--primary" [disabled]="!editForm.form.valid">Update</button>
147+
<button type="submit" class="btn btn--small btn--primary" [disabled]="!userForm.form.valid">
148+
{{ user.is_new?'Add':'Save'}}
149+
</button>
191150
<button type="reset" class="btn btn--small" (click)="hideModal()">Cancel</button>
192151
</div>
193152
</form>

‎UIAssets/src/app/user/user.component.ts

+16-29
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,10 @@ export class UserComponent implements OnInit {
1717
selectedUser: User;
1818
users: User[];
1919
user: User;
20-
roles: any[];
21-
editing = {};
22-
confirmPassword: string;
2320
usernameSort: any;
2421
userRole: number;
2522
userName: string;
23+
roles: ({ id: number; name: string })[];
2624

2725
constructor(private backendService: BackendService, private notificationService: NotificationsService,
2826
private modalService: BsModalService) {
@@ -79,27 +77,20 @@ export class UserComponent implements OnInit {
7977
public onSubmit() {
8078
this.modalRef.hide();
8179
this.loading = true;
82-
this.backendService.createUser(this.user).subscribe((results) => {
83-
this.getUsers();
84-
}, (err) => {
85-
this.notificationService.error('Error', 'Could not add user');
86-
this.loading = false;
87-
});
88-
}
89-
90-
public updateValue() {
91-
if (this.confirmPassword === this.user.password) {
92-
this.confirmPassword = '';
80+
if (this.user.is_new) {
81+
this.backendService.createUser(this.user).subscribe((results) => {
82+
this.getUsers();
83+
}, (err) => {
84+
this.notificationService.error('Error', 'Could not add user');
85+
this.loading = false;
86+
});
87+
} else {
9388
this.backendService.updateUser(this.user).subscribe((results) => {
94-
this.notificationService.success('Success', 'Changes saved');
95-
this.hideModal();
9689
this.getUsers();
9790
}, (err) => {
9891
this.notificationService.error('Error', 'Could not update user');
9992
this.loading = false;
10093
});
101-
} else {
102-
this.notificationService.error('Passwords do not match');
10394
}
10495
}
10596

@@ -116,6 +107,13 @@ export class UserComponent implements OnInit {
116107

117108
public openModal(template: TemplateRef<any>, user: User) {
118109
this.selectedUser = user;
110+
this.user = new User(
111+
user.username,
112+
user.role,
113+
user.password,
114+
user.last_login,
115+
false
116+
);
119117
this.modalRef = this.modalService.show(template, {
120118
animated: true,
121119
keyboard: true,
@@ -128,15 +126,4 @@ export class UserComponent implements OnInit {
128126
public hideModal() {
129127
this.modalRef.hide();
130128
}
131-
132-
public editMode(template: TemplateRef<any>, user: User) {
133-
this.user = user;
134-
this.modalRef = this.modalService.show(template, {
135-
animated: true,
136-
keyboard: true,
137-
backdrop: false,
138-
ignoreBackdropClick: false,
139-
class: 'modal-lg',
140-
});
141-
}
142129
}

‎UIAssets/src/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
}
2222
</style>
2323
</head>
24-
<body class="cui cui--animated cui--headermargins">
24+
<body class="cui cui--headermargins">
2525
<app-root>
2626
<div class="loading">
2727
<br>

0 commit comments

Comments
 (0)
Please sign in to comment.