From 078d06a2fbbb6984359884ba48edeaf09c13e6dd Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 6 Oct 2020 14:38:00 +0100 Subject: Add new callback route --- src/App.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src') 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() { -- cgit v1.2.3 From fa4591f19a3790f646d58118d6407845df4b3619 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 6 Oct 2020 14:38:10 +0100 Subject: Update console logs --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') 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}`) -- cgit v1.2.3 From 603036b28272c394c71ecc0b7a7a3199983f0f76 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 6 Oct 2020 14:38:24 +0100 Subject: On OAuth2 button click pop open Discord authorize window --- src/components/OAuth2Button.tsx | 42 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) (limited to 'src') 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 ; -- cgit v1.2.3 From cf37e19f281143ff6f9a35d45b7911e65fb8e98d Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 6 Oct 2020 14:38:33 +0100 Subject: When a code is received post it back to the opener --- src/pages/CallbackPage.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/pages/CallbackPage.tsx (limited to 'src') 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

Code is {code}

; +} -- cgit v1.2.3 From e2f150000933b8d51de46da91aa60206db09baa3 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 6 Oct 2020 14:38:42 +0100 Subject: Re-add the OAuth2 button to the home page --- src/pages/LandingPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src') 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
@@ -17,7 +18,9 @@ function LandingPage() { flex-direction: column; `}>

Available Forms

- + + + {getForms().map(form => ( -- cgit v1.2.3