diff --git a/spa/src/app.tsx b/spa/src/app.tsx index b808e8da96..6314647ee9 100644 --- a/spa/src/app.tsx +++ b/spa/src/app.tsx @@ -7,6 +7,7 @@ import { import StartConnection from "./pages/StartConnection"; import ConfigSteps from "./pages/ConfigSteps"; import Connected from "./pages/Connected"; +import InstallationRequested from "./pages/InstallationRequested"; import * as Sentry from "@sentry/react"; import { initSentry } from "./sentry"; @@ -32,6 +33,7 @@ const App = () => { }/> }/> }/> + }/> diff --git a/spa/src/common/LoggedinInfo.tsx b/spa/src/common/LoggedinInfo.tsx new file mode 100644 index 0000000000..c3363ee743 --- /dev/null +++ b/spa/src/common/LoggedinInfo.tsx @@ -0,0 +1,31 @@ +import Button from "@atlaskit/button"; +import styled from "@emotion/styled"; +import { popup } from "../utils"; +import analyticsClient from "../analytics"; +import OAuthManager from "../services/oauth-manager"; + +const LoggedInContent = styled.div` + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; +`; + +const LoggedinInfo = ({ username, logout }: { username: string; logout: () => void;}) => { + const clicked = () => { + // Opens the popup for logging out of GitHub + popup("https://github.com/logout"); + // Clearing the locally stored tokens + OAuthManager.clear(); + // Passed callbacks, for re-rendering/changing states + logout(); + analyticsClient.sendUIEvent({ actionSubject: "switchGitHubAccount", action: "clicked" }); + }; + + return +
Logged in as {username}
+ +
; +}; + +export default LoggedinInfo; diff --git a/spa/src/common/Wrapper.tsx b/spa/src/common/Wrapper.tsx index 61a3d5130b..215af47271 100644 --- a/spa/src/common/Wrapper.tsx +++ b/spa/src/common/Wrapper.tsx @@ -1,7 +1,7 @@ import { ReactNode } from "react"; import styled from "@emotion/styled"; import Button from "@atlaskit/button"; -import ArrowLeftIcon from "@atlaskit/icon/glyph/arrow-left"; +import CrossIcon from "@atlaskit/icon/glyph/cross"; import analyticsClient from "../analytics"; const navHeight = 56; @@ -27,7 +27,8 @@ export const Wrapper = (attr: { }) => { return