gotosocial/web/source/settings/views/user/applications/detail.tsx

/*
	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 { useParams } from "wouter";
import FormWithData from "../../../lib/form/form-with-data";
import BackButton from "../../../components/back-button";
import { useBaseUrl } from "../../../lib/navigation/util";
import { 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";

export default function AppDetail({ }) {
	const params: { appId: string } = useParams();
	const baseUrl = useBaseUrl();
	const backLocation: String = history.state?.backLocation ?? `~${baseUrl}`;

	return (
		<div className="application-details">
			<h1><BackButton to={backLocation}/> Application Details</h1>
			<FormWithData
				dataQuery={useGetAppQuery}
				queryArg={params.appId}
				DataForm={AppDetailForm}
				{...{ backLocation: backLocation }}
			/>
		</div>
	);
}

function AppDetailForm({ data: app, backLocation }: { data: App, backLocation: string }) {	
	return (
		<>
			<AppBasicInfo app={app} />
			<AppTokenForm app={app} />
		</>
	);
}

function AppBasicInfo({ app }: { app: App }) {
	const appWebsite = useAppWebsite(app);
	const created = useCreated(app);
	const redirectURIs = useRedirectURIs(app);
	
	return (
		<dl className="info-list">
			<div className="info-list-entry">
				<dt>Name:</dt>
				<dd className="text-cutoff">{app.name}</dd>
			</div>

			{ appWebsite && 
			<div className="info-list-entry">
				<dt>Website:</dt>
				<dd>{appWebsite}</dd>
			</div>
			}

			<div className="info-list-entry">
				<dt>Created:</dt>
				<dd>{created}</dd>
			</div>

			<div className="info-list-entry">
				<dt>Scopes:</dt>
				<dd className="monospace">{app.scopes.join(" ")}</dd>
			</div>

			<div className="info-list-entry">
				<dt>Redirect URI(s):</dt>
				<dd className="monospace">{redirectURIs}</dd>
			</div>
		</dl>
	);
}

function AppTokenForm({ app }: { app: App }) {
	const callbackURL = useCallbackURL();
	const [ getOOBAuthCode, result ] = useGetOOBAuthCodeMutation();
	const scope = useTextInput("scope", {});

	return (
		<form
			onSubmit={(e) => {
				e.preventDefault();
				getOOBAuthCode({
					app,
					scope: scope.value ?? "",
					redirectURI: callbackURL,
				});
			}}
		>
			<h2>Get An Access Token</h2>
			
			<TextInput
				field={scope}
				label="Scope (space-separated list of scopes)"
				autoCapitalize="off"
				autoCorrect="off"
			/>

			<MutationButton
				disabled={false}
				label="Resolve"
				result={result}
			/>
		</form>
	);
}