diff options
| author |  Joe Banks <[email protected]> | 2024-07-10 02:06:42 +0100 |
|---|---|---|
| committer |  GitHub <[email protected]> | 2024-07-10 02:06:42 +0100 |
| commit | d96ea398a414595c907fde7c83027b6b1d42a0e3 (patch) | |
| tree | 48b287c399570a26bad5fc4ba566bcf2e1cb8356 /src/components | |
| parent | Merge pull request #635 from python-discord/jb3/deps/dep-bumps (diff) | |
| parent | Add new test suite for testing authorization splash (diff) | |
Merge pull request #634 from python-discord/jb3/auth/popup-and-improvements
Authorization pop-up & misc improvements
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/AuthorizationSplash.tsx | 42 | ||||
| -rw-r--r-- | src/components/OAuth2Button.tsx | 6 |
2 files changed, 46 insertions, 2 deletions
diff --git a/src/components/AuthorizationSplash.tsx b/src/components/AuthorizationSplash.tsx new file mode 100644 index 0000000..6fd211a --- /dev/null +++ b/src/components/AuthorizationSplash.tsx @@ -0,0 +1,42 @@ +/** @jsx jsx */ +import { css, jsx } from "@emotion/react"; +import { useSelector } from "react-redux"; +import { type RootState } from "../store"; + +const splashStyles = css` +position: fixed; +width: 100%; +height: 100%; +top: 0; +transition: background-color 0.5s ease, opacity 0.5s ease; +`; + +const innerText = css` +text-align: center; +vertical-align: middle; +`; + +const spacer = css` +height: 30%; +`; + +function AuthorizationSplash(): JSX.Element { + const authorizing = useSelector<RootState, boolean>(state => state.authorization.authorizing); + + const background = `rgba(0, 0, 0, ${authorizing ? "0.90" : "0"})`; + + return <div css={css` + ${splashStyles} + background-color: ${background}; + opacity: ${authorizing ? "1" : "0"}; + z-index: ${authorizing ? "10" : "-10"}; + `}> + <div css={spacer}/> + <div css={innerText}> + <h1 css={{fontSize: "3em"}}>Authorization in progress</h1> + <h2>Login with Discord in the opened window and return to this tab once complete.</h2> + </div> + </div>; +} + +export default AuthorizationSplash; diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx index be8d160..67399ee 100644 --- a/src/components/OAuth2Button.tsx +++ b/src/components/OAuth2Button.tsx @@ -55,8 +55,10 @@ async function login(props: OAuth2ButtonProps, errorDialog: React.RefObject<HTML } // Propagate to sentry - reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack; - throw reason.Error; + if (reason.Error) { + reason.Error.stack = new Error(`OAuth: ${reason.Message}`).stack + "\n" + reason.Error.stack; + throw reason.Error; + } }); if (checkScopes(props.scopes) && props.rerender) { |