Plex OAuth window will now auto close

src/Ombi/ClientApp/src/app/login/login.component.ts

@@ -23,7 +23,6 @@ import { MatSnackBar } from "@angular/material/snack-bar";
   styleUrls: ["./login.component.scss"],
 })
 export class LoginComponent implements OnDestroy, OnInit {
-
   public form: FormGroup;
   public customizationSettings: ICustomizationSettings;
   public authenticationSettings: IAuthenticationSettings;
@@ -53,18 +52,28 @@ export class LoginComponent implements OnDestroy, OnInit {
   private errorValidation: string;
   private href: string;
 
-    private oAuthWindow: Window|null;
+  private oAuthWindow: Window | null;
 
-    constructor(private authService: AuthService, private router: Router, private status: StatusService,
+  constructor(
-                private fb: FormBuilder, private settingsService: SettingsService, private images: ImageService, private sanitizer: DomSanitizer,
+    private authService: AuthService,
-                private route: ActivatedRoute, @Inject(APP_BASE_HREF) href:string, private translate: TranslateService, private plexTv: PlexTvService,
+    private router: Router,
-                private store: StorageService, private readonly notify: MatSnackBar) {
+    private status: StatusService,
+    private fb: FormBuilder,
+    private settingsService: SettingsService,
+    private images: ImageService,
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+    @Inject(APP_BASE_HREF) href: string,
+    private translate: TranslateService,
+    private plexTv: PlexTvService,
+    private store: StorageService,
+    private readonly notify: MatSnackBar
+  ) {
     this.href = href;
-                    this.route.params
+    this.route.params.subscribe((params: any) => {
-            .subscribe((params: any) => {
       this.landingFlag = params.landing;
       if (!this.landingFlag) {
-                    this.settingsService.getLandingPage().subscribe(x => {
+        this.settingsService.getLandingPage().subscribe((x) => {
           if (x.enabled && !this.landingFlag) {
             this.router.navigate(["landingpage"]);
           }
@@ -78,7 +87,7 @@ export class LoginComponent implements OnDestroy, OnInit {
       rememberMe: [false],
     });
 
-        this.status.getWizardStatus().subscribe(x => {
+    this.status.getWizardStatus().subscribe((x) => {
       if (!x.result) {
         this.router.navigate(["Wizard"]);
       }
@@ -90,11 +99,17 @@ export class LoginComponent implements OnDestroy, OnInit {
   }
 
   public ngOnInit() {
-        this.settingsService.getAuthentication().subscribe(x => this.authenticationSettings = x);
+    this.settingsService
-        this.settingsService.getClientId().subscribe(x => this.clientId = x);
+      .getAuthentication()
-        this.settingsService.getCustomization().subscribe(x => this.customizationSettings = x);
+      .subscribe((x) => (this.authenticationSettings = x));
-        this.images.getRandomBackground().subscribe(x => {
+    this.settingsService.getClientId().subscribe((x) => (this.clientId = x));
-            this.background = this.sanitizer.bypassSecurityTrustStyle("url(" + x.url + ")");
+    this.settingsService
+      .getCustomization()
+      .subscribe((x) => (this.customizationSettings = x));
+    this.images.getRandomBackground().subscribe((x) => {
+      this.background = this.sanitizer.bypassSecurityTrustStyle(
+        "url(" + x.url + ")"
+      );
     });
     this.timer = setInterval(() => {
       this.cycleBackground();
@@ -105,27 +120,37 @@ export class LoginComponent implements OnDestroy, OnInit {
       this.baseUrl = base;
     }
 
-        this.translate.get("Login.Errors.IncorrectCredentials").subscribe(x => this.errorBody = x);
+    this.translate
-        this.translate.get("Common.Errors.Validation").subscribe(x => this.errorValidation = x);
+      .get("Login.Errors.IncorrectCredentials")
+      .subscribe((x) => (this.errorBody = x));
+    this.translate
+      .get("Common.Errors.Validation")
+      .subscribe((x) => (this.errorValidation = x));
   }
 
   public onSubmit(form: FormGroup) {
     if (form.invalid) {
       this.notify.open(this.errorValidation, "OK", {
-                duration: 300000
+        duration: 300000,
       });
       return;
     }
     const value = form.value;
-        const user = { password: value.password, username: value.username, rememberMe: value.rememberMe, usePlexOAuth: false, plexTvPin: { id: 0, code: "" } };
+    const user = {
-        this.authService.requiresPassword(user).subscribe(x => {
+      password: value.password,
+      username: value.username,
+      rememberMe: value.rememberMe,
+      usePlexOAuth: false,
+      plexTvPin: { id: 0, code: "" },
+    };
+    this.authService.requiresPassword(user).subscribe((x) => {
       if (x && this.authenticationSettings.allowNoPassword) {
         // Looks like this user requires a password
         this.authenticationSettings.allowNoPassword = false;
         return;
       }
-            this.authService.login(user)
+      this.authService.login(user).subscribe(
-                .subscribe(x => {
+        (x) => {
           this.store.save("id_token", x.access_token);
 
           if (this.authService.loggedIn()) {
@@ -133,15 +158,16 @@ export class LoginComponent implements OnDestroy, OnInit {
             this.router.navigate(["/"]);
           } else {
             this.notify.open(this.errorBody, "OK", {
-                            duration: 3000
+              duration: 3000,
             });
           }
-
+        },
-                }, err => {
+        (err) => {
           this.notify.open(this.errorBody, "OK", {
-                    duration: 3000000
+            duration: 3000000,
-                })
           });
+        }
+      );
     });
   }
 
@@ -149,17 +175,28 @@ export class LoginComponent implements OnDestroy, OnInit {
     if (this.oAuthWindow) {
       this.oAuthWindow.close();
     }
-        this.oAuthWindow = window.open(window.location.toString(), "_blank", `toolbar=0,
+    this.oAuthWindow = window.open(
+      window.location.toString(),
+      "_blank",
+      `toolbar=0,
         location=0,
         status=0,
         menubar=0,
         scrollbars=1,
         resizable=1,
         width=500,
-        height=500`);
+        height=500`
+    );
     this.plexTv.GetPin(this.clientId, this.appName).subscribe((pin: any) => {
-
+      this.authService
-            this.authService.login({ usePlexOAuth: true, password: "", rememberMe: true, username: "", plexTvPin: pin }).subscribe(x => {
+        .login({
+          usePlexOAuth: true,
+          password: "",
+          rememberMe: true,
+          username: "",
+          plexTvPin: pin,
+        })
+        .subscribe((x) => {
           this.oAuthWindow!.location.replace(x.url);
 
           if (this.pinTimer) {
@@ -167,19 +204,18 @@ export class LoginComponent implements OnDestroy, OnInit {
           }
 
           this.pinTimer = setInterval(() => {
-                    if(this.oAuthWindow.closed) {
               this.oauthLoading = true;
               this.getPinResult(x.pinId);
-                    }
           }, 1000);
         });
     });
   }
 
   public getPinResult(pinId: number) {
+    this.authService.oAuth(pinId).subscribe(
+      (x) => {
+        if (x.access_token) {
           clearInterval(this.pinTimer);
-        this.authService.oAuth(pinId).subscribe(x => {
-            if(x.access_token) {
           this.store.save("id_token", x.access_token);
 
           if (this.authService.loggedIn()) {
@@ -193,19 +229,22 @@ export class LoginComponent implements OnDestroy, OnInit {
             return;
           }
         }
-          this.notify.open("Could not log you in!", "OK", {
+        // if (notifyUser) {
-            duration: 3000
+        //   this.notify.open("Could not log you in!", "OK", {
-        });
+        //     duration: 3000,
+        //   });
+        // }
         this.oauthLoading = false;
-
+      },
-          }, err => {
+      (err) => {
         console.log(err);
-              this.notify.open(err.body, "OK", {
+        this.notify.open("You are not authenticated with Ombi", "OK", {
-                duration: 3000
+          duration: 3000,
         });
 
         this.router.navigate(["login"]);
-          });
+      }
+    );
   }
 
   public ngOnDestroy() {
@@ -214,12 +253,13 @@ export class LoginComponent implements OnDestroy, OnInit {
   }
 
   private cycleBackground() {
-        this.images.getRandomBackground().subscribe(x => {
+    this.images.getRandomBackground().subscribe((x) => {
       this.background = "";
     });
-        this.images.getRandomBackground().subscribe(x => {
+    this.images.getRandomBackground().subscribe((x) => {
-            this.background = this.sanitizer
+      this.background = this.sanitizer.bypassSecurityTrustStyle(
-                .bypassSecurityTrustStyle("url(" + x.url + ")");
+        "url(" + x.url + ")"
+      );
     });
   }
 }