From f5024e46fd68c153ba20e094ec1e17012e4ae4fc Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Tue, 9 Jul 2024 20:21:39 +0100
Subject: Add AuthorizationSplash to display above content when auth in
 progress

---
 src/components/AuthorizationSplash.tsx | 42 ++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/AuthorizationSplash.tsx

(limited to 'src/components')

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;
-- 
cgit v1.2.3


From 0bf31556d7afc359ce0ebb145c962f224e547bd1 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Tue, 9 Jul 2024 21:11:13 +0100
Subject: Gracefully handle user cancelled authorization

---
 src/api/auth.ts                 | 9 ++++++++-
 src/components/OAuth2Button.tsx | 6 ++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 2838e4b..11baaa6 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -36,6 +36,7 @@ export enum APIErrorMessages {
     BackendValidationDev = "Backend could not authorize with Discord, possibly due to being on a preview branch. Please contact the forms team.",
     BackendUnresponsive = "Unable to reach the backend, please retry, or contact the forms team.",
     BadResponse = "The server returned a bad response, please contact the forms team.",
+    AccessRejected = "Authorization was cancelled.",
     Unknown = "An unknown error occurred, please contact the forms team."
 }
 
@@ -98,7 +99,7 @@ export function checkScopes(scopes?: OAuthScopes[]): boolean {
  * @returns {code, cleanedScopes} The discord authorization code and the scopes the code is granted for.
  * @throws {Error} Indicates that an integrity check failed.
  */
-export async function getDiscordCode(scopes: OAuthScopes[], disableFunction?: (disable: boolean) => void): Promise<{code: string, cleanedScopes: OAuthScopes[]}> {
+export async function getDiscordCode(scopes: OAuthScopes[], disableFunction?: (disable: boolean) => void): Promise<{code: string | null, cleanedScopes: OAuthScopes[]}> {
     const cleanedScopes = ensureMinimumScopes(scopes, OAuthScopes.Identify);
 
     // Generate a new user state
@@ -267,6 +268,12 @@ export default async function authorize(scopes: OAuthScopes[] = [], disableFunct
 
     if (disableFunction) { disableFunction(true); }
     await getDiscordCode(scopes, disableFunction).then(async discord_response =>{
+        if (!discord_response.code) {
+            throw {
+                Message: APIErrorMessages.AccessRejected,
+                Error: null
+            };
+        }
         await requestBackendJWT(discord_response.code).then(backend_response => {
             const options: CookieSetOptions = {sameSite: "strict", secure: PRODUCTION, path: "/", expires: new Date(3000, 1)};
             cookies.set(CookieNames.Username, backend_response.username, options);
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) {
-- 
cgit v1.2.3