From 4d0c23c26957d101502bc8706a5fc4ba0c22b5a5 Mon Sep 17 00:00:00 2001
From: Alex Zoitos <azoitos1@gmail.com>
Date: Sat, 10 Oct 2020 09:00:40 -0400
Subject: [PATCH] When opening plex Oauth window, open an empty page then
 redirect to plex oauth (#127)

* feat(frontend): custom toast

* refactor(frontend): move toast width styling to globals

* feat(frontend): add loading spinner for browser popup
---
 src/pages/_app.tsx                       |  2 +-
 src/pages/{login.tsx => login/index.tsx} |  4 ++--
 src/pages/login/plex/loading.tsx         | 12 ++++++++++++
 src/utils/plex.ts                        |  7 ++++++-
 4 files changed, 21 insertions(+), 4 deletions(-)
 rename src/pages/{login.tsx => login/index.tsx} (58%)
 create mode 100644 src/pages/login/plex/loading.tsx

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 81f2fa9d2..4893e2b68 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -55,7 +55,7 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
     setCookie(null, 'locale', currentLocale, { path: '/' });
   }, [currentLocale]);
 
-  if (router.asPath === '/login') {
+  if (router.pathname.match(/(login|setup)/)) {
     component = <Component {...pageProps} />;
   } else {
     component = (
diff --git a/src/pages/login.tsx b/src/pages/login/index.tsx
similarity index 58%
rename from src/pages/login.tsx
rename to src/pages/login/index.tsx
index cb975e43e..25c21909a 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { NextPage } from 'next';
-import Login from '../components/Login';
+import type { NextPage } from 'next';
+import Login from '../../components/Login';
 
 const LoginPage: NextPage = () => {
   return <Login />;
diff --git a/src/pages/login/plex/loading.tsx b/src/pages/login/plex/loading.tsx
new file mode 100644
index 000000000..c8ba268a6
--- /dev/null
+++ b/src/pages/login/plex/loading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import LoadingSpinner from '../../../components/Common/LoadingSpinner';
+
+const PlexLoading: React.FC = () => {
+  return (
+    <div>
+      <LoadingSpinner />
+    </div>
+  );
+};
+
+export default PlexLoading;
diff --git a/src/utils/plex.ts b/src/utils/plex.ts
index 54ecab360..400ef7eb5 100644
--- a/src/utils/plex.ts
+++ b/src/utils/plex.ts
@@ -182,8 +182,10 @@ class PlexOAuth {
       : screen.height;
     const left = width / 2 - w / 2 + dualScreenLeft;
     const top = height / 2 - h / 2 + dualScreenTop;
+
+    //Set url to login/plex/loading so browser doesn't block popup
     const newWindow = window.open(
-      url,
+      '/login/plex/loading',
       title,
       'scrollbars=yes, width=' +
         w +
@@ -197,6 +199,9 @@ class PlexOAuth {
     if (newWindow) {
       newWindow.focus();
       this.popup = newWindow;
+      setTimeout(() => {
+        newWindow.location.href = url;
+      }, 1500);
       return this.popup;
     }
   }