X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fperson%2Fsettings.tsx;h=659c77c2081e9f675fbd05b2b9ae1d72f9a7da7e;hb=2efe167f6d5f5cb65a2b749ba2fcee0934b247a3;hp=5c3fc345c9433c556a07a9ddd50a80aba47b02f6;hpb=4da34c13706f92069c3333afc3b1481a3f040edd;p=lemmy-ui.git
diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index 5c3fc34..659c77c 100644
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -1,4 +1,20 @@
-import { debounce } from "@utils/helpers";
+import {
+ communityToChoice,
+ fetchCommunities,
+ fetchThemeList,
+ fetchUsers,
+ myAuth,
+ myAuthRequired,
+ personToChoice,
+ setIsoData,
+ setTheme,
+ showLocal,
+ updateCommunityBlock,
+ updatePersonBlock,
+} from "@utils/app";
+import { capitalizeFirstLetter, debounce } from "@utils/helpers";
+import { Choice } from "@utils/types";
+import classNames from "classnames";
import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
import {
@@ -12,36 +28,19 @@ import {
PersonBlockView,
SortType,
} from "lemmy-js-client";
-import { i18n, languages } from "../../i18next";
+import { elementUrl, emDash, relTags } from "../../config";
import { UserService } from "../../services";
import { HttpService, RequestState } from "../../services/HttpService";
-import {
- Choice,
- capitalizeFirstLetter,
- communityToChoice,
- elementUrl,
- emDash,
- fetchCommunities,
- fetchThemeList,
- fetchUsers,
- myAuth,
- myAuthRequired,
- personToChoice,
- relTags,
- setIsoData,
- setTheme,
- setupTippy,
- showLocal,
- toast,
- updateCommunityBlock,
- updatePersonBlock,
-} from "../../utils";
+import { I18NextService, languages } from "../../services/I18NextService";
+import { setupTippy } from "../../tippy";
+import { toast } from "../../toast";
import { HtmlTags } from "../common/html-tags";
import { Icon, Spinner } from "../common/icon";
import { ImageUploadForm } from "../common/image-upload-form";
import { LanguageSelect } from "../common/language-select";
import { ListingTypeSelect } from "../common/listing-type-select";
import { MarkdownTextArea } from "../common/markdown-textarea";
+import PasswordInput from "../common/password-input";
import { SearchableSelect } from "../common/searchable-select";
import { SortSelect } from "../common/sort-select";
import Tabs from "../common/tabs";
@@ -74,6 +73,7 @@ interface SettingsState {
show_new_post_notifs?: boolean;
discussion_languages?: number[];
generate_totp_2fa?: boolean;
+ open_links_in_new_tab?: boolean;
};
changePasswordForm: {
new_password?: string;
@@ -115,7 +115,7 @@ const Filter = ({
className="col-md-4 col-form-label"
htmlFor={`block-${filterType}-filter`}
>
- {i18n.t(`block_${filterType}` as NoOptionI18nKeys)}
+ {I18NextService.i18n.t(`block_${filterType}` as NoOptionI18nKeys)}
{
}
get documentTitle(): string {
- return i18n.t("settings");
+ return I18NextService.i18n.t("settings");
}
render() {
@@ -251,12 +251,12 @@ export class Settings extends Component {
tabs={[
{
key: "settings",
- label: i18n.t("settings"),
+ label: I18NextService.i18n.t("settings"),
getNode: this.userSettings,
},
{
key: "blocks",
- label: i18n.t("blocks"),
+ label: I18NextService.i18n.t("blocks"),
getNode: this.blockCards,
},
]}
@@ -265,34 +265,50 @@ export class Settings extends Component {
);
}
- userSettings() {
+ userSettings(isSelected: boolean) {
return (
-
-
-
-
{this.saveUserSettingsHtmlForm()}
+
+
+
+
+
{this.saveUserSettingsHtmlForm()}
+
-
-
-
-
{this.changePasswordHtmlForm()}
+
+
+
{this.changePasswordHtmlForm()}
+
);
}
- blockCards() {
+ blockCards(isSelected: boolean) {
return (
-
-
-
-
{this.blockUserCard()}
+
+
+
+
+
{this.blockUserCard()}
+
-
-
-
-
{this.blockCommunityCard()}
+
+
+
{this.blockCommunityCard()}
+
@@ -302,61 +318,34 @@ export class Settings extends Component
{
changePasswordHtmlForm() {
return (
<>
- {i18n.t("change_password")}
+ {I18NextService.i18n.t("change_password")}
+
+
@@ -786,60 +804,67 @@ export class Settings extends Component
{
{this.state.saveRes.state === "loading" ? (
) : (
- capitalizeFirstLetter(i18n.t("save"))
+ capitalizeFirstLetter(I18NextService.i18n.t("save"))
)}
-
+
>
);
@@ -862,7 +887,7 @@ export class Settings extends Component
{
onChange={linkEvent(this, this.handleGenerateTotp)}
/>
@@ -872,7 +897,7 @@ export class Settings extends Component
{
<>
@@ -882,12 +907,12 @@ export class Settings extends Component
{
id="user-remove-totp"
type="checkbox"
checked={
- this.state.saveUserSettingsForm.generate_totp_2fa == false
+ this.state.saveUserSettingsForm.generate_totp_2fa === false
}
onChange={linkEvent(this, this.handleRemoveTotp)}
/>
@@ -919,7 +944,7 @@ export class Settings extends Component
{
if (text.length > 0) {
searchCommunityOptions.push(
- ...(await fetchCommunities(text)).map(communityToChoice)
+ ...(await fetchCommunities(text)).map(communityToChoice),
);
}
@@ -980,7 +1005,7 @@ export class Settings extends Component {
handleShowNsfwChange(i: Settings, event: any) {
i.setState(
- s => ((s.saveUserSettingsForm.show_nsfw = event.target.checked), s)
+ s => ((s.saveUserSettingsForm.show_nsfw = event.target.checked), s),
);
}
@@ -990,13 +1015,13 @@ export class Settings extends Component {
mui.local_user_view.local_user.show_avatars = event.target.checked;
}
i.setState(
- s => ((s.saveUserSettingsForm.show_avatars = event.target.checked), s)
+ s => ((s.saveUserSettingsForm.show_avatars = event.target.checked), s),
);
}
handleBotAccount(i: Settings, event: any) {
i.setState(
- s => ((s.saveUserSettingsForm.bot_account = event.target.checked), s)
+ s => ((s.saveUserSettingsForm.bot_account = event.target.checked), s),
);
}
@@ -1004,13 +1029,13 @@ export class Settings extends Component {
i.setState(
s => (
(s.saveUserSettingsForm.show_bot_accounts = event.target.checked), s
- )
+ ),
);
}
handleReadPosts(i: Settings, event: any) {
i.setState(
- s => ((s.saveUserSettingsForm.show_read_posts = event.target.checked), s)
+ s => ((s.saveUserSettingsForm.show_read_posts = event.target.checked), s),
);
}
@@ -1018,7 +1043,15 @@ export class Settings extends Component {
i.setState(
s => (
(s.saveUserSettingsForm.show_new_post_notifs = event.target.checked), s
- )
+ ),
+ );
+ }
+
+ handleOpenInNewTab(i: Settings, event: any) {
+ i.setState(
+ s => (
+ (s.saveUserSettingsForm.open_links_in_new_tab = event.target.checked), s
+ ),
);
}
@@ -1028,7 +1061,7 @@ export class Settings extends Component {
mui.local_user_view.local_user.show_scores = event.target.checked;
}
i.setState(
- s => ((s.saveUserSettingsForm.show_scores = event.target.checked), s)
+ s => ((s.saveUserSettingsForm.show_scores = event.target.checked), s),
);
}
@@ -1036,7 +1069,7 @@ export class Settings extends Component {
// Coerce false to undefined here, so it won't generate it.
const checked: boolean | undefined = event.target.checked || undefined;
if (checked) {
- toast(i18n.t("two_factor_setup_instructions"));
+ toast(I18NextService.i18n.t("two_factor_setup_instructions"));
}
i.setState(s => ((s.saveUserSettingsForm.generate_totp_2fa = checked), s));
}
@@ -1053,7 +1086,7 @@ export class Settings extends Component {
(s.saveUserSettingsForm.send_notifications_to_email =
event.target.checked),
s
- )
+ ),
);
}
@@ -1064,16 +1097,20 @@ export class Settings extends Component {
handleInterfaceLangChange(i: Settings, event: any) {
const newLang = event.target.value ?? "browser";
- i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang);
+ I18NextService.i18n.changeLanguage(
+ newLang === "browser" ? navigator.languages : newLang,
+ );
i.setState(
- s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
+ s => (
+ (s.saveUserSettingsForm.interface_language = event.target.value), s
+ ),
);
}
handleDiscussionLanguageChange(val: number[]) {
this.setState(
- s => ((s.saveUserSettingsForm.discussion_languages = val), s)
+ s => ((s.saveUserSettingsForm.discussion_languages = val), s),
);
}
@@ -1083,7 +1120,7 @@ export class Settings extends Component {
handleListingTypeChange(val: ListingType) {
this.setState(
- s => ((s.saveUserSettingsForm.default_listing_type = val), s)
+ s => ((s.saveUserSettingsForm.default_listing_type = val), s),
);
}
@@ -1113,33 +1150,33 @@ export class Settings extends Component {
handleDisplayNameChange(i: Settings, event: any) {
i.setState(
- s => ((s.saveUserSettingsForm.display_name = event.target.value), s)
+ s => ((s.saveUserSettingsForm.display_name = event.target.value), s),
);
}
handleMatrixUserIdChange(i: Settings, event: any) {
i.setState(
- s => ((s.saveUserSettingsForm.matrix_user_id = event.target.value), s)
+ s => ((s.saveUserSettingsForm.matrix_user_id = event.target.value), s),
);
}
handleNewPasswordChange(i: Settings, event: any) {
const newPass: string | undefined =
- event.target.value == "" ? undefined : event.target.value;
+ event.target.value === "" ? undefined : event.target.value;
i.setState(s => ((s.changePasswordForm.new_password = newPass), s));
}
handleNewPasswordVerifyChange(i: Settings, event: any) {
const newPassVerify: string | undefined =
- event.target.value == "" ? undefined : event.target.value;
+ event.target.value === "" ? undefined : event.target.value;
i.setState(
- s => ((s.changePasswordForm.new_password_verify = newPassVerify), s)
+ s => ((s.changePasswordForm.new_password_verify = newPassVerify), s),
);
}
handleOldPasswordChange(i: Settings, event: any) {
const oldPass: string | undefined =
- event.target.value == "" ? undefined : event.target.value;
+ event.target.value === "" ? undefined : event.target.value;
i.setState(s => ((s.changePasswordForm.old_password = oldPass), s));
}
@@ -1151,10 +1188,13 @@ export class Settings extends Component {
...i.state.saveUserSettingsForm,
auth: myAuthRequired(),
});
+
if (saveRes.state === "success") {
- UserService.Instance.login(saveRes.data);
- location.reload();
- toast(i18n.t("saved"));
+ UserService.Instance.login({
+ res: saveRes.data,
+ showToast: false,
+ });
+ toast(I18NextService.i18n.t("saved"));
window.scrollTo(0, 0);
}
@@ -1175,9 +1215,12 @@ export class Settings extends Component {
auth: myAuthRequired(),
});
if (changePasswordRes.state === "success") {
- UserService.Instance.login(changePasswordRes.data);
+ UserService.Instance.login({
+ res: changePasswordRes.data,
+ showToast: false,
+ });
window.scrollTo(0, 0);
- toast(i18n.t("password_changed"));
+ toast(I18NextService.i18n.t("password_changed"));
}
i.setState({ changePasswordRes });
@@ -1192,7 +1235,8 @@ export class Settings extends Component {
i.setState(s => ((s.deleteAccountForm.password = event.target.value), s));
}
- async handleDeleteAccount(i: Settings) {
+ async handleDeleteAccount(i: Settings, event: Event) {
+ event.preventDefault();
const password = i.state.deleteAccountForm.password;
if (password) {
i.setState({ deleteAccountRes: { state: "loading" } });