From a84971af840967ea38d0a5a92faf982099d035e3 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Tue, 13 Sep 2022 21:56:53 +0200
Subject: [PATCH] admin panel settings

---
 web/source/settings-panel/admin/settings.js | 76 +++++++++++++++++----
 web/source/settings-panel/lib/api/admin.js  |  4 +-
 web/source/settings-panel/style.css         | 18 +++++
 3 files changed, 83 insertions(+), 15 deletions(-)

diff --git a/web/source/settings-panel/admin/settings.js b/web/source/settings-panel/admin/settings.js
index eb99c1747..198d7a073 100644
--- a/web/source/settings-panel/admin/settings.js
+++ b/web/source/settings-panel/admin/settings.js
@@ -25,15 +25,19 @@ const Redux = require("react-redux");
 const Submit = require("../components/submit");
 
 const api = require("../lib/api");
-const formFields = require("../lib/form-fields");
 const adminActions = require("../redux/reducers/instances").actions;
 
+const {
+	TextInput,
+	TextArea,
+	Checkbox,
+	File
+} = require("../components/form-fields").formFields(adminActions.setAdminSettingsVal, (state) => state.instances.adminSettings);
+
 module.exports = function AdminSettings() {
 	const dispatch = Redux.useDispatch();
 	const instance = Redux.useSelector(state => state.instances.adminSettings);
 
-	const { onTextChange, onCheckChange, onFileChange } = formFields(dispatch, adminActions.setAdminSettingsVal, instance);
-
 	const [errorMsg, setError] = React.useState("");
 	const [statusMsg, setStatus] = React.useState("");
 
@@ -41,7 +45,7 @@ module.exports = function AdminSettings() {
 		setStatus("PATCHing");
 		setError("");
 		return Promise.try(() => {
-			return dispatch(api.user.updateProfile());
+			return dispatch(api.admin.updateProfile());
 		}).then(() => {
 			setStatus("Saved!");
 		}).catch((e) => {
@@ -50,18 +54,64 @@ module.exports = function AdminSettings() {
 		});
 	}
 
-	// function removeFile(name) {
-	// 	return function(e) {
-	// 		e.preventDefault();
-	// 		dispatch(user.setProfileVal([name, ""]));
-	// 		dispatch(user.setProfileVal([`${name}File`, ""]));
-	// 	};
-	// }
-
 	return (
-		<div className="user-profile">
+		<div>
 			<h1>Instance Settings</h1>
+			<TextInput
+				id="title"
+				name="Title"
+				placeHolder="My GoToSocial instance"
+			/>
 
+			<TextArea
+				id="short_description"
+				name="Short description"
+				placeHolder="A small testing instance for the GoToSocial alpha."
+			/>
+			<TextArea
+				id="description"
+				name="Full description"
+				placeHolder="A small testing instance for the GoToSocial alpha."
+			/>
+
+			<TextInput
+				id="contact_username"
+				name="Contact user (local account username)"
+				placeHolder="admin"
+			/>
+			<TextInput
+				id="email"
+				name="Contact email"
+				placeHolder="admin@example.com"
+			/>
+
+			<TextArea
+				id="terms"
+				name="Terms & Conditions"
+				placeHolder=""
+			/>
+
+			<div className="file-upload">
+				<h3>Instance avatar</h3>
+				<div>
+					<img className="preview avatar" src={instance.avatar} alt={instance.avatar ? `Avatar image for the instance` : "No instance avatar image set"} />
+					<File 
+						id="avatar"
+						fileType="image/*"
+					/>
+				</div>
+			</div>
+
+			<div className="file-upload">
+				<h3>Instance header</h3>
+				<div>
+					<img className="preview header" src={instance.header} alt={instance.header ? `Header image for the instance` : "No instance header image set"} />
+					<File 
+						id="header"
+						fileType="image/*"
+					/>
+				</div>
+			</div>
 			<Submit onClick={submit} label="Save" errorMsg={errorMsg} statusMsg={statusMsg} />
 		</div>
 	);
diff --git a/web/source/settings-panel/lib/api/admin.js b/web/source/settings-panel/lib/api/admin.js
index b43121d22..ad32e10f0 100644
--- a/web/source/settings-panel/lib/api/admin.js
+++ b/web/source/settings-panel/lib/api/admin.js
@@ -24,14 +24,14 @@ const d = require("dotty");
 const user = require("../../redux/reducers/user").actions;
 
 module.exports = function ({ apiCall, getChanges }) {
-	function updateCredentials(selector, keys) {
+	function updateInstance(selector, keys) {
 		return function (dispatch, getState) {
 			return Promise.try(() => {
 				const state = selector(getState());
 
 				const update = getChanges(state, keys);
 
-				return dispatch(apiCall("PATCH", "/api/v1/accounts/update_credentials", update, "form"));
+				return dispatch(apiCall("PATCH", "/api/v1/instance", update, "form"));
 			}).then((account) => {
 				return dispatch(user.setAccount(account));
 			});
diff --git a/web/source/settings-panel/style.css b/web/source/settings-panel/style.css
index 4d1d88da2..ac6260c4e 100644
--- a/web/source/settings-panel/style.css
+++ b/web/source/settings-panel/style.css
@@ -249,6 +249,24 @@ section.with-sidebar > div {
 	}
 }
 
+.file-upload > div {
+	display: flex;
+	gap: 1rem;
+
+	img {
+		height: 8rem;
+		border: 0.2rem solid $border-accent;
+	}
+
+	img.avatar {
+		width: 8rem;
+	}
+
+	img.header {
+		width: 24rem;
+	}
+}
+
 .user-profile {
 	.overview {
 		display: grid;