Sorted out the login page to support oauth and single user password

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

@@ -3,10 +3,9 @@
 <div class="small-middle-container">
 <div *ngIf="form && customizationSettings && authenticationSettings">
 
-  <!--TODO TURN BACK ON-->
   <mat-card class="mat-elevation-z8 top-margin">
     <img mat-card-image src="{{baseUrl}}/images/logo.png">
-    <mat-card-content>
+    <mat-card-content *ngIf="!authenticationSettings.enableOAuth || loginWithOmbi">
       <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
 
@@ -29,56 +28,16 @@
         </a>
       </form>
     </mat-card-content>
-  </mat-card>
-
-
-  <!-- <div class="container" id="login">
-    <div class="card card-container">
-
-      <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="!authenticationSettings.enableOAuth || loginWithOmbi">
-        <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-
-
-          <mat-form-field class="full-width">
-            <input type="text" matInput placeholder="{{'Login.UsernamePlaceholder' | translate}}" formControlName="username" />
-            <mat-error *ngIf="form.get('username').hasError('required')">
-              {{'Login.UsernamePlaceholder' | translate}} is <strong>required</strong></mat-error>
-          </mat-form-field>
 
-          <mat-form-field class="full-width">
-            <input type="password" matInput placeholder="{{'Login.PasswordPlaceholder' | translate}}" formControlName="password" />
-          </mat-form-field>
+  <mat-card-content *ngIf="authenticationSettings.enableOAuth && !loginWithOmbi" class="login-buttons">
+      <div >
 
-          <mat-checkbox class="white-checkbox" formControlName="rememberMe">{{'Login.RememberMe' | translate}}</mat-checkbox>
-
-          <button mat-raised-button color="accent" type="submit">{{'Login.SignInButton' | translate}}</button>
-
-          <a [routerLink]="['/reset']" class="forgot-password col-md-12">
-            <b [translate]="'Login.ForgottenPassword'"></b>
-          </a>
-        </form>
-      </div>
-
-      <div *ngIf="authenticationSettings.enableOAuth && !loginWithOmbi">
-        <div class="form-signin">
-          <button mat-raised-button color="warn" type="button" (click)="loginWithOmbi = true">
-            Sign In With {{appName}}</button>
-        </div>
-        <div class="form-signin">
-          <button mat-raised-button color="warn" type="button" (click)="oauth()">
-            Sign In With Plex</button>
+          <button mat-raised-button color="primary" type="submit" (click)="loginWithOmbi = true">{{'Login.SignInWith' | translate:appNameTranslate}}</button>
+          <button mat-raised-button color="accent" type="button" (click)="oauth()">{{'Login.SignInWithPlex' | translate}}</button>
         </div>
-      </div>
+    </mat-card-content>
+
+  </mat-card>
 
-    </div>
-  </div> -->
 </div>
 </div>

src/Ombi/ClientApp/src/app/login/login.component.scss

@@ -224,4 +224,8 @@ div.bg {
 
 .top-margin {
     margin-top:10%;
+}
+
+.login-buttons {
+    text-align: center;
 }

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

@@ -42,6 +42,9 @@ export class LoginComponent implements OnDestroy, OnInit {
         }
     }
 
+    public get appNameTranslate(): object {
+        return { appName: this.appName };
+    }
     private timer: any;
     private clientId: string;
 

src/Ombi/wwwroot/translations/en.json

@@ -4,6 +4,8 @@
     "UsernamePlaceholder": "Username",
     "PasswordPlaceholder": "Password",
     "RememberMe": "Remember Me",
+    "SignInWith": "Sign in with {{appName}}",
+    "SignInWithPlex": "Sign in with Plex",
     "ForgottenPassword": "Forgot your password?",
     "Errors": {
       "IncorrectCredentials": "Incorrect username or password"