diff options
Diffstat (limited to 'web/source/settings/user')
| -rw-r--r-- | web/source/settings/user/migration.tsx | 206 | ||||
| -rw-r--r-- | web/source/settings/user/profile.tsx (renamed from web/source/settings/user/profile.js) | 37 | ||||
| -rw-r--r-- | web/source/settings/user/settings.tsx (renamed from web/source/settings/user/settings.js) | 43 |
3 files changed, 248 insertions, 38 deletions
diff --git a/web/source/settings/user/migration.tsx b/web/source/settings/user/migration.tsx new file mode 100644 index 000000000..7a8b934ac --- /dev/null +++ b/web/source/settings/user/migration.tsx @@ -0,0 +1,206 @@ +/* + 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 <http://www.gnu.org/licenses/>. +*/ + +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 ( + <FormWithData + dataQuery={useVerifyCredentialsQuery} + DataForm={UserMigrationForm} + /> + ); +} + +function UserMigrationForm({ data: profile }) { + let urlStr = store.getState().oauth.instanceUrl ?? ""; + let url = new URL(urlStr); + + return ( + <> + <h2>Account Migration Settings</h2> + <p> + The following settings allow you to <strong>alias</strong> your account to another account + elsewhere, and to <strong>move</strong> your followers and following lists to another account. + </p> + <p> + Account <strong>aliasing</strong> is harmless and reversible; you can + set and unset up to five account aliases as many times as you wish. + </p> + <p> + The account <strong>move</strong> action, on the other hand, has serious and irreversible consequences. + </p> + <p> + To move, you must set an alias from your account to the target account, using this settings panel. + </p> + <p> + You must also set an alias from the target account back to your account, using + the settings panel of the instance on which the target account resides. + </p> + <p> + Provide the following details to the other instance: + </p> + <dl className="migration-details"> + <div> + <dt>Account handle/username:</dt> + <dd>@{profile.acct}@{url.host}</dd> + </div> + <div> + <dt>Account URI:</dt> + <dd>{urlStr}/users/{profile.username}</dd> + </div> + </dl> + <p> + For more information on account migration, please see <a href="https://docs.gotosocial.org/en/latest/user_guide/settings/#alias-account" target="_blank" className="docslink" rel="noreferrer">the documentation</a>. + </p> + <AliasForm data={profile} /> + <MoveForm data={profile} /> + </> + ); +} + +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 ( + <form className="user-migration-alias" onSubmit={submitForm}> + <div className="form-section-docs without-border"> + <h3>Alias Account</h3> + <a + href="https://docs.gotosocial.org/en/latest/user_guide/settings/#alias-account" + target="_blank" + className="docslink" + rel="noreferrer" + > + Learn more about account aliasing (opens in a new tab) + </a> + </div> + <AlsoKnownAsURIs + field={form.alsoKnownAs} + /> + <MutationButton + disabled={false} + label="Save account aliases" + result={result} + /> + </form> + ); +} + +function AlsoKnownAsURIs({ field: formField }) { + return ( + <div className="aliases"> + <FormContext.Provider value={formField.ctx}> + {formField.value.map((data, i) => ( + <AlsoKnownAsURI + key={i} + index={i} + data={data} + /> + ))} + </FormContext.Provider> + </div> + ); +} + +function AlsoKnownAsURI({ index, data }) { + const name = `${index}`; + const form = useWithFormContext(index, { + alsoKnownAsURI: useTextInput( + name, + // Only one field per entry. + { defaultValue: data[0] ?? "" }, + ), + }); + + return ( + <TextInput + label={`Alias #${index+1}`} + field={form.alsoKnownAsURI} + placeholder={`https://example.org/users/my_other_account_${index+1}`} + /> + ); +} + +function MoveForm({ data: profile }) { + const form = { + movedToURI: useTextInput("moved_to_uri", { + source: profile, + valueSelector: (p) => p.moved?.uri }, + ), + password: useTextInput("password"), + }; + + const [submitForm, result] = useFormSubmit(form, useMoveAccountMutation()); + + return ( + <form className="user-migration-move" onSubmit={submitForm}> + <div className="form-section-docs without-border"> + <h3>Move Account</h3> + <a + href="https://docs.gotosocial.org/en/latest/user_guide/settings/#move-account" + target="_blank" + className="docslink" + rel="noreferrer" + > + Learn more about moving your account (opens in a new tab) + </a> + </div> + <TextInput + field={form.movedToURI} + label="Move target URI" + placeholder="https://example.org/users/my_new_account" + /> + <TextInput + type="password" + name="password" + field={form.password} + label="Confirm account password" + /> + <MutationButton + disabled={false} + label="Confirm account move" + result={result} + /> + </form> + ); +} diff --git a/web/source/settings/user/profile.js b/web/source/settings/user/profile.tsx index 125f88e70..a03d4d247 100644 --- a/web/source/settings/user/profile.js +++ b/web/source/settings/user/profile.tsx @@ -17,41 +17,41 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ -const React = require("react"); +import React from "react"; -const { +import { useTextInput, useFileInput, useBoolInput, useFieldArrayInput -} = require("../lib/form"); +} from "../lib/form"; -const useFormSubmit = require("../lib/form/submit").default; -const { useWithFormContext, FormContext } = require("../lib/form/context"); +import useFormSubmit from "../lib/form/submit"; +import { useWithFormContext, FormContext } from "../lib/form/context"; -const { +import { TextInput, TextArea, FileInput, Checkbox -} = require("../components/form/inputs"); +} from "../components/form/inputs"; -const FormWithData = require("../lib/form/form-with-data").default; -const FakeProfile = require("../components/fake-profile"); -const MutationButton = require("../components/form/mutation-button"); +import FormWithData from "../lib/form/form-with-data"; +import FakeProfile from "../components/fake-profile"; +import MutationButton from "../components/form/mutation-button"; -const { useInstanceV1Query } = require("../lib/query"); -const { useUpdateCredentialsMutation } = require("../lib/query/user"); -const { useVerifyCredentialsQuery } = require("../lib/query/oauth"); +import { useInstanceV1Query } from "../lib/query"; +import { useUpdateCredentialsMutation } from "../lib/query/user"; +import { useVerifyCredentialsQuery } from "../lib/query/oauth"; -module.exports = function UserProfile() { +export default function UserProfile() { return ( <FormWithData dataQuery={useVerifyCredentialsQuery} DataForm={UserProfileForm} /> ); -}; +} function UserProfileForm({ data: profile }) { /* @@ -91,6 +91,7 @@ function UserProfileForm({ data: profile }) { }; const [submitForm, result] = useFormSubmit(form, useUpdateCredentialsMutation(), { + changedOnly: true, onFinish: () => { form.avatar.reset(); form.header.reset(); @@ -195,7 +196,11 @@ function UserProfileForm({ data: profile }) { rows={8} disabled={!instanceConfig.allowCustomCSS} /> - <MutationButton label="Save profile info" result={result} /> + <MutationButton + disabled={false} + label="Save profile info" + result={result} + /> </form> ); } diff --git a/web/source/settings/user/settings.js b/web/source/settings/user/settings.tsx index 31ea8c39a..645ef5fd4 100644 --- a/web/source/settings/user/settings.js +++ b/web/source/settings/user/settings.tsx @@ -17,35 +17,28 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ -const React = require("react"); +import React from "react"; -const query = require("../lib/query"); +import query from "../lib/query"; -const { - useTextInput, - useBoolInput -} = require("../lib/form"); +import { useTextInput, useBoolInput } from "../lib/form"; -const useFormSubmit = require("../lib/form/submit").default; +import useFormSubmit from "../lib/form/submit"; -const { - Select, - TextInput, - Checkbox -} = require("../components/form/inputs"); +import { Select, TextInput, Checkbox } from "../components/form/inputs"; -const FormWithData = require("../lib/form/form-with-data").default; -const Languages = require("../components/languages"); -const MutationButton = require("../components/form/mutation-button"); +import FormWithData from "../lib/form/form-with-data"; +import Languages from "../components/languages"; +import MutationButton from "../components/form/mutation-button"; -module.exports = function UserSettings() { +export default function UserSettings() { return ( <FormWithData dataQuery={query.useVerifyCredentialsQuery} DataForm={UserSettingsForm} /> ); -}; +} function UserSettingsForm({ data }) { /* form keys @@ -94,11 +87,13 @@ function UserSettingsForm({ data }) { label="Mark my posts as sensitive by default" /> - <MutationButton label="Save settings" result={result} /> + <MutationButton + disabled={false} + label="Save settings" + result={result} + /> </form> - <div> - <PasswordChange /> - </div> + <PasswordChange /> </> ); } @@ -148,7 +143,11 @@ function PasswordChange() { field={verifyNewPassword} label="Confirm new password" /> - <MutationButton label="Change password" result={result} /> + <MutationButton + disabled={false} + label="Change password" + result={result} + /> </form> ); }
\ No newline at end of file |