Fix issues in account actions (#1599)

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

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

@@ -2,16 +2,17 @@
 
   .user-report-wrapper {
     position: relative;
-  
+
     .user-report {
       padding: 0 0 17.5px 0;
       position: absolute;
       bottom: 0;
     }
   }
-  
+
 }
 
 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>