Fixed #2678

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

@@ -1,5 +1,5 @@
 
-<img class="landing-header" src="/images/logo.png" width="300" />
+<img class="landing-header" src="{{baseUrl}}/images/logo.png" width="300" />
 <div class="landing-block shadow">
 <div class="media">
 <div id="contentBody" class="media-body">

src/Ombi/ClientApp/app/wizard/createadmin/createadmin.component.ts

@@ -1,26 +1,35 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { PlatformLocation } from "@angular/common";
 import { IdentityService } from "../../services";
 import { NotificationService } from "../../services";
 
 @Component({
     templateUrl: "./createadmin.component.html",
 })
-export class CreateAdminComponent {
+export class CreateAdminComponent implements OnInit {
 
     public username: string;
     public password: string;
+    public baseUrl: string;
 
     constructor(private identityService: IdentityService, private notificationService: NotificationService,
-                private router: Router) { }
+                private router: Router, private location: PlatformLocation) { }
+
+    public ngOnInit(): void {
+        const base = this.location.getBaseHrefFromDOM();
+        if (base.length > 1) {
+            this.baseUrl = base;
+        }
+    }
 
     public createUser() {
-        this.identityService.createWizardUser({username: this.username, password: this.password, usePlexAdminAccount: false}).subscribe(x => {
+        this.identityService.createWizardUser({ username: this.username, password: this.password, usePlexAdminAccount: false }).subscribe(x => {
             if (x.result) {
                 this.router.navigate(["login"]);
             } else {
-                if(x.errors.length > 0) {
+                if (x.errors.length > 0) {
                     this.notificationService.error(x.errors[0]);
                 }
             }

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

@@ -1,5 +1,5 @@
 
-<img class="landing-header" src="/images/logo.png" width="300" />
+<img class="landing-header" src="{{baseUrl}}/images/logo.png" width="300" />
 <div class="landing-block shadow">
 <div class="media">
 <div id="contentBody" class="media-body">

src/Ombi/ClientApp/app/wizard/emby/emby.component.ts

@@ -4,6 +4,7 @@ import { Router } from "@angular/router";
 import { EmbyService } from "../../services";
 import { NotificationService } from "../../services";
 
+import { PlatformLocation } from "@angular/common";
 import { IEmbySettings } from "../../interfaces";
 
 @Component({
@@ -12,13 +13,19 @@ import { IEmbySettings } from "../../interfaces";
 export class EmbyComponent implements OnInit {
 
     public embySettings: IEmbySettings;
+    public baseUrl: string;
 
     constructor(private embyService: EmbyService,
                 private router: Router,
-                private notificationService: NotificationService) {
+                private notificationService: NotificationService, 
+                private location: PlatformLocation) {
     }
 
     public ngOnInit() {
+        const base = this.location.getBaseHrefFromDOM();
+        if (base.length > 1) {
+            this.baseUrl = base;
+        }
         this.embySettings = {
             servers: [],
             id: 0,

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

@@ -1,29 +1,37 @@
-
-<img class="landing-header" src="/images/logo.png" width="300" />
+<img class="landing-header" src="{{baseUrl}}/images/logo.png" width="300" />
 <div class="landing-block shadow">
-    <div class="media">
+    <div class="container">
         <div id="contentBody" class="media-body">
             <h4 class="media-heading landing-title wizard-heading" id="statusTitle">Please choose your media server</h4>
-            <div class="form-group">
-                <div class="row">
-                    <a (click)="emby()" id="embyImg">
-                        <img class="wizard-img" src="/images/emby-logo-dark.png" />
-                    </a>
+            <div class="form-group small-top-spacing">
+                <div class="col-md-6">
+                    <div class="row">
+                        <a routerLink="/Wizard/Emby" id="embyImg">
+                            <img class="wizard-img" src="{{baseUrl}}/images/emby-logo-dark.png" />
+                        </a>
+                    </div>
                 </div>
-                <div class="row">
-                    <a (click)="plex()" id="plexImg">
-                        <img class="wizard-img" src="/images/plex-logo-reversed.png" />
-                    </a>
+                <div class="col-md-6">
+                    <div class="row">
+                        <a routerLink="/Wizard/Plex" id="plexImg">
+                            <img class="wizard-img" src="{{baseUrl}}/images/plex-logo-reversed.png" />
+                        </a>
+                    </div>
                 </div>
-                <div class="row">
-                    <button (click)="skip()" data-test="skipbtn" class="btn btn-primary-outline wizard-img" id="plexImg">
-                        Skip
-                    </button>
+                <div class="col-md-12 top-spacing">
+                    <div class="row">
+                        <div class="text-center">If you do not yet want to setup a media server you can use the
+                            skip below. You can later setup your media servers via the settings.</div>
+                        <div class="row">
+                            <button routerLink="Wizard/CreateAdmin" data-test="skipbtn" class="btn btn-primary-outline wizard-img"
+                                id="plexImg">
+                                Skip
+                            </button>
+                        </div>
+                    </div>
                 </div>
 
             </div>
         </div>
-        </div>
+    </div>
 </div>
-
-

src/Ombi/ClientApp/app/wizard/mediaserver/mediaserver.component.scss

@@ -0,0 +1,12 @@
+
+.vr {
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    height: 100%;
+}
+
+.top-spacing {
+    margin-top:10%;
+}
+.small-top-spacing {
+    margin-top:5%;
+}

src/Ombi/ClientApp/app/wizard/mediaserver/mediaserver.component.ts

@@ -1,21 +1,19 @@
-import { Component } from "@angular/core";
-import { Router } from "@angular/router";
+import { PlatformLocation } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
 
 @Component({
     templateUrl: "./mediaserver.component.html",
+    styleUrls: ["./mediaserver.component.scss"],
 })
-export class MediaServerComponent {
-    constructor(private router: Router) { }
+export class MediaServerComponent implements OnInit {
 
-    public plex() {
-        this.router.navigate(["Wizard/Plex"]);
-    }
-
-    public emby() {
-        this.router.navigate(["Wizard/Emby"]);
-    }
+    public baseUrl: string;
+    constructor(private location: PlatformLocation) { }
 
-    public skip() {
-        this.router.navigate(["Wizard/CreateAdmin"]);
+    public ngOnInit(): void {
+        const base = this.location.getBaseHrefFromDOM();
+        if (base.length > 1) {
+            this.baseUrl = base;
+        }
     }
 }

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

@@ -1,5 +1,5 @@
 
-<img class="landing-header" src="/images/logo.png" width="300" />
+<img class="landing-header" src="{{baseUrl}}/images/logo.png" width="300" />
 <div class="landing-block shadow">
 <div class="media">
 <div id="contentBody" class="media-body">

src/Ombi/ClientApp/app/wizard/plex/plex.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
+import { PlatformLocation } from "@angular/common";
 import { PlexService, PlexTvService, SettingsService } from "../../services";
 import { IdentityService, NotificationService } from "../../services";
 
@@ -11,15 +12,21 @@ export class PlexComponent implements OnInit {
 
     public login: string;
     public password: string;
+    public baseUrl: string;
 
     private clientId: string;
 
     constructor(private plexService: PlexService, private router: Router,
                 private notificationService: NotificationService,
                 private identityService: IdentityService, private plexTv: PlexTvService,
-                private settingsService: SettingsService) { }
+                private settingsService: SettingsService,
+                private location: PlatformLocation) { }
 
     public ngOnInit(): void {
+        const base = this.location.getBaseHrefFromDOM();
+        if (base.length > 1) {
+            this.baseUrl = base;
+        }
         this.settingsService.getClientId().subscribe(x => this.clientId = x);
     }
 

src/Ombi/ClientApp/app/wizard/plex/plexoauth.component.html

@@ -1,5 +1,5 @@
 
-<img class="landing-header" src="/images/logo.png" width="300" />
+<img class="landing-header" src="{{baseUrl}}/images/logo.png" width="300" />
 <div class="landing-block shadow">
 <div class="media">
 <div id="contentBody" class="media-body">

src/Ombi/ClientApp/app/wizard/plex/plexoauth.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 
+import { PlatformLocation } from "@angular/common";
 import { AuthService } from "../../auth/auth.service";
 import { IdentityService, PlexOAuthService } from "../../services";
 
@@ -9,12 +10,14 @@ import { IdentityService, PlexOAuthService } from "../../services";
 })
 export class PlexOAuthComponent implements OnInit {
     public pinId: number;
+    public baseUrl: string;
 
     constructor(private route: ActivatedRoute,
                 private plexOauth: PlexOAuthService,
                 private identityService: IdentityService,
                 private router: Router,
-                private auth: AuthService) {
+                private auth: AuthService,
+                private location: PlatformLocation) {
 
         this.route.params
             .subscribe((params: any) => {
@@ -23,6 +26,10 @@ export class PlexOAuthComponent implements OnInit {
     }
 
     public ngOnInit(): void {
+        const base = this.location.getBaseHrefFromDOM();
+        if (base.length > 1) {
+            this.baseUrl = base;
+        }
         this.plexOauth.oAuth(this.pinId).subscribe(x => {
             if (!x.accessToken) {
                 return;

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

@@ -1,5 +1,5 @@
 
-<img class="landing-header" src="/images/logo.png" width="300" />
+<img class="landing-header" src="{{baseUrl}}/images/logo.png" width="300" />
 <div id="area" class="landing-block shadow">
 
     <div class="media">

src/Ombi/ClientApp/app/wizard/welcome/welcome.component.ts

@@ -1,11 +1,22 @@
-import { Component } from "@angular/core";
+import { PlatformLocation } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
 @Component({
     templateUrl: "./welcome.component.html",
 })
-export class WelcomeComponent {
-    constructor(private router: Router) { }
+export class WelcomeComponent implements OnInit {
+    
+    public baseUrl: string;
+    
+    constructor(private router: Router, private location: PlatformLocation) { }
+
+    public ngOnInit(): void {
+        const base = this.location.getBaseHrefFromDOM();
+        if (base.length > 1) {
+            this.baseUrl = base;
+        }
+    }
 
     public next() {
         this.router.navigate(["Wizard/MediaServer"]);