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/components/authorization/index.tsx | 12 +- .../settings/components/authorization/login.tsx | 2 +- web/source/settings/components/highlightedcode.tsx | 44 ++++ web/source/settings/components/status.tsx | 2 +- .../settings/components/user-logout-card.tsx | 2 +- web/source/settings/index.tsx | 2 +- .../settings/lib/query/admin/custom-emoji/index.ts | 6 +- .../lib/query/admin/domain-permissions/export.ts | 2 +- web/source/settings/lib/query/gts-api.ts | 3 +- web/source/settings/lib/query/login/index.ts | 198 ++++++++++++++++++ web/source/settings/lib/query/oauth/index.ts | 205 ------------------- web/source/settings/lib/query/user/applications.ts | 146 +++++++++++++ web/source/settings/lib/types/application.ts | 71 +++++++ web/source/settings/lib/types/oauth.ts | 49 +++++ web/source/settings/lib/types/scopes.ts | 139 +++++++++++++ web/source/settings/lib/util/formvalidators.ts | 71 ++++++- web/source/settings/lib/util/index.ts | 2 +- web/source/settings/redux/login.ts | 69 +++++++ web/source/settings/redux/oauth.ts | 89 -------- web/source/settings/redux/store.ts | 10 +- web/source/settings/style.css | 56 +++++ .../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 ++++-- 33 files changed, 1749 insertions(+), 360 deletions(-) create mode 100644 web/source/settings/components/highlightedcode.tsx create mode 100644 web/source/settings/lib/query/login/index.ts delete mode 100644 web/source/settings/lib/query/oauth/index.ts create mode 100644 web/source/settings/lib/query/user/applications.ts create mode 100644 web/source/settings/lib/types/application.ts create mode 100644 web/source/settings/lib/types/oauth.ts create mode 100644 web/source/settings/lib/types/scopes.ts create mode 100644 web/source/settings/redux/login.ts delete mode 100644 web/source/settings/redux/oauth.ts 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') diff --git a/web/source/settings/components/authorization/index.tsx b/web/source/settings/components/authorization/index.tsx index 7c6373399..3eeeb393a 100644 --- a/web/source/settings/components/authorization/index.tsx +++ b/web/source/settings/components/authorization/index.tsx @@ -17,7 +17,7 @@ along with this program. If not, see . */ -import { useLogoutMutation, useVerifyCredentialsQuery } from "../../lib/query/oauth"; +import { useLogoutMutation, useVerifyCredentialsQuery } from "../../lib/query/login"; import { store } from "../../redux/store"; import React, { ReactNode } from "react"; @@ -27,8 +27,8 @@ import { Error } from "../error"; import { NoArg } from "../../lib/types/query"; export function Authorization({ App }) { - const { loginState, expectingRedirect } = store.getState().oauth; - const skip = (loginState == "none" || loginState == "logout" || expectingRedirect); + const { current: loginState, expectingRedirect } = store.getState().login; + const skip = (loginState == "none" || loginState == "loggedout" || expectingRedirect); const [ logoutQuery ] = useLogoutMutation(); const { @@ -46,9 +46,9 @@ export function Authorization({ App }) { showLogin = false; let loadingInfo = ""; - if (loginState == "callback") { + if (loginState == "awaitingcallback") { loadingInfo = "Processing OAUTH callback."; - } else if (loginState == "login") { + } else if (loginState == "loggedin") { loadingInfo = "Verifying stored login."; } @@ -70,7 +70,7 @@ export function Authorization({ App }) { ); } - if (loginState == "login" && isSuccess) { + if (loginState == "loggedin" && isSuccess) { return ; } else { return ( diff --git a/web/source/settings/components/authorization/login.tsx b/web/source/settings/components/authorization/login.tsx index 28ed7953c..c54125972 100644 --- a/web/source/settings/components/authorization/login.tsx +++ b/web/source/settings/components/authorization/login.tsx @@ -19,7 +19,7 @@ import React from "react"; -import { useAuthorizeFlowMutation } from "../../lib/query/oauth"; +import { useAuthorizeFlowMutation } from "../../lib/query/login"; import { useTextInput, useValue } from "../../lib/form"; import useFormSubmit from "../../lib/form/submit"; import MutationButton from "../form/mutation-button"; diff --git a/web/source/settings/components/highlightedcode.tsx b/web/source/settings/components/highlightedcode.tsx new file mode 100644 index 000000000..eccecd709 --- /dev/null +++ b/web/source/settings/components/highlightedcode.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, { useEffect, useRef } from "react"; + +// Used for syntax highlighting of json result. +import Prism from "../../frontend/prism"; + +export function HighlightedCode({ code, lang }: { code: string, lang: 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 ( +
+ 
+				
+					{code}
+				
+
+
+ ); +} diff --git a/web/source/settings/components/status.tsx b/web/source/settings/components/status.tsx index ec7af3ad3..701a9f8b7 100644 --- a/web/source/settings/components/status.tsx +++ b/web/source/settings/components/status.tsx @@ -18,7 +18,7 @@ */ import React from "react"; -import { useVerifyCredentialsQuery } from "../lib/query/oauth"; +import { useVerifyCredentialsQuery } from "../lib/query/login"; import { MediaAttachment, Status as StatusType } from "../lib/types/status"; import sanitize from "sanitize-html"; diff --git a/web/source/settings/components/user-logout-card.tsx b/web/source/settings/components/user-logout-card.tsx index f9acc9698..e15a1ee6a 100644 --- a/web/source/settings/components/user-logout-card.tsx +++ b/web/source/settings/components/user-logout-card.tsx @@ -20,7 +20,7 @@ import React from "react"; import Loading from "./loading"; import { Error as ErrorC } from "./error"; -import { useVerifyCredentialsQuery, useLogoutMutation } from "../lib/query/oauth"; +import { useVerifyCredentialsQuery, useLogoutMutation } from "../lib/query/login"; import { useInstanceV1Query } from "../lib/query/gts-api"; export default function UserLogoutCard() { diff --git a/web/source/settings/index.tsx b/web/source/settings/index.tsx index 5317658d2..c9ed5c30b 100644 --- a/web/source/settings/index.tsx +++ b/web/source/settings/index.tsx @@ -66,7 +66,7 @@ export function App({ account }: AppProps) { Ensure user ends up somewhere if they just open /settings. */} - + diff --git a/web/source/settings/lib/query/admin/custom-emoji/index.ts b/web/source/settings/lib/query/admin/custom-emoji/index.ts index 56684f03b..c5dd0a814 100644 --- a/web/source/settings/lib/query/admin/custom-emoji/index.ts +++ b/web/source/settings/lib/query/admin/custom-emoji/index.ts @@ -141,7 +141,7 @@ const extended = gtsApi.injectEndpoints({ searchItemForEmoji: build.mutation({ async queryFn(url, api, _extraOpts, fetchWithBQ) { const state = api.getState() as RootState; - const oauthState = state.oauth; + const loginState = state.login; // First search for given url. const searchRes = await fetchWithBQ({ @@ -161,8 +161,8 @@ const extended = gtsApi.injectEndpoints({ // Ensure emojis domain is not OUR domain. If it // is, we already have the emojis by definition. - if (oauthState.instanceUrl !== undefined) { - if (domain == new URL(oauthState.instanceUrl).host) { + if (loginState.instanceUrl !== undefined) { + if (domain == new URL(loginState.instanceUrl).host) { throw "LOCAL_INSTANCE"; } } diff --git a/web/source/settings/lib/query/admin/domain-permissions/export.ts b/web/source/settings/lib/query/admin/domain-permissions/export.ts index 868e3f7a4..f258991c6 100644 --- a/web/source/settings/lib/query/admin/domain-permissions/export.ts +++ b/web/source/settings/lib/query/admin/domain-permissions/export.ts @@ -116,7 +116,7 @@ const extended = gtsApi.injectEndpoints({ // Parse filename to something like: // `example.org-blocklist-2023-10-09.json`. const state = api.getState() as RootState; - const instanceUrl = state.oauth.instanceUrl?? "unknown"; + const instanceUrl = state.login.instanceUrl?? "unknown"; const domain = new URL(instanceUrl).host; const date = new Date(); const filename = [ diff --git a/web/source/settings/lib/query/gts-api.ts b/web/source/settings/lib/query/gts-api.ts index 401423766..540191132 100644 --- a/web/source/settings/lib/query/gts-api.ts +++ b/web/source/settings/lib/query/gts-api.ts @@ -77,7 +77,7 @@ const gtsBaseQuery: BaseQueryFn< // Retrieve state at the moment // this function was called. const state = api.getState() as RootState; - const { instanceUrl, token } = state.oauth; + const { instanceUrl, token } = state.login; // Derive baseUrl dynamically. let baseUrl: string | undefined; @@ -160,6 +160,7 @@ export const gtsApi = createApi({ reducerPath: "api", baseQuery: gtsBaseQuery, tagTypes: [ + "Application", "Auth", "Emoji", "Report", diff --git a/web/source/settings/lib/query/login/index.ts b/web/source/settings/lib/query/login/index.ts new file mode 100644 index 000000000..e3b3b94a1 --- /dev/null +++ b/web/source/settings/lib/query/login/index.ts @@ -0,0 +1,198 @@ +/* + 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 type { FetchBaseQueryError } from '@reduxjs/toolkit/query'; + +import { gtsApi } from "../gts-api"; +import { + setToken as oauthSetToken, + remove as oauthRemove, + authorize as oauthAuthorize, +} from "../../../redux/login"; +import { RootState } from '../../../redux/store'; +import { Account } from '../../types/account'; +import { OAuthAccessTokenRequestBody } from '../../types/oauth'; + +function getSettingsURL() { + /* + needed in case the settings interface isn't hosted at /settings but + some subpath like /gotosocial/settings. Other parts of the code don't + take this into account yet so mostly future-proofing. + + Also drops anything past /settings/, because authorization urls that are too long + get rejected by GTS. + */ + const [pre, _past] = window.location.pathname.split("/settings"); + return `${window.location.origin}${pre}/settings`; +} + +const SETTINGS_URL = (getSettingsURL()); + +// Couple auth functions here require multiple requests as +// part of an OAuth token 'flow'. To keep things simple for +// callers of these query functions, the multiple requests +// are chained within one query. +// +// https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query +const extended = gtsApi.injectEndpoints({ + endpoints: (build) => ({ + verifyCredentials: build.query({ + providesTags: (_res, error) => + error == undefined ? ["Auth"] : [], + async queryFn(_arg, api, _extraOpts, fetchWithBQ) { + const state = api.getState() as RootState; + const loginState = state.login; + + // If we're not in the middle of an auth/callback, + // we may already have an auth token, so just + // return a standard verify_credentials query. + if (loginState.current != 'awaitingcallback') { + return fetchWithBQ({ + url: `/api/v1/accounts/verify_credentials` + }); + } + + // We're in the middle of an auth/callback flow. + // Try to retrieve callback code from URL query. + const urlParams = new URLSearchParams(window.location.search); + const code = urlParams.get("code"); + if (code == undefined) { + return { + error: { + status: 400, + statusText: 'Bad Request', + data: {"error":"Waiting for callback, but no ?code= provided in url."}, + }, + }; + } + + // Retrieve app with which the + // callback code was generated. + const app = loginState.app; + if (app == undefined || app.client_id == undefined) { + return { + error: { + status: 400, + statusText: 'Bad Request', + data: {"error":"No stored app registration data, can't finish login flow."}, + }, + }; + } + + // Use the provided code and app + // secret to request an auth token. + const tokenReqBody: OAuthAccessTokenRequestBody = { + client_id: app.client_id, + client_secret: app.client_secret, + redirect_uri: SETTINGS_URL, + grant_type: "authorization_code", + code: code + }; + + const tokenResult = await fetchWithBQ({ + method: "POST", + url: "/oauth/token", + body: tokenReqBody, + }); + if (tokenResult.error) { + return { error: tokenResult.error as FetchBaseQueryError }; + } + + // Remove ?code= query param from + // url, we don't want it anymore. + window.history.replaceState({}, document.title, window.location.pathname); + + // Store returned token in redux. + api.dispatch(oauthSetToken(tokenResult.data)); + + // We're now authed! So return + // standard verify_credentials query. + return fetchWithBQ({ + url: `/api/v1/accounts/verify_credentials` + }); + } + }), + + authorizeFlow: build.mutation({ + async queryFn(formData, api, _extraOpts, fetchWithBQ) { + const state = api.getState() as RootState; + const loginState = state.login; + + let instanceUrl: string; + if (!formData.instance.startsWith("http")) { + formData.instance = `https://${formData.instance}`; + } + + instanceUrl = new URL(formData.instance).origin; + if (loginState?.instanceUrl == instanceUrl && loginState.app) { + return { data: loginState.app }; + } + + const appResult = await fetchWithBQ({ + method: "POST", + baseUrl: instanceUrl, + url: "/api/v1/apps", + body: { + client_name: "GoToSocial Settings", + scopes: formData.scopes, + redirect_uris: SETTINGS_URL, + website: SETTINGS_URL + } + }); + if (appResult.error) { + return { error: appResult.error as FetchBaseQueryError }; + } + + const app = appResult.data as any; + + app.scopes = formData.scopes; + api.dispatch(oauthAuthorize({ + instanceUrl: instanceUrl, + app: app, + current: "awaitingcallback", + expectingRedirect: true + })); + + const url = new URL(instanceUrl); + url.pathname = "/oauth/authorize"; + url.searchParams.set("client_id", app.client_id); + url.searchParams.set("redirect_uri", SETTINGS_URL); + url.searchParams.set("response_type", "code"); + url.searchParams.set("scope", app.scopes); + + const redirectURL = url.toString(); + window.location.assign(redirectURL); + return { data: null }; + }, + }), + logout: build.mutation({ + queryFn: (_arg, api) => { + api.dispatch(oauthRemove()); + return { data: null }; + }, + invalidatesTags: ["Auth"] + }) + }) +}); + +export const { + useVerifyCredentialsQuery, + useAuthorizeFlowMutation, + useLogoutMutation, +} = extended; diff --git a/web/source/settings/lib/query/oauth/index.ts b/web/source/settings/lib/query/oauth/index.ts deleted file mode 100644 index e151b0aee..000000000 --- a/web/source/settings/lib/query/oauth/index.ts +++ /dev/null @@ -1,205 +0,0 @@ -/* - 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 type { FetchBaseQueryError } from '@reduxjs/toolkit/query'; - -import { gtsApi } from "../gts-api"; -import { - setToken as oauthSetToken, - remove as oauthRemove, - authorize as oauthAuthorize, -} from "../../../redux/oauth"; -import { RootState } from '../../../redux/store'; -import { Account } from '../../types/account'; - -export interface OauthTokenRequestBody { - client_id: string; - client_secret: string; - redirect_uri: string; - grant_type: string; - code: string; -} - -function getSettingsURL() { - /* - needed in case the settings interface isn't hosted at /settings but - some subpath like /gotosocial/settings. Other parts of the code don't - take this into account yet so mostly future-proofing. - - Also drops anything past /settings/, because authorization urls that are too long - get rejected by GTS. - */ - let [pre, _past] = window.location.pathname.split("/settings"); - return `${window.location.origin}${pre}/settings`; -} - -const SETTINGS_URL = (getSettingsURL()); - -// Couple auth functions here require multiple requests as -// part of an OAuth token 'flow'. To keep things simple for -// callers of these query functions, the multiple requests -// are chained within one query. -// -// https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query -const extended = gtsApi.injectEndpoints({ - endpoints: (build) => ({ - verifyCredentials: build.query({ - providesTags: (_res, error) => - error == undefined ? ["Auth"] : [], - async queryFn(_arg, api, _extraOpts, fetchWithBQ) { - const state = api.getState() as RootState; - const oauthState = state.oauth; - - // If we're not in the middle of an auth/callback, - // we may already have an auth token, so just - // return a standard verify_credentials query. - if (oauthState.loginState != 'callback') { - return fetchWithBQ({ - url: `/api/v1/accounts/verify_credentials` - }); - } - - // We're in the middle of an auth/callback flow. - // Try to retrieve callback code from URL query. - let urlParams = new URLSearchParams(window.location.search); - let code = urlParams.get("code"); - if (code == undefined) { - return { - error: { - status: 400, - statusText: 'Bad Request', - data: {"error":"Waiting for callback, but no ?code= provided in url."}, - }, - }; - } - - // Retrieve app with which the - // callback code was generated. - let app = oauthState.app; - if (app == undefined || app.client_id == undefined) { - return { - error: { - status: 400, - statusText: 'Bad Request', - data: {"error":"No stored app registration data, can't finish login flow."}, - }, - }; - } - - // Use the provided code and app - // secret to request an auth token. - const tokenReqBody: OauthTokenRequestBody = { - client_id: app.client_id, - client_secret: app.client_secret, - redirect_uri: SETTINGS_URL, - grant_type: "authorization_code", - code: code - }; - - const tokenResult = await fetchWithBQ({ - method: "POST", - url: "/oauth/token", - body: tokenReqBody, - }); - if (tokenResult.error) { - return { error: tokenResult.error as FetchBaseQueryError }; - } - - // Remove ?code= query param from - // url, we don't want it anymore. - window.history.replaceState({}, document.title, window.location.pathname); - - // Store returned token in redux. - api.dispatch(oauthSetToken(tokenResult.data)); - - // We're now authed! So return - // standard verify_credentials query. - return fetchWithBQ({ - url: `/api/v1/accounts/verify_credentials` - }); - } - }), - - authorizeFlow: build.mutation({ - async queryFn(formData, api, _extraOpts, fetchWithBQ) { - const state = api.getState() as RootState; - const oauthState = state.oauth; - - let instanceUrl: string; - if (!formData.instance.startsWith("http")) { - formData.instance = `https://${formData.instance}`; - } - - instanceUrl = new URL(formData.instance).origin; - if (oauthState?.instanceUrl == instanceUrl && oauthState.app) { - return { data: oauthState.app }; - } - - const appResult = await fetchWithBQ({ - method: "POST", - baseUrl: instanceUrl, - url: "/api/v1/apps", - body: { - client_name: "GoToSocial Settings", - scopes: formData.scopes, - redirect_uris: SETTINGS_URL, - website: SETTINGS_URL - } - }); - if (appResult.error) { - return { error: appResult.error as FetchBaseQueryError }; - } - - let app = appResult.data as any; - - app.scopes = formData.scopes; - api.dispatch(oauthAuthorize({ - instanceUrl: instanceUrl, - app: app, - loginState: "callback", - expectingRedirect: true - })); - - let url = new URL(instanceUrl); - url.pathname = "/oauth/authorize"; - url.searchParams.set("client_id", app.client_id); - url.searchParams.set("redirect_uri", SETTINGS_URL); - url.searchParams.set("response_type", "code"); - url.searchParams.set("scope", app.scopes); - - let redirectURL = url.toString(); - window.location.assign(redirectURL); - return { data: null }; - }, - }), - logout: build.mutation({ - queryFn: (_arg, api) => { - api.dispatch(oauthRemove()); - return { data: null }; - }, - invalidatesTags: ["Auth"] - }) - }) -}); - -export const { - useVerifyCredentialsQuery, - useAuthorizeFlowMutation, - useLogoutMutation, -} = extended; diff --git a/web/source/settings/lib/query/user/applications.ts b/web/source/settings/lib/query/user/applications.ts new file mode 100644 index 000000000..9d271a1e1 --- /dev/null +++ b/web/source/settings/lib/query/user/applications.ts @@ -0,0 +1,146 @@ +/* + 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 { RootState } from "../../../redux/store"; +import { + SearchAppParams, + SearchAppResp, + App, + AppCreateParams, +} from "../../types/application"; +import { OAuthAccessToken, OAuthAccessTokenRequestBody } from "../../types/oauth"; +import { gtsApi } from "../gts-api"; +import parse from "parse-link-header"; + +const extended = gtsApi.injectEndpoints({ + endpoints: (build) => ({ + searchApp: 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/apps${query}` + }; + }, + // Headers required for paging. + transformResponse: (apiResp: App[], meta) => { + const apps = apiResp; + const linksStr = meta?.response?.headers.get("Link"); + const links = parse(linksStr); + return { apps, links }; + }, + providesTags: [{ type: "Application", id: "TRANSFORMED" }] + }), + + getApp: build.query({ + query: (id) => ({ + method: "GET", + url: `/api/v1/apps/${id}`, + }), + providesTags: (_result, _error, id) => [ + { type: 'Application', id } + ], + }), + + createApp: build.mutation({ + query: (formData) => ({ + method: "POST", + url: `/api/v1/apps`, + asForm: true, + body: formData, + discardEmpty: true + }), + invalidatesTags: [{ type: "Application", id: "TRANSFORMED" }], + }), + + deleteApp: build.mutation({ + query: (id) => ({ + method: "DELETE", + url: `/api/v1/apps/${id}` + }), + invalidatesTags: (_result, _error, id) => [ + { type: 'Application', id }, + { type: "Application", id: "TRANSFORMED" }, + { type: "TokenInfo", id: "TRANSFORMED" }, + ], + }), + + getOOBAuthCode: build.mutation({ + async queryFn({ app, scope, redirectURI }, api, _extraOpts, _fetchWithBQ) { + // Fetch the instance URL string from + // oauth state, eg., https://example.org. + const state = api.getState() as RootState; + if (!state.login.instanceUrl) { + return { + error: { + status: 'CUSTOM_ERROR', + error: "oauthState.instanceUrl undefined", + } + }; + } + const instanceUrl = state.login.instanceUrl; + + // Parse instance URL + set params on it. + const url = new URL(instanceUrl); + url.pathname = "/oauth/authorize"; + url.searchParams.set("client_id", app.client_id); + url.searchParams.set("redirect_uri", redirectURI); + url.searchParams.set("response_type", "code"); + url.searchParams.set("scope", scope); + + // Set the app ID in state so we know which + // app to get out of our store after redirect. + url.searchParams.set("state", app.id); + + // Whisk the user away to the authorize page. + window.location.assign(url.toString()); + return { data: null }; + } + }), + + getAccessTokenForApp: build.mutation({ + query: (formData) => ({ + method: "POST", + url: `/oauth/token`, + asForm: true, + body: formData, + discardEmpty: true + }), + }), + }) +}); + +export const { + useLazySearchAppQuery, + useCreateAppMutation, + useGetAppQuery, + useGetOOBAuthCodeMutation, + useGetAccessTokenForAppMutation, + useDeleteAppMutation, +} = extended; diff --git a/web/source/settings/lib/types/application.ts b/web/source/settings/lib/types/application.ts new file mode 100644 index 000000000..125e82c95 --- /dev/null +++ b/web/source/settings/lib/types/application.ts @@ -0,0 +1,71 @@ +/* + 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 App { + id: string; + created_at: string; + name: string; + website?: string; + redirect_uris: string[]; + redirect_uri: string; + client_id: string; + client_secret: string; + vapid_key: string; + scopes: string[]; +} + +/** + * Parameters for GET to /api/v1/apps. + */ +export interface SearchAppParams { + /** + * 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 SearchAppResp { + apps: App[]; + links: Links | null; +} + +export interface AppCreateParams { + client_name: string; + redirect_uris: string; + scopes: string; + website: string; +} diff --git a/web/source/settings/lib/types/oauth.ts b/web/source/settings/lib/types/oauth.ts new file mode 100644 index 000000000..b077ed356 --- /dev/null +++ b/web/source/settings/lib/types/oauth.ts @@ -0,0 +1,49 @@ +/* + 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 . +*/ + +/** + * OAuthToken represents a response + * to an OAuth token request. + */ +export interface OAuthAccessToken { + /** + * Most likely to be 'Bearer' + * but may be something else. + */ + token_type: string; + /** + * The actual token. Can be passed in to + * authenticate further requests using the + * Authorization header and the token type. + */ + access_token: string; +} + +export interface OAuthApp { + client_id: string; + client_secret: string; +} + +export interface OAuthAccessTokenRequestBody { + client_id: string; + client_secret: string; + redirect_uri: string; + grant_type: string; + code: string; +} diff --git a/web/source/settings/lib/types/scopes.ts b/web/source/settings/lib/types/scopes.ts new file mode 100644 index 000000000..2bf5c21b4 --- /dev/null +++ b/web/source/settings/lib/types/scopes.ts @@ -0,0 +1,139 @@ +/* + 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 . +*/ + +/* Sub-scopes / scope components */ + +const scopeAccounts = "accounts"; +const scopeApplications = "applications"; +const scopeBlocks = "blocks"; +const scopeBookmarks = "bookmarks"; +const scopeConversations = "conversations"; +const scopeDomainAllows = "domain_allows"; +const scopeDomainBlocks = "domain_blocks"; +const scopeFavourites = "favourites"; +const scopeFilters = "filters"; +const scopeFollows = "follows"; +const scopeLists = "lists"; +const scopeMedia = "media"; +const scopeMutes = "mutes"; +const scopeNotifications = "notifications"; +const scopeReports = "reports"; +const scopeSearch = "search"; +const scopeStatuses = "statuses"; + +/* Top-level scopes */ + +export const ScopeProfile = "profile"; +export const ScopePush = "push"; +export const ScopeRead = "read"; +export const ScopeWrite = "write"; +export const ScopeAdmin = "admin"; +export const ScopeAdminRead = ScopeAdmin + ":" + ScopeRead; +export const ScopeAdminWrite = ScopeAdmin + ":" + ScopeWrite; + +/* Granular scopes */ + +export const ScopeReadAccounts = ScopeRead + ":" + scopeAccounts; +export const ScopeWriteAccounts = ScopeWrite + ":" + scopeAccounts; +export const ScopeReadApplications = ScopeRead + ":" + scopeApplications; +export const ScopeWriteApplications = ScopeWrite + ":" + scopeApplications; +export const ScopeReadBlocks = ScopeRead + ":" + scopeBlocks; +export const ScopeWriteBlocks = ScopeWrite + ":" + scopeBlocks; +export const ScopeReadBookmarks = ScopeRead + ":" + scopeBookmarks; +export const ScopeWriteBookmarks = ScopeWrite + ":" + scopeBookmarks; +export const ScopeWriteConversations = ScopeWrite + ":" + scopeConversations; +export const ScopeReadFavourites = ScopeRead + ":" + scopeFavourites; +export const ScopeWriteFavourites = ScopeWrite + ":" + scopeFavourites; +export const ScopeReadFilters = ScopeRead + ":" + scopeFilters; +export const ScopeWriteFilters = ScopeWrite + ":" + scopeFilters; +export const ScopeReadFollows = ScopeRead + ":" + scopeFollows; +export const ScopeWriteFollows = ScopeWrite + ":" + scopeFollows; +export const ScopeReadLists = ScopeRead + ":" + scopeLists; +export const ScopeWriteLists = ScopeWrite + ":" + scopeLists; +export const ScopeWriteMedia = ScopeWrite + ":" + scopeMedia; +export const ScopeReadMutes = ScopeRead + ":" + scopeMutes; +export const ScopeWriteMutes = ScopeWrite + ":" + scopeMutes; +export const ScopeReadNotifications = ScopeRead + ":" + scopeNotifications; +export const ScopeWriteNotifications = ScopeWrite + ":" + scopeNotifications; +export const ScopeWriteReports = ScopeWrite + ":" + scopeReports; +export const ScopeReadSearch = ScopeRead + ":" + scopeSearch; +export const ScopeReadStatuses = ScopeRead + ":" + scopeStatuses; +export const ScopeWriteStatuses = ScopeWrite + ":" + scopeStatuses; +export const ScopeAdminReadAccounts = ScopeAdminRead + ":" + scopeAccounts; +export const ScopeAdminWriteAccounts = ScopeAdminWrite + ":" + scopeAccounts; +export const ScopeAdminReadReports = ScopeAdminRead + ":" + scopeReports; +export const ScopeAdminWriteReports = ScopeAdminWrite + ":" + scopeReports; +export const ScopeAdminReadDomainAllows = ScopeAdminRead + ":" + scopeDomainAllows; +export const ScopeAdminWriteDomainAllows = ScopeAdminWrite + ":" + scopeDomainAllows; +export const ScopeAdminReadDomainBlocks = ScopeAdminRead + ":" + scopeDomainBlocks; +export const ScopeAdminWriteDomainBlocks = ScopeAdminWrite + ":" + scopeDomainBlocks; + +export const ValidScopes = [ + ScopeProfile, + ScopePush, + ScopeRead, + ScopeWrite, + ScopeAdmin, + ScopeAdminRead, + ScopeAdminWrite, + ScopeReadAccounts, + ScopeWriteAccounts, + ScopeReadApplications, + ScopeWriteApplications, + ScopeReadBlocks, + ScopeWriteBlocks, + ScopeReadBookmarks, + ScopeWriteBookmarks, + ScopeWriteConversations, + ScopeReadFavourites, + ScopeWriteFavourites, + ScopeReadFilters, + ScopeWriteFilters, + ScopeReadFollows, + ScopeWriteFollows, + ScopeReadLists, + ScopeWriteLists, + ScopeWriteMedia, + ScopeReadMutes, + ScopeWriteMutes, + ScopeReadNotifications, + ScopeWriteNotifications, + ScopeWriteReports, + ScopeReadSearch, + ScopeReadStatuses, + ScopeWriteStatuses, + ScopeAdminReadAccounts, + ScopeAdminWriteAccounts, + ScopeAdminReadReports, + ScopeAdminWriteReports, + ScopeAdminReadDomainAllows, + ScopeAdminWriteDomainAllows, + ScopeAdminReadDomainBlocks, + ScopeAdminWriteDomainBlocks, +]; + +export const ValidTopLevelScopes = [ + ScopeProfile, + ScopePush, + ScopeRead, + ScopeWrite, + ScopeAdmin, + ScopeAdminRead, + ScopeAdminWrite, +]; diff --git a/web/source/settings/lib/util/formvalidators.ts b/web/source/settings/lib/util/formvalidators.ts index 358db616c..4e0e4a6a8 100644 --- a/web/source/settings/lib/util/formvalidators.ts +++ b/web/source/settings/lib/util/formvalidators.ts @@ -18,6 +18,8 @@ */ import isValidDomain from "is-valid-domain"; +import { useCallback } from "react"; +import { ValidScopes, ValidTopLevelScopes } from "../types/scopes"; /** * Validate the "domain" field of a form. @@ -29,6 +31,11 @@ export function formDomainValidator(domain: string): string { return ""; } + // Allow localhost for testing. + if (domain === "localhost") { + return ""; + } + if (domain[domain.length-1] === ".") { return "invalid domain"; } @@ -63,5 +70,67 @@ export function urlValidator(urlStr: string): string { return `invalid protocol, must be http or https`; } - return formDomainValidator(url.host); + return formDomainValidator(url.hostname); +} + +export function useScopesValidator(): (_scopes: string[]) => string { + return useCallback((scopes) => { + return scopes. + map((scope) => validateScope(scope)). + flatMap((msg) => msg || []). + join(", "); + }, []); +} + +export function useScopeValidator(): (_scope: string) => string { + return useCallback((scope) => validateScope(scope), []); +} + +const validateScope = (scope: string) => { + if (!ValidScopes.includes(scope)) { + return scope + " is not a recognized scope"; + } + return ""; +}; + +export function useScopesPermittedBy(): (_hasScopes: string[], _wantScopes: string[]) => string { + return useCallback((hasScopes, wantsScopes) => { + return wantsScopes. + map((wanted) => scopePermittedByScopes(hasScopes, wanted)). + flatMap((msg) => msg || []). + join(", "); + }, []); } + +const scopePermittedByScopes = (hasScopes: string[], wanted: string) => { + if (hasScopes.some((hasScope) => scopePermittedByScope(hasScope, wanted) === "")) { + return ""; + } + return `scopes [${hasScopes}] do not permit ${wanted}`; +}; + +const scopePermittedByScope = (has: string, wanted: string) => { + if (has === wanted) { + // Exact match on either a + // top-level or granular scope. + return ""; + } + + // Ensure we have a + // known top-level scope. + switch (true) { + case (ValidTopLevelScopes.includes(has)): + // Check if top-level includes wanted, + // eg., have "admin", want "admin:read". + if (wanted.startsWith(has + ":")) { + return ""; + } else { + return `scope ${has} does not permit ${wanted}`; + } + + default: + // Unknown top-level scope, + // can't permit anything. + return `unrecognized scope ${has}`; + } +}; diff --git a/web/source/settings/lib/util/index.ts b/web/source/settings/lib/util/index.ts index 4c8a90626..8bcf5ab5d 100644 --- a/web/source/settings/lib/util/index.ts +++ b/web/source/settings/lib/util/index.ts @@ -30,7 +30,7 @@ export function UseOurInstanceAccount(account: AdminAccount): boolean { // Pull our own URL out of storage so we can // tell if account is our instance account. const ourDomain = useMemo(() => { - const instanceUrlStr = store.getState().oauth.instanceUrl; + const instanceUrlStr = store.getState().login.instanceUrl; if (!instanceUrlStr) { return ""; } diff --git a/web/source/settings/redux/login.ts b/web/source/settings/redux/login.ts new file mode 100644 index 000000000..2ba06dfff --- /dev/null +++ b/web/source/settings/redux/login.ts @@ -0,0 +1,69 @@ +/* + 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 { PayloadAction, createSlice } from "@reduxjs/toolkit"; +import { OAuthApp, OAuthAccessToken } from "../lib/types/oauth"; + +export interface LoginState { + instanceUrl?: string; + current: "none" | "awaitingcallback" | "loggedin" | "loggedout"; + expectingRedirect: boolean; + /** + * Token stored in easy-to-use format. + * Will look something like: + * "Authorization: Bearer BLAHBLAHBLAH" + */ + token?: string; + app?: OAuthApp; +} + +const initialState: LoginState = { + current: 'none', + expectingRedirect: false, +}; + +export const loginSlice = createSlice({ + name: "login", + initialState: initialState, + reducers: { + authorize: (_state, action: PayloadAction) => { + // Overrides state with payload. + return action.payload; + }, + setToken: (state, action: PayloadAction) => { + // Mark us as logged + // in by storing token. + state.token = `${action.payload.token_type} ${action.payload.access_token}`; + state.current = "loggedin"; + }, + remove: (state) => { + // Mark us as logged + // out by clearing auth. + delete state.token; + delete state.app; + state.current = "loggedout"; + } + } +}); + +export const { + authorize, + setToken, + remove, +} = loginSlice.actions; diff --git a/web/source/settings/redux/oauth.ts b/web/source/settings/redux/oauth.ts deleted file mode 100644 index 1d6bf9bb1..000000000 --- a/web/source/settings/redux/oauth.ts +++ /dev/null @@ -1,89 +0,0 @@ -/* - 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 { PayloadAction, createSlice } from "@reduxjs/toolkit"; - -/** - * OAuthToken represents a response - * to an OAuth token request. - */ -export interface OAuthToken { - /** - * Most likely to be 'Bearer' - * but may be something else. - */ - token_type: string; - /** - * The actual token. Can be passed in to - * authenticate further requests using the - * Authorization header and the token type. - */ - access_token: string; -} - -export interface OAuthApp { - client_id: string; - client_secret: string; -} - -export interface OAuthState { - instanceUrl?: string; - loginState: "none" | "callback" | "login" | "logout"; - expectingRedirect: boolean; - /** - * Token stored in easy-to-use format. - * Will look something like: - * "Authorization: Bearer BLAHBLAHBLAH" - */ - token?: string; - app?: OAuthApp; -} - -const initialState: OAuthState = { - loginState: 'none', - expectingRedirect: false, -}; - -export const oauthSlice = createSlice({ - name: "oauth", - initialState: initialState, - reducers: { - authorize: (_state, action: PayloadAction) => { - // Overrides state with payload. - return action.payload; - }, - setToken: (state, action: PayloadAction) => { - // Mark us as logged in by storing token. - state.token = `${action.payload.token_type} ${action.payload.access_token}`; - state.loginState = "login"; - }, - remove: (state) => { - // Mark us as logged out by clearing auth. - delete state.token; - delete state.app; - state.loginState = "logout"; - } - } -}); - -export const { - authorize, - setToken, - remove, -} = oauthSlice.actions; diff --git a/web/source/settings/redux/store.ts b/web/source/settings/redux/store.ts index 0c1285187..076f5f88d 100644 --- a/web/source/settings/redux/store.ts +++ b/web/source/settings/redux/store.ts @@ -30,19 +30,19 @@ import { REGISTER, } from "redux-persist"; -import { oauthSlice } from "./oauth"; +import { loginSlice } from "./login"; import { gtsApi } from "../lib/query/gts-api"; const combinedReducers = combineReducers({ [gtsApi.reducerPath]: gtsApi.reducer, - oauth: oauthSlice.reducer, + login: loginSlice.reducer, }); const persistedReducer = persistReducer({ key: "gotosocial-settings", storage: require("redux-persist/lib/storage").default, stateReconciler: require("redux-persist/lib/stateReconciler/autoMergeLevel1").default, - whitelist: ["oauth"], + whitelist: ["login"], migrate: async (state) => { if (state == undefined) { return state; @@ -51,8 +51,8 @@ const persistedReducer = persistReducer({ // This is a cheeky workaround for // redux-persist being a stickler. let anyState = state as any; - if (anyState?.oauth != undefined) { - anyState.oauth.expectingRedirect = false; + if (anyState?.login != undefined) { + anyState.login.expectingRedirect = false; } return anyState; diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 5a85f370e..fc146cdd7 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -1495,6 +1495,62 @@ button.tab-button { } } +.access-token-receive-form { + > .access-token-frame { + background-color: $gray2; + width: 100%; + padding: 0.25rem; + border-radius: $br-inner; + white-space: pre; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + font-family: monospace; + font-size: large; + } + + .closed { + text-align: center; + } +} + +.applications-view { + .application { + .info-list { + border: none; + width: 100%; + + .info-list-entry { + background: none; + padding: 0; + } + + > .info-list-entry > .monospace { + font-size: large; + } + } + } +} + +.application-details { + .info-list { + margin-top: 1rem; + + > .info-list-entry .monospace { + font-size: large; + } + + > .info-list-entry > dd > button { + font-size: medium; + padding-top: 0; + padding-bottom: 0; + } + } +} + +.application-new > .form-section-docs > p > .monospace { + font-size: large; +} + .instance-rules { list-style-position: inside; margin: 0; 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) + +
+ + + + + +