<h2>Users</h2> <rb-icon-button icon="add" mode="primary" (click)="addNewUser()">New user</rb-icon-button> <form *ngIf="newUser" #userForm="ngForm"> <rb-form-input name="name" label="user name" appValidate="username" required [(ngModel)]="newUser.name" #nameInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{nameInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-input> <rb-form-input name="email" label="email" email required [(ngModel)]="newUser.email" ngModel> <ng-template rbFormValidationMessage="email">Invalid email</ng-template> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-input> <rb-form-select name="level" label="level" required [(ngModel)]="newUser.level"> <option *ngFor="let level of login.levels" [value]="level">{{level}}</option> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-select> <rb-form-input name="location" label="location" appValidate="string" required [appValidateArgs]="['alphanum']" [(ngModel)]="newUser.location" #locationInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{locationInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-input> <rb-form-input name="device" label="device" appValidate="string" [(ngModel)]="newUser.device_name" #deviceInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template> </rb-form-input> <rb-form-input name="passA" type="password" label="new password" appValidate="password" required [(ngModel)]="newUserPass" #passAInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{passAInput.errors.failure}}</ng-template> </rb-form-input> <rb-form-input name="passB" type="password" label="confirm password" appValidate="equal" [appValidateArgs]="[newUserPass]" required #passBInput="ngModel" ngModel> <ng-template rbFormValidationMessage="failure">{{passBInput.errors.failure}}</ng-template> </rb-form-input> <rb-icon-button icon="save" mode="primary" type="submit" [disabled]="!userForm.form.valid" (click)="saveNewUser()"> Save user </rb-icon-button> </form> <rb-table> <tr> <th>Name</th> <th>Email</th> <th>Level</th> <th>Location</th> <th>Device</th> <th></th> </tr> <tr *ngFor="let user of users"> <ng-container *ngIf="!user.edit; else editUser"> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.level}}</td> <td>{{user.location}}</td> <td>{{user.device_name}}</td> <td><span class="rb-ic rb-ic-edit clickable" (click)="user.edit = true"></span></td> </ng-container> <ng-template #editUser> <td> <rb-form-input [name]="'name-' + user.name" appValidate="username" required [(ngModel)]="user.name" #nameInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{nameInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-input> </td> <td> <rb-form-input [name]="'email-' + user.name" email required [(ngModel)]="user.email" #emailInput="ngModel"> <ng-template rbFormValidationMessage="email">Invalid email</ng-template> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-input> </td> <td> <rb-form-select [name]="'level-' + user.name" [(ngModel)]="user.level"> <option *ngFor="let level of login.levels" [value]="level">{{level}}</option> </rb-form-select> </td> <td> <rb-form-input [name]="'location-' + user.name" appValidate="string" required [appValidateArgs]="['alphanum']" [(ngModel)]="user.location" #locationInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{locationInput.errors.failure}}</ng-template> <ng-template rbFormValidationMessage="required">Cannot be empty</ng-template> </rb-form-input> </td> <td> <rb-form-input [name]="'device-' + user.name" appValidate="string" [(ngModel)]="user.device_name" #deviceInput="ngModel"> <ng-template rbFormValidationMessage="failure">{{deviceInput.errors.failure}}</ng-template> </rb-form-input> </td> <td><rb-icon-button icon="save" mode="primary" (click)="saveUser(user)" [disabled]="nameInput.invalid || emailInput.invalid || locationInput.invalid || deviceInput.invalid">Save</rb-icon-button></td> </ng-template> </tr> </rb-table>