feat: add create self service user (#1251)

Fixes: #1234

src/app/clients/clients-view/client-actions/client-actions.component.html

@@ -14,3 +14,4 @@
 <mifosx-add-client-charge *ngIf="actions['Add Charge']"></mifosx-add-client-charge>
 <mifosx-take-survey *ngIf="actions['Take Survey']"></mifosx-take-survey>
 <mifosx-client-screen-reports *ngIf="actions['Client Screen Reports']"></mifosx-client-screen-reports>
+<mifosx-create-self-service-user *ngIf="actions['Create Self Service User']"></mifosx-create-self-service-user>

src/app/clients/clients-view/client-actions/client-actions.component.ts

@@ -28,7 +28,8 @@ export class ClientActionsComponent {
     'Undo Rejection': boolean
     'Add Charge': boolean
     'Take Survey': boolean
-    'Client Screen Reports': boolean
+    'Client Screen Reports': boolean,
+    'Create Self Service User': boolean
   } = {
     'Assign Staff': false,
     'Close': false,
@@ -44,7 +45,8 @@ export class ClientActionsComponent {
     'Undo Rejection': false,
     'Add Charge': false,
     'Take Survey': false,
-    'Client Screen Reports': false
+    'Client Screen Reports': false,
+    'Create Self Service User': false
   };
 
   /**

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html

@@ -0,0 +1,98 @@
+<div class="container">
+
+    <mat-card>
+
+        <form [formGroup]="createSelfServiceForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label> User Name </mat-label>
+                        <input matInput required formControlName="username">
+                        <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
+                            User Name 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="createSelfServiceForm.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="createSelfServiceForm.controls.lastname.hasError('required')">
+                            Last Name is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label> Email </mat-label>
+                        <input matInput required formControlName="email">
+                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('required')">
+                            Email is <strong>required</strong>
+                        </mat-error>
+                        <mat-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
+                            Email should be a  <strong>valid</strong> email.
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
+                        Auto Generate Password
+                    </mat-checkbox>
+
+                    <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
+
+                        <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
+                            Override Password Expire Policy ?
+                        </mat-checkbox>
+    
+                        <i class="fa fa-question-circle fa fa-align-left" title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"></i>
+
+                    </div>
+
+                    <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
+                        <mat-label> Password </mat-label>
+                        <input matInput required formControlName="password" type="password">
+                        <mat-error *ngIf="createSelfServiceForm.controls.password.hasError('required')">
+                            Password is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
+                        <mat-label> Repeat Password </mat-label>
+                        <input matInput required formControlName="repeatPassword" type="password">
+                        <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
+                            Repeat password is <strong>required</strong>
+                        </mat-error>
+                        <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
+                            Passwords should be <strong>matched</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label> Status </mat-label>
+                        <input matInput formControlName="status">
+                    </mat-form-field>
+
+                </div>
+        
+                <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+                  <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+                  <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">Activate Self Service User</button>
+                  <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
+                </mat-card-actions>
+        
+            </mat-card-content>
+
+        </form>
+
+    </mat-card>
+
+</div>

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.scss

@@ -0,0 +1,19 @@
+.fa-question-circle {
+    color: #1abc9c;
+}
+
+.fa {
+    display: inline-block;
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.spec.ts

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

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.ts

@@ -0,0 +1,106 @@
+/** Angular Imports. */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl, Validators, AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+/** Client Services. */
+import { ClientsService } from 'app/clients/clients.service';
+
+@Component({
+  selector: 'mifosx-create-self-service-user',
+  templateUrl: './create-self-service-user.component.html',
+  styleUrls: ['./create-self-service-user.component.scss']
+})
+export class CreateSelfServiceUserComponent implements OnInit {
+
+  createSelfServiceForm: FormGroup;
+  clientData: any;
+  hidePasswordField = true;
+
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private clientService: ClientsService,
+              private router: Router) {
+    this.route.data.subscribe((data: { clientActionData: any}) => {
+      this.clientData = data.clientActionData;
+    });
+  }
+
+  ngOnInit(): void {
+    this.createSelfServiceUser();
+    this.sendPasswordToEmailChange();
+  }
+
+  /**
+   * Send Password To Email Change.
+   */
+  sendPasswordToEmailChange() {
+    this.createSelfServiceForm.controls.sendPasswordToEmail.valueChanges.subscribe((value: any) => {
+      if (value === true) {
+        this.hidePasswordField = true;
+        this.createSelfServiceForm.removeControl('password');
+        this.createSelfServiceForm.removeControl('repeatPassword');
+      } else {
+        this.hidePasswordField = false;
+        this.createSelfServiceForm.addControl('password', new FormControl('', [Validators.required]));
+        this.createSelfServiceForm.addControl('repeatPassword', new FormControl('', [Validators.required, this.confirmPassword('password')]));
+      }
+    });
+  }
+
+  /**
+   * Create Self User Form.
+   */
+  createSelfServiceUser() {
+    this.createSelfServiceForm = this.formBuilder.group({
+      'username': new FormControl('', [Validators.required]),
+      'firstname': new FormControl(this.clientData.firstname, [Validators.required]),
+      'lastname': new FormControl(this.clientData.lastname, [Validators.required]),
+      'email': new FormControl('', [Validators.required, Validators.email]),
+      'sendPasswordToEmail': new FormControl(true),
+      'passwordNeverExpires': new FormControl(false),
+      'status': new FormControl({value: this.clientData.subStatus.active ? 'Active' : 'Inactive', disabled: true})
+    });
+  }
+
+  /**
+   * Submit form.
+   */
+  submit() {
+    if (!this.createSelfServiceForm.get('passwordNeverExpires').value) {
+      this.createSelfServiceForm.removeControl('passwordNeverExpires');
+    }
+    const clientId = this.clientData.id.toString();
+    const selfServiceForm = this.createSelfServiceForm.value;
+    selfServiceForm.roles = [2],
+    selfServiceForm.isSelfServiceUser = true;
+    selfServiceForm.staffId = this.clientData.staffId;
+    selfServiceForm.clients = [clientId];
+    selfServiceForm.officeId = this.clientData.officeId;
+    this.clientService.createSelfServiceUser(selfServiceForm).subscribe(() => {
+      this.router.navigate(['../../general'], { relativeTo: this.route });
+    });
+  }
+
+  /**
+   * Confirm Change Password of Users
+   * @param controlNameToCompare Form Control Name to be compared.
+   */
+  confirmPassword(controlNameToCompare: string): ValidatorFn {
+    return (c: AbstractControl): ValidationErrors|null => {
+        if (c.value == null || c.value.length === 0) {
+            return null;
+        }
+        const controlToCompare = c.root.get(controlNameToCompare);
+        if (controlToCompare) {
+            const subscription: Subscription = controlToCompare.valueChanges.subscribe(() => {
+                c.updateValueAndValidity();
+                subscription.unsubscribe();
+            });
+        }
+        return controlToCompare && controlToCompare.value !== c.value ? {'notequal': true} : null;
+    };
+  }
+
+}

src/app/clients/clients-view/clients-view.component.html

@@ -106,7 +106,7 @@
         <span *ngIf="clientViewData.status.value!='Transfer on hold'">
           <button mat-menu-item (click)="doAction('View Standing Instructions')" *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'">View Standing Instructions</button>
         </span>
-        <!-- TODO: Create Self Service User -->
+        <button mat-menu-item (click)="doAction('Create Self Service User')">Create Self Service User</button>
       </mat-menu>
 
     </mat-card-actions>

src/app/clients/clients-view/clients-view.component.ts

@@ -72,6 +72,7 @@ export class ClientsViewComponent implements OnInit {
       case 'Reactivate':
       case 'Undo Rejection':
       case 'Add Charge':
+      case 'Create Self Service User':
       case 'Client Screen Reports':
         this.router.navigate([`actions/${name}`], { relativeTo: this.route });
         break;

src/app/clients/clients.module.ts

@@ -57,6 +57,7 @@ import { ClientPreviewStepComponent } from './client-stepper/client-preview-step
 import { ClientAddressStepComponent } from './client-stepper/client-address-step/client-address-step.component';
 import { ClientFamilyMemberDialogComponent } from './client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component';
 import { CaptureImageDialogComponent } from './clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component';
+import { CreateSelfServiceUserComponent } from './clients-view/client-actions/create-self-service-user/create-self-service-user.component';
 
 
 /**
@@ -119,7 +120,8 @@ import { CaptureImageDialogComponent } from './clients-view/custom-dialogs/captu
     ClientPreviewStepComponent,
     ClientAddressStepComponent,
     ClientFamilyMemberDialogComponent,
-    CaptureImageDialogComponent
+    CaptureImageDialogComponent,
+    CreateSelfServiceUserComponent
   ],
   providers: [DatePipe]
 

src/app/clients/clients.service.ts

@@ -355,4 +355,12 @@ export class ClientsService {
   createNewSurvey(surveyId: Number, surveyData: any) {
     return this.http.post(`/surveys/scorecards/${surveyId}`, surveyData);
   }
+
+  /**
+   * @param userData User Data.
+   */
+  createSelfServiceUser(userData: any) {
+    return this.http.post(`/users`, userData);
+  }
+
 }

src/app/clients/common-resolvers/client-actions.resolver.ts

@@ -51,6 +51,8 @@ export class ClientActionsResolver implements Resolve<Object> {
       case 'Accept Transfer':
       case 'Reject Transfer':
         return this.clientsService.getClientTransferProposalDate(clientId);
+      case 'Create Self Service User':
+        return this.clientsService.getClientData(clientId);
       default:
         return undefined;
     }