Allow edit external service email attributes

src/app/system/external-services/email/edit-email/edit-email.component.html

@@ -18,7 +18,12 @@
 
           <mat-form-field>
             <mat-label>Password</mat-label>
-            <input matInput required formControlName="password">
+            <input matInput required type="{{ passwordInputType }}" formControlName="password">
+            <button mat-button *ngIf="emailConfigurationForm.controls.password.value" matSuffix mat-icon-button
+              (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
+              <fa-icon *ngIf="passwordInputType === 'password'" icon="eye"></fa-icon>
+              <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
+            </button>
             <mat-error *ngIf="emailConfigurationForm.controls.password.hasError('required')">
               Password is <strong>required</strong>
             </mat-error>
@@ -34,27 +39,39 @@
 
           <mat-form-field>
             <mat-label>Port</mat-label>
-            <input matInput required formControlName="port">
+            <input matInput type="number" required formControlName="port">
             <mat-error *ngIf="emailConfigurationForm.controls.port.hasError('required')">
               Port is <strong>required</strong>
             </mat-error>
           </mat-form-field>
 
+          <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useTLS" class="margin-v">
+            Use TLS?
+          </mat-checkbox>
+
           <mat-form-field>
-            <mat-label>Use TLS</mat-label>
+            <mat-label>From Email</mat-label>
-            <input matInput required formControlName="useTLS">
+            <input matInput type="email" required formControlName="fromEmail">
-            <mat-error *ngIf="emailConfigurationForm.controls.useTLS.hasError('required')">
+            <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
-              Use TLS is <strong>required</strong>
+              From Email is <strong>required</strong>
             </mat-error>
           </mat-form-field>
 
+          <mat-form-field>
+            <mat-label>From Name</mat-label>
+            <input matInput required formControlName="fromName">
+            <mat-error *ngIf="emailConfigurationForm.controls.fromName.hasError('required')">
+              From Name is <strong>required</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]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">Submit</button>
+        <button mat-raised-button color="primary"
+          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/email/edit-email/edit-email.component.ts

@@ -16,6 +16,8 @@ import { SystemService } from 'app/system/system.service';
 })
 export class EditEmailComponent implements OnInit {
 
+  /** Password input field type. */
+  passwordInputType: string;
   /** Email Configuration data */
   emailConfigurationData: any;
   /** Email Configuration Form */
@@ -42,6 +44,7 @@ export class EditEmailComponent implements OnInit {
    */
   ngOnInit() {
     this.setEmailConfigurationForm();
+    this.passwordInputType = 'password';
   }
 
   /**
@@ -53,7 +56,9 @@ export class EditEmailComponent implements OnInit {
       'password': [this.emailConfigurationData[1].value, Validators.required],
       'host': [this.emailConfigurationData[2].value, Validators.required],
       'port': [this.emailConfigurationData[3].value, Validators.required],
-      'useTLS': [this.emailConfigurationData[4].value, Validators.required]
+      'useTLS': [this.emailConfigurationData[4].value, Validators.required],
+      'fromEmail': [this.emailConfigurationData[5].value, Validators.required],
+      'fromName': [this.emailConfigurationData[6].value, Validators.required]
     });
   }