/* 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 . */ import React from "react"; import { useTextInput, useFileInput, useBoolInput, useFieldArrayInput, useRadioInput } from "../../lib/form"; import useFormSubmit from "../../lib/form/submit"; import { useWithFormContext, FormContext } from "../../lib/form/context"; import { TextInput, TextArea, FileInput, Checkbox, RadioGroup } from "../../components/form/inputs"; import FormWithData from "../../lib/form/form-with-data"; import FakeProfile from "../../components/fake-profile"; import MutationButton from "../../components/form/mutation-button"; import { useAccountThemesQuery, useInstanceV1Query } from "../../lib/query"; import { useUpdateCredentialsMutation } from "../../lib/query/user"; import { useVerifyCredentialsQuery } from "../../lib/query/oauth"; export default function UserProfile() { return ( ); } function UserProfileForm({ data: profile }) { /* User profile update form keys - bool bot - bool locked - string display_name - string note - file avatar - file header - bool enable_rss - bool hide_collections - string custom_css (if enabled) - string theme */ const { data: instance } = useInstanceV1Query(); const instanceConfig = React.useMemo(() => { return { allowCustomCSS: instance?.configuration?.accounts?.allow_custom_css === true, maxPinnedFields: instance?.configuration?.accounts?.max_profile_fields ?? 6 }; }, [instance]); // Parse out available theme options into nice format. const { data: themes } = useAccountThemesQuery(); let themeOptions = { "": "Default" }; themes?.forEach((theme) => { let key = theme.file_name; let value = theme.title; if (theme.description) { value += " - " + theme.description; } themeOptions[key] = value; }); const form = { avatar: useFileInput("avatar", { withPreview: true }), header: useFileInput("header", { withPreview: true }), displayName: useTextInput("display_name", { source: profile }), note: useTextInput("note", { source: profile, valueSelector: (p) => p.source?.note }), bot: useBoolInput("bot", { source: profile }), locked: useBoolInput("locked", { source: profile }), discoverable: useBoolInput("discoverable", { source: profile}), enableRSS: useBoolInput("enable_rss", { source: profile }), hideCollections: useBoolInput("hide_collections", { source: profile }), fields: useFieldArrayInput("fields_attributes", { defaultValue: profile?.source?.fields, length: instanceConfig.maxPinnedFields }), customCSS: useTextInput("custom_css", { source: profile, nosubmit: !instanceConfig.allowCustomCSS }), theme: useRadioInput("theme", { source: profile, options: themeOptions, }), }; const [submitForm, result] = useFormSubmit(form, useUpdateCredentialsMutation(), { changedOnly: true, onFinish: () => { form.avatar.reset(); form.header.reset(); } }); return (

Profile

Theme
After choosing theme and saving, open your profile and refresh to see changes.

Basic Information

Learn more about these settings (opens in a new tab)