diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 03eeb4c39..b3b3656f6 100644 --- a/_locales/en/messages.json +++ b/_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" }, diff --git a/js/background.js b/js/background.js index 6d70d4c99..d971960ec 100644 --- a/js/background.js +++ b/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(); diff --git a/js/models/messages.js b/js/models/messages.js index 80a8052c8..bf505518e 100644 --- a/js/models/messages.js +++ b/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; } diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 3caf3b520..92c344eac 100644 --- a/js/views/conversation_view.js +++ b/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 []; } diff --git a/ts/components/session/SessionToggle.tsx b/ts/components/session/SessionToggle.tsx index 9dec4c510..b9df7c319 100644 --- a/ts/components/session/SessionToggle.tsx +++ b/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 { ); } - 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); } } diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx index 5ac7a627e..0713a6068 100644 --- a/ts/components/session/settings/SessionSettingListItem.tsx +++ b/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 { )} diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 2f6e4c4d7..1f06fd2ae 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/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 { @@ -142,6 +143,9 @@ export class SettingsView extends React.Component { onClick={onClickFn} onSliderChange={sliderFn} content={content} + confirmationDialogParams={ + setting.confirmationDialogParams + } /> )} @@ -268,11 +272,13 @@ export class SettingsView extends React.Component { 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 { setFn: window.toggleTheme, content: undefined, onClick: undefined, + confirmationDialogParams: undefined, }, { id: 'hide-menu-bar', @@ -336,6 +343,7 @@ export class SettingsView extends React.Component { content: { defaultValue: true }, comparisonValue: undefined, onClick: undefined, + confirmationDialogParams: undefined, }, { id: 'spell-check', @@ -348,6 +356,7 @@ export class SettingsView extends React.Component { content: undefined, comparisonValue: undefined, onClick: undefined, + confirmationDialogParams: undefined, }, { id: 'link-preview-setting', @@ -360,6 +369,13 @@ export class SettingsView extends React.Component { 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 { ], }, }, + confirmationDialogParams: undefined, }, { id: 'media-permissions', @@ -410,6 +427,7 @@ export class SettingsView extends React.Component { content: undefined, comparisonValue: undefined, onClick: undefined, + confirmationDialogParams: undefined, }, { id: 'message-ttl', @@ -424,6 +442,7 @@ export class SettingsView extends React.Component { content: { defaultValue: 24, }, + confirmationDialogParams: undefined, }, { id: 'read-receipt-setting', @@ -436,6 +455,7 @@ export class SettingsView extends React.Component { comparisonValue: undefined, onClick: undefined, content: {}, + confirmationDialogParams: undefined, }, { id: 'typing-indicators-setting', @@ -448,6 +468,7 @@ export class SettingsView extends React.Component { comparisonValue: undefined, onClick: undefined, content: {}, + confirmationDialogParams: undefined, }, { id: 'set-password', @@ -467,6 +488,7 @@ export class SettingsView extends React.Component { action: 'set', onSuccess: this.onPasswordUpdated, }), + confirmationDialogParams: undefined, }, { id: 'change-password', @@ -486,6 +508,7 @@ export class SettingsView extends React.Component { action: 'change', onSuccess: this.onPasswordUpdated, }), + confirmationDialogParams: undefined, }, { id: 'remove-password', @@ -505,6 +528,7 @@ export class SettingsView extends React.Component { action: 'remove', onSuccess: this.onPasswordUpdated, }), + confirmationDialogParams: undefined, }, ]; } @@ -536,6 +560,7 @@ export class SettingsView extends React.Component { }, hidden: undefined, onClick: undefined, + confirmationDialogParams: undefined, }; } else { return { @@ -549,6 +574,7 @@ export class SettingsView extends React.Component { setFn: undefined, hidden: undefined, onClick: undefined, + confirmationDialogParams: undefined, }; } }); @@ -565,6 +591,7 @@ export class SettingsView extends React.Component { onClick: undefined, setFn: undefined, hidden: undefined, + confirmationDialogParams: undefined, }, ]; }