From 6955c59680ba51f50a84cdfc380cdfb3473c251c Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Sat, 27 Mar 2021 22:46:33 +0000
Subject: [PATCH] Fixed up the reset password pages and some small tweaks

---
 .../app/login/resetpassword.component.html    | 51 +++++++------
 .../src/app/login/resetpassword.component.ts  |  2 +
 .../login/tokenresetpassword.component.html   | 72 +++++++++++++------
 .../movie-advanced-options.component.html     |  9 ++-
 .../tv-advanced-options.component.html        | 13 ++--
 src/Ombi/wwwroot/translations/en.json         |  1 +
 6 files changed, 95 insertions(+), 53 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/login/resetpassword.component.html b/src/Ombi/ClientApp/src/app/login/resetpassword.component.html
index c1c013719..9fbeb7eda 100644
--- a/src/Ombi/ClientApp/src/app/login/resetpassword.component.html
+++ b/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
-include the remember me checkbox
--->
-<div *ngIf="form && customizationSettings && background">
-        <div class="bg" [style.background-image]="background"></div>
-    <div class="container" id="login">
-        <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>
+
+    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
+        <div class="login-gradient-bar">
+        </div>
+    </div>
+    <div class="small-middle-container">
+        <div *ngIf="form && customizationSettings">
+    
+            <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)">
 
-            <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 -->
-        </div><!-- /card-container -->
-    </div><!-- /container -->
-</div>
\ No newline at end of file
+                        <mat-form-field class="dark full-width" appearance="outline">
+                            <mat-label>{{'PasswordReset.EmailAddressPlaceholder' | translate}}</mat-label>
+                            <input type="email"  id="username-field" matInput formControlName="email" autofocus/>
+                            <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>
diff --git a/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts b/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts
index 7c228e962..104d77c68 100644
--- a/src/Ombi/ClientApp/src/app/login/resetpassword.component.ts
+++ b/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 {
diff --git a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html
index fdedfb900..6a1c2567f 100644
--- a/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html
+++ b/src/Ombi/ClientApp/src/app/login/tokenresetpassword.component.html
@@ -1,30 +1,56 @@
-<div *ngIf="form && customizationSettings">
-        <div class="bg" [style.background-image]="background"></div>
-    <div class="container" id="login">
-        <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>
+
+    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background">
+        <div class="login-gradient-bar">
+        </div>
+    </div>
+    <div class="small-middle-container">
+        <div *ngIf="form && customizationSettings">
+    
+            <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">
+        
+                        <div *ngIf="form.get('password').hasError('required')">The Password is required</div>
+                        <div *ngIf="form.get('email').hasError('required')">The Email is required</div>
+                        <div *ngIf="form.get('confirmPassword').hasError('required')">The Confirm Password is required</div>
+                    </div>
 
+                    <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
+                        <mat-form-field class="dark full-width" appearance="outline">
+                            <mat-label>{{'PasswordReset.EmailAddressPlaceholder' | translate}}</mat-label>
+                            <input type="email"  id="username-field" matInput formControlName="email" autofocus/>
+                            <mat-error id="username-error" *ngIf="form.get('email').hasError('required')">
+                                {{'PasswordReset.EmailAddressPlaceholder' | translate}} is <strong>required</strong></mat-error>
+                        </mat-form-field>
 
-            <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">
+                        <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>
 
-                <div *ngIf="form.get('password').hasError('required')">The Password is required</div>
-                <div *ngIf="form.get('email').hasError('required')">The Email is required</div>
-                <div *ngIf="form.get('confirmPassword').hasError('required')">The Confirm Password is required</div>
-            </div>
+                        <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>
 
-            <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-                <input type="email" id="inputEmail" class="form-control" formControlName="email" placeholder="Email Address" autofocus>
-                <input type="password" class="form-control" formControlName="password" placeholder="New Password">
-                <input type="password" class="form-control" formControlName="confirmPassword" placeholder="Confirm New Password">
-                <button class="btn btn-success-outline" [disabled]="form.invalid" type="submit">Reset Password</button>
+                    
+                        
+                    <button id="reset" mat-raised-button color="accent" [disabled]="form.invalid" type="submit">{{'Reset Password' | translate}}</button>
+        
+                    </form>
+                </mat-card-content>
+    
 
-            </form>
+    
+            </mat-card>
+    
         </div>
-        <!-- /card-container -->
     </div>
-    <!-- /container -->
-</div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-advanced-options/movie-advanced-options.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-advanced-options/movie-advanced-options.component.html
index b7d3d6b40..dc21e18c4 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/panels/movie-advanced-options/movie-advanced-options.component.html
+++ b/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>
-
-    Advanced Options</h1>
+<h1 mat-dialog-title><i class="fas fa-sliders-h"></i> {{'MediaDetails.AdvancedOptions' | translate }}</h1>
+<hr>
 <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]="data" cdkFocusInitial>Save</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 color="accent"><i class="fas fa-plus"></i> {{ 'Common.Submit' | translate }}</button>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-advanced-options/tv-advanced-options.component.html b/src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-advanced-options/tv-advanced-options.component.html
index 14e6629f1..13c39a111 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/tv/panels/tv-advanced-options/tv-advanced-options.component.html
+++ b/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>
-
-    Advanced Options</h1>
+<h1 mat-dialog-title><i class="fas fa-sliders-h"></i> {{'MediaDetails.AdvancedOptions' | translate }}</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]="data" color="accent" cdkFocusInitial>Save</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><i class="fas fa-plus"></i> {{ 'Common.Submit' | translate }}</button>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json
index 28565d0f7..cf865fce7 100644
--- a/src/Ombi/wwwroot/translations/en.json
+++ b/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",