SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[Frontend] Settings for profile fields (#1885)

Browse Source 
* get max emoji size from instance settings

* expose (hardcoded) max amount of profile fields in instance api

* basic profile field setting

* fix profile field hook structure for updates

* *twirls mustache* fix ze tests

---------

Co-authored-by: tsmethurst <tobi.smethurst@protonmail.com>
This commit is contained in:
f0x52
2023-06-13 12:21:26 +02:00
committed by GitHub
parent 4990099fde
commit 8fb5a7e7f8
15 changed files with 261 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
web/source/settings/user/profile.js
View File

@@ -26,10 +26,12 @@ const query = require("../lib/query");
const {
useTextInput,
useFileInput,
useBoolInput
useBoolInput,
useFieldArrayInput
} = require("../lib/form");
const useFormSubmit = require("../lib/form/submit");
const { useWithFormContext, FormContext } = require("../lib/form/context");
const {
TextInput,
@@ -65,8 +67,11 @@ function UserProfileForm({ data: profile }) {
*/
const { data: instance } = query.useInstanceQuery();
const allowCustomCSS = React.useMemo(() => {
return instance?.configuration?.accounts?.allow_custom_css === true;
const instanceConfig = React.useMemo(() => {
return {
allowCustomCSS: instance?.configuration?.accounts?.allow_custom_css === true,
maxPinnedFields: instance?.configuration?.accounts?.max_profile_fields ?? 6
};
}, [instance]);
const form = {
@@ -78,9 +83,18 @@ function UserProfileForm({ data: profile }) {
bot: useBoolInput("bot", { source: profile }),
locked: useBoolInput("locked", { source: profile }),
enableRSS: useBoolInput("enable_rss", { source: profile }),
fields: useFieldArrayInput("fields_attributes", {
defaultValue: profile?.source?.fields,
length: instanceConfig.maxPinnedFields
}),
};
const [submitForm, result] = useFormSubmit(form, query.useUpdateCredentialsMutation());
const [submitForm, result] = useFormSubmit(form, query.useUpdateCredentialsMutation(), {
onFinish: () => {
form.avatar.reset();
form.header.reset();
}
});
return (
<form className="user-profile" onSubmit={submitForm}>
@@ -129,7 +143,11 @@ function UserProfileForm({ data: profile }) {
field={form.enableRSS}
label="Enable RSS feed of Public posts"
/>
{!allowCustomCSS ? null :
<b>Profile fields</b>
<ProfileFields
field={form.fields}
/>
{!instanceConfig.allowCustomCSS ? null :
<TextArea
field={form.customCSS}
label="Custom CSS"
@@ -142,4 +160,40 @@ function UserProfileForm({ data: profile }) {
<MutationButton label="Save profile info" result={result} />
</form>
);
}
function ProfileFields({ field: formField }) {
return (
<div className="fields">
<FormContext.Provider value={formField.ctx}>
{formField.value.map((data, i) => (
<Field
key={i}
index={i}
data={data}
/>
))}
</FormContext.Provider>
</div>
);
}
function Field({ index, data }) {
const form = useWithFormContext(index, {
name: useTextInput("name", { defaultValue: data.name }),
value: useTextInput("value", { defaultValue: data.value })
});
return (
<div className="entry">
<TextInput
field={form.name}
placeholder="Name"
/>
<TextInput
field={form.value}
placeholder="Value"
/>
</div>
);
}