Add cli-auth page

bryphe-coder · bryphe-coder · commit fe55c73edb53 · 2022-02-16T01:44:07.000Z
diff --git a/site/api.ts b/site/api.ts
@@ -139,3 +139,16 @@ export const logout = async (): Promise<void> => {
 
   return
 }
+
+export const getApiKey = async (): Promise<{ key: string }> => {
+  const response = await fetch("/api/v2/api-keys", {
+    method: "POST",
+  })
+
+  if (!response.ok) {
+    const body = await response.json()
+    throw new Error(body.message)
+  }
+
+  return await response.json()
+}
diff --git a/site/pages/cli-auth.tsx b/site/pages/cli-auth.tsx
@@ -0,0 +1,56 @@
+import { Typography } from "@material-ui/core"
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import React, { useEffect, useState } from "react"
+import { getApiKey } from "../api"
+import { CodeExample } from "../components/CodeExample"
+
+import { FullScreenLoader } from "../components/Loader/FullScreenLoader"
+import { useUser } from "../contexts/UserContext"
+
+const CliAuthenticationPage: React.FC = () => {
+  const { me } = useUser(true)
+  const styles = useStyles()
+
+  const [apiKey, setApiKey] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (me?.id) {
+      getApiKey().then(({ key }) => {
+        setApiKey(key)
+      })
+    }
+  }, [me?.id])
+
+  if (!apiKey) {
+    return <FullScreenLoader />
+  }
+
+  return (
+    <div className={styles.root}>
+      <Paper className={styles.container}>
+        <Typography className={styles.title}>Session Token</Typography>
+        <CodeExample code={apiKey} />
+      </Paper>
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100vh",
+    height: "100vw",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    marginBottom: theme.spacing(2),
+  },
+  container: {
+    maxWidth: "680px",
+    padding: theme.spacing(2),
+  },
+}))
+
+export default CliAuthenticationPage
