-
Notifications
You must be signed in to change notification settings - Fork 891
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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.`, | ||
reportBugLink: "Report an issue or share feedback", | ||
discordLink: "Join Coder on Discord", | ||
} | ||
|
@@ -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], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I tried the |
||
textAlign: "center", | ||
flex: "0", | ||
paddingTop: theme.spacing(2), | ||
paddingBottom: theme.spacing(2), | ||
marginTop: theme.spacing(3), | ||
marginTop: theme.spacing(8), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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), | ||
|
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 = {} |
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), | ||
}, | ||
})) |
There was a problem hiding this comment.
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.