fix: use password style for session token auth (coder#7533)

kylecarbs · web-flow · commit 424f954b91b4 · 2023-05-15T11:27:39.000-05:00
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -11,6 +11,7 @@ export interface CodeExampleProps {
   buttonClassName?: string
   tooltipTitle?: string
   inline?: boolean
+  password?: boolean
 }
 
 /**
@@ -39,6 +40,7 @@ export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
 
 interface styleProps {
   inline?: boolean
+  password?: boolean
 }
 
 const useStyles = makeStyles<Theme, styleProps>((theme) => ({
@@ -61,5 +63,6 @@ const useStyles = makeStyles<Theme, styleProps>((theme) => ({
     display: "flex",
     alignItems: "center",
     wordBreak: "break-all",
+    "-webkit-text-security": (props) => (props.password ? "disc" : undefined),
   },
 }))
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
@@ -27,7 +27,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
         <strong className={styles.lineBreak}>paste it in your terminal</strong>.
       </p>
 
-      <CodeExample code={sessionToken} />
+      <CodeExample code={sessionToken} password />
 
       <div className={styles.links}>
         <Button component={RouterLink} size="large" to="/workspaces" fullWidth>
