Skip to content

Commit e3d3a95

Browse files
f0sself0ssel
committed
wip
1 parent 627fbe5 commit e3d3a95

File tree

3 files changed

+155
-0
lines changed

3 files changed

+155
-0
lines changed

‎site/src/AppRouter.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ const SecurityPage = lazy(
3939
const SSHKeysPage = lazy(
4040
() => import("./pages/UserSettingsPage/SSHKeysPage/SSHKeysPage"),
4141
)
42+
const TokensPage = lazy(
43+
() => import("./pages/UserSettingsPage/TokensPage/TokensPage"),
44+
)
4245
const CreateUserPage = lazy(
4346
() => import("./pages/UsersPage/CreateUserPage/CreateUserPage"),
4447
)
@@ -451,6 +454,16 @@ export const AppRouter: FC = () => {
451454
</AuthAndFrame>
452455
}
453456
/>
457+
<Route
458+
path="tokens"
459+
element={
460+
<AuthAndFrame>
461+
<SettingsLayout>
462+
<TokensPage />
463+
</SettingsLayout>
464+
</AuthAndFrame>
465+
}
466+
/>
454467
</Route>
455468

456469
<Route path="/@:username">

‎site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react"
2+
import { Section } from "../../../components/Section/Section"
3+
import { TokensPageView } from "./TokensPageView"
4+
5+
export const Language = {
6+
title: "Authentication Tokens",
7+
description: (
8+
<p>
9+
The following public key is used to authenticate Git in workspaces. You
10+
may add it to Git services (such as GitHub) that you need to access from
11+
your workspace. <br />
12+
<br />
13+
Coder configures authentication via <code>$GIT_SSH_COMMAND</code>.
14+
</p>
15+
),
16+
}
17+
18+
export const TokensPage: React.FC<React.PropsWithChildren<unknown>> = () => {
19+
return (
20+
<>
21+
<Section title={Language.title} description={Language.description}>
22+
<TokensPageView
23+
tokens={[]}
24+
/>
25+
</Section>
26+
</>
27+
)
28+
}
29+
30+
export default TokensPage

‎site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { useTheme } from "@material-ui/core/styles"
2+
import Table from "@material-ui/core/Table"
3+
import TableBody from "@material-ui/core/TableBody"
4+
import TableCell from "@material-ui/core/TableCell"
5+
import TableContainer from "@material-ui/core/TableContainer"
6+
import TableHead from "@material-ui/core/TableHead"
7+
import TableRow from "@material-ui/core/TableRow"
8+
import { APIKey } from "api/typesGenerated"
9+
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
10+
import { Maybe } from "components/Conditionals/Maybe"
11+
import { Stack } from "components/Stack/Stack"
12+
import { TableEmpty } from "components/TableEmpty/TableEmpty"
13+
import { TableLoader } from "components/TableLoader/TableLoader"
14+
import { FC } from "react"
15+
16+
export const Language = {
17+
idLabel: "ID",
18+
createdAtLabel: "Created At",
19+
lastUsedLabel: "Last Used",
20+
expiresAtLabel: "Expires At",
21+
emptyMessage: "No tokens found",
22+
}
23+
24+
export interface TokensPageViewProps {
25+
tokens?: APIKey[]
26+
getTokensError?: Error | unknown
27+
}
28+
29+
export const TokensPageView: FC<
30+
React.PropsWithChildren<TokensPageViewProps>
31+
> = ({
32+
tokens,
33+
}) => {
34+
const theme = useTheme()
35+
36+
return (
37+
<Stack>
38+
<TableContainer>
39+
<Table>
40+
<TableHead>
41+
<TableRow>
42+
<TableCell width="34%">{Language.idLabel}</TableCell>
43+
<TableCell width="16%">{Language.createdAtLabel}</TableCell>
44+
<TableCell width="16%">{Language.lastUsedLabel}</TableCell>
45+
<TableCell width="16%">{Language.expiresAtLabel}</TableCell>
46+
<TableCell width="1%"></TableCell>
47+
</TableRow>
48+
</TableHead>
49+
<TableBody>
50+
<Maybe condition={tokens === undefined}>
51+
<TableLoader />
52+
</Maybe>
53+
54+
<ChooseOne>
55+
<Cond condition={Boolean(tokens?.length)}>
56+
<TableEmpty
57+
message={Language.emptyMessage}
58+
/>
59+
</Cond>
60+
<Cond>
61+
{tokens?.map((token) => {
62+
63+
return (
64+
<TableRow
65+
key={token.id}
66+
hover
67+
data-testid={`token-${token.id}`}
68+
tabIndex={0}
69+
>
70+
<TableCell>
71+
<span
72+
style={{ color: theme.palette.text.secondary }}
73+
>
74+
{token.id}
75+
</span>
76+
</TableCell>
77+
78+
<TableCell>
79+
<span
80+
style={{ color: theme.palette.text.secondary }}
81+
>
82+
{token.created_at}
83+
</span>
84+
</TableCell>
85+
86+
87+
<TableCell>
88+
<span
89+
style={{ color: theme.palette.text.secondary }}
90+
>
91+
{token.last_used}
92+
</span>
93+
</TableCell>
94+
95+
<TableCell>
96+
<span
97+
style={{ color: theme.palette.text.secondary }}
98+
>
99+
{token.expires_at}
100+
</span>
101+
</TableCell>
102+
</TableRow>
103+
)
104+
})}
105+
</Cond>
106+
</ChooseOne>
107+
</TableBody>
108+
</Table>
109+
</TableContainer>
110+
</Stack>
111+
)
112+
}

0 commit comments

Comments
 (0)