Fixed the Plex OAuth when going through the wizard

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

@@ -1,18 +1,20 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { PlatformLocation } from "@angular/common";
-import { PlexService, PlexTvService, SettingsService } from "../../services";
+import { AuthService } from "../../auth/auth.service";
+import { PlexOAuthService, PlexService, PlexTvService, SettingsService } from "../../services";
 import { IdentityService, NotificationService } from "../../services";
 
 @Component({
     templateUrl: "./plex.component.html",
 })
-export class PlexComponent implements OnInit {
+export class PlexComponent implements OnInit, OnDestroy {
 
     public login: string;
     public password: string;
     public baseUrl: string;
+    public pinTimer: any;
 
     private clientId: string;
 
@@ -20,7 +22,8 @@ export class PlexComponent implements OnInit {
         private notificationService: NotificationService,
         private identityService: IdentityService, private plexTv: PlexTvService,
         private settingsService: SettingsService,
-                private location: PlatformLocation) { }
+        private location: PlatformLocation, private authService: AuthService,
+        private plexOauth: PlexOAuthService) { }
 
     public ngOnInit(): void {
         const base = this.location.getBaseHrefFromDOM();
@@ -57,12 +60,56 @@ export class PlexComponent implements OnInit {
     }
 
     public oauth() {
+        const oAuthWindow = window.open(window.location.toString(), "_blank", `toolbar=0,
+        location=0,
+        status=0,
+        menubar=0,
+        scrollbars=1,
+        resizable=1,
+        width=500,
+        height=500`);
         this.plexTv.GetPin(this.clientId, "Ombi").subscribe((pin: any) => {
-            this.plexService.oAuth({ wizard: true, pin }).subscribe(x => {
-                if (x.url) {
-                    window.location.href = x.url;
+
+            this.authService.login({ usePlexOAuth: true, password: "", rememberMe: true, username: "", plexTvPin: pin }).subscribe(x => {
+                oAuthWindow!.location.replace(x.url);
+
+                this.pinTimer = setInterval(() => {
+                    // this.notify.info("Authenticating", "Loading... Please Wait");
+                    this.getPinResult(x.pinId);
+                }, 10000);
+            });
+        });
+    }
+
+    public getPinResult(pinId: number) {
+        this.plexOauth.oAuth(pinId).subscribe(x => {
+            if (!x.accessToken) {
+                return;
+                // RETURN
+            }
+
+            this.identityService.createWizardUser({
+                username: "",
+                password: "",
+                usePlexAdminAccount: true,
+            }).subscribe(u => {
+                if (u.result) {
+                    this.authService.oAuth(pinId).subscribe(c => {
+                        localStorage.setItem("id_token", c.access_token);
+                        this.router.navigate(["login"]);
+                    });
+                } else {
+
+                    if (u.errors.length > 0) {
+                        console.log(u.errors[0]);
+                    }
+                    return;
                 }
             });
         });
     }
+
+    public ngOnDestroy() {
+        clearInterval(this.pinTimer);
+    }
 }

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

@@ -1,14 +0,0 @@
-
-<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">
-<h4 class="media-heading landing-title">Plex Authentication</h4>
-<div class="form-group">
-    <label for="username" class="control-label">Please Wait</label>
-</div>
-</div>
-</div>
-</div>
-
-<p-confirmDialog></p-confirmDialog>

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

@@ -1,60 +0,0 @@
-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";
-
-@Component({
-    templateUrl: "./plexoauth.component.html",
-})
-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 location: PlatformLocation) {
-
-        this.route.params
-            .subscribe((params: any) => {
-                this.pinId = params.pin;
-            });
-    }
-
-    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;
-                // RETURN
-            }
-
-            this.identityService.createWizardUser({
-                      username: "",
-                      password: "",
-                      usePlexAdminAccount: true,
-                    }).subscribe(u => {
-                      if (u.result) {
-                          this.auth.oAuth(this.pinId).subscribe(c => {
-                              localStorage.setItem("id_token", c.access_token);
-                              this.router.navigate(["login"]);
-                            });
-                      } else {
-                          
-                        if(u.errors.length > 0) {
-                            console.log(u.errors[0]);
-                        }
-                        return;
-                      }
-                    });
-                 
-        });
-    }
-}

src/Ombi/ClientApp/app/wizard/wizard.module.ts

@@ -15,7 +15,6 @@ import { EmbyService } from "../services";
 import { PlexService } from "../services";
 import { IdentityService } from "../services";
 import { PlexOAuthService } from "../services";
-import { PlexOAuthComponent } from "./plex/plexoauth.component";
 
 const routes: Routes = [
     { path: "", component: WelcomeComponent},
@@ -23,7 +22,6 @@ const routes: Routes = [
     { path: "Plex", component: PlexComponent},
     { path: "Emby", component: EmbyComponent},
     { path: "CreateAdmin", component: CreateAdminComponent},
-    { path: "OAuth/:pin", component: PlexOAuthComponent},
 ];
 @NgModule({
     imports: [
@@ -36,7 +34,6 @@ const routes: Routes = [
         WelcomeComponent,
         MediaServerComponent,
         PlexComponent,
-        PlexOAuthComponent,
         CreateAdminComponent,
         EmbyComponent,
     ],