2 files changed, 46 insertions, 2 deletions
diff --git a/src/components/AuthorizationSplash.tsx b/src/components/AuthorizationSplash.tsx
new file mode 100644
index 0000000..6fd211a
--- /dev/null
+++ b/src/components/AuthorizationSplash.tsx
@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { css, jsx } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { type RootState } from "../store";
+
+const splashStyles = css`
+position: fixed;
+width: 100%;
+height: 100%;
+top: 0;
+transition: background-color 0.5s ease, opacity 0.5s ease;
+`;
+
+const innerText = css`
+text-align: center;
+vertical-align: middle;
+`;
+
+const spacer = css`
+height: 30%;
+`;
+
+function AuthorizationSplash(): JSX.Element {
+    const authorizing = useSelector<RootState, boolean>(state => state.authorization.authorizing);
+
+    const background = `rgba(0, 0, 0, ${authorizing ? "0.90" : "0"})`;
+
+    return <div css={css`
+          ${splashStyles}
+          background-color: ${background};
+          opacity: ${authorizing ? "1" : "0"};
+          z-index: ${authorizing ? "10" : "-10"};
+        `}>
+        <div css={spacer}/>
+        <div css={innerText}>
+            <h1 css={{fontSize: "3em"}}>Authorization in progress</h1>
+            <h2>Login with Discord in the opened window and return to this tab once complete.</h2>
+        </div>
+    </div>;
+}
+
+export default AuthorizationSplash;
diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx
index be8d160..67399ee 100644
--- a/src/components/OAuth2Button.tsx
+++ b/src/components/OAuth2Button.tsx
@@ -55,8 +55,10 @@ async function login(props: OAuth2ButtonProps, errorDialog: React.RefObject<HTML
         }
 
         // Propagate to sentry
-        reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack;
-        throw reason.Error;
+        if (reason.Error) {
+            reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack;
+            throw reason.Error;
+        }
     });
 
     if (checkScopes(props.scopes) && props.rerender) {