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 });
+    });
+  }
+
+}