mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-14 02:26:55 -07:00
lots of changes, got the login page working !wip
This commit is contained in:
tidusjar
parent
f7cc7d9e35
commit
f44eba5e0c
12 changed files with 97 additions and 55 deletions
|
|
@ -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>
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { SearchService } from "../../services";
|
|||
export class DiscoverCardComponent implements OnInit {
|
||||
|
||||
@Input() public result: IDiscoverCardResult;
|
||||
public RequestType = RequestType;
|
||||
|
||||
constructor(private searchService: SearchService) { }
|
||||
|
||||
|
|
|
|||
|
|
@ -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: "discover", component: DiscoverComponent },
|
||||
{ path: "", component: DiscoverComponent, canActivate: [AuthGuard] },
|
||||
];
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
|
|||
|
|
@ -1,14 +1,9 @@
|
|||
<!--
|
||||
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="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,39 +16,45 @@ 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"
|
||||
autofocus>
|
||||
<input *ngIf="!authenticationSettings.allowNoPassword" type="password" id="inputPassword" class="form-control" formControlName="password"
|
||||
[attr.placeholder]="'Login.PasswordPlaceholder' | translate">
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="RememberMe" formControlName="rememberMe">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<button class="btn btn-success" type="button" (click)="loginWithOmbi = true">
|
||||
Sign In With {{appName}}</button>
|
||||
<div class="form-signin">
|
||||
<button class="btn btn-success" type="button" (click)="loginWithOmbi = true">
|
||||
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 -->
|
||||
</div>
|
||||
<!-- /container -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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%;
|
||||
|
|
@ -43,9 +43,16 @@ div.bg {
|
|||
transform: translate(-50%,-50%);
|
||||
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%;
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 [routerLinkActive]="['active']" routerLink="/search">Search</a>
|
||||
<a mat-list-item [routerLinkActive]="['active']" routerLink="/requests">Requests</a>
|
||||
<a mat-list-item [routerLinkActive]="['active']" routerLink="/settings">Settings</a>
|
||||
<a mat-list-item routerLink="/discover">
|
||||
<mat-icon aria-label="Side nav toggle icon">find_replace</mat-icon>
|
||||
Discover</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>
|
||||
|
|
@ -20,15 +31,18 @@
|
|||
<!-- Search Bar -->
|
||||
|
||||
<app-nav-search></app-nav-search>
|
||||
|
||||
|
||||
|
||||
</mat-toolbar>
|
||||
|
||||
<!-- Page -->
|
||||
<div [ngClass]="{'container top-spacing': showNav}">
|
||||
<div class="container top-spacing">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</mat-sidenav-container>
|
||||
|
||||
<div *ngIf="!isLoggedIn();">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
|
@ -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 { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
||||
import { Observable } from 'rxjs';
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue