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/user/applications/detail.tsx | 226 +++++++++++++++++++++ 1 file changed, 226 insertions(+) create mode 100644 web/source/settings/views/user/applications/detail.tsx (limited to 'web/source/settings/views/user/applications/detail.tsx') 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} + /> + + ); +} -- cgit v1.2.3