Factor out CliAuth token component

bryphe-coder · bryphe-coder · commit 6607a5ad55ad · 2022-02-17T00:15:45.000Z
diff --git a/site/components/SignIn/CliAuthToken.tsx b/site/components/SignIn/CliAuthToken.tsx
@@ -0,0 +1,29 @@
+import Paper from "@material-ui/core/Paper"
+import Typography from "@material-ui/core/Typography"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { CodeExample } from "../CodeExample"
+
+export interface CliAuthTokenProps {
+  sessionToken: string
+}
+
+export const CliAuthToken: React.FC<CliAuthTokenProps> = ({ sessionToken }) => {
+  const styles = useStyles()
+  return (
+    <Paper className={styles.container}>
+      <Typography className={styles.title}>Session Token</Typography>
+      <CodeExample code={sessionToken} />
+    </Paper>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  title: {
+    marginBottom: theme.spacing(2),
+  },
+  container: {
+    maxWidth: "680px",
+    padding: theme.spacing(2),
+  },
+}))
diff --git a/site/components/SignIn/index.tsx b/site/components/SignIn/index.tsx
@@ -1 +1,2 @@
+export * from "./CliAuthToken"
 export * from "./SignInForm"
diff --git a/site/pages/cli-auth.tsx b/site/pages/cli-auth.tsx
@@ -1,9 +1,7 @@
-import Paper from "@material-ui/core/Paper"
-import Typography from "@material-ui/core/Typography"
 import { makeStyles } from "@material-ui/core/styles"
 import React, { useEffect, useState } from "react"
 import { getApiKey } from "../api"
-import { CodeExample } from "../components/CodeExample"
+import { CliAuthToken } from "../components/SignIn"
 
 import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
 import { useUser } from "../contexts/UserContext"
@@ -28,29 +26,19 @@ const CliAuthenticationPage: React.FC = () => {
 
   return (
     <div className={styles.root}>
-      <Paper className={styles.container}>
-        <Typography className={styles.title}>Session Token</Typography>
-        <CodeExample code={apiKey} />
-      </Paper>
+      <CliAuthToken sessionToken={apiKey} />
     </div>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    width: "100vh",
-    height: "100vw",
+    width: "100vw",
+    height: "100vh",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
   },
-  title: {
-    marginBottom: theme.spacing(2),
-  },
-  container: {
-    maxWidth: "680px",
-    padding: theme.spacing(2),
-  },
 }))
 
 export default CliAuthenticationPage

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+export * from "./CliAuthToken"`
`1`	`2`	`export * from "./SignInForm"`