mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-14 10:36:54 -07:00
tidusjar
parent
abd5a4889e
commit
fcd015c5ce
7 changed files with 262 additions and 180 deletions
|
|
@ -44,12 +44,9 @@
|
|||
</nav>
|
||||
|
||||
|
||||
<div *ngIf="showNav" class="container top-spacing">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<div *ngIf="!showNav">
|
||||
|
||||
<div [ngClass]="{'container top-spacing': showNav}">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,35 @@
|
|||
<div *ngIf="landingPageSettings && customizationSettings && background">
|
||||
<div *ngIf="landingPageSettings && customizationSettings && background">
|
||||
<img class="landingDiv bg" [style.background-image]="background" />
|
||||
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
landingDiv {
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
div.centered {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
img.bg {
|
||||
/* Set rules to fill background */
|
||||
min-height: 100%;
|
||||
min-width: 1024px;
|
||||
/* Set up proportionate scaling */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* Set up positioning */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
/*background-image: linear-gradient(-10deg, transparent 20%, rgba(255, 255, 255, 0.3) 20%, rgba(0, 0, 255, 0.3) 80%, transparent 80%), url("https://assets.fanart.tv/fanart/movies/155/moviebackground/the-dark-knight-51f269c2ce53a.jpg")*/
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) { /* Specific to this particular image */
|
||||
img.bg {
|
||||
left: 50%;
|
||||
margin-left: -512px; /* 50% */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<img class="landingDiv bg" [style.background-image]="background"/>
|
||||
|
||||
<div class="centered">
|
||||
<h3>Notice</h3>
|
||||
<div class="centered col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-push-5 col-md-2">
|
||||
<div *ngIf="customizationSettings.logo">
|
||||
<img [src]="customizationSettings.logo" style="width:100%"/>
|
||||
</div>
|
||||
<div *ngIf="!customizationSettings.logo">
|
||||
<img src="/images/logo.png" style="width:100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-push-3 vcenter">
|
||||
<div *ngIf="landingPageSettings.noticeEnabled">
|
||||
<h3><i class="fa fa-bell-o"></i> <b>Notice</b></h3>
|
||||
<span [innerHtml]="landingPageSettings.noticeText"></span>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="mediaServerStatus">
|
||||
<h3 class="online"><i class="fa fa-check-circle "></i> Currently Online</h3>
|
||||
<span>The media server is currently online</span>
|
||||
<span>Check this page for continous site updates.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-push-4 vcenter">
|
||||
<button [routerLink]="['/search']" class="btn btn-lg btn-success-outline">Contine</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,48 @@
|
|||
.landing-box {
|
||||
height: 150px;
|
||||
background: #333333 !important;
|
||||
border-radius: 2%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
box-shadow: 5px 3px 5px black;
|
||||
landingDiv {
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.landing-logo {
|
||||
position: relative;
|
||||
right: 20%;
|
||||
width: 300px
|
||||
}
|
||||
div.centered {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
img.bg {
|
||||
/* Set rules to fill background */
|
||||
min-height: 100%;
|
||||
min-width: 1024px;
|
||||
/* Set up proportionate scaling */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* Set up positioning */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.vcenter {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.online{
|
||||
color:lightgreen;
|
||||
}
|
||||
|
||||
.offline {
|
||||
color: #F44336
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) { /* Specific to this particular image */
|
||||
img.bg {
|
||||
left: 50%;
|
||||
margin-left: -512px; /* 50% */
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export class LandingPageComponent implements OnInit {
|
|||
this.settingsService.getLandingPage().subscribe(x => this.landingPageSettings = x);
|
||||
this.requestService.getRequestsCount().subscribe(x => this.requestCount = x);
|
||||
this.images.getRandomBackground().subscribe(x => {
|
||||
this.background = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.3) 20.1%, rgba(0,0,0,0.3) 80.1%, transparent 80%), url(' + x.url + ')');
|
||||
this.background = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%), url(' + x.url + ')');
|
||||
|
||||
});
|
||||
this.mediaServerStatus = true;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,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">
|
||||
<div *ngIf="form && customizationSettings && background">
|
||||
|
||||
<img class="landingDiv bg" [style.background-image]="background" />
|
||||
<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="" /> -->
|
||||
|
|
@ -15,10 +17,10 @@ include the remember me checkbox
|
|||
|
||||
<input type="email" id="inputEmail" class="form-control" formControlName="username" placeholder="Username" autofocus>
|
||||
<input type="password" id="inputPassword" class="form-control" formControlName="password" placeholder="Password">
|
||||
<button class="btn btn-success-outline" [disabled]="form.invalid" type="submit">Sign in</button>
|
||||
<button class="btn btn-success" type="submit">Sign in</button>
|
||||
</form><!-- /form -->
|
||||
<a [routerLink]="['/reset']" class="forgot-password">
|
||||
Reset your password?
|
||||
<a [routerLink]="['/reset']" class="forgot-password col-md-12">
|
||||
<b>Forgot your password?</b>
|
||||
</a>
|
||||
</div><!-- /card-container -->
|
||||
</div><!-- /container -->
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ $info-colour: #5bc0de;
|
|||
$warning-colour: #f0ad4e;
|
||||
$danger-colour: #d9534f;
|
||||
$success-colour: #5cb85c;
|
||||
$placeholder-colour: #101010;
|
||||
|
||||
body, html {
|
||||
height: 100% !important;
|
||||
|
|
@ -16,132 +17,192 @@ body, html {
|
|||
|
||||
}
|
||||
|
||||
landingDiv {
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
img.bg {
|
||||
/* Set rules to fill background */
|
||||
min-height: 100%;
|
||||
min-width: 1024px;
|
||||
/* Set up proportionate scaling */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* Set up positioning */
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
/*-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
-o-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
filter: blur(5px);*/
|
||||
}
|
||||
|
||||
.card-container.card {
|
||||
max-width: 350px;
|
||||
padding: 40px 40px;
|
||||
max-width: 500px;
|
||||
padding: 45px 45px;
|
||||
background-color: rgba(0,0,0, 0.0);
|
||||
border-radius: 5%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
height: 36px;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
height: 36px;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
/*
|
||||
* Card component
|
||||
*/
|
||||
.card {
|
||||
/*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
|
||||
background-color: $bg-colour;
|
||||
/* just in case there no content*/
|
||||
padding: 20px 25px 30px;
|
||||
margin: 0 auto 25px;
|
||||
margin-top: 50px;
|
||||
/* shadows and rounded borders */
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.card {
|
||||
/*background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)) !important;*/
|
||||
background-color: $bg-colour;
|
||||
/* just in case there no content*/
|
||||
padding: 20px 25px 30px;
|
||||
margin: 0 auto 25px;
|
||||
margin-top: 50px;
|
||||
/* shadows and rounded borders */
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
/*-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);*/
|
||||
}
|
||||
|
||||
.profile-img-card {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 0 auto 10px;
|
||||
display: block;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/*
|
||||
.profile-img-card {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 0 auto 10px;
|
||||
display: block;
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*
|
||||
* Form styles
|
||||
*/
|
||||
.profile-name-card {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 10px 0 0;
|
||||
min-height: 1em;
|
||||
}
|
||||
.profile-name-card {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 10px 0 0;
|
||||
min-height: 1em;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #fefefe;
|
||||
background-color: $bg-colour-disabled !important;
|
||||
}
|
||||
.form-control {
|
||||
color: black;
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
.reauth-email {
|
||||
display: block;
|
||||
color: white;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.reauth-email {
|
||||
display: block;
|
||||
color: white;
|
||||
line-height: 2;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-signin #inputEmail,
|
||||
.form-signin #inputPassword {
|
||||
direction: ltr;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-signin #inputEmail,
|
||||
.form-signin #inputPassword {
|
||||
direction: ltr;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.form-signin input[type=email],
|
||||
.form-signin input[type=password],
|
||||
.form-signin input[type=text],
|
||||
.form-signin button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.form-signin input[type=email],
|
||||
.form-signin input[type=password],
|
||||
.form-signin input[type=text],
|
||||
.form-signin button {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.btn.btn-signin {
|
||||
/*background-color: #4d90fe; */
|
||||
background-color: rgb(104, 145, 162);
|
||||
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
|
||||
padding: 0px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
-o-transition: all 0.218s;
|
||||
-moz-transition: all 0.218s;
|
||||
-webkit-transition: all 0.218s;
|
||||
transition: all 0.218s;
|
||||
.btn.btn-signin {
|
||||
/*background-color: #4d90fe; */
|
||||
background-color: rgb(104, 145, 162);
|
||||
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/
|
||||
padding: 0px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
-o-transition: all 0.218s;
|
||||
-moz-transition: all 0.218s;
|
||||
-webkit-transition: all 0.218s;
|
||||
transition: all 0.218s;
|
||||
}
|
||||
|
||||
.btn.btn-signin:hover,
|
||||
.btn.btn-signin:active,
|
||||
.btn.btn-signin:focus {
|
||||
background-color: rgb(12, 97, 33);
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: rgb(104, 145, 162);
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.forgot-password:hover,
|
||||
.forgot-password:active,
|
||||
.forgot-password:focus {
|
||||
color: rgb(12, 97, 33);
|
||||
}
|
||||
|
||||
|
||||
// Placeholders
|
||||
|
||||
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
color: $placeholder-colour;
|
||||
}
|
||||
|
||||
.btn.btn-signin:hover,
|
||||
.btn.btn-signin:active,
|
||||
.btn.btn-signin:focus {
|
||||
background-color: rgb(12, 97, 33);
|
||||
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: $placeholder-colour;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
color: rgb(104, 145, 162);
|
||||
::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: $placeholder-colour;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.forgot-password:hover,
|
||||
.forgot-password:active,
|
||||
.forgot-password:focus {
|
||||
color: rgb(12, 97, 33);
|
||||
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: $placeholder-colour;
|
||||
}
|
||||
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: $placeholder-colour;
|
||||
}
|
||||
|
|
@ -8,6 +8,9 @@ import { NotificationService } from '../services/notification.service';
|
|||
import { SettingsService } from '../services/settings.service';
|
||||
import { ICustomizationSettings } from '../interfaces/ISettings';
|
||||
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { ImageService } from '../services/image.service';
|
||||
|
||||
|
||||
@Component({
|
||||
templateUrl: './login.component.html',
|
||||
|
|
@ -17,7 +20,7 @@ export class LoginComponent implements OnInit {
|
|||
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private notify: NotificationService, private status: StatusService,
|
||||
private fb: FormBuilder, private settingsService : SettingsService) {
|
||||
private fb: FormBuilder, private settingsService: SettingsService, private images: ImageService, private sanitizer: DomSanitizer) {
|
||||
this.form = this.fb.group({
|
||||
username: ["", [Validators.required]],
|
||||
password: ["", [Validators.required]]
|
||||
|
|
@ -32,9 +35,13 @@ export class LoginComponent implements OnInit {
|
|||
|
||||
form: FormGroup;
|
||||
customizationSettings : ICustomizationSettings;
|
||||
background: any;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
|
||||
this.images.getRandomBackground().subscribe(x => {
|
||||
this.background = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-10deg, transparent 20%, rgba(0,0,0,0.7) 20.0%, rgba(0,0,0,0.7) 80.0%, transparent 80%),url(' + x.url + ')');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue