[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

web/source/settings/components/authorization/index.tsx

@@ -17,7 +17,7 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-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 <App account={account} />;
 	} else {
 		return (

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";

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 <http://www.gnu.org/licenses/>.
+*/
+
+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<HTMLElement | null>(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 (
+		<div className="prism-highlighted">
+			<pre>
+				<code ref={ref} className={`language-${lang}`}>
+					{code}
+				</code>
+			</pre>
+		</div>
+	);
+}

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";
 

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() {