From d5847e2d2b68a1eb41d43be170cd4ddff9003cff Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Mon, 17 Mar 2025 15:06:17 +0100 Subject: [feature] Application creation + management via API + settings panel (#3906) * [feature] Application creation + management via API + settings panel * fix docs links * add errnorows test * use known application as shorter * add comment about side effects --- .../settings/views/admin/debug/apurl/index.tsx | 29 +-- .../settings/views/user/applications/callback.tsx | 121 +++++++++++ .../settings/views/user/applications/common.tsx | 85 ++++++++ .../settings/views/user/applications/detail.tsx | 226 +++++++++++++++++++++ .../settings/views/user/applications/index.tsx | 44 ++++ .../settings/views/user/applications/new.tsx | 150 ++++++++++++++ .../settings/views/user/applications/search.tsx | 190 +++++++++++++++++ web/source/settings/views/user/menu.tsx | 17 ++ web/source/settings/views/user/migration.tsx | 4 +- web/source/settings/views/user/posts/index.tsx | 2 +- web/source/settings/views/user/profile.tsx | 2 +- web/source/settings/views/user/router.tsx | 59 ++++-- 12 files changed, 885 insertions(+), 44 deletions(-) create mode 100644 web/source/settings/views/user/applications/callback.tsx create mode 100644 web/source/settings/views/user/applications/common.tsx create mode 100644 web/source/settings/views/user/applications/detail.tsx create mode 100644 web/source/settings/views/user/applications/index.tsx create mode 100644 web/source/settings/views/user/applications/new.tsx create mode 100644 web/source/settings/views/user/applications/search.tsx (limited to 'web/source/settings/views') diff --git a/web/source/settings/views/admin/debug/apurl/index.tsx b/web/source/settings/views/admin/debug/apurl/index.tsx index b66794132..9ad88aa03 100644 --- a/web/source/settings/views/admin/debug/apurl/index.tsx +++ b/web/source/settings/views/admin/debug/apurl/index.tsx @@ -17,16 +17,14 @@ along with this program. If not, see . */ -import React, { useEffect, useRef } from "react"; +import React from "react"; import { useTextInput } from "../../../../lib/form"; import { useLazyApURLQuery } from "../../../../lib/query/admin/debug"; import { TextInput } from "../../../../components/form/inputs"; import MutationButton from "../../../../components/form/mutation-button"; import { ApURLResponse } from "../../../../lib/types/debug"; import Loading from "../../../../components/loading"; - -// Used for syntax highlighting of json result. -import Prism from "../../../../../frontend/prism"; +import { HighlightedCode } from "../../../../components/highlightedcode"; export default function ApURL() { const urlField = useTextInput("url"); @@ -102,26 +100,5 @@ function ApURLResult({ }; const jsonStr = JSON.stringify(jsonObj, null, 2); - return ; -} - -function Highlighted({ jsonStr }: { jsonStr: string }) { - const ref = useRef(null); - useEffect(() => { - if (ref.current) { - Prism.highlightElement(ref.current); - } - }, []); - - // Prism takes control of the `pre` so wrap - // the whole thing in a div that we control. - return ( -
- 
-				
-					{jsonStr}
-				
-
-
- ); + return ; } diff --git a/web/source/settings/views/user/applications/callback.tsx b/web/source/settings/views/user/applications/callback.tsx new file mode 100644 index 000000000..f1634cc6f --- /dev/null +++ b/web/source/settings/views/user/applications/callback.tsx @@ -0,0 +1,121 @@ +/* + 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 { useSearch } from "wouter"; +import { Error as ErrorCmp } from "../../../components/error"; +import { useGetAccessTokenForAppMutation, useGetAppQuery } from "../../../lib/query/user/applications"; +import { useCallbackURL } from "./common"; +import useFormSubmit from "../../../lib/form/submit"; +import { useValue } from "../../../lib/form"; +import MutationButton from "../../../components/form/mutation-button"; +import FormWithData from "../../../lib/form/form-with-data"; +import { App } from "../../../lib/types/application"; +import { OAuthAccessToken } from "../../../lib/types/oauth"; + +export function AppTokenCallback({}) { + // Read the callback authorization + // information from the search params. + const search = useSearch(); + const urlQueryParams = new URLSearchParams(search); + const code = urlQueryParams.get("code"); + const appId = urlQueryParams.get("state"); + const error = urlQueryParams.get("error"); + const errorDescription = urlQueryParams.get("error_description"); + + if (error) { + let errString = error; + if (errorDescription) { + errString += ": " + errorDescription; + } + if (error === "invalid_scope") { + errString += ". You probably requested a token (sub-)scope that wasn't contained in the scopes of your application."; + } + const err = Error(errString); + return ; + } + + if (!code || !appId) { + const err = Error("code or app id not defined"); + return ; + } + + return( + <> + + + ); +} + + +function AccessForAppForm({ data: app, code }: { data: App, code: string }) { + const redirectURI = useCallbackURL(); + + // Prepare to call /oauth/token to + // exchange code for access token. + const form = { + client_id: useValue("client_id", app.client_id), + client_secret: useValue("client_secret", app.client_secret), + redirect_uri: useValue("redirect_uri", redirectURI), + code: useValue("code", code), + grant_type: useValue("grant_type", "authorization_code"), + + }; + const [ submit, result ] = useFormSubmit(form, useGetAccessTokenForAppMutation()); + + return ( +
+
+

Receive Access Token

+

+ To receive your user-level access token for application{app.name}, click on the button below. +
Your access token will be shown once and only once. +
Your access token provides access to your account; store it as carefully as you would store a password! +

+ + Learn more about how to use your access token (opens in a new tab) + +
+ + { result.data + ?
{(result.data as OAuthAccessToken).access_token}
+ :
+ } + + + + ); +} diff --git a/web/source/settings/views/user/applications/common.tsx b/web/source/settings/views/user/applications/common.tsx new file mode 100644 index 000000000..44f5570cb --- /dev/null +++ b/web/source/settings/views/user/applications/common.tsx @@ -0,0 +1,85 @@ +/* + 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, { useMemo } from "react"; +import { App } from "../../../lib/types/application"; +import { useStore } from "react-redux"; +import { RootState } from "../../../redux/store"; + +export const useAppWebsite = (app: App) => { + return useMemo(() => { + if (!app.website) { + return ""; + } + + try { + // Try to parse nicely and return link. + const websiteURL = new URL(app.website); + const websiteURLStr = websiteURL.toString(); + return ( + {websiteURLStr} + ); + } catch { + // Fall back to returning string. + return app.website; + } + }, [app.website]); +}; + +export const useCreated = (app: App) => { + return useMemo(() => { + const createdAt = new Date(app.created_at); + return ; + }, [app.created_at]); +}; + +export const useRedirectURIs= (app: App) => { + return useMemo(() => { + const length = app.redirect_uris.length; + if (length === 1) { + return app.redirect_uris[0]; + } + + return app.redirect_uris.map((redirectURI, i) => { + return i === 0 ? <>{redirectURI} : <>
{redirectURI}; + }); + + }, [app.redirect_uris]); +}; + +export const useCallbackURL = () => { + const state = useStore().getState() as RootState; + const instanceUrl = state.login.instanceUrl; + if (instanceUrl === undefined) { + throw "instanceUrl undefined"; + } + + return useMemo(() => { + const url = new URL(instanceUrl); + if (url === null) { + throw "redirectURI null"; + } + url.pathname = "/settings/user/applications/callback"; + return url.toString(); + }, [instanceUrl]); +}; diff --git a/web/source/settings/views/user/applications/detail.tsx b/web/source/settings/views/user/applications/detail.tsx new file mode 100644 index 000000000..5beeb0cce --- /dev/null +++ b/web/source/settings/views/user/applications/detail.tsx @@ -0,0 +1,226 @@ +/* + 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, { useState } from "react"; +import { useLocation, useParams } from "wouter"; +import FormWithData from "../../../lib/form/form-with-data"; +import BackButton from "../../../components/back-button"; +import { useBaseUrl } from "../../../lib/navigation/util"; +import { useDeleteAppMutation, useGetAppQuery, useGetOOBAuthCodeMutation } from "../../../lib/query/user/applications"; +import { App } from "../../../lib/types/application"; +import { useAppWebsite, useCallbackURL, useCreated, useRedirectURIs } from "./common"; +import MutationButton from "../../../components/form/mutation-button"; +import { useTextInput } from "../../../lib/form"; +import { TextInput } from "../../../components/form/inputs"; +import { useScopesPermittedBy, useScopesValidator } from "../../../lib/util/formvalidators"; + +export default function AppDetail({ }) { + const params: { appId: string } = useParams(); + const baseUrl = useBaseUrl(); + const backLocation: String = history.state?.backLocation ?? `~${baseUrl}`; + + return ( +
+

Application Details

+ +
+ ); +} + +function AppDetailForm({ data: app, backLocation }: { data: App, backLocation: string }) { + return ( + <> + + + + + ); +} + +function AppBasicInfo({ app }: { app: App }) { + const appWebsite = useAppWebsite(app); + const created = useCreated(app); + const redirectURIs = useRedirectURIs(app); + const [ showClient, setShowClient ] = useState(false); + const [ showSecret, setShowSecret ] = useState(false); + + return ( +
+
+
Name:
+
{app.name}
+
+ + { appWebsite && +
+
Website:
+
{appWebsite}
+
+ } + +
+
Created:
+
{created}
+
+ +
+
Scopes:
+
{app.scopes.join(" ")}
+
+ +
+
Redirect URI(s):
+
{redirectURIs}
+
+ +
+
Vapid key:
+
{app.vapid_key}
+
+ +
+
Client ID:
+ { showClient + ?
{app.client_id}
+ :
+ } +
+ +
+
Client secret:
+ { showSecret + ?
{app.client_secret}
+ :
+ } +
+
+ ); +} + +function AccessTokenForm({ app }: { app: App }) { + const [ getOOBAuthCode, result ] = useGetOOBAuthCodeMutation(); + const permittedScopes = useScopesPermittedBy(); + const validateScopes = useScopesValidator(); + const scope = useTextInput("scope", { + defaultValue: app.scopes.join(" "), + validator: (wantsScopesStr: string) => { + if (wantsScopesStr === "") { + return ""; + } + + // Check requested scopes are valid scopes. + const wantsScopes = wantsScopesStr.split(" "); + const invalidScopesMsg = validateScopes(wantsScopes); + if (invalidScopesMsg !== "") { + return invalidScopesMsg; + } + + // Check requested scopes are permitted by the app. + return permittedScopes(app.scopes, wantsScopes); + } + }); + + const callbackURL = useCallbackURL(); + const disabled = !app.redirect_uris.includes(callbackURL); + return ( +
{ + e.preventDefault(); + getOOBAuthCode({ + app, + scope: scope.value ?? "", + redirectURI: callbackURL, + }); + }} + > +
+

Request An API Access Token

+

+ If your application redirect URIs includes the settings panel callback URL, + you can use this section to request an access token that you can use to make API calls. +
The token scopes specified below must be equal to, or a subset of, the scopes + you provided when you created the application. +
After clicking "Request access token", you will be redirected to the sign in + page for your instance, where you must provide your credentials in order to authorize + your application to act on your behalf. You will then be redirected again to a page + where you can view your new access token. +

+ + Learn more about the OAuth authentication flow (opens in a new tab) + +
+ + + + + + ); +} + +function DeleteAppForm({ app, backLocation }: { app: App, backLocation: string }) { + const [ _location, setLocation ] = useLocation(); + const [ deleteApp, result ] = useDeleteAppMutation(); + + return ( +
+
+

Delete Application

+

+ You can use this button to delete the application. +
Any tokens created by the application will also be deleted. +

+
+ { + e.preventDefault(); + deleteApp(app.id); + setLocation(backLocation); + }} + disabled={false} + showError={false} + result={result} + /> + + ); +} diff --git a/web/source/settings/views/user/applications/index.tsx b/web/source/settings/views/user/applications/index.tsx new file mode 100644 index 000000000..0a86adf16 --- /dev/null +++ b/web/source/settings/views/user/applications/index.tsx @@ -0,0 +1,44 @@ +/* + 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 AppsSearchForm from "./search"; + +export default function Applications() { + return ( +
+
+

Applications

+

+ On this page you can search through applications you've created. + To manage an application, click on it to go to the detailed view. +

+ + Learn more about managing your applications (opens in a new tab) + +
+ +
+ ); +} diff --git a/web/source/settings/views/user/applications/new.tsx b/web/source/settings/views/user/applications/new.tsx new file mode 100644 index 000000000..fc5e5cc42 --- /dev/null +++ b/web/source/settings/views/user/applications/new.tsx @@ -0,0 +1,150 @@ +/* + 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 useFormSubmit from "../../../lib/form/submit"; +import { useTextInput } from "../../../lib/form"; +import MutationButton from "../../../components/form/mutation-button"; +import { TextArea, TextInput } from "../../../components/form/inputs"; +import { useLocation } from "wouter"; +import { useCreateAppMutation } from "../../../lib/query/user/applications"; +import { urlValidator, useScopesValidator } from "../../../lib/util/formvalidators"; +import { useCallbackURL } from "./common"; +import { HighlightedCode } from "../../../components/highlightedcode"; + +export default function NewApp() { + const [ _location, setLocation ] = useLocation(); + const callbackURL = useCallbackURL(); + const scopesValidator = useScopesValidator(); + + const form = { + name: useTextInput("client_name"), + redirect_uris: useTextInput("redirect_uris", { + validator: (redirectURIs: string) => { + if (redirectURIs === "") { + return ""; + } + + const invalids = redirectURIs. + split("\n"). + map(redirectURI => redirectURI === "urn:ietf:wg:oauth:2.0:oob" ? "" : urlValidator(redirectURI)). + flatMap((invalid) => invalid || []); + + return invalids.join(", "); + } + }), + scopes: useTextInput("scopes", { + validator: (scopesStr: string) => { + if (scopesStr === "") { + return ""; + } + return scopesValidator(scopesStr.split(" ")); + } + }), + website: useTextInput("website", { + validator: urlValidator, + }), + }; + + const [formSubmit, result] = useFormSubmit( + form, + useCreateAppMutation(), + { + changedOnly: false, + onFinish: (res) => { + if (res.data) { + // Creation successful, + // redirect to apps overview. + setLocation(`/search`); + } + }, + }); + + return ( +
+
+

New Application

+

+ On this page you can create a new managed OAuth client application, with the specified redirect URIs and scopes. +
If not specified, redirect URIs defaults to urn:ietf:wg:oauth:2.0:oob, and scopes defaults to read. +
If you want to obtain an access token for your application here in the settings panel, include this settings panel callback URL in your redirect URIs: + +

+ + Learn more about application redirect URIs and scopes (opens in a new tab) + +
+ + + + + +