[frogend] Settings refactor (#1318)

* yakshave new form field structure

* fully refactor user profile settings form

* use rtk query api for profile settings

* refactor user post settings

* refactor password change form

* refactor admin settings

* FormWithData structure for user forms

* admin actions refactor

* whitespace

* fix user settings data prop

* remove superfluous logging

* cleanup old code

* refactor federation/suspend (overview, detail)

* mostly abstracted (emoji) checkbox list

* refactor parse-from-toot

* refactor custom-emoji, progress on federation bulk

* loading icon styling to prevent big spinny

* refactor federation import-export interface

* cleanup old files

* [chore] Update/add license headers for 2023

* redux fixes

* text-field exports

* appease the linter

* refactor authentication with RTK Query

* fix login/logout state transition weirdness

* fixes/cleanup

* small linter-related fixes

* add eslint license header check, fix existing files

* remove old code, clarify comment

* clarify suspend on subdomains

* collapse if/else

* fa-fw width info comment

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

@@ -0,0 +1,76 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	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/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const Redux = require("react-redux");
+
+const query = require("../../lib/query");
+
+const Login = require("./login");
+const Loading = require("../loading");
+const { Error } = require("../error");
+
+module.exports = function Authorization({ App }) {
+	const loginState = Redux.useSelector((state) => state.oauth.loginState);
+	const [hasStoredLogin] = React.useState(loginState != "none" && loginState != "logout");
+
+	const { isLoading, isSuccess, data: account, error } = query.useVerifyCredentialsQuery(undefined, {
+		skip: loginState == "none" || loginState == "logout"
+	});
+
+	let showLogin = true;
+	let content = null;
+
+	if (isLoading && hasStoredLogin) {
+		showLogin = false;
+
+		let loadingInfo;
+		if (loginState == "callback") {
+			loadingInfo = "Processing OAUTH callback.";
+		} else if (loginState == "login") {
+			loadingInfo = "Verifying stored login.";
+		}
+
+		content = (
+			<div>
+				<Loading /> {loadingInfo}
+			</div>
+		);
+	} else if (error != undefined) {
+		content = (
+			<div>
+				<Error error={error} />
+				You can attempt logging in again below:
+			</div>
+		);
+	}
+
+	if (loginState == "login" && isSuccess) {
+		return <App account={account} />;
+	} else {
+		return (
+			<section className="oauth">
+				<h1>GoToSocial Settings</h1>
+				{content}
+				{showLogin && <Login />}
+			</section>
+		);
+	}
+};

web/source/settings/components/authorization/login.jsx

@@ -0,0 +1,67 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	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/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+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({ }) {
+	const form = {
+		instance: useTextInput("instance", {
+			defaultValue: window.location.origin
+		}),
+		scopes: useValue("scopes", "user admin")
+	};
+
+	const [formSubmit, result] = useFormSubmit(
+		form,
+		query.useAuthorizeFlowMutation(),
+		{ changedOnly: false }
+	);
+
+	if (result.isLoading) {
+		return (
+			<div>
+				<Loading /> Checking instance.
+			</div>
+		);
+	} else if (result.isSuccess) {
+		return (
+			<div>
+				<Loading /> Redirecting to instance authorization page.
+			</div>
+		);
+	}
+
+	return (
+		<form onSubmit={formSubmit}>
+			<TextInput
+				field={form.instance}
+				label="Instance"
+			/>
+			<MutationButton label="Login" result={result} />
+		</form>
+	);
+};

web/source/settings/components/back-button.jsx

@@ -21,7 +21,7 @@
 const React = require("react");
 const { Link } = require("wouter");
 
-module.exports = function BackButton({to}) {
+module.exports = function BackButton({ to }) {
 	return (
 		<Link to={to}>
 			<a className="button">&lt; back</a>

web/source/settings/components/check-list.jsx

@@ -0,0 +1,58 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	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/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+module.exports = function CheckList({ field, Component, header = " All", ...componentProps }) {
+	return (
+		<div className="checkbox-list list">
+			<label className="header">
+				<input
+					ref={field.toggleAll.ref}
+					type="checkbox"
+					onChange={field.toggleAll.onChange}
+					checked={field.toggleAll.value === 1}
+				/> {header}
+			</label>
+			{Object.values(field.value).map((entry) => (
+				<CheckListEntry
+					key={entry.key}
+					onChange={(value) => field.onChange(entry.key, value)}
+					entry={entry}
+					Component={Component}
+					componentProps={componentProps}
+				/>
+			))}
+		</div>
+	);
+};
+
+function CheckListEntry({ entry, onChange, Component, componentProps }) {
+	return (
+		<label className="entry">
+			<input
+				type="checkbox"
+				onChange={(e) => onChange({ checked: e.target.checked })}
+				checked={entry.checked}
+			/>
+			<Component entry={entry} onChange={onChange} {...componentProps} />
+		</label>
+	);
+}

web/source/settings/components/combo-box.jsx

@@ -26,21 +26,21 @@ const {
 	ComboboxPopover,
 } = require("ariakit/combobox");
 
-module.exports = function ComboBox({state, items, label, placeHolder, children}) {
+module.exports = function ComboBox({ field, items, label, children, ...inputProps }) {
 	return (
 		<div className="form-field combobox-wrapper">
 			<label>
 				{label}
 				<div className="row">
 					<Combobox
-						state={state}
-						placeholder={placeHolder}
+						state={field.state}
 						className="combobox input"
+						{...inputProps}
 					/>
 					{children}
 				</div>
 			</label>
-			<ComboboxPopover state={state} className="popover">
+			<ComboboxPopover state={field.state} className="popover">
 				{items.map(([key, value]) => (
 					<ComboboxItem className="combobox-item" key={key} value={key}>
 						{value}

web/source/settings/components/error.jsx

@@ -20,7 +20,7 @@
 
 const React = require("react");
 
-module.exports = function ErrorFallback({error, resetErrorBoundary}) {
+function ErrorFallback({ error, resetErrorBoundary }) {
 	return (
 		<div className="error">
 			<p>
@@ -28,7 +28,7 @@ module.exports = function ErrorFallback({error, resetErrorBoundary}) {
 				<a href="https://github.com/superseriousbusiness/gotosocial/issues">GoToSocial issue tracker</a>
 				{" or "}
 				<a href="https://matrix.to/#/#gotosocial-help:superseriousbusiness.org">Matrix support room</a>.
-				<br/>Include the details below:
+				<br />Include the details below:
 			</p>
 			<pre>
 				{error.name}: {error.message}
@@ -41,4 +41,43 @@ module.exports = function ErrorFallback({error, resetErrorBoundary}) {
 			</p>
 		</div>
 	);
-};
+}
+
+function Error({ error }) {
+	/* eslint-disable-next-line no-console */
+	console.error("Rendering error:", error);
+	let message;
+
+	if (error.data != undefined) { // RTK Query error with data
+		if (error.status) {
+			message = (<>
+				<b>{error.status}:</b> {error.data.error}
+				{error.data.error_description &&
+					<p>
+						{error.data.error_description}
+					</p>
+				}
+			</>);
+		} else {
+			message = error.data.error;
+		}
+	} else if (error.name != undefined || error.type != undefined) { // JS error
+		message = (<>
+			<b>{error.type && error.name}:</b> {error.message}
+		</>);
+	} else if (error.status && typeof error.error == "string") {
+		message = (<>
+			<b>{error.status}:</b> {error.error}
+		</>);
+	} else {
+		message = error.message ?? error;
+	}
+
+	return (
+		<div className="error">
+			{message}
+		</div>
+	);
+}
+
+module.exports = { ErrorFallback, Error };

web/source/settings/components/fake-profile.jsx

@@ -19,24 +19,21 @@
 "use strict";
 
 const React = require("react");
-const Redux = require("react-redux");
-
-module.exports = function FakeProfile({}) {
-	const account = Redux.useSelector(state => state.user.profile);
 
+module.exports = function FakeProfile({ avatar, header, display_name, username, role }) {
 	return ( // Keep in sync with web/template/profile.tmpl
 		<div className="profile">
 			<div className="headerimage">
-				<img className="headerpreview" src={account.header} alt={account.header ? `header image for ${account.username}` : "None set"} />
+				<img className="headerpreview" src={header} alt={header ? `header image for ${username}` : "None set"} />
 			</div>
 			<div className="basic">
 				<div id="profile-basic-filler2"></div>
-				<span className="avatar"><img className="avatarpreview" src={account.avatar} alt={account.avatar ? `avatar image for ${account.username}` : "None set"} /></span>
-				<div className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</div>
+				<span className="avatar"><img className="avatarpreview" src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} /></span>
+				<div className="displayname">{display_name.trim().length > 0 ? display_name : username}</div>
 				<div className="usernamecontainer">
-					<div className="username"><span>@{account.username}</span></div>
-					{(account.role && account.role != "user") && 
-						<div className={`role ${account.role}`}>{account.role}</div>
+					<div className="username"><span>@{username}</span></div>
+					{(role && role != "user") &&
+						<div className={`role ${role}`}>{role}</div>
 					}
 				</div>
 			</div>

web/source/settings/components/fake-toot.jsx

@@ -19,16 +19,21 @@
 "use strict";
 
 const React = require("react");
-const Redux = require("react-redux");
 
-module.exports = function FakeToot({children}) {
-	const account = Redux.useSelector((state) => state.user.profile);
+const query = require("../lib/query");
+
+module.exports = function FakeToot({ children }) {
+	const { data: account = {
+		avatar: "/assets/default_avatars/GoToSocial_icon1.png",
+		display_name: "",
+		username: ""
+	} } = query.useVerifyCredentialsQuery();
 
 	return (
 		<div className="toot expanded">
 			<div className="contentgrid">
 				<span className="avatar">
-					<img src={account.avatar} alt=""/>
+					<img src={account.avatar} alt="" />
 				</span>
 				<span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span>
 				<span className="username">@{account.username}</span>

web/source/settings/components/form-fields.jsx

@@ -1,167 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-
-"use strict";
-
-const React = require("react");
-const Redux = require("react-redux");
-const d = require("dotty");
-const prettierBytes = require("prettier-bytes");
-
-function eventListeners(dispatch, setter, obj) {
-	return {
-		onTextChange: function (key) {
-			return function (e) {
-				dispatch(setter([key, e.target.value]));
-			};
-		},
-		
-		onCheckChange: function (key) {
-			return function (e) {
-				dispatch(setter([key, e.target.checked]));
-			};
-		},
-		
-		onFileChange: function (key, withPreview) {
-			return function (e) {
-				let file = e.target.files[0];
-				if (withPreview) {
-					let old = d.get(obj, key);
-					if (old != undefined) {
-						URL.revokeObjectURL(old); // no error revoking a non-Object URL as provided by instance
-					}
-					let objectURL = URL.createObjectURL(file);
-					dispatch(setter([key, objectURL]));
-				}
-				dispatch(setter([`${key}File`, file]));
-			};
-		}
-	};
-}
-
-function get(state, id, defaultVal) {
-	let value;
-	if (id.includes(".")) {
-		value = d.get(state, id);
-	} else {
-		value = state[id];
-	}
-	if (value == undefined) {
-		value = defaultVal;
-	}
-	return value;
-}
-
-// function removeFile(name) {
-// 	return function(e) {
-// 		e.preventDefault();
-// 		dispatch(user.setProfileVal([name, ""]));
-// 		dispatch(user.setProfileVal([`${name}File`, ""]));
-// 	};
-// }
-
-module.exports = {
-	formFields: function formFields(setter, selector) {
-		function FormField({
-			type, id, name, className="", placeHolder="", fileType="", children=null,
-			options=null, inputProps={}, withPreview=true, showSize=false, maxSize=Infinity
-		}) {
-			const dispatch = Redux.useDispatch();
-			let state = Redux.useSelector(selector);
-			let {
-				onTextChange,
-				onCheckChange,
-				onFileChange
-			} = eventListeners(dispatch, setter, state);
-
-			let field;
-			let defaultLabel = true;
-			if (type == "text") {
-				field = <input type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} {...inputProps}/>;
-			} else if (type == "textarea") {
-				field = <textarea type="text" id={id} value={get(state, id, "")} placeholder={placeHolder} className={className} onChange={onTextChange(id)} rows={8} {...inputProps}/>;
-			} else if (type == "checkbox") {
-				field = <input type="checkbox" id={id} checked={get(state, id, false)} className={className} onChange={onCheckChange(id)} {...inputProps}/>;
-			} else if (type == "select") {
-				field = (
-					<select id={id} value={get(state, id, "")} className={className} onChange={onTextChange(id)} {...inputProps}>
-						{options}
-					</select>
-				);
-			} else if (type == "file") {
-				defaultLabel = false;
-				let file = get(state, `${id}File`);
-
-				let size = null;
-				if (showSize && file) {
-					size = `(${prettierBytes(file.size)})`;
-
-					if (file.size > maxSize) {
-						size = <span className="error-text">{size}</span>;
-					}
-				}
-
-				field = (
-					<>
-						<label htmlFor={id} className="file-input button">Browse</label>
-						<span className="form-info">
-							{file ? file.name : "no file selected"} {size}
-						</span>
-						{/* <a onClick={removeFile("header")}>remove</a> */}
-						<input className="hidden" id={id} type="file" accept={fileType} onChange={onFileChange(id, withPreview)}  {...inputProps}/>
-					</>
-				);
-			} else {
-				defaultLabel = false;
-				field = `unsupported FormField ${type}, this is a developer error`;
-			}
-
-			let label = <label htmlFor={id}>{name}</label>;
-			return (
-				<div className={`form-field ${type}`}>
-					{defaultLabel ? label : null}	{field}
-					{children}
-				</div>
-			);
-		}
-
-		return {
-			TextInput: function(props) {
-				return <FormField type="text" {...props} />;
-			},
-	
-			TextArea: function(props) {
-				return <FormField type="textarea" {...props} />;
-			},
-	
-			Checkbox: function(props) {
-				return <FormField type="checkbox" {...props} />;
-			},
-	
-			Select: function(props) {
-				return <FormField type="select" {...props} />;
-			},
-	
-			File: function(props) {
-				return <FormField type="file" {...props} />;
-			},
-		};
-	},
-
-	eventListeners
-};

web/source/settings/components/form/combobox.jsx

@@ -1,41 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-
-"use strict";
-
-const { useComboboxState } = require("ariakit/combobox");
-
-module.exports = function useComboBoxInput({name, Name}, {validator, defaultValue} = {}) {
-	const state = useComboboxState({
-		defaultValue,
-		gutter: 0,
-		sameWidth: true
-	});
-
-	function reset() {
-		state.setValue("");
-	}
-
-	return [
-		state,
-		reset,
-		{
-			[name]: state.value,
-		}
-	];
-};

web/source/settings/components/form/file.jsx

@@ -1,78 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-
-"use strict";
-
-const React = require("react");
-const prettierBytes = require("prettier-bytes");
-
-module.exports = function useFileInput({name, _Name}, {
-	withPreview,
-	maxSize,
-	initialInfo = "no file selected"
-}) {
-	const [file, setFile] = React.useState();
-	const [imageURL, setImageURL] = React.useState();
-	const [info, setInfo] = React.useState();
-
-	function onChange(e) {
-		let file = e.target.files[0];
-		setFile(file);
-
-		URL.revokeObjectURL(imageURL);
-
-		if (file != undefined) {
-			if (withPreview) {
-				setImageURL(URL.createObjectURL(file));
-			}
-	
-			let size = prettierBytes(file.size);
-			if (maxSize && file.size > maxSize) {
-				size = <span className="error-text">{size}</span>;
-			}
-
-			setInfo(<>
-				{file.name} ({size})
-			</>);
-		} else {
-			setInfo();
-		}
-	}
-
-	function reset() {
-		URL.revokeObjectURL(imageURL);
-		setImageURL();
-		setFile();
-		setInfo();
-	}
-
-	return [
-		onChange,
-		reset,
-		{
-			[name]: file,
-			[`${name}URL`]: imageURL,
-			[`${name}Info`]: <span className="form-info">
-				{info
-					? info
-					: initialInfo
-				}
-			</span>
-		}
-	];
-};

web/source/settings/components/form/index.js

@@ -1,37 +0,0 @@
-/*
-	 GoToSocial
-	 Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	 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/>.
-*/
-
-"use strict";
-
-function capitalizeFirst(str) {
-	return str.slice(0,1).toUpperCase()+str.slice(1);
-}
-
-function makeHook(func) {
-	return (name, ...args) => func({
-		name,
-		Name: capitalizeFirst(name)
-	},
-	...args);
-}
-
-module.exports = {
-	useTextInput: makeHook(require("./text")),
-	useFileInput: makeHook(require("./file")),
-	useComboBoxInput: makeHook(require("./combobox"))
-};

web/source/settings/components/form/inputs.jsx

@@ -0,0 +1,141 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	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/>.
+*/
+
+"use strict";
+
+const React = require("react");
+
+function TextInput({ label, field, ...inputProps }) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field text">
+			<label>
+				{label}
+				<input
+					type="text"
+					{...{ onChange, value, ref }}
+					{...inputProps}
+				/>
+			</label>
+		</div>
+	);
+}
+
+function TextArea({ label, field, ...inputProps }) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field textarea">
+			<label>
+				{label}
+				<textarea
+					type="text"
+					{...{ onChange, value, ref }}
+					{...inputProps}
+				/>
+			</label>
+		</div>
+	);
+}
+
+function FileInput({ label, field, ...inputProps }) {
+	const { onChange, ref, infoComponent } = field;
+
+	return (
+		<div className="form-field file">
+			<label>
+				<div className="label">{label}</div>
+				<div className="file-input button">Browse</div>
+				{infoComponent}
+				{/* <a onClick={removeFile("header")}>remove</a> */}
+				<input
+					type="file"
+					className="hidden"
+					{...{ onChange, ref }}
+					{...inputProps}
+				/>
+			</label>
+		</div>
+	);
+}
+
+function Checkbox({ label, field, ...inputProps }) {
+	const { onChange, value } = field;
+
+	return (
+		<div className="form-field checkbox">
+			<label>
+				<input
+					type="checkbox"
+					checked={value}
+					onChange={onChange}
+					{...inputProps}
+				/> {label}
+			</label>
+		</div>
+	);
+}
+
+function Select({ label, field, options, ...inputProps }) {
+	const { onChange, value, ref } = field;
+
+	return (
+		<div className="form-field select">
+			<label>
+				{label}
+				<select
+					{...{ onChange, value, ref }}
+					{...inputProps}
+				>
+					{options}
+				</select>
+			</label>
+		</div>
+	);
+}
+
+function RadioGroup({ field, label, ...inputProps }) {
+	return (
+		<div className="form-field radio">
+			{Object.entries(field.options).map(([value, radioLabel]) => (
+				<label key={value}>
+					<input
+						type="radio"
+						name={field.name}
+						value={value}
+						checked={field.value == value}
+						onChange={field.onChange}
+						{...inputProps}
+					/>
+					{radioLabel}
+				</label>
+			))}
+			{label}
+		</div>
+	);
+}
+
+module.exports = {
+	TextInput,
+	TextArea,
+	FileInput,
+	Checkbox,
+	Select,
+	RadioGroup
+};

web/source/settings/components/form/mutation-button.jsx

@@ -0,0 +1,49 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
+
+	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/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const { Error } = require("../error");
+
+module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", ...inputProps }) {
+	let iconClass = "";
+	const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct
+
+	if (targetsThisButton) {
+		if (result.isLoading) {
+			iconClass = "fa-spin fa-refresh";
+		} else if (result.isSuccess) {
+			iconClass = "fa-check fadeout";
+		}
+	}
+
+	return (<div>
+		{(showError && targetsThisButton && result.error) &&
+			<Error error={result.error} />
+		}
+		<button type="submit" className={"with-icon " + className} disabled={result.isLoading || disabled}	{...inputProps}>
+			<i className={`fa fa-fw ${iconClass}`} aria-hidden="true"></i>
+			{(targetsThisButton && result.isLoading)
+				? "Processing..."
+				: label
+			}
+		</button>
+	</div>
+	);
+};

web/source/settings/components/form/text.jsx

@@ -1,56 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-
-"use strict";
-
-const React = require("react");
-
-module.exports = function useTextInput({name, Name}, {validator, defaultValue=""} = {}) {
-	const [text, setText] = React.useState(defaultValue);
-	const [valid, setValid] = React.useState(true);
-	const textRef = React.useRef(null);
-
-	function onChange(e) {
-		let input = e.target.value;
-		setText(input);
-	}
-
-	function reset() {
-		setText("");
-	}
-
-	React.useEffect(() => {
-		if (validator) {
-			let res = validator(text);
-			setValid(res == "");
-			textRef.current.setCustomValidity(res);
-			textRef.current.reportValidity();
-		}
-	}, [text, textRef, validator]);
-
-	return [
-		onChange,
-		reset,
-		{
-			[name]: text,
-			[`${name}Ref`]: textRef,
-			[`set${Name}`]: setText,
-			[`${name}Valid`]: valid
-		}
-	];
-};

web/source/settings/components/loading.jsx

@@ -22,6 +22,6 @@ const React = require("react");
 
 module.exports = function Loading() {
 	return (
-		<i className="fa fa-spin fa-refresh" aria-label="Loading" title="Loading"/>
+		<i className="fa fa-spin fa-refresh loading-icon" aria-label="Loading" title="Loading" />
 	);
 };

web/source/settings/components/login.jsx

@@ -1,102 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-	
-"use strict";
-
-const Promise = require("bluebird");
-const React = require("react");
-const Redux = require("react-redux");
-
-const { setInstance } = require("../redux/reducers/oauth").actions;
-const api = require("../lib/api");
-
-module.exports = function Login({error}) {
-	const dispatch = Redux.useDispatch();
-	const [ instanceField, setInstanceField ] = React.useState("");
-	const [ errorMsg, setErrorMsg ] = React.useState();
-	const instanceFieldRef = React.useRef("");
-
-	React.useEffect(() => {
-		// check if current domain runs an instance
-		let currentDomain = window.location.origin;
-		Promise.try(() => {
-			return dispatch(api.instance.fetchWithoutStore(currentDomain));
-		}).then(() => {
-			if (instanceFieldRef.current.length == 0) { // user hasn't started typing yet
-				dispatch(setInstance(currentDomain));
-				instanceFieldRef.current = currentDomain;
-				setInstanceField(currentDomain);
-			}
-		}).catch((e) => {
-			console.log("Current domain does not host a valid instance: ", e);
-		});
-	}, []);
-
-	function tryInstance() {
-		let domain = instanceFieldRef.current;
-		Promise.try(() => {
-			return dispatch(api.instance.fetchWithoutStore(domain)).catch((e) => {
-				// TODO: clearer error messages for common errors
-				console.log(e);
-				throw e;
-			});
-		}).then(() => {
-			dispatch(setInstance(domain));
-
-			return dispatch(api.oauth.register()).catch((e) => {
-				console.log(e);
-				throw e;
-			});
-		}).then(() => {
-			return dispatch(api.oauth.authorize()); // will send user off-page
-		}).catch((e) => {
-			setErrorMsg(
-				<>
-					<b>{e.type}</b>
-					<span>{e.message}</span>
-				</>
-			);
-		});
-	}
-
-	function updateInstanceField(e) {
-		if (e.key == "Enter") {
-			tryInstance(instanceField);
-		} else {
-			setInstanceField(e.target.value);
-			instanceFieldRef.current = e.target.value;
-		}
-	}
-
-	return (
-		<section className="login">
-			<h1>OAUTH Login:</h1>
-			{error}
-			<form onSubmit={(e) => e.preventDefault()}>
-				<label htmlFor="instance">Instance: </label>
-				<input value={instanceField} onChange={updateInstanceField} id="instance"/>
-				{errorMsg && 
-				<div className="error">
-					{errorMsg}
-				</div>
-				}
-				<button onClick={tryInstance}>Authenticate</button>
-			</form>
-		</section>
-	);
-};

web/source/settings/components/mutation-button.jsx

@@ -1,42 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-
-"use strict";
-
-const React = require("react");
-
-module.exports = function MutateButton({text, result}) {
-	let buttonText = text;
-
-	if (result.isLoading) {
-		buttonText = "Processing...";
-	}
-
-	return (<div>
-		{result.error && 
-			<section className="error">{result.error.status}: {result.error.data.error}</section>
-		}
-		<input
-			className="button"
-			type="submit"
-			disabled={result.isLoading}
-			value={buttonText}
-		/>
-	</div>
-	);
-};

web/source/settings/components/nav-button.jsx

@@ -21,7 +21,7 @@
 const React = require("react");
 const { Link, useRoute } = require("wouter");
 
-module.exports = function NavButton({href, name}) {
+module.exports = function NavButton({ href, name }) {
 	const [isActive] = useRoute(`${href}/:anything?`);
 	return (
 		<Link href={href}>

web/source/settings/components/submit.jsx

@@ -1,35 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
-
-	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/>.
-*/
-
-"use strict";
-
-const React = require("react");
-
-module.exports = function Submit({onClick, label, errorMsg, statusMsg}) {
-	return (
-		<div className="messagebutton">
-			<button type="submit" onClick={onClick}>{ label }</button>
-			{errorMsg.length > 0 && 
-				<div className="error accent">{errorMsg}</div>
-			}
-			{statusMsg.length > 0 &&
-				<div className="accent">{statusMsg}</div>
-			}
-		</div>
-	);
-};