From 451c825c77cd68eafeb262eb1ea5cbfc21dce550 Mon Sep 17 00:00:00 2001
From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com>
Date: Sat, 13 Feb 2021 01:21:36 +0300
Subject: 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 <47495861+HassanAbouelela@users.noreply.github.com>
---
 src/components/OAuth2Button.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/components/OAuth2Button.tsx')

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>
-- 
cgit v1.2.3