|
1 | | -importtype{Interpolation,Theme}from"@emotion/react"; |
2 | | -import{visuallyHidden}from"@mui/utils"; |
3 | | -import{CodeExample}from"components/CodeExample/CodeExample"; |
4 | | -import{Loader}from"components/Loader/Loader"; |
| 1 | +import{Button}from"components/Button/Button"; |
5 | 2 | import{SignInLayout}from"components/SignInLayout/SignInLayout"; |
| 3 | +import{Spinner}from"components/Spinner/Spinner"; |
6 | 4 | import{Welcome}from"components/Welcome/Welcome"; |
| 5 | +import{useClipboard}from"hooks"; |
| 6 | +import{CheckIcon,CopyIcon}from"lucide-react"; |
7 | 7 | importtype{FC}from"react"; |
8 | 8 | import{LinkasRouterLink}from"react-router-dom"; |
9 | 9 |
|
10 | 10 | exportinterfaceCliAuthPageViewProps{ |
11 | 11 | sessionToken?:string; |
12 | 12 | } |
13 | 13 |
|
14 | | -constVISUALLY_HIDDEN_SPACE=" "; |
15 | | - |
16 | 14 | exportconstCliAuthPageView:FC<CliAuthPageViewProps>=({ sessionToken})=>{ |
17 | | -if(!sessionToken){ |
18 | | -return<Loaderfullscreen/>; |
19 | | -} |
| 15 | +constclipboard=useClipboard({ |
| 16 | +textToCopy:sessionToken??"", |
| 17 | +}); |
20 | 18 |
|
21 | 19 | return( |
22 | 20 | <SignInLayout> |
23 | | -<WelcomeclassName="pb-3">Session token</Welcome> |
| 21 | +<Welcome>Session token</Welcome> |
24 | 22 |
|
25 | | -<pcss={styles.instructions}> |
26 | | -Copy the session token below and |
27 | | -{/* |
28 | | - * This looks silly, but it's a case where you want to hide the space |
29 | | - * visually because it messes up the centering, but you want the space |
30 | | - * to still be available to screen readers |
31 | | - */} |
32 | | -<spancss={{ ...visuallyHidden}}>{VISUALLY_HIDDEN_SPACE}</span> |
33 | | -<strongcss={{display:"block"}}>paste it in your terminal.</strong> |
| 23 | +<pclassName="m-0 text-center text-sm text-content-secondary leading-normal"> |
| 24 | +Copy the session token below and{" "} |
| 25 | +<strongclassName="block">paste it in your terminal.</strong> |
34 | 26 | </p> |
35 | 27 |
|
36 | | -<CodeExamplecode={sessionToken}secret/> |
37 | | - |
38 | | -<divcss={{paddingTop:16}}> |
39 | | -<RouterLinkto="/workspaces"css={styles.backLink}> |
40 | | -Go to workspaces |
41 | | -</RouterLink> |
| 28 | +<divclassName="flex flex-col items-center gap-1 w-full mt-4"> |
| 29 | +<Button |
| 30 | +className="w-full" |
| 31 | +size="lg" |
| 32 | +disabled={!sessionToken} |
| 33 | +onClick={clipboard.copyToClipboard} |
| 34 | +> |
| 35 | +{clipboard.showCopiedSuccess ?( |
| 36 | +<CheckIcon/> |
| 37 | +) :( |
| 38 | +<Spinnerloading={!sessionToken}> |
| 39 | +<CopyIcon/> |
| 40 | +</Spinner> |
| 41 | +)} |
| 42 | +{clipboard.showCopiedSuccess |
| 43 | +?"Session token copied!" |
| 44 | +:"Copy session token"} |
| 45 | +</Button> |
| 46 | + |
| 47 | +<ButtonclassName="w-full"variant="subtle"asChild> |
| 48 | +<RouterLinkto="/workspaces">Go to workspaces</RouterLink> |
| 49 | +</Button> |
42 | 50 | </div> |
43 | 51 | </SignInLayout> |
44 | 52 | ); |
45 | 53 | }; |
46 | | - |
47 | | -conststyles={ |
48 | | -instructions:(theme)=>({ |
49 | | -fontSize:16, |
50 | | -color:theme.palette.text.secondary, |
51 | | -paddingBottom:8, |
52 | | -textAlign:"center", |
53 | | -lineHeight:1.4, |
54 | | - |
55 | | -// Have to undo styling side effects from <Welcome> component |
56 | | -marginTop:-24, |
57 | | -}), |
58 | | - |
59 | | -backLink:(theme)=>({ |
60 | | -display:"block", |
61 | | -textAlign:"center", |
62 | | -color:theme.palette.text.primary, |
63 | | -textDecoration:"underline", |
64 | | -textUnderlineOffset:3, |
65 | | -textDecorationColor:"hsla(0deg, 0%, 100%, 0.7)", |
66 | | -paddingTop:16, |
67 | | -paddingBottom:16, |
68 | | - |
69 | | -"&:hover":{ |
70 | | -textDecoration:"none", |
71 | | -}, |
72 | | -}), |
73 | | -}satisfiesRecord<string,Interpolation<Theme>>; |