X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fperson%2Fsettings.tsx;h=659c77c2081e9f675fbd05b2b9ae1d72f9a7da7e;hb=2efe167f6d5f5cb65a2b749ba2fcee0934b247a3;hp=5c3fc345c9433c556a07a9ddd50a80aba47b02f6;hpb=ced7b887d21bc53b5b3ac18c535a70f74d705f04;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")}

-
- -
- -
+
+
-
- -
- -
+
+
-
- -
- -
+
+
@@ -395,7 +384,7 @@ export class Settings extends Component { blockedUsersList() { return ( <> -
{i18n.t("blocked_users")}
+

{I18NextService.i18n.t("blocked_users")}

    {this.state.personBlocks.map(pb => (
  • @@ -405,9 +394,9 @@ export class Settings extends Component { className="btn btn-sm" onClick={linkEvent( { ctx: this, recipientId: pb.target.id }, - this.handleUnblockPerson + this.handleUnblockPerson, )} - data-tippy-content={i18n.t("unblock_user")} + data-tippy-content={I18NextService.i18n.t("unblock_user")} > @@ -439,7 +428,7 @@ export class Settings extends Component { blockedCommunitiesList() { return ( <> -
    {i18n.t("blocked_communities")}
    +

    {I18NextService.i18n.t("blocked_communities")}

      {this.state.communityBlocks.map(cb => (
    • @@ -449,9 +438,11 @@ export class Settings extends Component { className="btn btn-sm" onClick={linkEvent( { ctx: this, communityId: cb.community.id }, - this.handleUnblockCommunity + this.handleUnblockCommunity, + )} + data-tippy-content={I18NextService.i18n.t( + "unblock_community", )} - data-tippy-content={i18n.t("unblock_community")} > @@ -468,18 +459,18 @@ export class Settings extends Component { return ( <> -
      {i18n.t("settings")}
      +

      {I18NextService.i18n.t("settings")}

      {
      {
      {
      @@ -538,11 +529,11 @@ export class Settings extends Component {
      {
      {
      { className="form-select d-inline-block w-auto" > + + - {this.state.themeList.map(theme => (
      - +
      {
      { onChange={linkEvent(this, this.handleShowNsfwChange)} />
      @@ -674,7 +675,7 @@ export class Settings extends Component { onChange={linkEvent(this, this.handleShowScoresChange)} />
      @@ -688,7 +689,7 @@ export class Settings extends Component { onChange={linkEvent(this, this.handleShowAvatarsChange)} />
      @@ -702,7 +703,7 @@ export class Settings extends Component { onChange={linkEvent(this, this.handleBotAccount)} />
      @@ -719,7 +720,7 @@ export class Settings extends Component { className="form-check-label" htmlFor="user-show-bot-accounts" > - {i18n.t("show_bot_accounts")} + {I18NextService.i18n.t("show_bot_accounts")}
@@ -736,7 +737,7 @@ export class Settings extends Component { className="form-check-label" htmlFor="user-show-read-posts" > - {i18n.t("show_read_posts")} + {I18NextService.i18n.t("show_read_posts")}
@@ -753,7 +754,7 @@ export class Settings extends Component { className="form-check-label" htmlFor="user-show-new-post-notifs" > - {i18n.t("show_new_post_notifs")} + {I18NextService.i18n.t("show_new_post_notifs")}
@@ -769,14 +770,31 @@ export class Settings extends Component { } onChange={linkEvent( this, - this.handleSendNotificationsToEmailChange + this.handleSendNotificationsToEmailChange, )} /> +
+
+
+
+ +
@@ -786,60 +804,67 @@ export class Settings extends Component { {this.state.saveRes.state === "loading" ? ( ) : ( - capitalizeFirstLetter(i18n.t("save")) + capitalizeFirstLetter(I18NextService.i18n.t("save")) )}
-
+ {this.state.deleteAccountShowConfirm && ( <> -
- {i18n.t("delete_account_confirm")} -
- + {I18NextService.i18n.t("delete_account_confirm")} + + )} -
+ ); @@ -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" } });