From edcdc9b18dddb30f2726da282efcf77ab5ad3c1a Mon Sep 17 00:00:00 2001
From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
Date: Sat, 13 Feb 2021 00:27:03 +0300
Subject: Cleans Up OAuth Button

Removes OAuth button from home page, and redesigns it. Uses new
authorization functionality in auth.

Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/OAuth2Button.tsx            | 91 +++++++-----------------------
 src/pages/LandingPage.tsx                  | 11 +---
 src/tests/components/OAuth2Button.test.tsx |  2 +-
 3 files changed, 23 insertions(+), 81 deletions(-)

diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx
index 4fa3f61..231e560 100644
--- a/src/components/OAuth2Button.tsx
+++ b/src/components/OAuth2Button.tsx
@@ -1,88 +1,39 @@
 /** @jsx jsx */
 import { css, jsx } from "@emotion/react";
+import { 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;
+import authenticate, { OAuthScopes } from "../api/auth";
 
-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;
-}
 
-&:hover:enabled {
-  filter: brightness(110%);
-  cursor: pointer;
+interface OAuth2ButtonProps {
+    scopes?: OAuthScopes[],
+    path?: string
 }
 
-&:disabled {
-  background-color: ${colors.greyple};
-}
+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 redirectURI = encodeURIComponent(document.location.protocol + "//" + document.location.host + "/callback");
-
-    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"
-    );
-
-    const interval = setInterval(() => {
-        if (windowRef?.closed) {
-            clearInterval(interval);
-            disableFunction(false);
-        }
-    }, 500);
-
-    window.onmessage = (code: MessageEvent) => {
-        if (code.data.source) {
-            // React DevTools has a habit of sending messages, ignore them.
-            return;
-        }
-
-        if (code.isTrusted) {
-            windowRef?.close();
-
-            console.log("Code received:", code.data);
-
-            disableFunction(false);
-            clearInterval(interval);
-
-            window.onmessage = null;
-        }
-    };
-}
+const textStyles = css`
+  display: inline-block;
+  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+`;
 
-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>;
+    return (
+        <button disabled={disabled} onClick={() => authenticate(props.scopes, setDisabled, props.path)}>
+            <FontAwesomeIcon icon={faDiscord} css={iconStyles}/>
+            <span css={textStyles}>Discord Login</span>
+        </button>
+    );
 }
 
 export default OAuth2Button;
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 06fef46..efb3f05 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 
 import HeaderBar from "../components/HeaderBar";
 import FormListing from "../components/FormListing";
-import OAuth2Button from "../components/OAuth2Button";
 import Loading from "../components/Loading";
 import ScrollToTop from "../components/ScrollToTop";
 
@@ -28,16 +27,8 @@ function LandingPage(): JSX.Element {
         <HeaderBar/>
         <ScrollToTop/>
         <div>
-            <div css={css`
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-      `}>
+            <div css={css`display: flex; align-items: center; flex-direction: column;`}>
                 <h1>Available Forms</h1>
-
-                <OAuth2Button/>
-
-
                 {forms.map(form => (
                     <FormListing key={form.id} form={form}/>
                 ))}
diff --git a/src/tests/components/OAuth2Button.test.tsx b/src/tests/components/OAuth2Button.test.tsx
index f05159f..a773686 100644
--- a/src/tests/components/OAuth2Button.test.tsx
+++ b/src/tests/components/OAuth2Button.test.tsx
@@ -4,7 +4,7 @@ import OAuth2Button from "../../components/OAuth2Button";
 
 test("renders oauth2 sign in button text", () => {
     const { getByText } = render(<OAuth2Button />);
-    const button = getByText(/Sign in with Discord/i);
+    const button = getByText(/Discord Login/i);
     expect(button).toBeInTheDocument();
 });
 
-- 
cgit v1.2.3