Skip to content

Commit 3cf17d3

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Redesign auth cli page and add workspaces link (#3737)
1 parent 779c446 commit 3cf17d3

File tree

8 files changed

+89
-85
lines changed

8 files changed

+89
-85
lines changed

‎site/src/components/CliAuthToken/CliAuthToken.stories.tsx

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎site/src/components/CliAuthToken/CliAuthToken.test.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎site/src/components/CliAuthToken/CliAuthToken.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎site/src/components/Footer/Footer.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import { makeStyles } from "@material-ui/core/styles"
33
import AccountTreeIcon from "@material-ui/icons/AccountTree"
44
import AssistantIcon from "@material-ui/icons/Assistant"
55
import ChatIcon from "@material-ui/icons/Chat"
6+
import { colors } from "theme/colors"
67
import * as TypesGen from "../../api/typesGenerated"
78

89
export const Language = {
910
buildInfoText: (buildInfo: TypesGen.BuildInfoResponse): string => {
1011
return `Coder ${buildInfo.version}`
1112
},
12-
copyrightText: `Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc. All rights reserved.`,
13+
copyrightText: `Copyright \u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`,
1314
reportBugLink: "Report an issue or share feedback",
1415
discordLink: "Join Coder on Discord",
1516
}
@@ -55,12 +56,12 @@ export const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({ buildIn
5556

5657
const useFooterStyles = makeStyles((theme) => ({
5758
root: {
58-
opacity: 0.6,
59+
color: colors.gray[7],
5960
textAlign: "center",
6061
flex: "0",
6162
paddingTop: theme.spacing(2),
6263
paddingBottom: theme.spacing(2),
63-
marginTop: theme.spacing(3),
64+
marginTop: theme.spacing(8),
6465
},
6566
copyRight: {
6667
margin: theme.spacing(0.25),

‎site/src/components/Welcome/Welcome.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Language = {
1111
),
1212
}
1313

14-
export const Welcome: FC<PropsWithChildren<{ message?: JSX.Element }>> = ({
14+
export const Welcome: FC<PropsWithChildren<{ message?: JSX.Element | string }>> = ({
1515
message = Language.defaultMessage,
1616
}) => {
1717
const styles = useStyles()

‎site/src/pages/CliAuthPage/CliAuthPage.tsx

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
import { makeStyles } from "@material-ui/core/styles"
21
import { useActor } from "@xstate/react"
32
import React, { useContext, useEffect, useState } from "react"
43
import { Helmet } from "react-helmet-async"
54
import { getApiKey } from "../../api/api"
6-
import { CliAuthToken } from "../../components/CliAuthToken/CliAuthToken"
7-
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
85
import { pageTitle } from "../../util/page"
96
import { XServiceContext } from "../../xServices/StateContext"
7+
import { CliAuthPageView } from "./CliAuthPageView"
108

119
export const CliAuthenticationPage: React.FC<React.PropsWithChildren<unknown>> = () => {
1210
const xServices = useContext(XServiceContext)
1311
const [authState] = useActor(xServices.authXService)
1412
const { me } = authState.context
15-
16-
const styles = useStyles()
17-
1813
const [apiKey, setApiKey] = useState<string | null>(null)
1914

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

28-
if (!apiKey) {
29-
return <FullScreenLoader />
30-
}
31-
3223
return (
33-
<div className={styles.root}>
24+
<>
3425
<Helmet>
3526
<title>{pageTitle("CLI Auth")}</title>
3627
</Helmet>
37-
<CliAuthToken sessionToken={apiKey} />
38-
</div>
28+
<CliAuthPageView sessionToken={apiKey} />
29+
</>
3930
)
4031
}
41-
42-
const useStyles = makeStyles(() => ({
43-
root: {
44-
width: "100vw",
45-
height: "100vh",
46-
display: "flex",
47-
justifyContent: "center",
48-
alignItems: "center",
49-
},
50-
}))

‎site/src/pages/CliAuthPage/CliAuthPageView.stories.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Story } from "@storybook/react"
2+
import { CliAuthPageView, CliAuthPageViewProps } from "./CliAuthPageView"
3+
4+
export default {
5+
title: "pages/CliAuthPageView",
6+
component: CliAuthPageView,
7+
argTypes: {
8+
sessionToken: { control: "text", defaultValue: "some-session-token" },
9+
},
10+
}
11+
12+
const Template: Story<CliAuthPageViewProps> = (args) => <CliAuthPageView {...args} />
13+
14+
export const Example = Template.bind({})
15+
Example.args = {}

‎site/src/pages/CliAuthPage/CliAuthPageView.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import Button from "@material-ui/core/Button"
2+
import { makeStyles } from "@material-ui/core/styles"
3+
import { CodeExample } from "components/CodeExample/CodeExample"
4+
import { SignInLayout } from "components/SignInLayout/SignInLayout"
5+
import { Welcome } from "components/Welcome/Welcome"
6+
import React from "react"
7+
import { Link as RouterLink } from "react-router-dom"
8+
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
9+
10+
export interface CliAuthPageViewProps {
11+
sessionToken: string | null
12+
}
13+
14+
export const CliAuthPageView: React.FC<CliAuthPageViewProps> = ({ sessionToken }) => {
15+
const styles = useStyles()
16+
17+
if (!sessionToken) {
18+
return <FullScreenLoader />
19+
}
20+
21+
return (
22+
<SignInLayout>
23+
<Welcome message="Session token" />
24+
<p className={styles.text}>
25+
Copy the session token below and{" "}
26+
<strong className={styles.lineBreak}>paste it in your terminal</strong>.
27+
</p>
28+
29+
<CodeExample code={sessionToken} />
30+
31+
<div className={styles.links}>
32+
<Button component={RouterLink} size="large" to="/workspaces" fullWidth variant="outlined">
33+
Go to workspaces
34+
</Button>
35+
</div>
36+
</SignInLayout>
37+
)
38+
}
39+
40+
const useStyles = makeStyles((theme) => ({
41+
title: {
42+
fontSize: theme.spacing(4),
43+
fontWeight: 400,
44+
lineHeight: "140%",
45+
margin: 0,
46+
},
47+
48+
text: {
49+
fontSize: 16,
50+
color: theme.palette.text.secondary,
51+
marginBottom: theme.spacing(4),
52+
textAlign: "center",
53+
lineHeight: "160%",
54+
},
55+
56+
lineBreak: {
57+
whiteSpace: "nowrap",
58+
},
59+
60+
links: {
61+
display: "flex",
62+
justifyContent: "flex-end",
63+
paddingTop: theme.spacing(1),
64+
},
65+
}))

0 commit comments

Comments
 (0)