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/user/migration.tsx | 212 ------------------------- web/source/settings/user/profile.tsx | 279 --------------------------------- web/source/settings/user/settings.tsx | 153 ------------------ 3 files changed, 644 deletions(-) delete mode 100644 web/source/settings/user/migration.tsx delete mode 100644 web/source/settings/user/profile.tsx delete mode 100644 web/source/settings/user/settings.tsx (limited to 'web/source/settings/user') diff --git a/web/source/settings/user/migration.tsx b/web/source/settings/user/migration.tsx deleted file mode 100644 index 9dfa3a75b..000000000 --- a/web/source/settings/user/migration.tsx +++ /dev/null @@ -1,212 +0,0 @@ -/* - 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/user/profile.tsx b/web/source/settings/user/profile.tsx deleted file mode 100644 index c5fb67376..000000000 --- a/web/source/settings/user/profile.tsx +++ /dev/null @@ -1,279 +0,0 @@ -/* - 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. -
- -
-
- - - -