[feature] Parse instance descriptors as markdown, show T&C on /about (#2481)

* [feature] Parse instance descriptors as markdown, show T&C on /about

* lint

* remove unnecessary nullzero tags

2 files changed, 191 insertions, 126 deletions

diff --git a/web/source/settings/admin/settings/index.jsx b/web/source/settings/admin/settings/index.jsx
deleted file mode 100644
index c0da83a2a..000000000
--- a/web/source/settings/admin/settings/index.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
-	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/>.
-*/
-
-const React = require("react");
-
-const {
-	useTextInput,
-	useFileInput
-} = require("../../lib/form");
-
-const useFormSubmit = require("../../lib/form/submit").default;
-
-const {
-	TextInput,
-	TextArea,
-	FileInput
-} = require("../../components/form/inputs");
-
-const FormWithData = require("../../lib/form/form-with-data").default;
-const MutationButton = require("../../components/form/mutation-button");
-
-const { useInstanceV1Query } = require("../../lib/query");
-const { useUpdateInstanceMutation } = require("../../lib/query/admin");
-
-module.exports = function AdminSettings() {
-	return (
-		<FormWithData
-			dataQuery={useInstanceV1Query}
-			DataForm={AdminSettingsForm}
-		/>
-	);
-};
-
-function AdminSettingsForm({ data: instance }) {
-	const form = {
-		title: useTextInput("title", {
-			source: instance,
-			validator: (val) => val.length <= 40 ? "" : "Instance title must be 40 characters or less"
-		}),
-		thumbnail: useFileInput("thumbnail", { withPreview: true }),
-		thumbnailDesc: useTextInput("thumbnail_description", { source: instance }),
-		shortDesc: useTextInput("short_description", { source: instance }),
-		description: useTextInput("description", { source: instance }),
-		contactUser: useTextInput("contact_username", { source: instance, valueSelector: (s) => s.contact_account?.username }),
-		contactEmail: useTextInput("contact_email", { source: instance, valueSelector: (s) => s.email }),
-		terms: useTextInput("terms", { source: instance })
-	};
-
-	const [submitForm, result] = useFormSubmit(form, useUpdateInstanceMutation());
-
-	return (
-		<form onSubmit={submitForm}>
-			<h1>Instance Settings</h1>
-			<TextInput
-				field={form.title}
-				label="Title"
-				placeholder="My GoToSocial instance"
-			/>
-
-			<div className="file-upload">
-				<h3>Instance thumbnail</h3>
-				<div>
-					<img className="preview avatar" src={form.thumbnail.previewValue ?? instance.thumbnail} alt={form.thumbnailDesc.value ?? (instance.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")} />
-					<FileInput
-						field={form.thumbnail}
-						accept="image/*"
-					/>
-				</div>
-			</div>
-
-			<TextInput
-				field={form.thumbnailDesc}
-				label="Instance thumbnail description"
-				placeholder="A cute drawing of a smiling sloth."
-			/>
-
-			<TextArea
-				field={form.shortDesc}
-				label="Short description"
-				placeholder="A small testing instance for the GoToSocial alpha software."
-			/>
-
-			<TextArea
-				field={form.description}
-				label="Full description"
-				placeholder="A small testing instance for the GoToSocial alpha software. Just trying it out, my main instance is https://example.com"
-			/>
-
-			<TextInput
-				field={form.contactUser}
-				label="Contact user (local account username)"
-				placeholder="admin"
-			/>
-
-			<TextInput
-				field={form.contactEmail}
-				label="Contact email"
-				placeholder="admin@example.com"
-			/>
-
-			<TextArea
-				field={form.terms}
-				label="Terms & Conditions"
-				placeholder=""
-			/>
-
-			<MutationButton label="Save" result={result} />
-		</form>
-	);
-}
\ No newline at end of file
diff --git a/web/source/settings/admin/settings/index.tsx b/web/source/settings/admin/settings/index.tsx
new file mode 100644
index 000000000..4e5ea343a
--- /dev/null
+++ b/web/source/settings/admin/settings/index.tsx
@@ -0,0 +1,191 @@
+/*
+	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 from "react";
+
+import { useTextInput, useFileInput } from "../../lib/form";
+
+const useFormSubmit = require("../../lib/form/submit").default;
+
+import { TextInput, TextArea, FileInput } from "../../components/form/inputs";
+
+const FormWithData = require("../../lib/form/form-with-data").default;
+import MutationButton from "../../components/form/mutation-button";
+
+import { useInstanceV1Query } from "../../lib/query";
+import { useUpdateInstanceMutation } from "../../lib/query/admin";
+import { InstanceV1 } from "../../lib/types/instance";
+
+export default function AdminSettings() {
+	return (
+		<FormWithData
+			dataQuery={useInstanceV1Query}
+			DataForm={AdminSettingsForm}
+		/>
+	);
+}
+
+interface AdminSettingsFormProps{
+	data: InstanceV1;
+}
+
+function AdminSettingsForm({ data: instance }: AdminSettingsFormProps) {
+	const titleLimit = 40;
+	const shortDescLimit = 500;
+	const descLimit = 5000;
+	const termsLimit = 5000;
+	
+	const form = {
+		title: useTextInput("title", {
+			source: instance,
+			validator: (val: string) => val.length <= titleLimit ? "" : `Instance title is ${val.length} characters; must be ${titleLimit} characters or less`
+		}),
+		thumbnail: useFileInput("thumbnail", { withPreview: true }),
+		thumbnailDesc: useTextInput("thumbnail_description", { source: instance }),
+		shortDesc: useTextInput("short_description", {
+			source: instance,
+			// Select "raw" text version of parsed field for editing.
+			valueSelector: (s: InstanceV1) => s.short_description_text,
+			validator: (val: string) => val.length <= shortDescLimit ? "" : `Instance short description is ${val.length} characters; must be ${shortDescLimit} characters or less`
+		}),
+		description: useTextInput("description", {
+			source: instance,
+			// Select "raw" text version of parsed field for editing.
+			valueSelector: (s: InstanceV1) => s.description_text,
+			validator: (val: string) => val.length <= descLimit ? "" : `Instance description is ${val.length} characters; must be ${descLimit} characters or less`
+		}),
+		terms: useTextInput("terms", {
+			source: instance,
+			// Select "raw" text version of parsed field for editing.
+			valueSelector: (s: InstanceV1) => s.terms_text,
+			validator: (val: string) => val.length <= termsLimit ? "" : `Instance terms and conditions is ${val.length} characters; must be ${termsLimit} characters or less`
+		}),
+		contactUser: useTextInput("contact_username", { source: instance, valueSelector: (s) => s.contact_account?.username }),
+		contactEmail: useTextInput("contact_email", { source: instance, valueSelector: (s) => s.email })
+	};
+
+	const [submitForm, result] = useFormSubmit(form, useUpdateInstanceMutation());
+
+	return (
+		<form onSubmit={submitForm}>
+			<h1>Instance Settings</h1>
+
+			<div className="form-section-docs">
+				<h3>Appearance</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-appearance"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+
+			<TextInput
+				field={form.title}
+				label={`Instance title (max ${titleLimit} characters)`}
+				placeholder="My GoToSocial instance"
+			/>
+
+			<div className="file-upload" aria-labelledby="avatar">
+				<strong id="avatar">Instance avatar</strong>
+				<div>
+					<img
+						className="preview avatar"
+						src={form.thumbnail.previewValue ?? instance?.thumbnail}
+						alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")}
+					/>
+					<div>
+						<FileInput
+							field={form.thumbnail}
+							accept="image/png, image/jpeg, image/webp, image/gif"
+						/>
+						<br/>
+						<TextInput
+							field={form.thumbnailDesc}
+							label="Avatar image description"
+							placeholder="A cute drawing of a smiling sloth."
+						/>
+					</div>
+				</div>
+
+			</div>
+
+			<div className="form-section-docs">
+				<h3>Descriptors</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-descriptors"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+
+			<TextArea
+				field={form.shortDesc}
+				label={`Short description (markdown accepted, max ${shortDescLimit} characters)`}
+				placeholder="A small testing instance for the GoToSocial alpha software."
+				rows={6}
+			/>
+
+			<TextArea
+				field={form.description}
+				label={`Full description (markdown accepted, max ${descLimit} characters)`}
+				placeholder="A small testing instance for the GoToSocial alpha software. Just trying it out, my main instance is https://example.com"
+				rows={6}
+			/>
+
+			<TextArea
+				field={form.terms}
+				label={`Terms & Conditions (markdown accepted, max ${termsLimit} characters)`}
+				placeholder="Terms and conditions of using this instance, data policy, imprint, GDPR stuff, yadda yadda."
+				rows={6}
+			/>
+
+			<div className="form-section-docs">
+				<h3>Contact info</h3>
+				<a
+					href="https://docs.gotosocial.org/en/latest/admin/settings/#instance-contact-info"
+					target="_blank"
+					className="docslink"
+					rel="noreferrer"
+				>
+					Learn more about these settings (opens in a new tab)
+				</a>
+			</div>
+
+			<TextInput
+				field={form.contactUser}
+				label="Contact user (local account username)"
+				placeholder="admin"
+			/>
+
+			<TextInput
+				field={form.contactEmail}
+				label="Contact email"
+				placeholder="admin@example.com"
+			/>
+
+			<MutationButton label="Save" result={result} disabled={false} />
+		</form>
+	);
+}
\ No newline at end of file