a bit more wip on the login page and fixed the approve/deny on the movie page

This commit is contained in:
Jamie Rees 2019-03-07 11:18:27 +00:00
commit fd299b92ee
6 changed files with 91 additions and 59 deletions

View file

@ -1,60 +1,84 @@
<div *ngIf="form && customizationSettings && authenticationSettings"> 
<div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div>
<div class="small-middle-container">
<div *ngIf="form && customizationSettings && authenticationSettings">
<!-- <div *ngIf="background" @fadeInOut class="bg" [style.background-image]="background"></div> --> <!--TODO TURN BACK ON--> <!--TODO TURN BACK ON-->
<div class="container" id="login"> <mat-card class="mat-elevation-z8 top-margin">
<div class="card card-container"> <img mat-card-image src="{{baseUrl}}/images/logo.png">
<mat-card-content>
<div *ngIf="!customizationSettings.logo"> <form *ngIf="authenticationSettings" class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<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"> <mat-form-field class="full-width">
<input type="text" matInput placeholder="{{'Login.UsernamePlaceholder' | translate}}" <input type="text" matInput placeholder="{{'Login.UsernamePlaceholder' | translate}}" formControlName="username" />
formControlName="username" /> <mat-error *ngIf="form.get('username').hasError('required')">
<mat-error *ngIf="form.get('username').hasError('required')"> {{'Login.UsernamePlaceholder' | translate}} is <strong>required</strong></mat-error>
{{'Login.UsernamePlaceholder' | translate}} is <strong>required</strong></mat-error> </mat-form-field>
</mat-form-field>
<mat-form-field class="full-width"> <mat-form-field class="full-width">
<input type="password" matInput placeholder="{{'Login.PasswordPlaceholder' | translate}}" <input color="black" type="password" matInput placeholder="{{'Login.PasswordPlaceholder' | translate}}" formControlName="password" />
formControlName="password" /> </mat-form-field>
</mat-form-field>
<mat-checkbox class="white-checkbox" formControlName="rememberMe">{{'Login.RememberMe' | translate}}</mat-checkbox> <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>
<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>
</mat-card-content>
</mat-card>
<a [routerLink]="['/reset']" class="forgot-password col-md-12">
<b [translate]="'Login.ForgottenPassword'"></b>
</a>
</form>
<!-- /form -->
</div>
<!-- Main OAuth Flow --> <!-- <div class="container" id="login">
<div *ngIf="authenticationSettings.enableOAuth && !loginWithOmbi"> <div class="card card-container">
<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 *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-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>
<!-- /card-container --> <div class="form-signin">
<button mat-raised-button color="warn" type="button" (click)="oauth()">
Sign In With Plex</button>
</div>
</div>
</div> </div>
<!-- /container --> </div> -->
</div>
</div> </div>

View file

@ -44,12 +44,7 @@ div.bg {
width: 100%; 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 { .white-checkbox {
color:white; color:white;
} }
@ -211,4 +206,14 @@ div.bg {
.full-width { .full-width {
width: 100%; width: 100%;
}
.small-middle-container{
margin: auto;
width: 25%;
overflow: auto;
}
.top-margin {
margin-top:10%;
} }

View file

@ -85,7 +85,7 @@ export class MovieDetailsComponent {
} }
public async deny() { public async deny() {
const result = await this.requestService.denyMovie({ id: this.theMovidDbId, reason: "" }).toPromise(); const result = await this.requestService.denyMovie({ id: this.movieRequest.id, reason: "" }).toPromise();
if (result.result) { if (result.result) {
this.movie.approved = false; this.movie.approved = false;
this.messageService.send(result.message, "Ok"); this.messageService.send(result.message, "Ok");
@ -95,10 +95,10 @@ export class MovieDetailsComponent {
} }
public async approve() { public async approve() {
const result = await this.requestService.approveMovie({ id: this.theMovidDbId }).toPromise(); const result = await this.requestService.approveMovie({ id: this.movieRequest.id }).toPromise();
if (result.result) { if (result.result) {
this.movie.approved = false; this.movie.approved = false;
this.messageService.send(result.message, "Ok"); this.messageService.send("Successfully Approved", "Ok");
} else { } else {
this.messageService.send(result.errorMessage, "Ok"); this.messageService.send(result.errorMessage, "Ok");
} }

View file

@ -4,6 +4,7 @@ import { Component, OnInit } from "@angular/core";
@Component({ @Component({
templateUrl: "./mediaserver.component.html", templateUrl: "./mediaserver.component.html",
styleUrls: ["./mediaserver.component.scss"], styleUrls: ["./mediaserver.component.scss"],
selector: "wizard-media-server",
}) })
export class MediaServerComponent implements OnInit { export class MediaServerComponent implements OnInit {

View file

@ -4,6 +4,7 @@ import { FormsModule } from "@angular/forms";
import { RouterModule, Routes } from "@angular/router"; import { RouterModule, Routes } from "@angular/router";
import {ConfirmationService, ConfirmDialogModule } from "primeng/primeng"; import {ConfirmationService, ConfirmDialogModule } from "primeng/primeng";
import { MatStepperModule } from "@angular/material";
import { CreateAdminComponent } from "./createadmin/createadmin.component"; import { CreateAdminComponent } from "./createadmin/createadmin.component";
import { EmbyComponent } from "./emby/emby.component"; import { EmbyComponent } from "./emby/emby.component";
@ -45,6 +46,7 @@ const routes: Routes = [
IdentityService, IdentityService,
EmbyService, EmbyService,
ConfirmationService, ConfirmationService,
MatStepperModule,
PlexOAuthService, PlexOAuthService,
], ],

View file

@ -9,9 +9,9 @@
if (existingBaseUrl && existingBaseUrl.length === 0) { if (existingBaseUrl && existingBaseUrl.length === 0) {
document.write('<base href="/' + existingBaseUrl + '" />'); document.write('<base href="/' + existingBaseUrl + '" />');
if (existingBaseUrl.length === 0) { if (existingBaseUrl.length === 0) {
document.write("<link rel=\"stylesheet\" href='/loading.css'/>") document.write("<link rel=\"stylesheet\" href='/loading.css' />")
} else { } else {
document.write("<link rel=\"stylesheet\" href='" + existingBaseUrl + "/loading.css'/>") document.write("<link rel=\"stylesheet\" href='" + existingBaseUrl + "/loading.css' />")
} }
} else { } else {
// Work out the base URL // Work out the base URL
@ -31,7 +31,7 @@
const data = JSON.parse(xmlhttp.responseText); const data = JSON.parse(xmlhttp.responseText);
hasFile = true; hasFile = true;
document.write('<base href="/' + data + '" />'); document.write('<base href="/' + data + '" />');
document.write("<link rel=\"stylesheet\" href=" + data + "/loading.css\"/>") document.write("<link rel=\"stylesheet\" href='" + data + "/loading.css' />")
window.localStorage.setItem("baseUrl", data); window.localStorage.setItem("baseUrl", data);
function tryGetBaseUrl(xmlhttp, url) { function tryGetBaseUrl(xmlhttp, url) {