+
+
diff --git a/src/Ombi/ClientApp/app/login/login.component.scss b/src/Ombi/ClientApp/app/login/login.component.scss
index 496eca24c..39160995b 100644
--- a/src/Ombi/ClientApp/app/login/login.component.scss
+++ b/src/Ombi/ClientApp/app/login/login.component.scss
@@ -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 {
}
-.card-container.card {
- max-width: 350px;
- padding: 40px 40px;
+landingDiv {
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
}
-.btn {
- font-weight: 700;
- height: 36px;
- -moz-user-select: none;
- -webkit-user-select: none;
- user-select: none;
- cursor: default;
+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 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-container.card {
+ 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%;
}
-.profile-img-card {
- width: 96px;
- height: 96px;
- margin: 0 auto 10px;
- display: block;
- -moz-border-radius: 50%;
- -webkit-border-radius: 50%;
- border-radius: 50%;
-}
-/*
+
+
+ .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);*/
+ }
+
+ .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;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/app/login/login.component.ts b/src/Ombi/ClientApp/app/login/login.component.ts
index b9a3801fc..6742d3eb4 100644
--- a/src/Ombi/ClientApp/app/login/login.component.ts
+++ b/src/Ombi/ClientApp/app/login/login.component.ts
@@ -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 + ')');
+ });
}