mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-23 04:06:39 +00:00
197 lines
6.5 KiB
TypeScript
197 lines
6.5 KiB
TypeScript
/*
|
|
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";
|
|
import { TextInput, TextArea, FileInput } from "../../../components/form/inputs";
|
|
import MutationButton from "../../../components/form/mutation-button";
|
|
import { useInstanceV1Query } from "../../../lib/query/gts-api";
|
|
import { useUpdateInstanceMutation } from "../../../lib/query/admin";
|
|
import { InstanceV1 } from "../../../lib/types/instance";
|
|
import FormWithData from "../../../lib/form/form-with-data";
|
|
import useFormSubmit from "../../../lib/form/submit";
|
|
|
|
export default function InstanceSettings() {
|
|
return (
|
|
<FormWithData
|
|
dataQuery={useInstanceV1Query}
|
|
DataForm={InstanceSettingsForm}
|
|
/>
|
|
);
|
|
}
|
|
|
|
interface InstanceSettingsFormProps{
|
|
data: InstanceV1;
|
|
}
|
|
|
|
function InstanceSettingsForm({ data: instance }: InstanceSettingsFormProps) {
|
|
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}
|
|
autoComplete="none"
|
|
>
|
|
<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)`}
|
|
autoCapitalize="words"
|
|
placeholder="My GoToSocial Instance"
|
|
/>
|
|
|
|
<div className="file-upload" aria-labelledby="avatar">
|
|
<strong id="avatar">Instance avatar (1:1 images look best)</strong>
|
|
<div className="file-upload-with-preview">
|
|
<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 className="file-input-with-image-description">
|
|
<FileInput
|
|
field={form.thumbnail}
|
|
accept="image/png, image/jpeg, image/webp, image/gif"
|
|
/>
|
|
<TextInput
|
|
field={form.thumbnailDesc}
|
|
label="Avatar image description"
|
|
placeholder="A cute drawing of a smiling sloth."
|
|
autoCapitalize="sentences"
|
|
/>
|
|
</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 GoToSocial."
|
|
autoCapitalize="sentences"
|
|
rows={6}
|
|
/>
|
|
|
|
<TextArea
|
|
field={form.description}
|
|
label={`Full description (markdown accepted, max ${descLimit} characters)`}
|
|
placeholder="A small testing instance for GoToSocial. Just trying it out, my main instance is https://example.com"
|
|
autoCapitalize="sentences"
|
|
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."
|
|
autoCapitalize="sentences"
|
|
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"
|
|
autoCapitalize="none"
|
|
spellCheck="false"
|
|
/>
|
|
|
|
<TextInput
|
|
field={form.contactEmail}
|
|
label="Contact email"
|
|
placeholder="admin@example.com"
|
|
type="email"
|
|
/>
|
|
|
|
<MutationButton label="Save" result={result} disabled={false} />
|
|
</form>
|
|
);
|
|
} |