[chore] Convert some settings / admin panel JS to TypeScript (#2247)

* initial conversion of STUFF to typescript

* more stuff

* update babel deps, include commonjs transform

* update bundler & eslint configuration

* eslint --fix

* upgrade deps

* update docs, build stuff, peripheral stuff

---------

Co-authored-by: f0x <f0x@cthu.lu>

2 files changed, 35 insertions, 28 deletions

diff --git a/web/source/settings/components/authorization/index.jsx b/web/source/settings/components/authorization/index.tsx
index d38e160da..321bb03eb 100644
--- a/web/source/settings/components/authorization/index.jsx
+++ b/web/source/settings/components/authorization/index.tsx
@@ -17,23 +17,25 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-"use strict";
+import { useVerifyCredentialsQuery } from "../../lib/query/oauth";
+import { store } from "../../redux/store";
 
-const React = require("react");
-const Redux = require("react-redux");
+import React from "react";
 
-const query = require("../../lib/query");
+import Login from "./login";
+import Loading from "../loading";
+import { Error } from "../error";
 
-const Login = require("./login");
-const Loading = require("../loading");
-const { Error } = require("../error");
+export function Authorization({ App }) {
+	const { loginState, expectingRedirect } = store.getState().oauth;
+	const skip = (loginState == "none" || loginState == "logout" || expectingRedirect);
 
-module.exports = function Authorization({ App }) {
-	const { loginState, expectingRedirect } = Redux.useSelector((state) => state.oauth);
-
-	const { isLoading, isSuccess, data: account, error } = query.useVerifyCredentialsQuery(undefined, {
-		skip: loginState == "none" || loginState == "logout" || expectingRedirect
-	});
+	const {
+		isLoading,
+		isSuccess,
+		data: account,
+		error,
+	} = useVerifyCredentialsQuery(null, { skip: skip });
 
 	let showLogin = true;
 	let content = null;
@@ -73,4 +75,4 @@ module.exports = function Authorization({ App }) {
 			</section>
 		);
 	}
-};
\ No newline at end of file
+}
diff --git a/web/source/settings/components/authorization/login.jsx b/web/source/settings/components/authorization/login.tsx
index dbeb6c047..76bfccf43 100644
--- a/web/source/settings/components/authorization/login.jsx
+++ b/web/source/settings/components/authorization/login.tsx
@@ -17,18 +17,16 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-"use strict";
+import React from "react";
 
-const React = require("react");
+import { useAuthorizeFlowMutation } from "../../lib/query/oauth";
+import { useTextInput, useValue } from "../../lib/form";
+import useFormSubmit from "../../lib/form/submit";
+import { TextInput } from "../form/inputs";
+import MutationButton from "../form/mutation-button";
+import Loading from "../loading";
 
-const query = require("../../lib/query");
-const { useTextInput, useValue } = require("../../lib/form");
-const useFormSubmit = require("../../lib/form/submit");
-const { TextInput } = require("../form/inputs");
-const MutationButton = require("../form/mutation-button");
-const Loading = require("../loading");
-
-module.exports = function Login({ }) {
+export default function Login({ }) {
 	const form = {
 		instance: useTextInput("instance", {
 			defaultValue: window.location.origin
@@ -38,8 +36,11 @@ module.exports = function Login({ }) {
 
 	const [formSubmit, result] = useFormSubmit(
 		form,
-		query.useAuthorizeFlowMutation(),
-		{ changedOnly: false }
+		useAuthorizeFlowMutation(),
+		{ 
+			changedOnly: false,
+			onFinish: undefined,
+		}
 	);
 
 	if (result.isLoading) {
@@ -63,7 +64,11 @@ module.exports = function Login({ }) {
 				label="Instance"
 				name="instance"
 			/>
-			<MutationButton label="Login" result={result} />
+			<MutationButton
+				label="Login"
+				result={result}
+				disabled={false}
+			/>
 		</form>
 	);
-};
\ No newline at end of file
+}
\ No newline at end of file