mirror of https://github.com/coder/coder.git
fix: Move CLI auth screen outside of dashboard (#5755)
This commit is contained in:
parent
f0eddbaab4
commit
c377cd0fa9
|
@ -142,7 +142,6 @@ export const AppRouter: FC = () => {
|
|||
<Route element={<DashboardLayout />}>
|
||||
<Route index element={<IndexPage />} />
|
||||
|
||||
<Route path="cli-auth" element={<CliAuthenticationPage />} />
|
||||
<Route path="gitauth" element={<GitAuthPage />} />
|
||||
|
||||
<Route path="workspaces" element={<WorkspacesPage />} />
|
||||
|
@ -241,11 +240,12 @@ export const AppRouter: FC = () => {
|
|||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* Terminal page don't have the dashboard layout */}
|
||||
{/* Terminal and CLI auth pages don't have the dashboard layout */}
|
||||
<Route
|
||||
path="/@:username/:workspace/terminal"
|
||||
element={<TerminalPage />}
|
||||
/>
|
||||
<Route path="cli-auth" element={<CliAuthenticationPage />} />
|
||||
</Route>
|
||||
|
||||
{/* Using path="*"" means "match anything", so this route
|
||||
|
|
|
@ -15,11 +15,12 @@ export const useStyles = makeStyles((theme) => ({
|
|||
},
|
||||
container: {
|
||||
marginTop: theme.spacing(-8),
|
||||
minWidth: "320px",
|
||||
maxWidth: "320px",
|
||||
maxWidth: 385,
|
||||
},
|
||||
copyright: {
|
||||
marginTop: theme.spacing(2),
|
||||
footer: {
|
||||
fontSize: 12,
|
||||
color: theme.palette.text.secondary,
|
||||
marginTop: theme.spacing(3),
|
||||
},
|
||||
}))
|
||||
|
||||
|
@ -30,7 +31,7 @@ export const SignInLayout: FC<{ children: ReactNode }> = ({ children }) => {
|
|||
<div className={styles.root}>
|
||||
<div className={styles.layout}>
|
||||
<div className={styles.container}>{children}</div>
|
||||
<div className={styles.copyright}>
|
||||
<div className={styles.footer}>
|
||||
{`\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -34,15 +34,20 @@ const useStyles = makeStyles((theme) => ({
|
|||
justifyContent: "center",
|
||||
},
|
||||
logo: {
|
||||
width: 80,
|
||||
height: 56,
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: theme.spacing(8),
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
letterSpacing: -0.3,
|
||||
marginBottom: theme.spacing(3),
|
||||
marginTop: theme.spacing(6),
|
||||
textAlign: "center",
|
||||
fontSize: theme.spacing(4),
|
||||
fontWeight: 400,
|
||||
margin: 0,
|
||||
marginBottom: theme.spacing(2),
|
||||
marginTop: theme.spacing(2),
|
||||
lineHeight: 1,
|
||||
|
||||
"& strong": {
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
|
|
@ -1,24 +1,21 @@
|
|||
import { useActor } from "@xstate/react"
|
||||
import { useContext, useEffect, useState, FC, PropsWithChildren } from "react"
|
||||
import { useEffect, useState, FC, PropsWithChildren } from "react"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { getApiKey } from "../../api/api"
|
||||
import { pageTitle } from "../../util/page"
|
||||
import { XServiceContext } from "../../xServices/StateContext"
|
||||
import { CliAuthPageView } from "./CliAuthPageView"
|
||||
|
||||
export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {
|
||||
const xServices = useContext(XServiceContext)
|
||||
const [authState] = useActor(xServices.authXService)
|
||||
const { me } = authState.context
|
||||
const [apiKey, setApiKey] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (me?.id) {
|
||||
void getApiKey().then(({ key }) => {
|
||||
getApiKey()
|
||||
.then(({ key }) => {
|
||||
setApiKey(key)
|
||||
})
|
||||
}
|
||||
}, [me?.id])
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
@ -21,6 +21,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
|
|||
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>.
|
||||
|
|
Loading…
Reference in New Issue