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>
-            <input matInput required formControlName="useTLS">
-            <mat-error *ngIf="emailConfigurationForm.controls.useTLS.hasError('required')">
-              Use TLS is <strong>required</strong>
+            <mat-label>From Email</mat-label>
+            <input matInput type="email" required formControlName="fromEmail">
+            <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
+              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>