Skip to content

Commit 75f7d2e

Browse files
f0sself0ssel
committed
wip view
1 parent e3d3a95 commit 75f7d2e

File tree

3 files changed

+59
-25
lines changed

3 files changed

+59
-25
lines changed

‎coderd/apikey.go

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -188,10 +188,6 @@ func (api *API) tokens(rw http.ResponseWriter, r *http.Request) {
188188
}
189189

190190
keys, err := api.Database.GetAPIKeysByLoginType(ctx, database.LoginTypeToken)
191-
if errors.Is(err, sql.ErrNoRows) {
192-
httpapi.Write(ctx, rw, http.StatusOK, []codersdk.APIKey{})
193-
return
194-
}
195191
if err != nil {
196192
httpapi.Write(ctx, rw, http.StatusInternalServerError, codersdk.Response{
197193
Message: "Internal error fetching API keys.",
@@ -200,7 +196,7 @@ func (api *API) tokens(rw http.ResponseWriter, r *http.Request) {
200196
return
201197
}
202198

203-
var apiKeys []codersdk.APIKey
199+
apiKeys := []codersdk.APIKey{}
204200
for _, key := range keys {
205201
apiKeys = append(apiKeys, convertAPIKey(key))
206202
}

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

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import Button from "@material-ui/core/Button"
2+
import Add from "@material-ui/icons/Add"
13
import React from "react"
24
import { Section } from "../../../components/Section/Section"
35
import { TokensPageView } from "./TokensPageView"
@@ -6,21 +8,51 @@ export const Language = {
68
title: "Authentication Tokens",
79
description: (
810
<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>.
11+
Authentication tokens are used to authenticate with the Coder API.
1412
</p>
1513
),
1614
}
1715

1816
export const TokensPage: React.FC<React.PropsWithChildren<unknown>> = () => {
1917
return (
2018
<>
21-
<Section title={Language.title} description={Language.description}>
22-
<TokensPageView
23-
tokens={[]}
19+
<Section
20+
title={Language.title}
21+
description={Language.description}
22+
layout="fluid"
23+
toolbar={
24+
<Button
25+
startIcon={<Add />}
26+
>
27+
New Token
28+
</Button>
29+
}
30+
>
31+
<TokensPageView
32+
tokens={[
33+
{
34+
"id":"tBoVE3dqLl",
35+
"user_id":"f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
36+
"last_used":"0001-01-01T00:00:00Z",
37+
"expires_at":"2023-01-15T20:10:45.637438Z",
38+
"created_at":"2022-12-16T20:10:45.637452Z",
39+
"updated_at":"2022-12-16T20:10:45.637452Z",
40+
"login_type":"token",
41+
"scope":"all",
42+
"lifetime_seconds":2592000,
43+
},
44+
{
45+
"id":"tBoVE3dqLl",
46+
"user_id":"f9ee61d8-1d84-4410-ab6e-c1ec1a641e0b",
47+
"last_used":"0001-01-01T00:00:00Z",
48+
"expires_at":"2023-01-15T20:10:45.637438Z",
49+
"created_at":"2022-12-16T20:10:45.637452Z",
50+
"updated_at":"2022-12-16T20:10:45.637452Z",
51+
"login_type":"token",
52+
"scope":"all",
53+
"lifetime_seconds":2592000,
54+
}
55+
]}
2456
/>
2557
</Section>
2658
</>

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

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { Maybe } from "components/Conditionals/Maybe"
1111
import { Stack } from "components/Stack/Stack"
1212
import { TableEmpty } from "components/TableEmpty/TableEmpty"
1313
import { TableLoader } from "components/TableLoader/TableLoader"
14+
import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
15+
import dayjs from "dayjs"
1416
import { FC } from "react"
1517

1618
export const Language = {
@@ -39,11 +41,11 @@ export const TokensPageView: FC<
3941
<Table>
4042
<TableHead>
4143
<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>
44+
<TableCell width="30%">{Language.idLabel}</TableCell>
45+
<TableCell width="20%">{Language.createdAtLabel}</TableCell>
46+
<TableCell width="20%">{Language.lastUsedLabel}</TableCell>
47+
<TableCell width="20%">{Language.expiresAtLabel}</TableCell>
48+
<TableCell width="10%"></TableCell>
4749
</TableRow>
4850
</TableHead>
4951
<TableBody>
@@ -52,18 +54,19 @@ export const TokensPageView: FC<
5254
</Maybe>
5355

5456
<ChooseOne>
55-
<Cond condition={Boolean(tokens?.length)}>
57+
<Cond condition={tokens?.length === 0}>
5658
<TableEmpty
5759
message={Language.emptyMessage}
5860
/>
5961
</Cond>
6062
<Cond>
6163
{tokens?.map((token) => {
62-
64+
const t = dayjs(token.last_used)
65+
const now = dayjs()
66+
const lastUsed = now.isBefore(t.add(100, "year")) ? t.fromNow() : "Never"
6367
return (
6468
<TableRow
6569
key={token.id}
66-
hover
6770
data-testid={`token-${token.id}`}
6871
tabIndex={0}
6972
>
@@ -79,24 +82,27 @@ export const TokensPageView: FC<
7982
<span
8083
style={{ color: theme.palette.text.secondary }}
8184
>
82-
{token.created_at}
85+
{dayjs(token.created_at).fromNow()}
8386
</span>
8487
</TableCell>
8588

8689

90+
<TableCell>
91+
{lastUsed}
92+
</TableCell>
93+
8794
<TableCell>
8895
<span
8996
style={{ color: theme.palette.text.secondary }}
9097
>
91-
{token.last_used}
98+
{dayjs(token.expires_at).fromNow()}
9299
</span>
93100
</TableCell>
94-
95101
<TableCell>
96102
<span
97103
style={{ color: theme.palette.text.secondary }}
98104
>
99-
{token.expires_at}
105+
<DeleteOutlineIcon />
100106
</span>
101107
</TableCell>
102108
</TableRow>

0 commit comments

Comments
 (0)