Fixed up the reset password pages and some small tweaks

src/Ombi/ClientApp/src/app/login/resetpassword.component.html

@@ -1,21 +1,32 @@
-<!--
+
-you can substitue the span of reauth email for a input with the email and
+    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-include the remember me checkbox
+        <div class="login-gradient-bar">
--->
+        </div>
-<div *ngIf="form && customizationSettings && background">
+    </div>
-        <div class="bg" [style.background-image]="background"></div>
+    <div class="small-middle-container">
-    <div class="container" id="login">
+        <div *ngIf="form && customizationSettings">
-        <div class="card card-container">
-            <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
-            <div *ngIf="!customizationSettings.logo"><img id="profile-img" class="profile-img-card" src="{{baseUrl}}/images/logo.png" /></div>
-            <div *ngIf="customizationSettings.logo"><img id="profile-img" class="center" [src]="customizationSettings.logo" /></div>
-            <p id="profile-name" class="profile-name-card"></p>
     
+            <mat-card class="mat-elevation-z8 top-margin login-card">
+                <H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
+                <H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
+                <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
+                <mat-card-content id="login-box">
                     <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-                <input type="email" id="inputEmail" class="form-control" formControlName="email" [attr.placeholder]="'PasswordReset.EmailAddressPlaceholder' | translate" autofocus>
-                <button class="btn btn-success-outline" [disabled]="form.invalid" type="submit" [translate]="'PasswordReset.ResetPasswordButton'"></button>
 
-            </form><!-- /form -->
+                        <mat-form-field class="dark full-width" appearance="outline">
-        </div><!-- /card-container -->
+                            <mat-label>{{'PasswordReset.EmailAddressPlaceholder' | translate}}</mat-label>
-    </div><!-- /container -->
+                            <input type="email"  id="username-field" matInput formControlName="email" autofocus/>
-</div>
+                            <mat-error id="username-error" *ngIf="form.get('email').hasError('required')">
+                                {{'PasswordReset.EmailAddressPlaceholder' | translate}} is <strong>required</strong></mat-error>
+                        </mat-form-field>
+                        <button id="reset" mat-raised-button color="accent" type="submit">{{'PasswordReset.ResetPasswordButton' | translate}}</button>
+            
+                    </form>
+                </mat-card-content>
+    
+
+    
+            </mat-card>
+    
+        </div>
+    </div>

src/Ombi/ClientApp/src/app/login/resetpassword.component.ts

@@ -2,12 +2,14 @@
 import { Component, OnInit, Inject } from "@angular/core";
 import { FormBuilder, FormGroup, Validators } from "@angular/forms";
 import { DomSanitizer } from "@angular/platform-browser";
+import { fadeInOutAnimation } from "../animations/fadeinout";
 
 import { ICustomizationSettings } from "../interfaces";
 import { IdentityService, ImageService, NotificationService, SettingsService } from "../services";
 
 @Component({
     templateUrl: "./resetpassword.component.html",
+    animations: [fadeInOutAnimation],
     styleUrls: ["./login.component.scss"],
 })
 export class ResetPasswordComponent implements OnInit {

src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html

@@ -1,13 +1,16 @@
-<div *ngIf="form && customizationSettings">
+
-        <div class="bg" [style.background-image]="background"></div>
+    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
-    <div class="container" id="login">
+        <div class="login-gradient-bar">
-        <div class="card card-container">
+        </div>
-            <!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> -->
+    </div>
-            <div *ngIf="!customizationSettings.logo"><img id="profile-img" class="profile-img-card" src="{{baseUrl}}/images/logo.png" /></div>
+    <div class="small-middle-container">
-            <div *ngIf="customizationSettings.logo"><img id="profile-img" class="center" [src]="customizationSettings.logo" /></div>
+        <div *ngIf="form && customizationSettings">
-            <p id="profile-name" class="profile-name-card"></p>
-
     
+            <mat-card class="mat-elevation-z8 top-margin login-card">
+                <H1 *ngIf="!customizationSettings.logo && !customizationSettings.applicationName" class="login_logo">OMBI</H1>
+                <H1 *ngIf="customizationSettings.applicationName && !customizationSettings.logo" [ngClass]="{'bigText': customizationSettings.applicationName.length >= 7 && customizationSettings.applicationName.length < 14, 'hugeText': customizationSettings.applicationName.length >= 14 }" class="login_logo custom">{{customizationSettings.applicationName}}</H1>
+                <img mat-card-image *ngIf="customizationSettings.logo" [src]="customizationSettings.logo">
+                <mat-card-content id="login-box">
                     <div *ngIf="form.value.password !== form.value.confirmPassword" class="alert alert-danger">The passwords do not match</div>
                     <div *ngIf="form.invalid && form.dirty" class="alert alert-danger">
         
@@ -17,14 +20,37 @@
                     </div>
 
                     <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-                <input type="email" id="inputEmail" class="form-control" formControlName="email" placeholder="Email Address" autofocus>
+                        <mat-form-field class="dark full-width" appearance="outline">
-                <input type="password" class="form-control" formControlName="password" placeholder="New Password">
+                            <mat-label>{{'PasswordReset.EmailAddressPlaceholder' | translate}}</mat-label>
-                <input type="password" class="form-control" formControlName="confirmPassword" placeholder="Confirm New Password">
+                            <input type="email"  id="username-field" matInput formControlName="email" autofocus/>
-                <button class="btn btn-success-outline" [disabled]="form.invalid" type="submit">Reset Password</button>
+                            <mat-error id="username-error" *ngIf="form.get('email').hasError('required')">
+                                {{'PasswordReset.EmailAddressPlaceholder' | translate}} is <strong>required</strong></mat-error>
+                        </mat-form-field>
+
+                        <mat-form-field class="dark full-width" appearance="outline">
+                            <mat-label>New Password</mat-label>
+                            <input type="password"  id="username-field" matInput formControlName="password" autofocus/>
+                            <mat-error id="username-error" *ngIf="form.get('password').hasError('required')">
+                                Password is <strong>required</strong></mat-error>
+                        </mat-form-field>
+
+                        <mat-form-field class="dark full-width" appearance="outline">
+                            <mat-label>Confirm Password</mat-label>
+                            <input type="password"  id="username-field" matInput formControlName="confirmPassword" autofocus/>
+                            <mat-error id="username-error" *ngIf="form.get('confirmPassword').hasError('required')">
+                                Password is <strong>required</strong></mat-error>
+                        </mat-form-field>
+
+                    
+                        
+                    <button id="reset" mat-raised-button color="accent" [disabled]="form.invalid" type="submit">{{'Reset Password' | translate}}</button>
         
                     </form>
+                </mat-card-content>
+    
+
+    
+            </mat-card>
+    
         </div>
-        <!-- /card-container -->
     </div>
-    <!-- /container -->
-</div>

src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-advanced-options/movie-advanced-options.component.html

@@ -1,6 +1,5 @@
-<h1 mat-dialog-title>
+<h1 mat-dialog-title><i class="fas fa-sliders-h"></i> {{'MediaDetails.AdvancedOptions' | translate }}</h1>
-
+<hr>
-    Advanced Options</h1>
 <div mat-dialog-content>
     <mat-form-field appearance="outline" floatLabel=auto>
         <mat-label>{{'MediaDetails.QualityProfilesSelect' | translate }}</mat-label>
@@ -18,6 +17,6 @@
     </mat-form-field>
 </div>
 <div mat-dialog-actions>
-    <button mat-button [mat-dialog-close]="" cdkFocusInitial>Close</button>
+    <button mat-button [mat-dialog-close]="" cdkFocusInitial color="warn"><i class="fas fa-times"></i> {{ 'Common.Cancel' | translate }}</button>
-    <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Save</button>
+    <button mat-button [mat-dialog-close]="data" cdkFocusInitial color="accent"><i class="fas fa-plus"></i> {{ 'Common.Submit' | translate }}</button>
 </div>

src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-advanced-options/tv-advanced-options.component.html

@@ -1,7 +1,10 @@
-<h1 mat-dialog-title>
+<h1 mat-dialog-title><i class="fas fa-sliders-h"></i> {{'MediaDetails.AdvancedOptions' | translate }}</h1>
-
-    Advanced Options</h1>
 <div mat-dialog-content>
+    <hr />
+    <div class="alert alert-info" role="alert">
+      <i class="fas fa-x7 fa-exclamation-triangle glyphicon"></i>
+      <span>{{'MediaDetails.AutoApproveOptionsTvShort' | translate }}</span>
+    </div>
     <mat-form-field>
         <mat-label>{{'MediaDetails.QualityProfilesSelect' | translate }}</mat-label>
         <mat-select [(value)]="data.profileId">
@@ -18,6 +21,6 @@
     </mat-form-field>
 </div>
 <div mat-dialog-actions>
-    <button mat-raised-button [mat-dialog-close]="" color="warn">Close</button>
+    <button mat-raised-button [mat-dialog-close]="" color="warn"><i class="fas fa-times"></i> {{ 'Common.Cancel' | translate }}</button>
-    <button mat-raised-button [mat-dialog-close]="data" color="accent" cdkFocusInitial>Save</button>
+    <button mat-raised-button [mat-dialog-close]="data" color="accent" cdkFocusInitial><i class="fas fa-plus"></i> {{ 'Common.Submit' | translate }}</button>
 </div>

src/Ombi/wwwroot/translations/en.json

@@ -254,6 +254,7 @@
         "AdvancedOptions":"Advanced Options",
         "AutoApproveOptions":"You can configure the request here, once requested it will be send to your DVR application and will be auto approved!",
         "AutoApproveOptionsTv":"You can configure the request here, once requested it will be send to your DVR application and will be auto approved! If the request is already in Sonarr, we will not change the root folder or quality profile if you set it!",
+        "AutoApproveOptionsTvShort":"You can configure the request here, once requested it will be send to your DVR application! If the request is already in Sonarr, we will not change the root folder or quality profile if you set it!",
         "QualityProfilesSelect":"Select A Quality Profile",
         "RootFolderSelect":"Select A Root Folder",
         "Status":"Status",