fully refactor user profile settings form

web/source/settings/admin/emoji/local/detail.js

@@ -23,7 +23,7 @@ const React = require("react");
 const { useRoute, Link, Redirect } = require("wouter");
 
 const { CategorySelect } = require("../category-select");
-const { useComboBoxInput, useFileInput } = require("../../../components/form");
+const { useComboBoxInput, useFileInput } = require("../../../lib/form");
 
 const query = require("../../../lib/query");
 const FakeToot = require("../../../components/fake-toot");

web/source/settings/admin/emoji/local/new-emoji.js

@@ -22,13 +22,13 @@ const Promise = require('bluebird');
 const React = require("react");
 
 const FakeToot = require("../../../components/fake-toot");
-const MutateButton = require("../../../components/mutation-button");
+const MutationButton = require("../../../components/form/mutation-button");
 
 const {
 	useTextInput,
 	useFileInput,
 	useComboBoxInput
-} = require("../../../components/form");
+} = require("../../../lib/form");
 
 const query = require("../../../lib/query");
 const { CategorySelect } = require('../category-select');
@@ -161,7 +161,7 @@ module.exports = function NewEmojiForm({ emoji }) {
 					categoryState={categoryState}
 				/>
 
-				<MutateButton text="Upload emoji" result={result} />
+				<MutationButton text="Upload emoji" result={result} />
 			</form>
 		</div>
 	);

web/source/settings/admin/emoji/remote/parse-from-toot.js

@@ -26,7 +26,7 @@ const syncpipe = require("syncpipe");
 const {
 	useTextInput,
 	useComboBoxInput
-} = require("../../../components/form");
+} = require("../../../lib/form");
 
 const { CategorySelect } = require('../category-select');
 

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/form/inputs.jsx

@@ -0,0 +1,102 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 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>
+				{label}
+				<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>
+				{label}
+				<input
+					type="checkbox"
+					checked={value}
+					onChange={onChange}
+					{...inputProps}
+				/>
+			</label>
+		</div>
+	);
+
+}
+
+module.exports = {
+	TextInput,
+	TextArea,
+	FileInput,
+	Checkbox
+};

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

@@ -37,6 +37,7 @@ module.exports = function MutateButton({text, result}) {
 			disabled={result.isLoading}
 			value={buttonText}
 		/>
+		{result.isSuccess && "Success!"}
 	</div>
 	);
 };

web/source/settings/lib/form/bool.jsx

@@ -0,0 +1,49 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 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 useBoolInput({name, Name}, {defaultValue=false} = {}) {
+	const [value, setValue] = React.useState(defaultValue);
+
+	function onChange(e) {
+		setValue(e.target.checked);
+	}
+
+	function reset() {
+		setValue(defaultValue);
+	}
+
+	// Array / Object hybrid, for easier access in different contexts
+	return Object.assign([
+		onChange,
+		reset,
+		{
+			[name]: value,
+			[`set${Name}`]: setValue
+		}
+	], {
+		onChange,
+		reset,
+		value,
+		setter: setValue,
+		hasChanged: () => value != defaultValue
+	});
+};

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

@@ -61,18 +61,30 @@ module.exports = function useFileInput({name, _Name}, {
 		setInfo();
 	}
 
-	return [
+	const infoComponent = (
+		<span className="form-info">
+			{info
+				? info
+				: initialInfo
+			}
+		</span>
+	);
+
+	// Array / Object hybrid, for easier access in different contexts
+	return Object.assign([
 		onChange,
 		reset,
 		{
 			[name]: file,
 			[`${name}URL`]: imageURL,
-			[`${name}Info`]: <span className="form-info">
-				{info
-					? info
-					: initialInfo
-				}
-			</span>
+			[`${name}Info`]: infoComponent,
 		}
-	];
+	], {
+		onChange,
+		reset,
+		value: file,
+		previewValue: imageURL,
+		hasChanged: () => file != undefined,
+		infoComponent
+	});
 };

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

@@ -33,5 +33,6 @@ function makeHook(func) {
 module.exports = {
 	useTextInput: makeHook(require("./text")),
 	useFileInput: makeHook(require("./file")),
+	useBoolInput: makeHook(require("./bool")),
 	useComboBoxInput: makeHook(require("./combobox"))
 };

web/source/settings/lib/form/submit.js

@@ -0,0 +1,56 @@
+/*
+	GoToSocial
+	Copyright (C) 2021-2022 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 syncpipe = require("syncpipe");
+
+const { unwrapRes } = require("../query/lib");
+
+module.exports = function useFormSubmit(form, [mutationQuery, result]) {
+	return [
+		result,
+		function submitForm(e) {
+			e.preventDefault();
+
+			// transform the field definitions into an object with just their values 
+			let updatedFields = [];
+			const mutationData = syncpipe(form, [
+				(_) => Object.entries(_),
+				(_) => _.map(([key, field]) => {
+					if (field.hasChanged()) {
+						updatedFields.push(field);
+						return [key, field.value];
+					} else {
+						return null;
+					}
+				}),
+				(_) => _.filter((value) => value != null),
+				(_) => Object.fromEntries(_)
+			]);
+
+			if (updatedFields.length > 0) {
+				return mutationQuery(mutationData)
+					.then(unwrapRes)
+					.then((_data) => {
+						updatedFields.forEach((field) => field.reset());
+					});
+			}
+		},
+	];
+};

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

@@ -43,7 +43,8 @@ module.exports = function useTextInput({name, Name}, {validator, defaultValue=""
 		}
 	}, [text, textRef, validator]);
 
-	return [
+	// Array / Object hybrid, for easier access in different contexts
+	return Object.assign([
 		onChange,
 		reset,
 		{
@@ -51,13 +52,14 @@ module.exports = function useTextInput({name, Name}, {validator, defaultValue=""
 			[`${name}Ref`]: textRef,
 			[`set${Name}`]: setText,
 			[`${name}Valid`]: valid,
-
-			name,
-			value: text,
-			ref: textRef,
-			setter: setText,
-			valid,
-			hasChanged: () => text != defaultValue
 		}
-	];
+	], {
+		onChange,
+		reset,
+		value: text,
+		ref: textRef,
+		setter: setText,
+		valid,
+		hasChanged: () => text != defaultValue
+	});
 };

web/source/settings/style.css

@@ -40,7 +40,7 @@ section {
 		border-top-left-radius: 0;
 		border-bottom-left-radius: 0;
 
-		& > div {
+		& > div, & > form {
 			border-left: 0.2rem solid $border-accent;
 			padding-left: 0.4rem;
 			display: flex;
@@ -213,7 +213,7 @@ input, select, textarea {
 	) !important;
 }
 
-section.with-sidebar > div {
+section.with-sidebar > div, section.with-sidebar > form {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
@@ -353,6 +353,7 @@ span.form-info {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	padding: 0.3rem 0;
+	font-weight: initial;
 }
 
 .list {

web/source/settings/user/profile.js

@@ -24,12 +24,22 @@ const Redux = require("react-redux");
 const query = require("../lib/query");
 
 const {
-	useTextInput
-} = require("../components/form");
+	useTextInput,
+	useFileInput,
+	useBoolInput
+} = require("../lib/form");
+
+const useFormSubmit = require("../lib/form/submit");
+
+const {
+	TextInput,
+	TextArea,
+	FileInput,
+	Checkbox
+} = require("../components/form/inputs");
 
 const FakeProfile = require("../components/fake-profile");
-const syncpipe = require("syncpipe");
-const MutationButton = require("../components/mutation-button");
+const MutationButton = require("../components/form/mutation-button");
 
 module.exports = function UserProfile() {
 	const allowCustomCSS = Redux.useSelector(state => state.instances.current.configuration.accounts.allow_custom_css);
@@ -52,7 +62,15 @@ module.exports = function UserProfile() {
 	*/
 
 	const form = {
-		display_name: useTextInput("displayName", {defaultValue: profile.display_name})
+		avatar: useFileInput("avatar", {withPreview: true, }),
+		header: useFileInput("header", {withPreview: true, }),
+		display_name: useTextInput("displayName", {defaultValue: profile.display_name}),
+		note: useTextInput("note", {defaultValue: profile.source?.note}),
+		custom_css: useTextInput("customCSS", {defaultValue: profile.custom_css}),
+		bot: useBoolInput("isBot", {defaultValue: profile.bot}),
+		locked: useBoolInput("isLocked", {defaultValue: profile.locked}),
+		enable_rss: useBoolInput("enableRSS", {defaultValue: profile.enable_rss}),
+		"source[sensitive]": useBoolInput("isSensitive", {defaultValue: profile.source?.sensitive}),
 	};
 
 	const [result, submitForm] = useFormSubmit(form, query.useUpdateCredentialsMutation());
@@ -61,124 +79,60 @@ module.exports = function UserProfile() {
 		<form className="user-profile" onSubmit={submitForm}>
 			<h1>Profile</h1>
 			<div className="overview">
-				{/* <FakeProfile/> */}
+				<FakeProfile
+					avatar={form.avatar.previewValue ?? profile.avatar}
+					header={form.header.previewValue ?? profile.header}
+					display_name={form.display_name.value ?? profile.username}
+					username={profile.username}
+					role={profile.role}
+				/>
 				<div className="files">
 					<div>
 						<h3>Header</h3>
-						{/* <File
-							id="header"
-							fileType="image/*"
-						/> */}
+						<FileInput
+							field={form.header}
+							accept="image/*"
+						/>
 					</div>
 					<div>
 						<h3>Avatar</h3>
-						{/* <File
-							id="avatar"
-							fileType="image/*"
-						/> */}
+						<FileInput
+							field={form.avatar}
+							accept="image/*"
+						/>
 					</div>
 				</div>
 			</div>
-			<FormTextInput
-				label="Name"
-				placeHolder="A GoToSocial user"
+			<TextInput
 				field={form.display_name}
-			/>
-			{/* <TextInput
-				id="display_name"
-				name="Name"
-				placeHolder="A GoToSocial user"
+				label="Name"
+				placeholder="A GoToSocial user"
 			/>
 			<TextArea
-				id="source.note"
-				name="Bio"
-				placeHolder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."
+				field={form.note}
+				label="Bio"
+				placeholder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."
+				rows={8}
 			/>
 			<Checkbox
-				id="locked"
-				name="Manually approve follow requests"
+				field={form.locked}
+				label="Manually approve follow requests"
 			/>
 			<Checkbox
-				id="enable_rss"
-				name="Enable RSS feed of Public posts"
+				field={form.enable_rss}
+				label="Enable RSS feed of Public posts"
 			/>
 			{ !allowCustomCSS ? null :
 				<TextArea
-					id="custom_css"
-					name="Custom CSS"
+					field={form.custom_css}
+					label="Custom CSS"
 					className="monospace"
+					rows={8}
 				>
 					<a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about custom profile CSS (opens in a new tab)</a>
 				</TextArea>
 			}
-			<Submit onClick={saveProfile} label="Save profile info" errorMsg={errorMsg} statusMsg={statusMsg} /> */}
 			<MutationButton text="Save profile info" result={result}/>
 		</form>
 	);
-};
-
-function FormTextInput({label, placeHolder, field}) {
-	let [onChange, _reset, {value, ref}] = field;
-
-	return (
-		<div className="form-field text">
-			<label>
-				{label}
-				<input
-					type="text"
-					placeholder={placeHolder}
-					{...{onChange, value, ref}}
-				/>
-			</label>
-		</div>
-	);
-}
-
-function useFormSubmit(form, [mutationQuery, result]) {
-	return [
-		result,
-		function submitForm(e) {
-			e.preventDefault();
-
-			// transform the field definitions into an object with just their values 
-			let updatedFields = 0;
-			const mutationData = syncpipe(form, [
-				(_) => Object.entries(_),
-				(_) => _.map(([key, field]) => {
-					let data = field[2]; // [onChange, reset, {}]
-					if (data.hasChanged()) {
-						return [key, data.value];
-					} else {
-						return null;
-					}
-				}),
-				(_) => _.filter((value) => value != null),
-				(_) => {
-					updatedFields = _.length;
-					return _;
-				},
-				(_) => Object.fromEntries(_)
-			]);
-
-			if (updatedFields > 0) {
-				return mutationQuery(mutationData);
-			}
-		},
-	];
-}
-
-// function useForm(formSpec) {
-// 	const form = {};
-
-// 	Object.entries(formSpec).forEach(([name, cfg]) => {
-// 		const [useTypedInput, defaultValue] = cfg;
-
-// 		form[name] = useTypedInput(name, );
-// 	});
-
-// 	form.submit = function submitForm() {
-
-// 	};
-
-// 	return form;
-// }
+};