refractor: login module (#283)

* Refractor components.
* Shift language and footer component to shared module.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes #284

src/app/login/two-factor-authentication/two-factor-authentication.component.html

@@ -1,37 +1,60 @@
 <p><strong>Two Factor Authentication</strong></p>
+
 <mat-divider></mat-divider>
+
+<!-- Select delivery method to receive OTP -->
 <p *ngIf="!otpRequested">Please select a delivery method:</p>
-<form fxLayout="column" *ngIf="!otpRequested" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" (ngSubmit)="requestOTP()">
+
+<form fxLayout="column" *ngIf="!otpRequested" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" class="two-factor-auth-form"
+  (ngSubmit)="requestOTP()">
+
   <mat-radio-group fxLayout="column" fxFlexAlign="center" formControlName="twoFactorAuthenticationDeliveryMethod">
     <mat-radio-button *ngFor="let twoFactorAuthenticationDeliveryMethod of twoFactorAuthenticationDeliveryMethods"
       [value]="twoFactorAuthenticationDeliveryMethod">
         Send {{ twoFactorAuthenticationDeliveryMethod.name }} to {{ twoFactorAuthenticationDeliveryMethod.target }}
     </mat-radio-button>
   </mat-radio-group>
+
   <button mat-raised-button color="primary" fxFlexAlign="center" fxFlexFill [disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid">
     Request OTP
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
+
 </form>
 
- <!-- show input for otp request -->
+<!-- Show input for OTP -->
 <p *ngIf="otpRequested">Please enter the OTP:</p>
-<form fxLayout="column" *ngIf="otpRequested" [formGroup]="twoFactorAuthenticationForm" (ngSubmit)="validateOTP()">
-  <mat-form-field fxFlexAlign="center" class="textfield">
-    <span matPrefix><mat-icon>verified_user</mat-icon>&nbsp;&nbsp;</span>
-    <input matInput placeholder="OTP" autocomplete="off" formControlName="otp">
-    <mat-hint align="start"><strong>Delivery Method:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }} </mat-hint>
-    <mat-hint align="end"><strong>Validity:</strong> {{ tokenValidityTime / 60 }} mins </mat-hint>
+
+<form fxLayout="column" *ngIf="otpRequested" [formGroup]="twoFactorAuthenticationForm" class="two-factor-auth-form"
+  (ngSubmit)="validateOTP()">
+
+  <mat-form-field fxFlexAlign="center" class="two-factor-auth-input">
+    <span matPrefix>
+      <fa-icon icon="user-shield"></fa-icon>&nbsp;&nbsp;
+    </span>
+    <mat-label>OTP</mat-label>
+    <input type="password" matInput autocomplete="off" required formControlName="otp">
+    <mat-hint align="start">
+      <strong>Delivery Method:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
+    </mat-hint>
+    <mat-hint align="end">
+      <strong>Validity:</strong> {{ tokenValidityTime / 60 }} mins
+    </mat-hint>
     <mat-error *ngIf="twoFactorAuthenticationForm.controls.otp.hasError('required')">
       OTP is <strong>required</strong>
     </mat-error>
   </mat-form-field>
-  <button mat-raised-button color="primary" fxFlexAlign="center" class="btn" [disabled]="!twoFactorAuthenticationForm.valid">
+
+  <button mat-raised-button color="primary" fxFlexAlign="center" class="two-factor-auth-button"
+    [disabled]="!twoFactorAuthenticationForm.valid">
     Validate OTP
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
-  <button type="button" mat-button fxFlexAlign="center" class="btn" (click)="resendOTP()" [disabled]="loading || resendOTPLoading">
+
+  <button type="button" mat-button fxFlexAlign="center" class="two-factor-auth-button" (click)="resendOTP()"
+    [disabled]="loading || resendOTPLoading">
     Resend OTP
     <mat-spinner [diameter]="20" *ngIf="resendOTPLoading"></mat-spinner>
   </button>
+
 </form>

src/app/login/two-factor-authentication/two-factor-authentication.component.scss

@@ -1,22 +1,23 @@
-.btn {
-  width: 14rem;
-  margin-top: 0.5rem;
-}
+.two-factor-auth-form {
+  mat-radio-button {
+    margin-bottom: 0.5rem;
 
-mat-radio-button {
-  margin-bottom: 0.5rem;
-}
+    &:last-child {
+      margin-bottom: 1rem;
+    }
+  }
 
-mat-radio-button:last-child {
-  margin-bottom: 1rem;
-}
+  .two-factor-auth-button {
+    width: 14rem;
+    margin-top: 0.5rem;
+  }
 
-.textfield {
-  width: 14rem;
-}
+  .two-factor-auth-input {
+    width: 14rem;
+  }
 
-mat-spinner {
-  z-index: 4;
-  float: right;
-  margin: 0.5rem 0;
+  mat-spinner {
+    float: right;
+    margin: 0.5rem 0;
+  }
 }

src/app/login/two-factor-authentication/two-factor-authentication.component.ts

@@ -1,8 +1,16 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { AuthenticationService } from '../../core';
+
+/** rxjs Imports */
 import { finalize } from 'rxjs/operators';
 
+/** Custom Services */
+import { AuthenticationService } from '../../core';
+
+/**
+ * Two factor authentication component.
+ */
 @Component({
   selector: 'mifosx-two-factor-authentication',
   templateUrl: './two-factor-authentication.component.html',
@@ -10,32 +18,46 @@ import { finalize } from 'rxjs/operators';
 })
 export class TwoFactorAuthenticationComponent implements OnInit {
 
+  /** Available delivery methods to receive OTP. */
   twoFactorAuthenticationDeliveryMethods: any;
+  /** Delivery method selected to receive OTP. */
   selectedTwoFactorAuthenticationDeliveryMethod: any;
-  loading = false;
-  resendOTPLoading = false;
+  /** True if OTP is requested. */
   otpRequested = false;
+  /** Time for which OTP is valid. */
   tokenValidityTime: number;
+  /** Two factor authentication delivery method form group. */
   twoFactorAuthenticationDeliveryMethodForm: FormGroup;
+  /** Two factor authentication form group. */
   twoFactorAuthenticationForm: FormGroup;
+  /** True if loading. */
+  loading = false;
+  /** True if loading. */
+  resendOTPLoading = false;
 
+  /**
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {AuthenticationService} authenticationService Authentication Service.
+   */
   constructor(private formBuilder: FormBuilder,
               private authenticationService: AuthenticationService) {  }
 
+  /**
+   * Creates two factor authentication delivery method form.
+   *
+   * Gets the delivery methods available to receive OTP.
+   */
   ngOnInit() {
     this.createTwoFactorAuthenticationDeliveryMethodForm();
     this.authenticationService.getDeliveryMethods()
-      .subscribe(deliveryMethods => {
+      .subscribe((deliveryMethods: any) => {
         this.twoFactorAuthenticationDeliveryMethods = deliveryMethods;
       });
   }
 
-  private createTwoFactorAuthenticationDeliveryMethodForm() {
-    this.twoFactorAuthenticationDeliveryMethodForm = this.formBuilder.group({
-      'twoFactorAuthenticationDeliveryMethod': ['', Validators.required]
-    });
-  }
-
+  /**
+   * Requests OTP via the selected delivery method.
+   */
   requestOTP() {
     this.loading = true;
     this.twoFactorAuthenticationDeliveryMethodForm.disable();
@@ -46,7 +68,7 @@ export class TwoFactorAuthenticationComponent implements OnInit {
       .pipe(finalize(() => {
         this.twoFactorAuthenticationDeliveryMethodForm.reset();
         this.twoFactorAuthenticationDeliveryMethodForm.markAsPristine();
-        // Bug: Validation errors won't get removed on reset
+        // Angular Material Bug: Validation errors won't get removed on reset.
         this.twoFactorAuthenticationDeliveryMethodForm.enable();
         this.loading = false;
       }))
@@ -57,12 +79,9 @@ export class TwoFactorAuthenticationComponent implements OnInit {
       });
   }
 
-  private createTwoFactorAuthenticationForm() {
-    this.twoFactorAuthenticationForm = this.formBuilder.group({
-      'otp': ['', Validators.required]
-    });
-  }
-
+  /**
+   * Validates the OTP and authenticates the user.
+   */
   validateOTP() {
     this.loading = true;
     this.twoFactorAuthenticationForm.disable();
@@ -70,12 +89,15 @@ export class TwoFactorAuthenticationComponent implements OnInit {
       .pipe(finalize(() => {
         this.twoFactorAuthenticationForm.reset();
         this.twoFactorAuthenticationForm.markAsPristine();
-        // Bug: Validation errors won't get removed on reset
+        // Angular Material Bug: Validation errors won't get removed on reset.
         this.twoFactorAuthenticationForm.enable();
         this.loading = false;
       })).subscribe();
   }
 
+  /**
+   * Resends OTP via the selected delivery method.
+   */
   resendOTP() {
     this.resendOTPLoading = true;
     this.twoFactorAuthenticationForm.disable();
@@ -83,9 +105,28 @@ export class TwoFactorAuthenticationComponent implements OnInit {
       .pipe(finalize(() => {
         this.twoFactorAuthenticationForm.reset();
         this.twoFactorAuthenticationForm.markAsPristine();
-        // Bug: Validation errors won't get removed on reset
+        // Angular Material Bug: Validation errors won't get removed on reset.
         this.twoFactorAuthenticationForm.enable();
         this.resendOTPLoading = false;
       })).subscribe();
   }
+
+  /**
+   * Creates two factor authentication delivery method form.
+   */
+  private createTwoFactorAuthenticationDeliveryMethodForm() {
+    this.twoFactorAuthenticationDeliveryMethodForm = this.formBuilder.group({
+      'twoFactorAuthenticationDeliveryMethod': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Creates two factor authentication form.
+   */
+  private createTwoFactorAuthenticationForm() {
+    this.twoFactorAuthenticationForm = this.formBuilder.group({
+      'otp': ['', Validators.required]
+    });
+  }
+
 }