mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-11 23:07:30 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[feature] Move + alias account via settings panel (#2519)

Browse source 
* [feature] Move + alias account via settings panel

* lint

* type a bit more diligently
This commit is contained in:
tobi 2024-01-16 18:28:56 +01:00 • committed by GitHub
commit 486585890d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 476 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

206
web/source/settings/user/migration.tsx Normal file
View file

@ -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>
);
}

37
web/source/settings/user/profile.js → web/source/settings/user/profile.tsx
View file

@ -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>
);
}

43
web/source/settings/user/settings.js → web/source/settings/user/settings.tsx
View file

@ -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>
);
}