Skip to content

refactor: Redesign auth cli page and add workspaces link #3737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions site/src/components/CliAuthToken/CliAuthToken.stories.tsx

This file was deleted.

14 changes: 0 additions & 14 deletions site/src/components/CliAuthToken/CliAuthToken.test.tsx

This file was deleted.

29 changes: 0 additions & 29 deletions site/src/components/CliAuthToken/CliAuthToken.tsx

This file was deleted.

7 changes: 4 additions & 3 deletions site/src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@ import { makeStyles } from "@material-ui/core/styles"
import AccountTreeIcon from "@material-ui/icons/AccountTree"
import AssistantIcon from "@material-ui/icons/Assistant"
import ChatIcon from "@material-ui/icons/Chat"
import { colors } from "theme/colors"
import * as TypesGen from "../../api/typesGenerated"

export const Language = {
buildInfoText: (buildInfo: TypesGen.BuildInfoResponse): string => {
return `Coder ${buildInfo.version}`
},
copyrightText: `Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc. All rights reserved.`,
copyrightText: `Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the "All rights reserved." so the footer width doesn't look bigger than the main container - it looks weird IMO - and also, it is "redundant" since Copyright is about "rights reserved" I guess.

reportBugLink: "Report an issue or share feedback",
discordLink: "Join Coder on Discord",
}
Expand Down Expand Up @@ -55,12 +56,12 @@ export const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({ buildIn

const useFooterStyles = makeStyles((theme) => ({
root: {
opacity: 0.6,
color: colors.gray[7],
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried the palette.text.secondary but for this background and how "soft" we want the color I decided to use the color directly since it is very specific to this component.

textAlign: "center",
flex: "0",
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
marginTop: theme.spacing(3),
marginTop: theme.spacing(8),
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The footer was to close to the form.

},
copyRight: {
margin: theme.spacing(0.25),
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/Welcome/Welcome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Language = {
),
}

export const Welcome: FC<PropsWithChildren<{ message?: JSX.Element }>> = ({
export const Welcome: FC<PropsWithChildren<{ message?: JSX.Element | string }>> = ({
message = Language.defaultMessage,
}) => {
const styles = useStyles()
Expand Down
27 changes: 4 additions & 23 deletions site/src/pages/CliAuthPage/CliAuthPage.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import { makeStyles } from "@material-ui/core/styles"
import { useActor } from "@xstate/react"
import React, { useContext, useEffect, useState } from "react"
import { Helmet } from "react-helmet-async"
import { getApiKey } from "../../api/api"
import { CliAuthToken } from "../../components/CliAuthToken/CliAuthToken"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
import { pageTitle } from "../../util/page"
import { XServiceContext } from "../../xServices/StateContext"
import { CliAuthPageView } from "./CliAuthPageView"

export const CliAuthenticationPage: React.FC<React.PropsWithChildren<unknown>> = () => {
const xServices = useContext(XServiceContext)
const [authState] = useActor(xServices.authXService)
const { me } = authState.context

const styles = useStyles()

const [apiKey, setApiKey] = useState<string | null>(null)

useEffect(() => {
Expand All @@ -25,26 +20,12 @@ export const CliAuthenticationPage: React.FC<React.PropsWithChildren<unknown>> =
}
}, [me?.id])

if (!apiKey) {
return <FullScreenLoader />
}

return (
<div className={styles.root}>
<>
<Helmet>
<title>{pageTitle("CLI Auth")}</title>
</Helmet>
<CliAuthToken sessionToken={apiKey} />
</div>
<CliAuthPageView sessionToken={apiKey} />
</>
)
}

const useStyles = makeStyles(() => ({
root: {
width: "100vw",
height: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
},
}))
15 changes: 15 additions & 0 deletions site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Story } from "@storybook/react"
import { CliAuthPageView, CliAuthPageViewProps } from "./CliAuthPageView"

export default {
title: "pages/CliAuthPageView",
component: CliAuthPageView,
argTypes: {
sessionToken: { control: "text", defaultValue: "some-session-token" },
},
}

const Template: Story<CliAuthPageViewProps> = (args) => <CliAuthPageView {...args} />

export const Example = Template.bind({})
Example.args = {}
65 changes: 65 additions & 0 deletions site/src/pages/CliAuthPage/CliAuthPageView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import Button from "@material-ui/core/Button"
import { makeStyles } from "@material-ui/core/styles"
import { CodeExample } from "components/CodeExample/CodeExample"
import { SignInLayout } from "components/SignInLayout/SignInLayout"
import { Welcome } from "components/Welcome/Welcome"
import React from "react"
import { Link as RouterLink } from "react-router-dom"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"

export interface CliAuthPageViewProps {
sessionToken: string | null
}

export const CliAuthPageView: React.FC<CliAuthPageViewProps> = ({ sessionToken }) => {
const styles = useStyles()

if (!sessionToken) {
return <FullScreenLoader />
}

return (
<SignInLayout>
<Welcome message="Session token" />
<p className={styles.text}>
Copy the session token below and{" "}
<strong className={styles.lineBreak}>paste it in your terminal</strong>.
</p>

<CodeExample code={sessionToken} />

<div className={styles.links}>
<Button component={RouterLink} size="large" to="/workspaces" fullWidth variant="outlined">
Go to workspaces
</Button>
</div>
</SignInLayout>
)
}

const useStyles = makeStyles((theme) => ({
title: {
fontSize: theme.spacing(4),
fontWeight: 400,
lineHeight: "140%",
margin: 0,
},

text: {
fontSize: 16,
color: theme.palette.text.secondary,
marginBottom: theme.spacing(4),
textAlign: "center",
lineHeight: "160%",
},

lineBreak: {
whiteSpace: "nowrap",
},

links: {
display: "flex",
justifyContent: "flex-end",
paddingTop: theme.spacing(1),
},
}))