lots of changes, got the login page working !wip

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

@@ -165,7 +165,7 @@
     </nav> -->
     
 
-   <app-my-nav [showNav]="showNav"></app-my-nav>
+   <app-my-nav [showNav]="showNav" [loggedIn]="user != undefined" [username]="user.name" (logoutClick)="logOut();"></app-my-nav>
 
 
 </div>

src/Ombi/ClientApp/src/app/app.module.ts

@@ -19,7 +19,7 @@ import { ButtonModule, CaptchaModule, ConfirmationService, ConfirmDialogModule,
     TooltipModule } from "primeng/primeng";
 
     import {
-        MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule} from '@angular/material';
+        MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatAutocompleteModule, MatCheckboxModule} from '@angular/material';
         import {  MatCardModule, MatInputModule, MatTabsModule } from "@angular/material";
 
 import { MDBBootstrapModule, CardsFreeModule, NavbarModule } from "angular-bootstrap-md";
@@ -118,6 +118,7 @@ export function JwtTokenGetter() {
         OverlayPanelModule,
         CommonModule,
         CardsFreeModule,
+        MatCheckboxModule,
         MDBBootstrapModule.forRoot(),
         JwtModule.forRoot({
             config: {

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html

@@ -1,10 +1,8 @@
 <mat-card>
 
-    <a *ngIf="result.url" href="{{result.url}}" target="_blank">
+    <a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
         <img mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
     </a>
-    <img *ngIf="!result.url" mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
-
     <mat-card-content>
 
         <h5 *ngIf="result.title.length <= 10">{{result.title}}</h5>

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.ts

@@ -11,6 +11,7 @@ import { SearchService } from "../../services";
 export class DiscoverCardComponent implements OnInit {
 
     @Input() public result: IDiscoverCardResult;
+    public RequestType = RequestType;
 
     constructor(private searchService: SearchService) { }
 

src/Ombi/ClientApp/src/app/discover/discover.module.ts

@@ -6,10 +6,10 @@ import { SearchService } from "../services";
 import { SharedModule } from "../shared/shared.module";
 import { DiscoverComponent } from "./discover.component";
 import { DiscoverCardComponent } from "./card/discover-card.component";
+import { AuthGuard } from "../auth/auth.guard";
 
 const routes: Routes = [
-    { path: "", component: DiscoverComponent },
+    { path: "", component: DiscoverComponent, canActivate: [AuthGuard] },
-    { path: "discover", component: DiscoverComponent },
 ];
 @NgModule({
     imports: [

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

@@ -1,14 +1,9 @@
-<!--
+<div *ngIf="form && customizationSettings && authenticationSettings">
-you can substitue the span of reauth email for a input with the email and
-include the remember me checkbox
--->
-<div *ngIf="form && customizationSettings && authenticationSettings">
 
-    <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
+    <!-- <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div> --> <!--TODO TURN BACK ON-->
     <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>
@@ -21,36 +16,42 @@ include the remember me checkbox
                 <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
 
-                    <input type="email" id="inputEmail" class="form-control" formControlName="username" [attr.placeholder]="'Login.UsernamePlaceholder' | translate"
+                    <mat-form-field class="full-width">
-                        autofocus>
+                        <input type="text" matInput placeholder="{{'Login.UsernamePlaceholder' | translate}}"
-                    <input *ngIf="!authenticationSettings.allowNoPassword" type="password" id="inputPassword" class="form-control" formControlName="password"
+                            formControlName="username" />
-                        [attr.placeholder]="'Login.PasswordPlaceholder' | translate">
+                            <mat-error *ngIf="form.get('username').hasError('required')">
-                    <div class="form-group">
+                                {{'Login.UsernamePlaceholder' | translate}} is <strong>required</strong></mat-error>
-                        <div class="checkbox">
+                    </mat-form-field>
-                            <input type="checkbox" id="RememberMe" formControlName="rememberMe">
 
-                            <label for="RememberMe" [translate]="'Login.RememberMe'"></label>
+                    <mat-form-field class="full-width">
+                        <input type="password" matInput placeholder="{{'Login.PasswordPlaceholder' | translate}}"
+                            formControlName="password" />
+                    </mat-form-field>
+
+                    <mat-checkbox class="white-checkbox" formControlName="rememberMe">{{'Login.RememberMe' | translate}}</mat-checkbox>
+
+                    <!-- <button class="btn btn-success" type="submit" data-test='signinbtn' [translate]="'Login.SignInButton'"></button> -->
+
+                    <button mat-raised-button color="accent" type="submit">{{'Login.SignInButton' | translate}}</button>
 
-                        </div>
-                    </div>
-                    <button class="btn btn-success" type="submit" data-test='signinbtn' [translate]="'Login.SignInButton'"></button>
                     <a [routerLink]="['/reset']" class="forgot-password col-md-12">
                         <b [translate]="'Login.ForgottenPassword'"></b>
                     </a>
                 </form>
                 <!-- /form -->
             </div>
+
             <!-- Main OAuth Flow -->
             <div *ngIf="authenticationSettings.enableOAuth && !loginWithOmbi">
-            <div class="form-signin">
+                <div class="form-signin">
-                <button class="btn btn-success" type="button" (click)="loginWithOmbi = true">
+                    <button class="btn btn-success" type="button" (click)="loginWithOmbi = true">
-                    Sign In With {{appName}}</button>
+                        Sign In With {{appName}}</button>
+                </div>
+                <div class="form-signin">
+                    <button class="btn btn-primary" type="button" (click)="oauth()">
+                        Sign In With Plex</button>
+                </div>
             </div>
-            <div class="form-signin">
-                <button class="btn btn-primary" type="button" (click)="oauth()">
-                    Sign In With Plex</button>
-            </div>
-        </div>
 
         </div>
         <!-- /card-container -->

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

@@ -35,7 +35,7 @@ div.bg {
 .card-container.card {
     max-width: 500px;
     padding: 45px 45px;
-    background-color: rgba(0,0,0, 0.0);
+    background-color: rgba(0, 0, 0, 0.7);
     border-radius: 5%;
     position: absolute;
     top: 50%;
@@ -44,8 +44,15 @@ div.bg {
     width: 100%;
 }
  
-
+::ng-deep  input.mat-input-element {
-
+    color: white;   // choose the color you want
+  }
+::ng-deep label.mat-input-placeholder {
+    color: #fff;   // choose the color you want
+  }
+.white-checkbox {
+    color:white;
+}
 
 .btn {
     font-weight: 700;
@@ -200,3 +207,8 @@ div.bg {
 ::-ms-input-placeholder { /* Microsoft Edge */
     color: $placeholder-colour;
 }
+
+
+.full-width {
+    width: 100%;
+}

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

@@ -74,7 +74,7 @@ export class LoginComponent implements OnDestroy, OnInit {
         });
 
         if (authService.loggedIn()) {
-            this.router.navigate(["search"]);
+            this.router.navigate(["/"]);
         }
     }
 
@@ -117,7 +117,7 @@ export class LoginComponent implements OnDestroy, OnInit {
 
                     if (this.authService.loggedIn()) {
                         this.ngOnDestroy();
-                        this.router.navigate(["search"]);
+                        this.router.navigate(["/"]);
                     } else {
                         this.notify.error(this.errorBody);
                     }

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

@@ -1,12 +1,23 @@
-<mat-sidenav-container class="sidenav-container">
+<mat-sidenav-container *ngIf="isLoggedIn()" class="sidenav-container">
   <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
     [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
     <mat-toolbar>Ombi</mat-toolbar>
     <mat-nav-list>
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/discover">Discover</a>
+      <a mat-list-item routerLink="/discover">
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/search">Search</a>
+        <mat-icon aria-label="Side nav toggle icon">find_replace</mat-icon> 
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/requests">Requests</a>
+        Discover</a>
-      <a mat-list-item [routerLinkActive]="['active']" routerLink="/settings">Settings</a>
+      <a mat-list-item  routerLink="/search">
+        <mat-icon aria-label="Side nav toggle icon">search</mat-icon> Search</a>
+      <a mat-list-item  routerLink="/requests">
+        <mat-icon aria-label="Side nav toggle icon">list</mat-icon> Requests</a>
+      <a mat-list-item  routerLink="/Settings/About">
+        <mat-icon aria-label="Side nav toggle icon">settings</mat-icon> Settings</a>
+
+      <a mat-list-item aria-label="Toggle sidenav" (click)="logOut();" *ngIf="loggedIn">
+          <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
+          {{ 'NavigationBar.Logout' | translate }}
+      </a>
+
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
@@ -25,10 +36,13 @@
     </mat-toolbar>
 
     <!-- Page -->
-    <div [ngClass]="{'container top-spacing': showNav}">
+    <div class="container top-spacing">
       <router-outlet></router-outlet>
     </div> 
     
-    
   </mat-sidenav-content>
 </mat-sidenav-container>
+
+<div *ngIf="!isLoggedIn();">  
+  <router-outlet></router-outlet>
+</div>

src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Observable, Subject } from 'rxjs';
+import { Observable } from 'rxjs';
-import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 
 @Component({
@@ -16,8 +16,19 @@ export class MyNavComponent {
       map(result => result.matches)
     );
 
-  @Input() public showNav: boolean;
+    @Input() public showNav: boolean;
+    @Input() public loggedIn: boolean;
+    @Input() public username: string;
+    @Output() public logoutClick = new EventEmitter();
 
   constructor(private breakpointObserver: BreakpointObserver) {
   }
+
+  public logOut() {
+    this.logoutClick.emit();
+  }
+
+  public isLoggedIn(): boolean {
+    return this.loggedIn;
+  }
 }

src/Ombi/ClientApp/src/app/shared/shared.module.ts

@@ -11,7 +11,7 @@ import { InputSwitchModule, SidebarModule } from "primeng/primeng";
 
 import {
   MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule} from '@angular/material';
-  import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule } from "@angular/material";
+  import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule } from "@angular/material";
 
 @NgModule({
   declarations: [
@@ -34,6 +34,7 @@ import {
     MatSidenavModule, 
     MatListModule, 
     MatToolbarModule,
+    MatCheckboxModule,
   ],
   exports: [
       TranslateModule,
@@ -54,6 +55,7 @@ import {
       MatToolbarModule,
       MatTooltipModule,
       MatAutocompleteModule,
+      MatCheckboxModule,
     ],
 })
 export class SharedModule {}

src/Ombi/Startup.cs

@@ -10,6 +10,7 @@ using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.HttpOverrides;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.SpaServices.AngularCli;
 using Microsoft.AspNetCore.SpaServices.Webpack;
 using Microsoft.AspNetCore.StaticFiles;
 using Microsoft.Extensions.Caching.Memory;
@@ -252,6 +253,7 @@ namespace Ombi
                 if (env.IsDevelopment())
                 {
                     spa.UseProxyToSpaDevelopmentServer("http://localhost:3578");
+                    //spa.UseAngularCliServer("start");
                 }
             });
         }