forked from mirrors/gotosocial
* yakshave new form field structure * fully refactor user profile settings form * use rtk query api for profile settings * refactor user post settings * refactor password change form * refactor admin settings * FormWithData structure for user forms * admin actions refactor * whitespace * fix user settings data prop * remove superfluous logging * cleanup old code * refactor federation/suspend (overview, detail) * mostly abstracted (emoji) checkbox list * refactor parse-from-toot * refactor custom-emoji, progress on federation bulk * loading icon styling to prevent big spinny * refactor federation import-export interface * cleanup old files * [chore] Update/add license headers for 2023 * redux fixes * text-field exports * appease the linter * refactor authentication with RTK Query * fix login/logout state transition weirdness * fixes/cleanup * small linter-related fixes * add eslint license header check, fix existing files * remove old code, clarify comment * clarify suspend on subdomains * collapse if/else * fa-fw width info comment
144 lines
No EOL
3.9 KiB
JavaScript
144 lines
No EOL
3.9 KiB
JavaScript
/*
|
|
GoToSocial
|
|
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
|
|
|
|
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/>.
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
const React = require("react");
|
|
|
|
const query = require("../lib/query");
|
|
|
|
const {
|
|
useTextInput,
|
|
useFileInput,
|
|
useBoolInput
|
|
} = require("../lib/form");
|
|
|
|
const useFormSubmit = require("../lib/form/submit");
|
|
|
|
const {
|
|
TextInput,
|
|
TextArea,
|
|
FileInput,
|
|
Checkbox
|
|
} = require("../components/form/inputs");
|
|
|
|
const FormWithData = require("../lib/form/form-with-data");
|
|
const FakeProfile = require("../components/fake-profile");
|
|
const MutationButton = require("../components/form/mutation-button");
|
|
|
|
module.exports = function UserProfile() {
|
|
return (
|
|
<FormWithData
|
|
dataQuery={query.useVerifyCredentialsQuery}
|
|
DataForm={UserProfileForm}
|
|
/>
|
|
);
|
|
};
|
|
|
|
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
|
|
- string custom_css (if enabled)
|
|
*/
|
|
|
|
const { data: instance } = query.useInstanceQuery();
|
|
const allowCustomCSS = React.useMemo(() => {
|
|
return instance?.configuration?.accounts?.allow_custom_css === true;
|
|
}, [instance]);
|
|
|
|
const form = {
|
|
avatar: useFileInput("avatar", { withPreview: true }),
|
|
header: useFileInput("header", { withPreview: true }),
|
|
displayName: useTextInput("display_name", { defaultValue: profile.display_name }),
|
|
note: useTextInput("note", { defaultValue: profile.source?.note }),
|
|
customCSS: useTextInput("custom_css", { defaultValue: profile.custom_css }),
|
|
bot: useBoolInput("bot", { defaultValue: profile.bot }),
|
|
locked: useBoolInput("locked", { defaultValue: profile.locked }),
|
|
enableRSS: useBoolInput("enable_rss", { defaultValue: profile.enable_rss }),
|
|
};
|
|
|
|
const [submitForm, result] = useFormSubmit(form, query.useUpdateCredentialsMutation());
|
|
|
|
return (
|
|
<form className="user-profile" onSubmit={submitForm}>
|
|
<h1>Profile</h1>
|
|
<div className="overview">
|
|
<FakeProfile
|
|
avatar={form.avatar.previewValue ?? profile.avatar}
|
|
header={form.header.previewValue ?? profile.header}
|
|
display_name={form.displayName.value ?? profile.username}
|
|
username={profile.username}
|
|
role={profile.role}
|
|
/>
|
|
<div className="files">
|
|
<div>
|
|
<h3>Header</h3>
|
|
<FileInput
|
|
field={form.header}
|
|
accept="image/*"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3>Avatar</h3>
|
|
<FileInput
|
|
field={form.avatar}
|
|
accept="image/*"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<TextInput
|
|
field={form.displayName}
|
|
label="Name"
|
|
placeholder="A GoToSocial user"
|
|
/>
|
|
<TextArea
|
|
field={form.note}
|
|
label="Bio"
|
|
placeholder="Just trying out GoToSocial, my pronouns are they/them and I like sloths."
|
|
rows={8}
|
|
/>
|
|
<Checkbox
|
|
field={form.locked}
|
|
label="Manually approve follow requests"
|
|
/>
|
|
<Checkbox
|
|
field={form.enableRSS}
|
|
label="Enable RSS feed of Public posts"
|
|
/>
|
|
{!allowCustomCSS ? null :
|
|
<TextArea
|
|
field={form.customCSS}
|
|
label="Custom CSS"
|
|
className="monospace"
|
|
rows={8}
|
|
>
|
|
<a href="https://docs.gotosocial.org/en/latest/user_guide/custom_css" target="_blank" className="moreinfolink" rel="noreferrer">Learn more about custom profile CSS (opens in a new tab)</a>
|
|
</TextArea>
|
|
}
|
|
<MutationButton label="Save profile info" result={result} />
|
|
</form>
|
|
);
|
|
} |