diff options
| -rw-r--r-- | src/App.tsx | 4 | ||||
| -rw-r--r-- | src/components/OAuth2Button.tsx | 42 | ||||
| -rw-r--r-- | src/index.tsx | 2 | ||||
| -rw-r--r-- | src/pages/CallbackPage.tsx | 17 | ||||
| -rw-r--r-- | src/pages/LandingPage.tsx | 5 |
5 files changed, 65 insertions, 5 deletions
diff --git a/src/App.tsx b/src/App.tsx index 3af6676..19ba6a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,12 +12,14 @@ import { CSSTransition, TransitionGroup } from "react-transition-group"; import LandingPage from "./pages/LandingPage"; import FormPage from "./pages/FormPage"; +import CallbackPage from "./pages/CallbackPage"; import globalStyles from "./globalStyles"; const routes = [ { path: "/", Component: LandingPage }, - { path: "/form/:id", Component: FormPage} + { path: "/form/:id", Component: FormPage}, + { path: "/callback", Component: CallbackPage } ] function App() { diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx index 9cd009a..1b3d588 100644 --- a/src/components/OAuth2Button.tsx +++ b/src/components/OAuth2Button.tsx @@ -5,6 +5,9 @@ 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; @@ -26,14 +29,49 @@ span { vertical-align: middle; } -&:hover { +&:hover:enabled { filter: brightness(110%); cursor: pointer; } + +&:disabled { + background-color: ${colors.greyple}; +} `; +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" + ) + + window.onmessage = (code: MessageEvent) => { + if (code.data.hello) { + // React DevTools has a habit of sending messages, ignore them. + return; + } + + if (code.isTrusted) { + windowRef?.close(); + + console.log("Code received:", code.data); + + disableFunction(false); + + window.onmessage = null; + } + }; +} + function OAuth2Button() { - return <button onClick={() => alert("Clicked!")} css={buttonStyling}> + 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>; diff --git a/src/index.tsx b/src/index.tsx index b35dc6c..634fd81 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,7 +5,7 @@ import * as serviceWorker from './serviceWorker'; import colors from "./colors"; -console.log("%c Python Discord Forms ", `font-size: 8em; font-family: "Hind", "Arial"; font-weight: 900; background-color: ${colors.blurple}; border-radius: 10px;`) +console.log("%c Python Discord Forms ", `font-size: 6em; font-family: "Hind", "Arial"; font-weight: 900; background-color: ${colors.blurple}; border-radius: 10px;`) console.log("%cWelcome to Python Discord Forms", `font-size: 3em; font-family: "Hind", "Arial";`) console.log(` Environment: %c ${process.env.NODE_ENV} `, `padding: 2px; border-radius: 5px; background-color: ${process.env.NODE_ENV === "production" ? colors.success : colors.error}`) diff --git a/src/pages/CallbackPage.tsx b/src/pages/CallbackPage.tsx new file mode 100644 index 0000000..caa384f --- /dev/null +++ b/src/pages/CallbackPage.tsx @@ -0,0 +1,17 @@ +/** @jsx jsx */ +import { jsx } from "@emotion/core"; +import { useState } from "react"; + +export default function CallbackPage() { + const [hasSent, setHasSent] = useState(false); + const params = new URLSearchParams(document.location.search); + + const code = params.get("code"); + + if (!hasSent) { + setHasSent(true); + window.opener.postMessage(code); + } + + return <p>Code is {code}</p>; +} diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 60deb30..2e2bfd6 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -5,6 +5,7 @@ import HeaderBar from "../components/HeaderBar"; import FormListing from "../components/FormListing"; import { getForms } from "../api/forms"; +import OAuth2Button from "../components/OAuth2Button"; function LandingPage() { return <div> @@ -17,7 +18,9 @@ function LandingPage() { flex-direction: column; `}> <h1>Available Forms</h1> - + + <OAuth2Button/> + {getForms().map(form => ( <FormListing key={form.id} form={form}/> |