Extend DNS blocking in GUI

3 files changed, 65 insertions, 16 deletions

diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index 3ab38cf3c3..9c976062c1 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -49,7 +49,9 @@ export default function CustomDnsSettings() {
       dns.state === 'custom' ||
       (!dns.defaultOptions.blockAds &&
         !dns.defaultOptions.blockTrackers &&
-        !dns.defaultOptions.blockMalware),
+        !dns.defaultOptions.blockMalware &&
+        !dns.defaultOptions.blockAdultContent &&
+        !dns.defaultOptions.blockGambling),
     [dns],
   );
 
@@ -281,32 +283,19 @@ export default function CustomDnsSettings() {
 }
 
 function DisabledMessage() {
-  const blockAdsFeatureName = messages.pgettext('preferences-view', 'Block ads');
-  const blockTrackersFeatureName = messages.pgettext('preferences-view', 'Block trackers');
-  const blockMalwareFeatureName = messages.pgettext('preferences-view', 'Block malware');
   const preferencesPageName = messages.pgettext('preferences-nav', 'Preferences');
 
   // TRANSLATORS: This is displayed when either or both of the block ads/trackers settings are
   // TRANSLATORS: turned on which makes the custom DNS setting disabled. The text enclosed in "**"
   // TRANSLATORS: will appear bold.
   // TRANSLATORS: Available placeholders:
-  // TRANSLATORS: %(blockAdsFeatureName)s - The name displayed next to the "Block ads" toggle.
-  // TRANSLATORS: %(blockTrackersFeatureName)s - The name displayed next to the "Block trackers" toggle.
-  // TRANSLATORS: %(blockMalwareFeatureName)s - The name displayed next to the "Block malware" toggle.
   // TRANSLATORS: %(preferencesPageName)s - The page title showed on top in the preferences page.
   const customDnsDisabledMessage = messages.pgettext(
     'preferences-view',
-    'Disable **%(blockAdsFeatureName)s**, **%(blockTrackersFeatureName)s** and **%(blockMalwareFeatureName)s** (under %(preferencesPageName)s) to activate this setting.',
+    'Disable all content blockers (under %(preferencesPageName)s) to activate this setting.',
   );
 
-  return formatMarkdown(
-    sprintf(customDnsDisabledMessage, {
-      blockAdsFeatureName,
-      blockTrackersFeatureName,
-      blockMalwareFeatureName,
-      preferencesPageName,
-    }),
-  );
+  return formatMarkdown(sprintf(customDnsDisabledMessage, { preferencesPageName }));
 }
 
 interface ICellListItemProps {
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index 9213c7c7e9..0d6fea3809 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -181,6 +181,44 @@ export default class Preferences extends React.Component<IProps, IState> {
                         />
                       </AriaInput>
                     </Cell.Container>
+                  </AriaInputGroup>
+                  <StyledSeparator />
+                  <AriaInputGroup>
+                    <Cell.Container disabled={this.props.dns.state === 'custom'}>
+                      <AriaLabel>
+                        <Cell.InputLabel>
+                          {messages.pgettext('preferences-view', 'Block adult content')}
+                        </Cell.InputLabel>
+                      </AriaLabel>
+                      <AriaInput>
+                        <Cell.Switch
+                          isOn={
+                            this.props.dns.state === 'default' &&
+                            this.props.dns.defaultOptions.blockAdultContent
+                          }
+                          onChange={this.setBlockAdultContent}
+                        />
+                      </AriaInput>
+                    </Cell.Container>
+                  </AriaInputGroup>
+                  <StyledSeparator />
+                  <AriaInputGroup>
+                    <Cell.Container disabled={this.props.dns.state === 'custom'}>
+                      <AriaLabel>
+                        <Cell.InputLabel>
+                          {messages.pgettext('preferences-view', 'Block gambling')}
+                        </Cell.InputLabel>
+                      </AriaLabel>
+                      <AriaInput>
+                        <Cell.Switch
+                          isOn={
+                            this.props.dns.state === 'default' &&
+                            this.props.dns.defaultOptions.blockGambling
+                          }
+                          onChange={this.setBlockGambling}
+                        />
+                      </AriaInput>
+                    </Cell.Container>
                     {this.props.dns.state === 'custom' && <CustomDnsEnabledFooter />}
                   </AriaInputGroup>
 
@@ -404,6 +442,26 @@ export default class Preferences extends React.Component<IProps, IState> {
     });
   };
 
+  private setBlockAdultContent = async (enabled: boolean) => {
+    await this.props.setDnsOptions({
+      ...this.props.dns,
+      defaultOptions: {
+        ...this.props.dns.defaultOptions,
+        blockAdultContent: enabled,
+      },
+    });
+  };
+
+  private setBlockGambling = async (enabled: boolean) => {
+    await this.props.setDnsOptions({
+      ...this.props.dns,
+      defaultOptions: {
+        ...this.props.dns.defaultOptions,
+        blockGambling: enabled,
+      },
+    });
+  };
+
   private showKillSwitchInfo = () => {
     this.setState({ showKillSwitchInfo: true });
   };
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 3d665ba86b..1c759e1a52 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -138,6 +138,8 @@ const initialState: ISettingsReduxState = {
       blockAds: false,
       blockTrackers: false,
       blockMalware: false,
+      blockAdultContent: false,
+      blockGambling: false,
     },
     customOptions: {
       addresses: [],