Add open links in new tab (#2032)

[lemmy-ui.git] / src / shared / components / person / settings.tsx

diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx
index d024aae222b80081fa9941401443cfdc25353173..659c77c2081e9f675fbd05b2b9ae1d72f9a7da7e 100644 (file)
--- a/src/shared/components/person/settings.tsx
+++ b/src/shared/components/person/settings.tsx
@@ -73,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;
@@ -264,7 +265,7 @@ export class Settings extends Component<any, SettingsState> {
     );
   }
 
-  userSettings(isSelected) {
+  userSettings(isSelected: boolean) {
     return (
       <div
         className={classNames("tab-pane show", {
@@ -289,7 +290,7 @@ export class Settings extends Component<any, SettingsState> {
     );
   }
 
-  blockCards(isSelected) {
+  blockCards(isSelected: boolean) {
     return (
       <div
         className={classNames("tab-pane", {
@@ -326,6 +327,7 @@ export class Settings extends Component<any, SettingsState> {
               onInput={linkEvent(this, this.handleNewPasswordChange)}
               showStrength
               label={I18NextService.i18n.t("new_password")}
+              isNew
             />
           </div>
           <div className="mb-3">
@@ -334,6 +336,7 @@ export class Settings extends Component<any, SettingsState> {
               value={this.state.changePasswordForm.new_password_verify}
               onInput={linkEvent(this, this.handleNewPasswordVerifyChange)}
               label={I18NextService.i18n.t("verify_password")}
+              isNew
             />
           </div>
           <div className="mb-3">
@@ -391,7 +394,7 @@ export class Settings extends Component<any, SettingsState> {
                   className="btn btn-sm"
                   onClick={linkEvent(
                     { ctx: this, recipientId: pb.target.id },
-                    this.handleUnblockPerson
+                    this.handleUnblockPerson,
                   )}
                   data-tippy-content={I18NextService.i18n.t("unblock_user")}
                 >
@@ -435,10 +438,10 @@ export class Settings extends Component<any, SettingsState> {
                   className="btn btn-sm"
                   onClick={linkEvent(
                     { ctx: this, communityId: cb.community.id },
-                    this.handleUnblockCommunity
+                    this.handleUnblockCommunity,
                   )}
                   data-tippy-content={I18NextService.i18n.t(
-                    "unblock_community"
+                    "unblock_community",
                   )}
                 >
                   <Icon icon="x" classes="icon-inline" />
@@ -587,6 +590,7 @@ export class Settings extends Component<any, SettingsState> {
             selectedLanguageIds={selectedLangs}
             multiple={true}
             showLanguageWarning={true}
+            showAll={true}
             showSite
             onChange={this.handleDiscussionLanguageChange}
           />
@@ -766,7 +770,7 @@ export class Settings extends Component<any, SettingsState> {
                 }
                 onChange={linkEvent(
                   this,
-                  this.handleSendNotificationsToEmailChange
+                  this.handleSendNotificationsToEmailChange,
                 )}
               />
               <label
@@ -777,6 +781,23 @@ export class Settings extends Component<any, SettingsState> {
               </label>
             </div>
           </div>
+          <div className="input-group mb-3">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="user-open-links-in-new-tab"
+                type="checkbox"
+                checked={this.state.saveUserSettingsForm.open_links_in_new_tab}
+                onChange={linkEvent(this, this.handleOpenInNewTab)}
+              />
+              <label
+                className="form-check-label"
+                htmlFor="user-open-links-in-new-tab"
+              >
+                {I18NextService.i18n.t("open_links_in_new_tab")}
+              </label>
+            </div>
+          </div>
           {this.totpSection()}
           <div className="input-group mb-3">
             <button type="submit" className="btn d-block btn-secondary me-4">
@@ -797,7 +818,7 @@ export class Settings extends Component<any, SettingsState> {
               className="btn d-block btn-danger"
               onClick={linkEvent(
                 this,
-                this.handleDeleteAccountShowConfirmToggle
+                this.handleDeleteAccountShowConfirmToggle,
               )}
             >
               {I18NextService.i18n.t("delete_account")}
@@ -816,7 +837,7 @@ export class Settings extends Component<any, SettingsState> {
                   value={this.state.deleteAccountForm.password}
                   onInput={linkEvent(
                     this,
-                    this.handleDeleteAccountPasswordChange
+                    this.handleDeleteAccountPasswordChange,
                   )}
                   className="my-2"
                 />
@@ -836,7 +857,7 @@ export class Settings extends Component<any, SettingsState> {
                   type="button"
                   onClick={linkEvent(
                     this,
-                    this.handleDeleteAccountShowConfirmToggle
+                    this.handleDeleteAccountShowConfirmToggle,
                   )}
                 >
                   {I18NextService.i18n.t("cancel")}
@@ -886,7 +907,7 @@ export class Settings extends Component<any, SettingsState> {
                   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)}
                 />
@@ -923,7 +944,7 @@ export class Settings extends Component<any, SettingsState> {
 
     if (text.length > 0) {
       searchCommunityOptions.push(
-        ...(await fetchCommunities(text)).map(communityToChoice)
+        ...(await fetchCommunities(text)).map(communityToChoice),
       );
     }
 
@@ -984,7 +1005,7 @@ export class Settings extends Component<any, SettingsState> {
 
   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),
     );
   }
 
@@ -994,13 +1015,13 @@ export class Settings extends Component<any, SettingsState> {
       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),
     );
   }
 
@@ -1008,13 +1029,13 @@ export class Settings extends Component<any, SettingsState> {
     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),
     );
   }
 
@@ -1022,7 +1043,15 @@ export class Settings extends Component<any, SettingsState> {
     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
+      ),
     );
   }
 
@@ -1032,7 +1061,7 @@ export class Settings extends Component<any, SettingsState> {
       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),
     );
   }
 
@@ -1057,7 +1086,7 @@ export class Settings extends Component<any, SettingsState> {
         (s.saveUserSettingsForm.send_notifications_to_email =
           event.target.checked),
         s
-      )
+      ),
     );
   }
 
@@ -1069,17 +1098,19 @@ export class Settings extends Component<any, SettingsState> {
   handleInterfaceLangChange(i: Settings, event: any) {
     const newLang = event.target.value ?? "browser";
     I18NextService.i18n.changeLanguage(
-      newLang === "browser" ? navigator.languages : newLang
+      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),
     );
   }
 
@@ -1089,7 +1120,7 @@ export class Settings extends Component<any, SettingsState> {
 
   handleListingTypeChange(val: ListingType) {
     this.setState(
-      s => ((s.saveUserSettingsForm.default_listing_type = val), s)
+      s => ((s.saveUserSettingsForm.default_listing_type = val), s),
     );
   }
 
@@ -1119,33 +1150,33 @@ export class Settings extends Component<any, SettingsState> {
 
   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));
   }