fix: Move CLI auth screen outside of dashboard (#5755)

site/src/AppRouter.tsx

@@ -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

site/src/components/SignInLayout/SignInLayout.tsx

@@ -15,11 +15,12 @@ export const useStyles = makeStyles((theme) => ({
   },
   container: {
     marginTop: theme.spacing(-8),
-    minWidth: "320px",
+    maxWidth: 385,
-    maxWidth: "320px",
   },
-  copyright: {
+  footer: {
-    marginTop: theme.spacing(2),
+    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>

site/src/components/Welcome/Welcome.tsx

@@ -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,
+    },
   },
 }))

site/src/pages/CliAuthPage/CliAuthPage.tsx

@@ -1,24 +1,21 @@
-import { useActor } from "@xstate/react"
+import { useEffect, useState, FC, PropsWithChildren } from "react"
-import { useContext, 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) {
+    getApiKey()
-      void getApiKey().then(({ key }) => {
+      .then(({ key }) => {
         setApiKey(key)
       })
-    }
+      .catch((error) => {
-  }, [me?.id])
+        console.error(error)
+      })
+  }, [])
 
   return (
     <>

site/src/pages/CliAuthPage/CliAuthPageView.tsx

@@ -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>.