Dynamically Show Discord OAuth Button

Dynamically displays an auth button in place of the submit button if
needed, and adds full authorization flow.

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 11 insertions, 3 deletions

diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx
index 231e560..90a25fa 100644
--- a/src/components/OAuth2Button.tsx
+++ b/src/components/OAuth2Button.tsx
@@ -5,12 +5,13 @@ import { useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 
-import authenticate, { OAuthScopes } from "../api/auth";
+import authenticate, {checkScopes, OAuthScopes} from "../api/auth";
 
 
 interface OAuth2ButtonProps {
     scopes?: OAuthScopes[],
-    path?: string
+    path?: string,
+    rerender: () => void
 }
 
 const iconStyles = css`
@@ -27,9 +28,16 @@ const textStyles = css`
 
 function OAuth2Button(props: OAuth2ButtonProps): JSX.Element {
     const [disabled, setDisabled] = useState<boolean>(false);
+    async function login() {
+        await authenticate(props.scopes, setDisabled, props.path);
+
+        if (checkScopes(props.scopes, props.path)) {
+            props.rerender();
+        }
+    }
 
     return (
-        <button disabled={disabled} onClick={() => authenticate(props.scopes, setDisabled, props.path)}>
+        <button disabled={disabled} onClick={() => login()}>
             <FontAwesomeIcon icon={faDiscord} css={iconStyles}/>
             <span css={textStyles}>Discord Login</span>
         </button>