From 829143d2636d4c0d274bf2ab4559912f472a2bc4 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Tue, 4 Mar 2025 11:01:25 +0100 Subject: [feature] Add token review / delete to backend + settings panel (#3845) --- web/source/settings/lib/query/gts-api.ts | 3 +- web/source/settings/lib/query/user/tokens.ts | 73 ++++++++ web/source/settings/lib/types/tokeninfo.ts | 62 +++++++ web/source/settings/style.css | 27 +++ web/source/settings/views/user/menu.tsx | 5 + web/source/settings/views/user/router.tsx | 3 + web/source/settings/views/user/tokens/index.tsx | 50 ++++++ web/source/settings/views/user/tokens/search.tsx | 214 +++++++++++++++++++++++ 8 files changed, 436 insertions(+), 1 deletion(-) create mode 100644 web/source/settings/lib/query/user/tokens.ts create mode 100644 web/source/settings/lib/types/tokeninfo.ts create mode 100644 web/source/settings/views/user/tokens/index.tsx create mode 100644 web/source/settings/views/user/tokens/search.tsx (limited to 'web/source') diff --git a/web/source/settings/lib/query/gts-api.ts b/web/source/settings/lib/query/gts-api.ts index 34b66913a..401423766 100644 --- a/web/source/settings/lib/query/gts-api.ts +++ b/web/source/settings/lib/query/gts-api.ts @@ -171,7 +171,8 @@ export const gtsApi = createApi({ "InteractionRequest", "DomainPermissionDraft", "DomainPermissionExclude", - "DomainPermissionSubscription" + "DomainPermissionSubscription", + "TokenInfo", ], endpoints: (build) => ({ instanceV1: build.query({ diff --git a/web/source/settings/lib/query/user/tokens.ts b/web/source/settings/lib/query/user/tokens.ts new file mode 100644 index 000000000..5ba4d1355 --- /dev/null +++ b/web/source/settings/lib/query/user/tokens.ts @@ -0,0 +1,73 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import { + SearchTokenInfoParams, + SearchTokenInfoResp, + TokenInfo, +} from "../../types/tokeninfo"; +import { gtsApi } from "../gts-api"; +import parse from "parse-link-header"; + +const extended = gtsApi.injectEndpoints({ + endpoints: (build) => ({ + searchTokenInfo: build.query({ + query: (form) => { + const params = new(URLSearchParams); + Object.entries(form).forEach(([k, v]) => { + if (v !== undefined) { + params.append(k, v); + } + }); + + let query = ""; + if (params.size !== 0) { + query = `?${params.toString()}`; + } + + return { + url: `/api/v1/tokens${query}` + }; + }, + // Headers required for paging. + transformResponse: (apiResp: TokenInfo[], meta) => { + const tokens = apiResp; + const linksStr = meta?.response?.headers.get("Link"); + const links = parse(linksStr); + return { tokens, links }; + }, + providesTags: [{ type: "TokenInfo", id: "TRANSFORMED" }] + }), + invalidateToken: build.mutation({ + query: (id) => ({ + method: "POST", + url: `/api/v1/tokens/${id}/invalidate`, + }), + invalidatesTags: (res) => + res + ? [{ type: "TokenInfo", id: "TRANSFORMED" }, { type: "InteractionRequest", id: res.id }] + : [{ type: "TokenInfo", id: "TRANSFORMED" }] + }), + }) +}); + +export const { + useLazySearchTokenInfoQuery, + useInvalidateTokenMutation, +} = extended; diff --git a/web/source/settings/lib/types/tokeninfo.ts b/web/source/settings/lib/types/tokeninfo.ts new file mode 100644 index 000000000..989ed67be --- /dev/null +++ b/web/source/settings/lib/types/tokeninfo.ts @@ -0,0 +1,62 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import { Links } from "parse-link-header"; + +export interface TokenInfo { + id: string; + created_at: string; + last_used?: string; + scope: string; + application: { + name: string; + website?: string; + }; +} + +/** + * Parameters for GET to /api/v1/tokens. + */ +export interface SearchTokenInfoParams { + /** + * If set, show only items older (ie., lower) than the given ID. + * Item with the given ID will not be included in response. + */ + max_id?: string; + /** + * If set, show only items newer (ie., higher) than the given ID. + * Item with the given ID will not be included in response. + */ + since_id?: string; + /** + * If set, show only items *immediately newer* than the given ID. + * Item with the given ID will not be included in response. + */ + min_id?: string; + /** + * If set, limit returned items to this number. + * Else, fall back to GtS API defaults. + */ + limit?: number; +} + +export interface SearchTokenInfoResp { + tokens: TokenInfo[]; + links: Links | null; +} diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 75e7e7e3f..5a85f370e 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -1468,6 +1468,33 @@ button.tab-button { gap: 1rem; } +.tokens-view { + .token-info { + .info-list { + border: none; + width: 100%; + + .info-list-entry { + background: none; + padding: 0; + } + + > .info-list-entry > .monospace { + font-size: large; + } + } + + .action-buttons { + margin-top: 0.5rem; + > .mutation-button + > button { + font-size: 1rem; + line-height: 1rem; + } + } + } +} + .instance-rules { list-style-position: inside; margin: 0; diff --git a/web/source/settings/views/user/menu.tsx b/web/source/settings/views/user/menu.tsx index 85734ae52..570912ef2 100644 --- a/web/source/settings/views/user/menu.tsx +++ b/web/source/settings/views/user/menu.tsx @@ -63,6 +63,11 @@ export default function UserMenu() { itemUrl="export-import" icon="fa-floppy-o" /> + ); } diff --git a/web/source/settings/views/user/router.tsx b/web/source/settings/views/user/router.tsx index 091dd40ae..be1fa4434 100644 --- a/web/source/settings/views/user/router.tsx +++ b/web/source/settings/views/user/router.tsx @@ -28,6 +28,7 @@ import EmailPassword from "./emailpassword"; import ExportImport from "./export-import"; import InteractionRequests from "./interactions"; import InteractionRequestDetail from "./interactions/detail"; +import Tokens from "./tokens"; /** * - /settings/user/profile @@ -35,6 +36,7 @@ import InteractionRequestDetail from "./interactions/detail"; * - /settings/user/emailpassword * - /settings/user/migration * - /settings/user/export-import + * - /settings/user/tokens * - /settings/users/interaction_requests */ export default function UserRouter() { @@ -52,6 +54,7 @@ export default function UserRouter() { + diff --git a/web/source/settings/views/user/tokens/index.tsx b/web/source/settings/views/user/tokens/index.tsx new file mode 100644 index 000000000..c8a8b8e38 --- /dev/null +++ b/web/source/settings/views/user/tokens/index.tsx @@ -0,0 +1,50 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import React from "react"; +import TokensSearchForm from "./search"; + +export default function Tokens() { + return ( +
+
+

Access Tokens

+

+ On this page you can search through access tokens owned by applications that you have authorized to + access your account and/or perform actions on your behalf. You can invalidate a token by clicking on + the invalidate button under a token. This will remove the token from the database. +

+ + If you see any tokens from applications that you do not recognize, or do not remember authorizing to access + your account, then you should invalidate them, and consider changing your password as soon as possible. + +

+ + Learn more about managing your access tokens (opens in a new tab) + +
+ +
+ ); +} diff --git a/web/source/settings/views/user/tokens/search.tsx b/web/source/settings/views/user/tokens/search.tsx new file mode 100644 index 000000000..87080cc8f --- /dev/null +++ b/web/source/settings/views/user/tokens/search.tsx @@ -0,0 +1,214 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +import React, { ReactNode, useEffect, useMemo } from "react"; + +import { useTextInput } from "../../../lib/form"; +import { PageableList } from "../../../components/pageable-list"; +import MutationButton from "../../../components/form/mutation-button"; +import { useLocation, useSearch } from "wouter"; +import { Select } from "../../../components/form/inputs"; +import { useInvalidateTokenMutation, useLazySearchTokenInfoQuery } from "../../../lib/query/user/tokens"; +import { TokenInfo } from "../../../lib/types/tokeninfo"; + +export default function TokensSearchForm() { + const [ location, setLocation ] = useLocation(); + const search = useSearch(); + const urlQueryParams = useMemo(() => new URLSearchParams(search), [search]); + const [ searchTokenInfo, searchRes ] = useLazySearchTokenInfoQuery(); + + // Populate search form using values from + // urlQueryParams, to allow paging. + const form = { + limit: useTextInput("limit", { defaultValue: urlQueryParams.get("limit") ?? "20" }) + }; + + // On mount, trigger search. + useEffect(() => { + searchTokenInfo(Object.fromEntries(urlQueryParams), true); + }, [urlQueryParams, searchTokenInfo]); + + // Rather than triggering the search directly, + // the "submit" button changes the location + // based on form field params, and lets the + // useEffect hook above actually do the search. + function submitQuery(e) { + e.preventDefault(); + + // Parse query parameters. + const entries = Object.entries(form).map(([k, v]) => { + // Take only defined form fields. + if (v.value === undefined) { + return null; + } else if (typeof v.value === "string" && v.value.length === 0) { + return null; + } + + return [[k, v.value.toString()]]; + }).flatMap(kv => { + // Remove any nulls. + return kv !== null ? kv : []; + }); + + const searchParams = new URLSearchParams(entries); + setLocation(location + "?" + searchParams.toString()); + } + + // Function to map an item to a list entry. + function itemToEntry(tokenInfo: TokenInfo): ReactNode { + return ( + + ); + } + + return ( + <> +
+ + + + No tokens found.} + prevNextLinks={searchRes.data?.links} + /> + + ); +} + +interface TokenInfoListEntryProps { + tokenInfo: TokenInfo; +} + +function TokenInfoListEntry({ tokenInfo }: TokenInfoListEntryProps) { + const appWebsite = useMemo(() => { + if (!tokenInfo.application.website) { + return ""; + } + + try { + // Try to parse nicely and return link. + const websiteURL = new URL(tokenInfo.application.website); + const websiteURLStr = websiteURL.toString(); + return ( + {websiteURLStr} + ); + } catch { + // Fall back to returning string. + return tokenInfo.application.website; + } + }, [tokenInfo.application.website]); + + const created = useMemo(() => { + const createdAt = new Date(tokenInfo.created_at); + return ; + }, [tokenInfo.created_at]); + + const lastUsed = useMemo(() => { + if (!tokenInfo.last_used) { + return "unknown/never"; + } + + const lastUsed = new Date(tokenInfo.last_used); + return ; + }, [tokenInfo.last_used]); + + const [ invalidate, invalidateResult ] = useInvalidateTokenMutation(); + + return ( + +
+
+
App name:
+
{tokenInfo.application.name}
+
+ { appWebsite && +
+
App website:
+
{appWebsite}
+
+ } +
+
Scope:
+
{tokenInfo.scope}
+
+
+
Created:
+
{created}
+
+
+
Last used:
+
{lastUsed}
+
+
+
+ { + e.preventDefault(); + e.stopPropagation(); + invalidate(tokenInfo.id); + }} + disabled={false} + showError={true} + result={invalidateResult} + /> +
+ + ); +} -- cgit v1.2.3