Fix issues in account actions (#1599)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/clients/clients.component.html

@@ -78,7 +78,7 @@
       </tr>
     </table>
 
-    <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100]"
+    <mat-paginator [length]="dataSource?.records$ | async" [pageSize]="100" [pageSizeOptions]="[10, 25, 50, 100]"
       showFirstLastButtons></mat-paginator>
   </div>
 

src/app/clients/edit-client/edit-client.component.html

@@ -190,7 +190,7 @@
       </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 type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">Submit</button>
       </mat-card-actions>
 

src/app/core/shell/breadcrumb/breadcrumb.component.ts

@@ -159,6 +159,17 @@ export class BreadcrumbComponent implements OnInit, AfterViewInit {
               url = currentUrl;
             }
           }
+          if (url !== undefined) {
+            if (url.length > 8 && url.search(`/clients/`) > 0 ) {
+              const replaceGeneral = `/general/`;
+              let currentUrlTemp = url.replace(replaceGeneral, `/`);
+              currentUrlTemp = currentUrlTemp.replace(`//`, `/`);
+              currentUrlTemp += `/general`;
+              const replaceDoubleSlash = `/general/general`;
+              currentUrlTemp = currentUrlTemp.replace(replaceDoubleSlash, `/general`);
+              url = currentUrlTemp;
+            }
+          }
 
           const breadcrumb: Breadcrumb = {
             label: breadcrumbLabel,

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -14,63 +14,63 @@ import { LoansService } from '../loans.service';
 @Injectable()
 export class LoanActionButtonResolver implements Resolve<Object> {
 
-    /**
+  /**
-     * @param {LoansService} LoansService Loans service.
+   * @param {LoansService} LoansService Loans service.
-     */
+   */
-    constructor(private loansService: LoansService) { }
+  constructor(private loansService: LoansService) { }
 
-    /**
+  /**
-     * Returns the Loans Notes Data.
+   * Returns the Loans Notes Data.
-     * @returns {Observable<any>}
+   * @returns {Observable<any>}
-     */
+   */
-    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanId = route.parent.paramMap.get('loanId');
+    const loanId = route.parent.paramMap.get('loanId');
-        const loanActionButton = route.paramMap.get('action');
+    const loanActionButton = route.paramMap.get('action');
-        if (loanActionButton === 'Assign Loan Officer' || loanActionButton === 'Change Loan Officer') {
+    if (loanActionButton === 'Assign Loan Officer' || loanActionButton === 'Change Loan Officer') {
-            return this.loansService.getLoanTemplate(loanId);
+      return this.loansService.getLoanTemplate(loanId);
-        } else if (loanActionButton === 'Make Repayment') {
+    } else if (loanActionButton === 'Make Repayment') {
-            return this.loansService.getLoanActionTemplate(loanId, 'repayment');
+      return this.loansService.getLoanActionTemplate(loanId, 'repayment');
-        } else if (loanActionButton === 'Goodwill Credit') {
+    } else if (loanActionButton === 'Goodwill Credit') {
-          return this.loansService.getLoanActionTemplate(loanId, 'goodwillCredit');
+      return this.loansService.getLoanActionTemplate(loanId, 'goodwillCredit');
-        } else if (loanActionButton === 'Payout Refund') {
+    } else if (loanActionButton === 'Payout Refund') {
-          return this.loansService.getLoanActionTemplate(loanId, 'payoutRefund');
+      return this.loansService.getLoanActionTemplate(loanId, 'payoutRefund');
-        } else if (loanActionButton === 'Merchant Issued Refund') {
+    } else if (loanActionButton === 'Merchant Issued Refund') {
-          return this.loansService.getLoanActionTemplate(loanId, 'merchantIssuedRefund');
+      return this.loansService.getLoanActionTemplate(loanId, 'merchantIssuedRefund');
-        } else if (loanActionButton === 'Credit Balance Refund') {
+    } else if (loanActionButton === 'Credit Balance Refund') {
-          return this.loansService.getLoanActionTemplate(loanId, 'creditBalanceRefund');
+      return this.loansService.getLoanActionTemplate(loanId, 'creditBalanceRefund');
-        } else if (loanActionButton === 'Waive Interest') {
+    } else if (loanActionButton === 'Waive Interest') {
-          return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
+      return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
-        } else if (loanActionButton === 'Write Off') {
+    } else if (loanActionButton === 'Write Off') {
-            return this.loansService.getLoanActionTemplate(loanId, 'writeoff');
+      return this.loansService.getLoanActionTemplate(loanId, 'writeoff');
-        } else if (loanActionButton === 'Close') {
+    } else if (loanActionButton === 'Close') {
-            return this.loansService.getLoanActionTemplate(loanId, 'close');
+      return this.loansService.getLoanActionTemplate(loanId, 'close');
-        } else if (loanActionButton === 'Close (as Rescheduled)') {
+    } else if (loanActionButton === 'Close (as Rescheduled)') {
-            return this.loansService.getLoanActionTemplate(loanId, 'close-rescheduled');
+      return this.loansService.getLoanActionTemplate(loanId, 'close-rescheduled');
-        } else if (loanActionButton === 'Reschedule') {
+    } else if (loanActionButton === 'Reschedule') {
-            return this.loansService.rescheduleLoanTemplate();
+      return this.loansService.rescheduleLoanTemplate();
-        } else if (loanActionButton === 'Prepay Loan') {
+    } else if (loanActionButton === 'Prepay Loan') {
-            return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
+      return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
-        } else if (loanActionButton === 'Add Collateral') {
+    } else if (loanActionButton === 'Add Collateral') {
-            return this.loansService.getLoanCollateralTemplate(loanId);
+      return this.loansService.getLoanCollateralTemplate(loanId);
-        } else if (loanActionButton === 'Disburse to Savings') {
+    } else if (loanActionButton === 'Disburse to Savings') {
-            return this.loansService.getLoanActionTemplate(loanId, 'disburseToSavings');
+      return this.loansService.getLoanActionTemplate(loanId, 'disburseToSavings');
-        } else if (loanActionButton === 'Recovery Payment') {
+    } else if (loanActionButton === 'Recovery Payment') {
-            return this.loansService.getLoanActionTemplate(loanId, 'recoverypayment');
+      return this.loansService.getLoanActionTemplate(loanId, 'recoverypayment');
-        } else if (loanActionButton === 'View Guarantors') {
+    } else if (loanActionButton === 'View Guarantors') {
-            return this.loansService.getLoanAccountResource(loanId, 'guarantors');
+      return this.loansService.getLoanAccountResource(loanId, 'guarantors');
-        } else if (loanActionButton === 'Create Guarantor') {
+    } else if (loanActionButton === 'Create Guarantor') {
-            return this.loansService.getGuarantorTemplate(loanId);
+      return this.loansService.getGuarantorTemplate(loanId);
-        } else if (loanActionButton === 'Disburse') {
+    } else if (loanActionButton === 'Disburse') {
-            return this.loansService.getLoanActionTemplate(loanId, 'disburse');
+      return this.loansService.getLoanActionTemplate(loanId, 'disburse');
-        } else if (loanActionButton === 'Loan Screen Reports') {
+    } else if (loanActionButton === 'Loan Screen Reports') {
-            return this.loansService.getLoanScreenReportsData();
+      return this.loansService.getLoanScreenReportsData();
-        } else if (loanActionButton === 'Approve') {
+    } else if (loanActionButton === 'Approve') {
-            return this.loansService.getLoanApprovalTemplate(loanId);
+      return this.loansService.getLoanApprovalTemplate(loanId);
-        } else if (loanActionButton === 'Add Loan Charge') {
+    } else if (loanActionButton === 'Add Loan Charge') {
-            return this.loansService.getLoanChargeTemplateResource(loanId);
+      return this.loansService.getLoanChargeTemplateResource(loanId);
-        } else {
+    } else {
-            return undefined;
+      return undefined;
-        }
     }
+  }
 
 }

src/app/loans/loans-view/charges-tab/charges-tab.component.html

@@ -31,28 +31,28 @@
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Due </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amount| number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amount| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Paid </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Waived </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
-        <td mat-cell *matCellDef="let charge">
+        <td mat-cell class="center" *matCellDef="let charge">
           <span *ngIf="status === 'Submitted and pending approval'">
             <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
               (click)="routeEdit($event); editCharge(charge)">

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -35,14 +35,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
-            *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
+          *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -50,14 +50,14 @@
 
         </div>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
-            *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
+          *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -47,14 +47,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
+          *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -33,14 +33,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid"
-            *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid"
+          *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
-            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
+          *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -126,14 +126,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!newGuarantorForm.valid"
-            *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!newGuarantorForm.valid"
+          *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
     <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">

src/app/loans/loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -42,14 +42,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
-            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
-        </mat-card-actions>
-    
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
+          *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -87,14 +87,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid"
-            *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid"
+          *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -51,14 +51,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid"
-            *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid"
+          *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -39,14 +39,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
+          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -92,14 +92,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid"
+          *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.html

@@ -1,57 +1,57 @@
 <div class="container m-b-20">
 
-    <mat-card>
+  <mat-card>
 
-        <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
+    <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
 
-            <mat-card-content>
+      <mat-card-content>
 
-                <div>
+        <div>
 
-                    <mat-form-field fxFlex>
+          <mat-form-field fxFlex>
-                        <mat-label>Loan Screen Reports</mat-label>
+            <mat-label>Loan Screen Reports</mat-label>
-                        <mat-select formControlName="templateId">
+            <mat-select formControlName="templateId">
-                            <mat-option *ngFor="let template of templatesData" [value]="template.id">
+              <mat-option *ngFor="let template of templatesData" [value]="template.id">
-                                {{ template.name }}
+                {{ template.name }}
-                            </mat-option>
+              </mat-option>
-                        </mat-select>
+            </mat-select>
-                        <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
+            <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
-                            Screen Report is <strong>required</strong>
+              Screen Report is <strong>required</strong>
-                        </mat-error>
+            </mat-error>
-                    </mat-form-field>
+          </mat-form-field>
 
-                </div>
+        </div>
 
-            </mat-card-content>
+      </mat-card-content>
 
-            <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-                <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
+        <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-                    <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
+          <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
-                </button>
+        </button>
-            </mat-card-actions>
+      </mat-card-actions>
 
-        </form>
+    </form>
 
-    </mat-card>
+  </mat-card>
 
 </div>
 
 <div #output class="container">
 
-    <mat-card fxLayout="column" fxLayoutGap="3%">
+  <mat-card fxLayout="column" fxLayoutGap="3%">
 
-        <div fxLayoutAlign="end">
+    <div fxLayoutAlign="end">
-            <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
+      <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-                <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
-                Print
+        Print
-            </button>
+      </button>
-        </div>
+    </div>
 
-        <div #screenReport class="screen-report">
+    <div #screenReport class="screen-report">
-            <p>Please select a screen report.</p>
+      <p>Please select a screen report.</p>
-        </div>
+    </div>
 
-    </mat-card>
+  </mat-card>
 
 </div>

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
-            *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
+          *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -87,14 +87,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid"
+          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -100,14 +100,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid"
+          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -82,14 +82,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
+          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid"
-            *mifosxHasPermission="'REJECT_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid"
+          *mifosxHasPermission="'REJECT_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.html

@@ -1,8 +1,8 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
-    <div class="viewGuarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div class="view-guarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%">
         <table>
@@ -66,9 +66,9 @@
     <div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
 
       <!-- guarantors details table -->
-      <div class="headingContent">
+      <div class="heading-content">
         <div fxLayout="column" fxFlex="50%">
-          <div class="headingName">
+          <div class="heading-name">
             <h3>Guarantors Details</h3>
           </div>
         </div>
@@ -82,7 +82,6 @@
 
       <table fxFlexFill mat-table
         [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
-        <!-- <ng-container *ngIf="expression"> -->
         <ng-container matColumnDef="fullname">
           <th mat-header-cell *matHeaderCellDef> Name </th>
           <td mat-cell *matCellDef="let guarantor">
@@ -165,15 +164,13 @@
               </button>
               <span *ngIf="guarantor.status">
                 <button mat-raised-button class="account-action-button" color="warn"
-                  *mifosxHasPermission='"DELETE_GUARANTOR"' (click)="deleteGuarantor(guarantor.id)">
+                  *mifosxHasPermission="'DELETE_GUARANTOR'" (click)="deleteGuarantor(guarantor.id)">
                   <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
                 </button>
               </span>
             </span>
           </td>
         </ng-container>
-        <!-- </ng-container> -->
-
 
         <tr mat-header-row *matHeaderRowDef="guarantorsDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: guarantorsDisplayedColumns"></tr>

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.scss

@@ -1,4 +1,4 @@
-.viewGuarantors-account-tables {
+.view-guarantors-account-tables {
 	padding: 1%;
 	margin: 1%;
 	.table-headers {
@@ -20,13 +20,13 @@ table {
 	}
 }
 
-.headingContent{
+.heading-content{
   margin-bottom: 1%;
   margin-top: 1%;
   width: 100%;
 }
 
-.headingName {
+.heading-name {
   display: block;
 }
 

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -34,14 +34,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid"
-            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid"
+          *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid"
-            *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid"
+          *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html

@@ -1,10 +1,10 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
     <mat-card-content>
 
-      <form [formGroup]="writeOffForm" (ngSubmit)="submit()">
+      <form [formGroup]="writeOffForm">
 
         <div fxLayout="column">
 
@@ -33,14 +33,14 @@
 
       </form>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-        <button mat-raised-button color="primary" (click)="submit()"
-          *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
-      </mat-card-actions>
-
     </mat-card-content>
 
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+      <button mat-raised-button color="primary" (click)="submit()"
+        *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
+    </mat-card-actions>
+
   </mat-card>
 
 </div>

src/app/loans/loans-view/view-charge/view-charge.component.ts

@@ -90,7 +90,7 @@ export class ViewChargeComponent {
           dateFormat,
           locale
         };
-        this.loansService.executeLoansAccountChargesCommand(this.chargeData.loanId, 'paycharge', dataObject, this.chargeData.id)
+        this.loansService.executeLoansAccountChargesCommand(this.chargeData.loanId, 'pay', dataObject, this.chargeData.id)
           .subscribe(() => {
             this.reload();
           });

src/app/savings/saving-account-actions/activate-savings-account/activate-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/add-charge-savings-account/add-charge-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/apply-annual-fees-savings-account/apply-annual-fees-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/approve-savings-account/approve-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/close-savings-account/close-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/post-interest-as-on-savings-account/post-interest-as-on-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/reject-savings-account/reject-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/savings-account-assign-staff/savings-account-assign-staff.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -86,4 +86,3 @@
   </mat-card>
 
 </div>
-  

src/app/savings/saving-account-actions/savings-account-unassign-staff/savings-account-unassign-staff.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/undo-approval-savings-account/undo-approval-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/saving-account-actions/withdraw-by-client-savings-account/withdraw-by-client-savings-account.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html

@@ -14,7 +14,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
+    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
       <mat-label>Submitted On</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedOnDate" required>
@@ -25,7 +25,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
       <mat-label>Field Officer</mat-label>
       <mat-select formControlName="fieldOfficerId">
         <mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
@@ -34,7 +34,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
       <mat-label>External ID</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts

@@ -32,6 +32,8 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
   /** Savings Account Details Form */
   savingsAccountDetailsForm: FormGroup;
 
+  savingsProductSelected = false;
+
   /** Savings Account Template with product data  */
   @Output() savingsAccountProductTemplate = new EventEmitter();
 
@@ -88,6 +90,7 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
       .subscribe((response: any) => {
         this.savingsAccountProductTemplate.emit(response);
         this.fieldOfficerData = response.fieldOfficerOptions;
+        this.savingsProductSelected = true;
         if (!this.isFieldOfficerPatched && this.savingsAccountTemplate.fieldOfficerId) {
           this.savingsAccountDetailsForm.get('fieldOfficerId').patchValue(this.savingsAccountTemplate.fieldOfficerId);
           this.isFieldOfficerPatched = true;

src/app/system/external-services/amazon-s3/amazon-s3.component.html

@@ -16,7 +16,7 @@
 
     <ng-container matColumnDef="value">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
-      <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
+      <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/system/external-services/amazon-s3/amazon-s3.component.ts

@@ -49,4 +49,12 @@ export class AmazonS3Component implements OnInit {
     this.dataSource.sort = this.sort;
   }
 
+  getConfigurationValue(configuration: any): string {
+    const value = configuration.value;
+    if (configuration.name === 's3_access_key' || configuration.name === 's3_secret_key') {
+      return value.replace(value.substr(1, value.length - 3), value.substr(1, value.length - 3).replace(/./g, '*'));
+    }
+    return value;
+  }
+
 }

src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html

@@ -8,14 +8,6 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
-            <mat-label>S3 Access Key</mat-label>
-            <input matInput required formControlName="s3_access_key">
-            <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
-              S3 Access Key is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-
           <mat-form-field>
             <mat-label>S3 Bucket Name</mat-label>
             <input matInput required formControlName="s3_bucket_name">
@@ -24,9 +16,27 @@
             </mat-error>
           </mat-form-field>
 
+          <mat-form-field>
+            <mat-label>S3 Access Key</mat-label>
+            <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key">
+            <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value" matSuffix mat-icon-button
+              (mousedown)="accessKeyInputType = 'text'" (mouseup)="accessKeyInputType = 'password'">
+              <fa-icon *ngIf="accessKeyInputType === 'password'" icon="eye"></fa-icon>
+              <fa-icon *ngIf="accessKeyInputType === 'text'" icon="eye-slash"></fa-icon>
+            </button>
+            <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
+              S3 Access Key is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+
           <mat-form-field>
             <mat-label>S3 Secret Key</mat-label>
-            <input matInput required formControlName="s3_secret_key">
+            <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key">
+            <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value" matSuffix mat-icon-button
+              (mousedown)="secretKeyInputType = 'text'" (mouseup)="secretKeyInputType = 'password'">
+              <fa-icon *ngIf="secretKeyInputType === 'password'" icon="eye"></fa-icon>
+              <fa-icon *ngIf="secretKeyInputType === 'text'" icon="eye-slash"></fa-icon>
+            </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')">
               S3 Secret Key is <strong>required</strong>
             </mat-error>

src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.ts

@@ -20,6 +20,10 @@ export class EditAmazonS3Component implements OnInit {
   amazonS3ConfigurationData: any;
   /** Amazon S3 Configuration Form */
   amazonS3ConfigurationForm: FormGroup;
+  /** Secret Key input field type. */
+  secretKeyInputType: string;
+  /** Access Key field type. */
+  accessKeyInputType: string;
 
   /**
    * Retrieves the Amazon S3 configuration data from `resolve`.
@@ -42,6 +46,8 @@ export class EditAmazonS3Component implements OnInit {
    */
   ngOnInit() {
     this.createAmazonS3ConfigurationForm();
+    this.secretKeyInputType = 'password';
+    this.accessKeyInputType = 'password';
   }
 
   /**
@@ -49,8 +55,8 @@ export class EditAmazonS3Component implements OnInit {
    */
   createAmazonS3ConfigurationForm() {
     this.amazonS3ConfigurationForm = this.formBuilder.group({
-      's3_access_key': [this.amazonS3ConfigurationData[0].value, Validators.required],
       's3_bucket_name': [this.amazonS3ConfigurationData[1].value, Validators.required],
+      's3_access_key': [this.amazonS3ConfigurationData[0].value, Validators.required],
       's3_secret_key': [this.amazonS3ConfigurationData[2].value, Validators.required]
     });
   }

src/app/system/manage-reports/create-report/create-report.component.html

@@ -65,7 +65,7 @@
 
           <mat-form-field fxFlex="98%">
             <mat-label>SQL</mat-label>
-            <textarea matInput required formControlName="reportSql"></textarea>
+            <textarea matInput required formControlName="reportSql" cdkTextareaAutosize cdkAutosizeMinRows="6"></textarea>
             <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
               SQL is <strong>required</strong>
             </mat-error>

src/app/system/manage-reports/create-report/create-report.component.scss

@@ -14,4 +14,5 @@
 
 table {
   width: 100%;
+  margin-top: 20px;
 }

src/app/system/manage-reports/edit-report/edit-report.component.html

@@ -64,7 +64,7 @@
 
           <mat-form-field fxFlex="98%">
             <mat-label>SQL</mat-label>
-            <textarea matInput required formControlName="reportSql"></textarea>
+            <textarea matInput required formControlName="reportSql" cdkTextareaAutosize cdkAutosizeMinRows="6"></textarea>
             <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
               SQL is <strong>required</strong>
             </mat-error>

src/app/system/manage-reports/view-report/view-report.component.html

@@ -32,11 +32,11 @@
           {{ reportData.reportType }}
         </div>
 
-        <div fxFlex="50%" class="mat-body-strong">
+        <div *ngIf="reportData.reportSubType" fxFlex="50%" class="mat-body-strong">
           Report Subtype:
         </div>
 
-        <div fxFlex="50%">
+        <div *ngIf="reportData.reportSubType" fxFlex="50%">
           {{ reportData.reportSubType }}
         </div>
 
@@ -69,3 +69,5 @@
     </mat-card-content>
 
   </mat-card>
+
+</div>