feat: add create user component (#544)

Fixes: #532

src/app/users/create-user/create-user.component.html

@@ -0,0 +1,131 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="userForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Username</mat-label>
+            <input matInput required formControlName="username">
+            <mat-error *ngIf="userForm.controls.username.hasError('required')">
+              Username is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Email</mat-label>
+            <input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email">
+            <mat-error *ngIf="userForm.controls.email.hasError('email')">
+              Email is <strong>invalid</strong>
+            </mat-error>
+            <mat-error *ngIf="userForm.controls.email.hasError('required')">
+              Email is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>First Name</mat-label>
+            <input matInput required formControlName="firstname">
+            <mat-error *ngIf="userForm.controls.firstname.hasError('pattern')">
+              First Name <strong>cannot begin with a special character or number</strong>
+            </mat-error>
+            <mat-error *ngIf="userForm.controls.firstname.hasError('required')">
+              First Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Last Name</mat-label>
+            <input matInput required formControlName="lastname">
+            <mat-error *ngIf="userForm.controls.lastname.hasError('pattern')">
+              Last Name <strong>cannot begin with a special character or number</strong>
+            </mat-error>
+            <mat-error *ngIf="userForm.controls.lastname.hasError('required')">
+              Last Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <div fxFlex="48%" class="password-never-expires-wrapper">
+            <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires" >
+              Override password expiry policy
+            </mat-checkbox>
+          </div>
+
+          <div fxFlex="48%" class="send-password-to-email-wrapper">
+            <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail">
+              Auto generate password
+            </mat-checkbox>
+          </div>
+
+          <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
+            <mat-label>Password</mat-label>
+            <input matInput required type="password" formControlName="password">
+            <mat-error *ngIf="userForm.controls.password.hasError('required')">
+              Password is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
+            <mat-label>Repeat Password</mat-label>
+            <input matInput required type="password" formControlName="repeatPassword">
+            <mat-error *ngIf="userForm.controls.repeatPassword.hasError('required')">
+              Password is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <p fxFlex="98%" class="reset-password-error" *ngIf="userForm.errors?.passwordsDoNotMatch &&
+          (!userForm.controls.password.hasError('required') && !userForm.controls.repeatPassword.hasError('required'))">
+          Passwords <strong>do not match</strong>
+          </p>      
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
+              <mat-option *ngFor="let office of officesData" [value]="office.id">
+                {{ office.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="userForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Staff</mat-label>
+            <mat-select formControlName="staffId">
+              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
+                {{ staff.displayName }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-label>Roles</mat-label>
+            <mat-select required formControlName="roles" multiple>
+              <mat-option *ngFor="let role of rolesData" [value]="role.id">
+                {{ role.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="userForm.controls.roles.hasError('required')">
+              At least one role <strong>must be selected</strong>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!userForm.valid">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/users/create-user/create-user.component.scss

@@ -0,0 +1,13 @@
+.password-never-expires-wrapper {
+  padding: 17.5px 0 17.5px 0;
+}
+
+.send-password-to-email-wrapper {
+  padding: 17.5px 0 17.5px 0;
+}
+
+.reset-password-error {
+  color: #f44336;
+  font-size: 80%;
+  margin: 0;
+}

src/app/users/create-user/create-user.component.spec.ts

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

src/app/users/create-user/create-user.component.ts

@@ -0,0 +1,117 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** Custom Services */
+import { UsersService } from '../users.service';
+
+/** Custom Validators */
+import { confirmPasswordValidator } from '../../login/reset-password/confirm-password.validator';
+
+/**
+ * Create user component.
+ */
+@Component({
+  selector: 'mifosx-create-user',
+  templateUrl: './create-user.component.html',
+  styleUrls: ['./create-user.component.scss']
+})
+export class CreateUserComponent implements OnInit {
+
+  /** User form. */
+  userForm: FormGroup;
+  /** Offices data. */
+  officesData: any;
+  /** Roles data. */
+  rolesData: any;
+  /** Staff data. */
+  staffData: any;
+
+  /**
+   * Retrieves the offices and roles data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {UsersService} UsersService Users Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
+  constructor(private formBuilder: FormBuilder,
+              private usersService: UsersService,
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: {
+        usersTemplate: any
+      }) => {
+        this.officesData = data.usersTemplate.allowedOffices;
+        this.rolesData = data.usersTemplate.availableRoles;
+      });
+  }
+
+  /**
+   * Creates the user form, sets the staff data and conditional controls of the user form.
+   */
+  ngOnInit() {
+    this.createUserForm();
+    this.setStaffData();
+    this.setConditionalControls();
+  }
+
+  /**
+   * Creates the user form.
+   */
+  createUserForm() {
+    this.userForm = this.formBuilder.group({
+      'username': ['', Validators.required],
+      'email': ['', [Validators.required, Validators.email]],
+      'firstname': ['', [Validators.required, Validators.pattern('(^[A-z]).*')]],
+      'lastname': ['', [Validators.required, Validators.pattern('(^[A-z]).*')]],
+      'sendPasswordToEmail': [true],
+      'passwordNeverExpires': [false],
+      'officeId': ['', Validators.required],
+      'staffId': [''],
+      'roles': ['', Validators.required]
+    }, { validator: confirmPasswordValidator });
+  }
+
+  /**
+   * Sets the staff data each time the user selects a new office
+   */
+  setStaffData() {
+    this.userForm.get('officeId').valueChanges.subscribe((officeId: string) => {
+      this.staffData = [];
+      this.usersService.getStaff(officeId).subscribe((staff: any) => {
+        this.staffData = staff;
+      });
+    });
+  }
+
+  /**
+   * Sets the conditional controls of the user form
+   */
+  setConditionalControls() {
+    this.userForm.get('sendPasswordToEmail').valueChanges.subscribe((sendPasswordToEmail: boolean) => {
+      if (sendPasswordToEmail) {
+        this.userForm.removeControl('password');
+        this.userForm.removeControl('repeatPassword');
+        this.userForm.get('email').setValidators([Validators.required, Validators.email]);
+      } else {
+        this.userForm.addControl('password', new FormControl('', Validators.required));
+        this.userForm.addControl('repeatPassword', new FormControl('', Validators.required));
+        this.userForm.get('email').setValidators([Validators.email]);
+      }
+      this.userForm.get('email').updateValueAndValidity();
+    });
+  }
+
+  /**
+   * Submits the user form and creates user,
+   * if successful redirects to users.
+   */
+  submit() {
+    const user = this.userForm.value;
+    this.usersService.createUser(user).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/users/users-routing.module.ts

@@ -10,9 +10,11 @@ import { extract } from '../core/i18n/i18n.service';
 
 /** Custom Components */
 import { UsersComponent } from './users.component';
+import { CreateUserComponent } from './create-user/create-user.component';
 
 /** Custom Resolvers */
 import { UsersResolver } from './users.resolver';
+import { UsersTemplateResolver } from './users-template.resolver';
 
 /** Users Routes */
 const routes: Routes = [
@@ -27,6 +29,14 @@ const routes: Routes = [
           resolve: {
             users: UsersResolver
           }
+        },
+        {
+          path: 'create',
+          component: CreateUserComponent,
+          data: { title: extract('Create User'), breadcrumb: 'Create User' },
+          resolve: {
+            usersTemplate: UsersTemplateResolver
+          }
         }
       ]
     }
@@ -42,7 +52,8 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
   providers: [
-    UsersResolver
+    UsersResolver,
+    UsersTemplateResolver
   ]
 })
 export class UsersRoutingModule { }

src/app/users/users-template.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { UsersService } from './users.service';
+
+/**
+ * Users template data resolver.
+ */
+@Injectable()
+export class UsersTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {UsersService} usersService Users service.
+   */
+  constructor(private usersService: UsersService) {}
+
+  /**
+   * Returns the users template data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.usersService.getUsersTemplate();
+  }
+
+}

src/app/users/users.component.html

@@ -1,5 +1,5 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
     Create User
   </button>

src/app/users/users.module.ts

@@ -7,6 +7,7 @@ import { UsersRoutingModule } from './users-routing.module';
 
 /** Custom Components */
 import { UsersComponent } from './users.component';
+import { CreateUserComponent } from './create-user/create-user.component';
 
 /**
  * Users Module
@@ -19,7 +20,8 @@ import { UsersComponent } from './users.component';
     UsersRoutingModule
   ],
   declarations: [
-    UsersComponent
+    UsersComponent,
+    CreateUserComponent
   ]
 })
 export class UsersModule { }

src/app/users/users.service.ts

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
@@ -25,4 +25,29 @@ export class UsersService {
     return this.http.get('/users');
   }
 
+  /**
+   * @returns {Observable<any>} Users template data
+   */
+  getUsersTemplate(): Observable<any> {
+    return this.http.get('/users/template');
+  }
+
+  /**
+   * @param {any} user User to be created.
+   * @returns {Observable<any>}
+   */
+  createUser(user: any): Observable<any> {
+    return this.http.post('/users', user);
+  }
+
+  /**
+   * @param {any} officeId ID of office to retrieve staff from.
+   * @returns {Observable<any>} Staff data.
+   */
+  getStaff(officeId: any): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('officeId', officeId.toString());
+    return this.http.get('/staff', { params: httpParams });
+  }
+
 }