diff options
Diffstat (limited to 'web/source/settings/views')
| -rw-r--r-- | web/source/settings/views/user/menu.tsx | 5 | ||||
| -rw-r--r-- | web/source/settings/views/user/router.tsx | 3 | ||||
| -rw-r--r-- | web/source/settings/views/user/tokens/index.tsx | 50 | ||||
| -rw-r--r-- | web/source/settings/views/user/tokens/search.tsx | 214 |
4 files changed, 272 insertions, 0 deletions
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" /> + <MenuItem + name="Access Tokens" + itemUrl="tokens" + icon="fa-certificate" + /> </MenuItem> ); } 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() { <Route path="/emailpassword" component={EmailPassword} /> <Route path="/migration" component={UserMigration} /> <Route path="/export-import" component={ExportImport} /> + <Route path="/tokens" component={Tokens} /> <InteractionRequestsRouter /> <Route><Redirect to="/profile" /></Route> </Switch> 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 <http://www.gnu.org/licenses/>. +*/ + +import React from "react"; +import TokensSearchForm from "./search"; + +export default function Tokens() { + return ( + <div className="tokens-view"> + <div className="form-section-docs"> + <h1>Access Tokens</h1> + <p> + 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. + <br/><br/> + <strong> + 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. + </strong> + </p> + <a + href="https://docs.gotosocial.org/en/latest/user_guide/settings/#access-tokens" + target="_blank" + className="docslink" + rel="noreferrer" + > + Learn more about managing your access tokens (opens in a new tab) + </a> + </div> + <TokensSearchForm /> + </div> + ); +} 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 <http://www.gnu.org/licenses/>. +*/ + +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 ( + <TokenInfoListEntry + key={tokenInfo.id} + tokenInfo={tokenInfo} + /> + ); + } + + return ( + <> + <form + onSubmit={submitQuery} + // Prevent password managers + // trying to fill in fields. + autoComplete="off" + > + <Select + field={form.limit} + label="Items per page" + options={ + <> + <option value="20">20</option> + <option value="50">50</option> + <option value="0">No limit / show all</option> + </> + } + ></Select> + <MutationButton + disabled={false} + label={"Search"} + result={searchRes} + /> + </form> + <PageableList + isLoading={searchRes.isLoading} + isFetching={searchRes.isFetching} + isSuccess={searchRes.isSuccess} + items={searchRes.data?.tokens} + itemToEntry={itemToEntry} + isError={searchRes.isError} + error={searchRes.error} + emptyMessage={<b>No tokens found.</b>} + 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 ( + <a + href={websiteURLStr} + target="_blank" + rel="nofollow noreferrer noopener" + >{websiteURLStr}</a> + ); + } catch { + // Fall back to returning string. + return tokenInfo.application.website; + } + }, [tokenInfo.application.website]); + + const created = useMemo(() => { + const createdAt = new Date(tokenInfo.created_at); + return <time dateTime={tokenInfo.created_at}>{createdAt.toDateString()}</time>; + }, [tokenInfo.created_at]); + + const lastUsed = useMemo(() => { + if (!tokenInfo.last_used) { + return "unknown/never"; + } + + const lastUsed = new Date(tokenInfo.last_used); + return <time dateTime={tokenInfo.last_used}>{lastUsed.toDateString()}</time>; + }, [tokenInfo.last_used]); + + const [ invalidate, invalidateResult ] = useInvalidateTokenMutation(); + + return ( + <span + className={`token-info entry`} + aria-label={`${tokenInfo.application.name}, scope: ${tokenInfo.scope}`} + title={`${tokenInfo.application.name}, scope: ${tokenInfo.scope}`} + > + <dl className="info-list"> + <div className="info-list-entry"> + <dt>App name:</dt> + <dd className="text-cutoff">{tokenInfo.application.name}</dd> + </div> + { appWebsite && + <div className="info-list-entry"> + <dt>App website:</dt> + <dd className="text-cutoff">{appWebsite}</dd> + </div> + } + <div className="info-list-entry"> + <dt>Scope:</dt> + <dd className="text-cutoff monospace">{tokenInfo.scope}</dd> + </div> + <div className="info-list-entry"> + <dt>Created:</dt> + <dd className="text-cutoff">{created}</dd> + </div> + <div className="info-list-entry"> + <dt>Last used:</dt> + <dd className="text-cutoff">{lastUsed}</dd> + </div> + </dl> + <div className="action-buttons"> + <MutationButton + label={`Invalidate token`} + title={`Invalidate token`} + type="button" + className="button danger" + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + invalidate(tokenInfo.id); + }} + disabled={false} + showError={true} + result={invalidateResult} + /> + </div> + </span> + ); +} |