From 7a1e6394831fb07e303c5ed0900dfe1ea4820de5 Mon Sep 17 00:00:00 2001 From: tobi <31960611+tsmethurst@users.noreply.github.com> Date: Wed, 24 Apr 2024 12:12:47 +0200 Subject: [chore] Refactor settings panel routing (and other fixes) (#2864) --- web/source/settings/views/user/migration.tsx | 208 ++++++++++++++++++++ web/source/settings/views/user/profile.tsx | 279 +++++++++++++++++++++++++++ web/source/settings/views/user/routes.tsx | 80 ++++++++ web/source/settings/views/user/settings.tsx | 169 ++++++++++++++++ 4 files changed, 736 insertions(+) create mode 100644 web/source/settings/views/user/migration.tsx create mode 100644 web/source/settings/views/user/profile.tsx create mode 100644 web/source/settings/views/user/routes.tsx create mode 100644 web/source/settings/views/user/settings.tsx (limited to 'web/source/settings/views/user') diff --git a/web/source/settings/views/user/migration.tsx b/web/source/settings/views/user/migration.tsx new file mode 100644 index 000000000..69aae6059 --- /dev/null +++ b/web/source/settings/views/user/migration.tsx @@ -0,0 +1,208 @@ +/* + 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 FormWithData from "../../lib/form/form-with-data"; + +import { useVerifyCredentialsQuery } from "../../lib/query/oauth"; +import { useArrayInput, useTextInput } from "../../lib/form"; +import { TextInput } from "../../components/form/inputs"; +import useFormSubmit from "../../lib/form/submit"; +import MutationButton from "../../components/form/mutation-button"; +import { useAliasAccountMutation, useMoveAccountMutation } from "../../lib/query/user"; +import { FormContext, useWithFormContext } from "../../lib/form/context"; +import { store } from "../../redux/store"; + +export default function UserMigration() { + return ( + + ); +} + +function UserMigrationForm({ data: profile }) { + return ( + <> +

Account Migration Settings

+

+ The following settings allow you to alias your account to + another account elsewhere, or to move to another account. +

+

+ Account aliasing is harmless and reversible; you can + set and unset up to five account aliases as many times as you wish. +

+

+ The account move action, on the other + hand, has serious and irreversible consequences. +

+

+ For more information on account migration, please see the documentation. +

+ + + + ); +} + +function AliasForm({ data: profile }) { + const form = { + alsoKnownAs: useArrayInput("also_known_as_uris", { + source: profile, + valueSelector: (p) => ( + p.source?.also_known_as_uris + ? p.source?.also_known_as_uris.map(entry => [entry]) + : [] + ), + length: 5, + }), + }; + + const [submitForm, result] = useFormSubmit(form, useAliasAccountMutation()); + + return ( +
+ + + + + ); +} + +function AlsoKnownAsURIs({ field: formField }) { + return ( +
+ + {formField.value.map((data, i) => ( + + ))} + +
+ ); +} + +function AlsoKnownAsURI({ index, data }) { + const name = `${index}`; + const form = useWithFormContext(index, { + alsoKnownAsURI: useTextInput( + name, + // Only one field per entry. + { defaultValue: data[0] ?? "" }, + ), + }); + + return ( + + ); +} + +function MoveForm({ data: profile }) { + let urlStr = store.getState().oauth.instanceUrl ?? ""; + let url = new URL(urlStr); + + const form = { + movedToURI: useTextInput("moved_to_uri", { + source: profile, + valueSelector: (p) => p.moved?.url }, + ), + password: useTextInput("password"), + }; + + const [submitForm, result] = useFormSubmit(form, useMoveAccountMutation(), { + changedOnly: false, + }); + + return ( +
+
+

Move Account

+

+ For a move to be successful, you must have already set an alias from the + target account back to the account you're moving from (ie., this account), + using the settings panel of the instance on which the target account resides. + To do this, provide the following details to the other instance: +

+
+
+
Account handle/username:
+
@{profile.acct}@{url.host}
+
+
+
Account URI:
+
{urlStr}/users/{profile.username}
+
+
+
+ + Learn more about moving your account (opens in a new tab) + +
+ + + + + ); +} diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx new file mode 100644 index 000000000..08cd74bda --- /dev/null +++ b/web/source/settings/views/user/profile.tsx @@ -0,0 +1,279 @@ +/* + 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. +
+ +
+
+ + + +