From b8632b2185c473e00a5c158b77b91e78670a8b3e Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Tue, 16 Jun 2020 22:11:27 +0100
Subject: [PATCH] update the email settings page

---
 .../app/settings/lidarr/lidarr.component.html | 208 +++++++++---------
 .../app/settings/lidarr/lidarr.component.scss |  33 +--
 .../emailnotification.component.html          | 188 ++++++++--------
 3 files changed, 214 insertions(+), 215 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
index 5cb73d929..9643ee2a1 100644
--- a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
@@ -1,120 +1,132 @@
 <settings-menu></settings-menu>
-<div class="small-middle-container">
-<div *ngIf="form">
-  <fieldset>
-    <legend>Lidarr Settings</legend>
+  <div *ngIf="form" class="small-middle-container">
+    <fieldset>
+      <legend>Lidarr Settings</legend>
 
-    <div>
-      <form novalidate [formGroup]="form" class="row" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
-
-          <div>
-            <div class="md-form-field"><mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle></div>
-            <div class="md-form-field"><mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle></div>
-        </div>
-
-        <div class="col-md-5">
+      <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
+        <div class="row">
+          <div class="col-md-12 col-12 col-sm-12"></div>
           <div class="md-form-field">
-            <mat-form-field>
-              <input matInput placeholder="Hostname or IP" formControlName="ip">
-            </mat-form-field>
-          </div>
-          <div  class="md-form-field">
-            <mat-form-field>
-              <input matInput placeholder="Port" formControlName="port">
-            </mat-form-field>
-          </div>
-          <div  class="md-form-field">
-            <mat-form-field>
-              <input matInput placeholder="API Key" formControlName="apiKey">
-            </mat-form-field>
-          </div>
-
-
-          <div>
-            <mat-slide-toggle formControlName="ssl">
-              Enable SSL
-            </mat-slide-toggle>
+            <mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
           </div>
-
-
-          <div  class="md-form-field">
-            <mat-form-field>
-              <input matInput placeholder="Base Url" formControlName="subDir">
-            </mat-form-field>
+          <div class="md-form-field">
+            <mat-slide-toggle [ngModelOptions]="{standalone: true}" [(ngModel)]="advanced">Advanced</mat-slide-toggle>
           </div>
         </div>
-        <div class="col-md-5">
-
-          <div  class="md-form-field">
-            <mat-form-field>
-              <mat-label>Quality Profiles</mat-label>
-              <mat-select formControlName="defaultQualityProfile" required>
-                <mat-option *ngFor="let quality of qualities" [value]="quality.id">
-                  {{quality.name}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <div><button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
-                  *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button></div>
-          </div>
-
-          <div  class="md-form-field">
-            <mat-form-field>
-              <mat-label>Default Root Folder</mat-label>
-              <mat-select formControlName="defaultRootPath" required>
-                <mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
-                  {{folder.path}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-            <div><button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
-                  *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button></div>
-          </div>
 
-          <div class="md-form-field">
-            <mat-form-field>
-              <mat-label>Metadata Profile</mat-label>
-              <mat-select formControlName="metadataProfileId" required>
-                <mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
-                  {{folder.name}}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          <div><button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
-            *ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
+        <div class="row">
+          <div class="col-md-7 col-8 col-sm-12">
+            <label for="username" class="control-label">
+              <h3>Server Configuration</h3>
+            </label>
+            <div class="md-form-field">
+              <mat-form-field appearance="outline">
+                <mat-label>Hostname or IP</mat-label>
+                <input matInput formControlName="ip">
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Port</mat-label>
+                <input matInput formControlName="port">
+              </mat-form-field>
+              <mat-slide-toggle formControlName="ssl">
+                SSL
+              </mat-slide-toggle>
+            </div>
+            <div class="md-form-field">
+              <mat-form-field appearance="outline">
+                <mat-label>API key</mat-label>
+                <input matInput formControlName="apiKey">
+              </mat-form-field>
+            </div>
+            <div class="md-form-field">
+              <mat-form-field appearance="outline">
+                <mat-label>Base URL</mat-label>
+                <input matInput formControlName="subDir">
+              </mat-form-field>
+            </div>
           </div>
+          <div class="col-md-5 col-4 col-sm-12">
+
+            <label for="username" class="control-label">
+              <h3>Interface</h3>
+            </label>
+            <div class="md-form-field">
+              <mat-form-field appearance="outline">
+                <mat-label>Quality Profiles</mat-label>
+                <mat-select formControlName="defaultQualityProfile" required>
+                  <mat-option *ngFor="let quality of qualities" [value]="quality.id">
+                    {{quality.name}}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <div class="md-form-field" style="display:inline;margin-left:20px;">
+                <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
+                    *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+              </div>
+            </div>
 
+            <div class="md-form-field">
+              <mat-form-field appearance="outline">
+                <mat-label>Default Root Folder</mat-label>
+                <mat-select formControlName="defaultRootPath" required>
+                  <mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
+                    {{folder.path}}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <div class="md-form-field" style="display:inline;margin-left:20px;">
+                <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
+                    *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
+              </div>
+            </div>
 
-          <div class="md-form-field">
-            <mat-slide-toggle formControlName="albumFolder">
-              Album Folder
-            </mat-slide-toggle>
-          </div>
+            <div class="md-form-field">
+              <mat-form-field appearance="outline">
+                <mat-label>Metadata Profile</mat-label>
+                <mat-select formControlName="metadataProfileId" required>
+                  <mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
+                    {{folder.name}}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+              <div class="md-form-field" style="display:inline;margin-left:20px;">
+                <button mat-raised-button (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
+                    *ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
+            </div>
 
-          <div class="md-form-field" *ngIf="advanced" style="color:#ff761b">
-            <mat-slide-toggle formControlName="addOnly">
-              Do not search
-            </mat-slide-toggle>
-          </div>
 
+            <div class="md-form-field">
+              <mat-slide-toggle formControlName="albumFolder">
+                Album Folder
+              </mat-slide-toggle>
+            </div>
 
-          <div class="md-form-field" >
-            <div>
-              <button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
-                Connectivity <span id="spinner"></span></button>
+            <div class="md-form-field" *ngIf="advanced" style="color:#ff761b">
+              <mat-slide-toggle formControlName="addOnly">
+                Do not search
+              </mat-slide-toggle>
             </div>
+
           </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <div class="md-form-field">
+              <div>
+                <button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
+                  Connectivity <span id="spinner"></span></button>
+              </div>
+            </div>
 
 
-          <div class="md-form-field" >
-            <div>
-              <button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
+            <div class="md-form-field">
+              <div>
+                <button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
+              </div>
             </div>
           </div>
         </div>
       </form>
-    </div>
-  </fieldset>
-</div>
-</div>
\ No newline at end of file
+    </fieldset>
+  </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.scss b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.scss
index 5bc0ad204..2898f062e 100644
--- a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.scss
+++ b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.scss
@@ -5,40 +5,13 @@
     margin-top: 10px;
 }
 
-.col-md-6 {
-    display: contents;
+.col-8 {
+    display: inline-table;
 }
-
 .col-md-5 {
-    display: contents;
-}
-
-.control-label {
-    font-weight: 400;
+    display: inline-table;
 }
 
 .row {
     display: block;
-}
-
-.btn-danger-outline {
-    background-color: #E84C3D;
-}
-
-.btn-success-outline {
-    background-color: #1b9d1b;
-}
-
-::ng-deep .dark .btn:hover {
-    box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15);
-    color: inherit;
-}
-
-@media (min-width:1440px) {
-    .col-md-6 {
-        display: inline-table;
-    }
-    .col-md-5 {
-        display: inline-table;
-    }
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/emailnotification.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/emailnotification.component.html
index b0f8153f8..75c16f496 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/emailnotification.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/emailnotification.component.html
@@ -1,105 +1,119 @@
-
-<settings-menu></settings-menu>
+<settings-menu></settings-menu>
 <div *ngIf="emailForm" class="small-middle-container">
     <fieldset>
         <legend>Email Notifications</legend>
-        <div class="col-md-6">
-            <form novalidate [formGroup]="emailForm" (ngSubmit)="onSubmit(emailForm)">
-
-                <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="Authentication" formControlName="authentication"><label for="Authentication">Enable SMTP Authentication</label>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <div class="checkbox">
-                            <input type="checkbox" id="disableTLS" formControlName="disableTLS"><label for="disableTLS">Disable TLS/SSL</label>
+        <div class="row">
+            <div class="col-md-8">
+                <form novalidate [formGroup]="emailForm" style="padding-top:2%;" (ngSubmit)="onSubmit(emailForm)">
+                    <div class="row">
+                        <div>
+                            <div class="md-form-field">
+                                <mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
+                            </div>
+                            <div class="md-form-field">
+                                <mat-slide-toggle formControlName="authentication">Enable SMTP Authentication
+                                </mat-slide-toggle>
+                            </div>
+                            <div class="md-form-field">
+                                <mat-slide-toggle formControlName="disableTLS">Disable TLS/SSL</mat-slide-toggle>
+                            </div>
+                            <div class="md-form-field">
+                                <mat-slide-toggle formControlName="disableCertificateChecking">Disable Certificate
+                                    Checking</mat-slide-toggle>
+                            </div>
+                        </div>
                     </div>
-                </div>
 
-                <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="disableCertificateChecking" formControlName="disableCertificateChecking"><label for="disableCertificateChecking">Disable Certificate Checking</label>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="host" class="control-label">SMTP Host</label>
-                  
-                        <input type="text" class="form-control form-control-custom " id="host" name="host" placeholder="localhost" formControlName="host"  [ngClass]="{'form-error': emailForm.get('host').hasError('required')}">
-                        <small *ngIf="emailForm.get('host').hasError('required')" class="error-text">The Host is required</small>
-                </div>
+                    <div class="row">
+                        <div class="md-form-field">
+                            <mat-form-field appearance="outline">
+                                <mat-label>SMTP Host</mat-label>
+                                <input matInput formControlName="host">
+                                <mat-error *ngIf="emailForm.get('host').hasError('required')">
+                                    Host is <strong>required</strong>
+                                  </mat-error>
+                            </mat-form-field>
+                            <mat-form-field appearance="outline">
+                                <mat-label>SMTP Port</mat-label>
+                                <input matInput formControlName="port">
+                                <mat-error *ngIf="emailForm.get('port').hasError('required')">
+                                    Port is <strong>required</strong>
+                                  </mat-error>
+                            </mat-form-field>
+                        </div>
+                        <div class="md-form-field">
+                            <mat-form-field appearance="outline">
+                                <mat-label>Email Sender</mat-label>
+                                <input matInput formControlName="senderAddress" matTooltip="The email address that the emails will be sent from">
+                                <mat-error *ngIf="emailForm.get('senderAddress').hasError('required')">
+                                    Email Sender Address is <strong>required</strong>
+                                  </mat-error>
+                                  <mat-error *ngIf="emailForm.get('senderAddress').hasError('email')">
+                                    Email Sender Address needs to be a valid email address
+                                  </mat-error>
+                            </mat-form-field>
+                            <mat-form-field appearance="outline">
+                                <mat-label>Sender Name</mat-label>
+                                <input matInput formControlName="senderName" matTooltip="The 'Friendly' name that will appear in the 'FROM:' part of the email">
+                            </mat-form-field>
+                        </div>
 
-                <div class="form-group">
-                    <label for="portNumber" class="control-label">SMTP Port</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " [ngClass]="{'form-error': emailForm.get('port').hasError('required')}" id="portNumber" name="Port" placeholder="Port Number" formControlName="port">
-                        <small *ngIf="emailForm.get('port').hasError('required')" class="error-text">The Port is required</small>
-                    </div>
-                </div>
+                        <div class="md-form-field">
+                            <mat-form-field appearance="outline">
+                                <mat-label>Admin Email</mat-label>
+                                <input matInput formControlName="adminEmail" matTooltip="The administrator email will be used to send emails for admin only notifications (e.g. New Requests that require approvals)">
+                                <mat-error *ngIf="emailForm.get('adminEmail').hasError('required')">
+                                    Admin Email is <strong>required</strong>
+                                  </mat-error>
+                                  <mat-error *ngIf="emailForm.get('adminEmail').hasError('email')">
+                                    Admin Email needs to be a valid email address
+                                  </mat-error>
+                            </mat-form-field>
+                        </div>
 
-                <div class="form-group">
-                    <label style="padding-left: 0"  for="senderAddress" class="control-label col-md-12">Email Sender</label>
-                    <div style="padding-left: 0" class="col-md-6">
-                        <input type="text" class="form-control form-control-custom " id="senderAddress" [ngClass]="{'form-error': emailForm.get('senderAddress').hasError('required'), 'form-error': emailForm.get('senderAddress').hasError('incorrectMailFormat')}" name="senderAddress" formControlName="senderAddress" tooltipPosition="top" placeholder="Sender Address" pTooltip="The email address that the emails will be sent from">
-                        <small *ngIf="emailForm.get('senderAddress').hasError('required')" class="error-text">The Email Sender Address is required</small>
-                        <small *ngIf="emailForm.get('senderAddress').hasError('email') && !emailForm.get('senderAddress').hasError('required')" class="error-text">The Email Sender Address needs to be a valid email address</small>
-                    </div>
-                    <div style="padding-left: 0" class="col-md-6">
-                        <input type="text" class="form-control form-control-custom " id="senderName" name="senderName" formControlName="senderName" tooltipPosition="top" placeholder="Sender Name" pTooltip="The 'Friendly' name that will appear in the 'FROM:' part of the email">
-                    </div>
-                    <br/>
-                    <br/>
-                    <br/>
-                </div>
-
-                <div class="form-group">
-                    <label for="adminEmail" class="control-label">Admin Email</label>
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': emailForm.get('adminEmail').hasError('required'), 'form-error': emailForm.get('adminEmail').hasError('email')}"  id="adminEmail" name="adminEmail" formControlName="adminEmail" tooltipPosition="top" pTooltip="The administrator email will be used to send emails for admin only notifications (e.g. New Requests that require approvals)">
-                        <small *ngIf="emailForm.get('adminEmail').hasError('required')" class="error-text">The Admin Email Address is required</small>
-                        <small *ngIf="emailForm.get('adminEmail').hasError('email')  && !emailForm.get('adminEmail').hasError('required')" class="error-text">The Admin Email needs to be a valid email address</small>
-
-                </div>
-
-
-                <div class="form-group" *ngIf="emailForm.controls['username'].validator">
-                    <label for="username" class="control-label">Username</label>
-                    
-                        <input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': emailForm.get('username').hasError('required')}" id="username" name="username" formControlName="username" pTooltip="The username if authentication is enabled" tooltipPosition="top">
-                        <small *ngIf="emailForm.get('username').hasError('required')" class="error-text">The Username is required</small>
                         
-                </div>
-
-                <div class="form-group" *ngIf="emailForm.get('password').validator">
-                    <label for="password" class="control-label">Password</label>
-                    
-                        <input type="password" class="form-control form-control-custom"  [ngClass]="{'form-error': emailForm.get('password').hasError('required')}" id="password" name="password" formControlName="password" pTooltip="The password if authentication is enabled" tooltipPosition="top">
-                        <small *ngIf="emailForm.get('password').hasError('required')" class="error-text">The Password is required</small>
-                </div>
+                        <div class="md-form-field" *ngIf="emailForm.controls['username'].validator">
+                            <mat-form-field appearance="outline">
+                                <mat-label>Username</mat-label>
+                                <input matInput formControlName="username" matTooltip="The username if authentication is enabled">
+                                <mat-error *ngIf="emailForm.get('username').hasError('required')">
+                                    Username is <strong>required</strong>
+                                  </mat-error>
+                            </mat-form-field>
 
-                <div class="form-group">
-                    <div>
-                        <button [disabled]="emailForm.invalid" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
-                        <button [disabled]="emailForm.invalid" type="submit" (click)="test(emailForm)" class="btn btn-primary-outline">
-                            Test
-                            <div id="spinner"></div>
-                        </button>
+                            <mat-form-field appearance="outline">
+                                <mat-label>Password</mat-label>
+                                <input matInput formControlName="password" matTooltip="The password if authentication is enabled">
+                                <mat-error *ngIf="emailForm.get('password').hasError('required')">
+                                    Password is <strong>required</strong>
+                                  </mat-error>
+                            </mat-form-field>
+                        </div>
 
+                </div>
+                <div class="row top-space">
+                    <div class="form-group">
+                        <div>
+                            <button mat-raised-button type="button" class="btn-spacing" color="accent"
+                            (click)="test(emailForm)" [disabled]="emailForm.invalid">Test <div id="spinner"></div>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div>
+                            <button mat-raised-button type="submit" class="btn-spacing" color="primary"
+                                [disabled]="emailForm.invalid">Submit</button>
+                        </div>
                     </div>
                 </div>
-            </form>
-        </div>
+                </form>
+            </div>
 
 
-        <div class="col-md-6">
+        <div class="col-md-4">
             <notification-templates [templates]="templates"></notification-templates>
         </div>
+        
+    </div>
     </fieldset>
 </div>
\ No newline at end of file