Merge pull request #141 from python-discord/discord-oauth

1 files changed, 56 insertions, 64 deletions

diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx
index 4fa3f61..885c080 100644
--- a/src/components/OAuth2Button.tsx
+++ b/src/components/OAuth2Button.tsx
@@ -1,88 +1,80 @@
 /** @jsx jsx */
 import { css, jsx } from "@emotion/react";
+import React, { useState } from "react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 
-import colors from "../colors";
-import { useState } from "react";
-
-const OAUTH2_CLIENT_ID = process.env.REACT_APP_OAUTH2_CLIENT_ID;
-
-const buttonStyling = css`
-display: flex;
-background-color: ${colors.blurple};
-border: none;
-color: white;
-font-family: "Hind", "Helvetica", "Arial", sans-serif;
-border-radius: 5px;
-padding-top: 10px;
-padding-bottom: 10px;
-padding-right: 20px;
-padding-left: 20px;
-outline: none;
-transition: filter 100ms;
-font-size: 1.2em;
-align-items: center;
-
-span {
-  vertical-align: middle;
-}
+import authenticate, { APIErrors, checkScopes, OAuthScopes } from "../api/auth";
+import { selectable } from "../commonStyles";
 
-&:hover:enabled {
-  filter: brightness(110%);
-  cursor: pointer;
-}
 
-&:disabled {
-  background-color: ${colors.greyple};
+interface OAuth2ButtonProps {
+    scopes?: OAuthScopes[],
+    rerender: () => void
 }
+
+const iconStyles = css`
+  position: relative;
+  top: 0.3rem;
+  padding-left: 0.65rem;
+  font-size: 1.2em;
 `;
 
-function doLogin(disableFunction: (newState: boolean) => void) {
-    disableFunction(true);
+const textStyles = css`
+  display: inline-block;
+  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+`;
 
-    const redirectURI = encodeURIComponent(document.location.protocol + "//" + document.location.host + "/callback");
+const errorStyles =  css`
+  position: absolute;
+  visibility: hidden;
+  width: 100%;
+  left: 0;
 
-    const windowRef = window.open(
-        `https://discord.com/api/oauth2/authorize?client_id=${OAUTH2_CLIENT_ID}&response_type=code&scope=identify&redirect_uri=${redirectURI}&prompt=none`,
-        "Discord_OAuth2",
-        "height=700,width=500,location=no,menubar=no,resizable=no,status=no,titlebar=no,left=300,top=300"
-    );
+  text-align: center;
+  white-space: normal;
+  box-sizing: border-box;
 
-    const interval = setInterval(() => {
-        if (windowRef?.closed) {
-            clearInterval(interval);
-            disableFunction(false);
-        }
-    }, 500);
+  padding: 0 15rem;
+  @media (max-width: 750px) {
+    padding: 0 5rem;
+  }
 
-    window.onmessage = (code: MessageEvent) => {
-        if (code.data.source) {
-            // React DevTools has a habit of sending messages, ignore them.
-            return;
-        }
-
-        if (code.isTrusted) {
-            windowRef?.close();
+  color: red;
+  margin-top: 2.5rem;
+`;
 
-            console.log("Code received:", code.data);
+async function login(props: OAuth2ButtonProps, errorDialog: React.RefObject<HTMLDivElement>, setDisabled: (newState: boolean) => void) {
+    await authenticate(props.scopes, setDisabled).catch((reason: APIErrors) => {
+        // Display Error Message
+        if (errorDialog.current) {
+            errorDialog.current.style.visibility = "visible";
+            errorDialog.current.textContent = reason.Message;
+            errorDialog.current.scrollIntoView({behavior: "smooth"});
+        }
 
-            disableFunction(false);
-            clearInterval(interval);
+        // Propagate to sentry
+        reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack;
+        throw reason.Error;
+    });
 
-            window.onmessage = null;
-        }
-    };
+    if (checkScopes(props.scopes)) {
+        props.rerender();
+    }
 }
 
-function OAuth2Button(): JSX.Element {
+function OAuth2Button(props: OAuth2ButtonProps): JSX.Element {
     const [disabled, setDisabled] = useState<boolean>(false);
-
-    return <button disabled={disabled} onClick={() => doLogin(setDisabled)} css={buttonStyling}>
-        <span css={{marginRight: "10px"}}><FontAwesomeIcon icon={faDiscord} css={{fontSize: "2em", marginTop: "3px"}}/></span>
-        <span>Sign in with Discord</span>
-    </button>;
+    const errorDialog: React.RefObject<HTMLDivElement> = React.useRef(null);
+
+    return <span>
+        <button disabled={disabled} onClick={() => login(props, errorDialog, setDisabled)}>
+            <FontAwesomeIcon icon={faDiscord} css={iconStyles}/>
+            <span css={textStyles}>Discord Login</span>
+        </button>
+        <div css={[errorStyles, selectable]} ref={errorDialog}/>
+    </span>;
 }
 
 export default OAuth2Button;