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

@@ -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 = (

src/pages/login/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
-import Login from '../components/Login';
+import Login from '../../components/Login';
 
 const LoginPage: NextPage = () => {
   return <Login />;

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;

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;
     }
   }