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/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 +++++++++++++++++++++++ 4 files changed, 272 insertions(+) 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/settings/views/user') 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.3