Link preview warning on setting toggle

_locales/en/messages.json

@@ -1376,6 +1376,13 @@
       "Link previews supported for Imgur, Instagram, Pinterest, Reddit, and YouTube.",
     "description": "Description shown for the Link Preview option "
   },
+  "linkPreviewsConfirmTitle": {
+    "message": "Warning"
+  },
+  "linkPreviewsConfirmMessage": {
+    "message": "You will not have full metadata protection when sending or receiving link previews."
+  },
+  
   "mediaPermissionsTitle": {
     "message": "Microphone and Camera"
   },

js/background.js

@@ -334,8 +334,9 @@
       setTypingIndicatorsSetting: value =>
         storage.put('typing-indicators-setting', value),
 
-      getLinkPreviewSetting: () => storage.get('linkPreviews', false),
-      setLinkPreviewSetting: value => storage.put('linkPreviews', value),
+      getLinkPreviewSetting: () => storage.get('link-preview-setting', false),
+      setLinkPreviewSetting: value =>
+        storage.put('link-preview-setting', value),
 
       getNotificationSetting: () =>
         storage.get('notification-setting', 'message'),
@@ -628,7 +629,7 @@
 
       // Disable link previews as default per Kee
       storage.onready(async () => {
-        storage.put('linkPreviews', false);
+        storage.put('link-preview-setting', false);
       });
 
       // listeners
@@ -1039,7 +1040,7 @@
 
     window.toggleLinkPreview = () => {
       const newValue = !window.getSettingValue('link-preview-setting');
-      window.Events.setLinkPreviewSetting(newValue);
+      window.setSettingValue('link-preview-setting', newValue);
     };
 
     window.toggleMediaPermissions = () => {
@@ -1651,7 +1652,7 @@
     }
 
     if (linkPreviews === true || linkPreviews === false) {
-      storage.put('linkPreviews', linkPreviews);
+      storage.put('link-preview-setting', linkPreviews);
     }
 
     ev.confirm();

js/models/messages.js

@@ -813,7 +813,7 @@
     },
     getPropsForPreview() {
       // Don't generate link previews if user has turned them off
-      if (!storage.get('linkPreviews', false)) {
+      if (!storage.get('link-preview-setting', false)) {
         return null;
       }
 

js/views/conversation_view.js

@@ -1934,7 +1934,7 @@
 
     maybeGrabLinkPreview() {
       // Don't generate link previews if user has turned them off
-      if (!storage.get('linkPreviews', false)) {
+      if (!storage.get('link-preview-setting', false)) {
         return;
       }
       // Do nothing if we're offline
@@ -2215,7 +2215,7 @@
 
     getLinkPreview() {
       // Don't generate link previews if user has turned them off
-      if (!storage.get('linkPreviews', false)) {
+      if (!storage.get('link-preview-setting', false)) {
         return [];
       }
 

ts/components/session/SessionToggle.tsx

@@ -4,6 +4,16 @@ import classNames from 'classnames';
 interface Props {
   active: boolean;
   onClick: any;
+  // If you require the toggle to be confirmed, use
+  // a confirmation dialog. The parameters needed in the
+  // setting item in SessionSettings.tsx are like such:
+  // confirmationDialogParams: {
+  //  shouldShowConfirm: false,
+  //  title: window.i18n('linkPreviewsConfirmTitle'),
+  //  message: window.i18n('linkPreviewsConfirmMessage'),
+  //  okTheme: 'danger',
+  // }
+  confirmationDialogParams?: any | undefined;
 }
 
 interface State {
@@ -41,14 +51,33 @@ export class SessionToggle extends React.PureComponent<Props, State> {
     );
   }
 
-  private clickHandler(e: any) {
-    this.setState({
-      active: !this.state.active,
-    });
+  private clickHandler(event: any) {
+    const stateManager = (e: any) => {
+      this.setState({
+        active: !this.state.active,
+      });
 
-    if (this.props.onClick) {
-      e.stopPropagation();
-      this.props.onClick();
+      if (this.props.onClick) {
+        e.stopPropagation();
+        this.props.onClick();
+      }
+    };
+
+    if (
+      this.props.confirmationDialogParams &&
+      this.props.confirmationDialogParams.shouldShowConfirm()
+    ) {
+      // If item needs a confirmation dialog to turn ON, render it
+      window.confirmationDialog({
+        resolve: () => {
+          stateManager(event);
+        },
+        ...this.props.confirmationDialogParams,
+      });
+
+      return;
     }
+
+    stateManager(event);
   }
 }

ts/components/session/settings/SessionSettingListItem.tsx

@@ -17,6 +17,7 @@ interface Props {
   onClick?: any;
   onSliderChange?: any;
   content: any;
+  confirmationDialogParams?: any;
 }
 
 interface State {
@@ -65,6 +66,7 @@ export class SessionSettingListItem extends React.Component<Props, State> {
               <SessionToggle
                 active={Boolean(value)}
                 onClick={this.handleClick}
+                confirmationDialogParams={this.props.confirmationDialogParams}
               />
             </div>
           )}

ts/components/session/settings/SessionSettings.tsx

@@ -47,6 +47,7 @@ interface LocalSettingType {
   type: SessionSettingType | undefined;
   setFn: any;
   onClick: any;
+  confirmationDialogParams: any | undefined;
 }
 
 export class SettingsView extends React.Component<SettingsViewProps, State> {
@@ -142,6 +143,9 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
                       onClick={onClickFn}
                       onSliderChange={sliderFn}
                       content={content}
+                      confirmationDialogParams={
+                        setting.confirmationDialogParams
+                      }
                     />
                   )}
               </div>
@@ -268,11 +272,13 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
   public updateSetting(item: any) {
     // If there's a custom afterClick function,
     // execute it instead of automatically updating settings
+
     if (item.setFn) {
       item.setFn();
     } else {
       if (item.type === SessionSettingType.Toggle) {
         // If no custom afterClick function given, alter values in storage here
+
         // Switch to opposite state
         const newValue = !window.getSettingValue(item.id);
         window.setSettingValue(item.id, newValue);
@@ -324,6 +330,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         setFn: window.toggleTheme,
         content: undefined,
         onClick: undefined,
+        confirmationDialogParams: undefined,
       },
       {
         id: 'hide-menu-bar',
@@ -336,6 +343,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         content: { defaultValue: true },
         comparisonValue: undefined,
         onClick: undefined,
+        confirmationDialogParams: undefined,
       },
       {
         id: 'spell-check',
@@ -348,6 +356,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         content: undefined,
         comparisonValue: undefined,
         onClick: undefined,
+        confirmationDialogParams: undefined,
       },
       {
         id: 'link-preview-setting',
@@ -360,6 +369,13 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         content: undefined,
         comparisonValue: undefined,
         onClick: undefined,
+        confirmationDialogParams: {
+          shouldShowConfirm: () =>
+            !window.getSettingValue('link-preview-setting'),
+          title: window.i18n('linkPreviewsConfirmTitle'),
+          message: window.i18n('linkPreviewsConfirmMessage'),
+          okTheme: 'danger',
+        },
       },
       {
         id: 'notification-setting',
@@ -398,6 +414,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
             ],
           },
         },
+        confirmationDialogParams: undefined,
       },
       {
         id: 'media-permissions',
@@ -410,6 +427,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         content: undefined,
         comparisonValue: undefined,
         onClick: undefined,
+        confirmationDialogParams: undefined,
       },
       {
         id: 'message-ttl',
@@ -424,6 +442,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         content: {
           defaultValue: 24,
         },
+        confirmationDialogParams: undefined,
       },
       {
         id: 'read-receipt-setting',
@@ -436,6 +455,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         comparisonValue: undefined,
         onClick: undefined,
         content: {},
+        confirmationDialogParams: undefined,
       },
       {
         id: 'typing-indicators-setting',
@@ -448,6 +468,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         comparisonValue: undefined,
         onClick: undefined,
         content: {},
+        confirmationDialogParams: undefined,
       },
       {
         id: 'set-password',
@@ -467,6 +488,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
             action: 'set',
             onSuccess: this.onPasswordUpdated,
           }),
+        confirmationDialogParams: undefined,
       },
       {
         id: 'change-password',
@@ -486,6 +508,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
             action: 'change',
             onSuccess: this.onPasswordUpdated,
           }),
+        confirmationDialogParams: undefined,
       },
       {
         id: 'remove-password',
@@ -505,6 +528,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
             action: 'remove',
             onSuccess: this.onPasswordUpdated,
           }),
+        confirmationDialogParams: undefined,
       },
     ];
   }
@@ -536,6 +560,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
             },
             hidden: undefined,
             onClick: undefined,
+            confirmationDialogParams: undefined,
           };
         } else {
           return {
@@ -549,6 +574,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
             setFn: undefined,
             hidden: undefined,
             onClick: undefined,
+            confirmationDialogParams: undefined,
           };
         }
       });
@@ -565,6 +591,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
           onClick: undefined,
           setFn: undefined,
           hidden: undefined,
+          confirmationDialogParams: undefined,
         },
       ];
     }