settings and users dialog

src/app/users/users.component.html

@@ -0,0 +1,94 @@
+<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>

src/app/users/users.component.scss

@@ -0,0 +1,3 @@
+::ng-deep td .error-messages {
+  position: absolute;
+}

src/app/users/users.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersComponent } from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UsersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/users/users.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import {ApiService} from '../services/api.service';
+import {UserModel} from '../models/user.model';
+import {LoginService} from '../services/login.service';
+
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss']
+})
+export class UsersComponent implements OnInit {
+
+  users: UserModel[] = [];
+  newUser: UserModel | null = null;
+  newUserPass = '';
+
+  constructor(
+    private api: ApiService,
+    public login: LoginService
+  ) { }
+
+  ngOnInit(): void {
+    this.api.get<UserModel[]>('/users', data => {
+      this.users = data.map(e => new UserModel().deserialize(e));
+    });
+  }
+
+  saveUser(user: UserModel) {
+    this.api.put<UserModel>('/user/' + user.origName, user.sendFormat('admin'), data => {
+      user.deserialize(data);
+      user.edit = false;
+    });
+  }
+
+  saveNewUser() {
+    this.api.post('/user/new', {...this.newUser.sendFormat('admin'), pass: this.newUserPass}, data => {
+      this.newUser = null;
+      this.users.push(new UserModel().deserialize(data));
+    });
+  }
+
+  addNewUser() {
+    this.newUser = this.newUser ? null : new UserModel();
+  }
+
+}