feat: add an option to display/copy blocked link on block page #29

AXeL-dev · May 13, 2022 · 764a0c9 · 764a0c9
1 parent 7f1df1b
commit 764a0c9
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 23 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -441,5 +441,8 @@
   },
   "never": {
     "message": "Never"
+  },
+  "displayBlockedLink": {
+    "message": "Display blocked link"
   }
 }
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
@@ -441,5 +441,8 @@
   },
   "never": {
     "message": "Jamais"
+  },
+  "displayBlockedLink": {
+    "message": "Afficher le lien bloqué"
   }
 }
diff --git a/public/_locales/nl/messages.json b/public/_locales/nl/messages.json
@@ -441,5 +441,8 @@
   },
   "never": {
     "message": "Nooit"
+  },
+  "displayBlockedLink": {
+    "message": "Geblokkeerde link weergeven"
   }
 }
diff --git a/public/icons/copy.svg b/public/icons/copy.svg
diff --git a/src/components/Background/index.jsx b/src/components/Background/index.jsx
@@ -14,7 +14,7 @@ import {
   defaultBlacklist,
   defaultWhitelist,
   UnblockOptions,
-  defaultUnblock,
+  defaultUnblockSettings,
   isAccessible,
   defaultMode,
   defaultAction,
@@ -74,7 +74,7 @@ export class Background extends Component {
     this.mode = defaultMode;
     this.action = defaultAction;
     this.redirectUrl = '';
-    this.unblock = defaultUnblock;
+    this.unblock = defaultUnblockSettings;
     this.schedule = defaultSchedule;
     this.timer = defaultTimerSettings;
     this.enableLogs = defaultLogsSettings.isEnabled;
@@ -380,11 +380,13 @@ export class Background extends Component {
           let timeout = 0;
           switch (option) {
             case UnblockOptions.unblockForWhile:
-              timeout = time * 60000; // convert minutes to ms
+              // convert minutes to ms
+              timeout = time * 60000;
               break;
             case UnblockOptions.unblockOnce:
             default:
-              timeout = this.unblock.unblockOnceTimeout * 1000; // convert seconds to ms
+              // convert seconds to ms
+              timeout = this.unblock.unblockOnceTimeout * 1000;
               break;
           }
           this.unblockTab(sender.tab.id, url, timeout);

diff --git a/src/components/Blocked/index.jsx b/src/components/Blocked/index.jsx
@@ -1,12 +1,19 @@
 import React, { Component, Fragment } from 'react';
-import { Pane, Dialog, RadioGroup, Button, UnlockIcon } from 'evergreen-ui';
+import { Pane, Dialog, RadioGroup, Button, UnlockIcon, toaster } from 'evergreen-ui';
 import { translate } from 'helpers/i18n';
 import { storage, sendMessage } from 'helpers/webext';
 import { debug, isDevEnv } from 'helpers/debug';
 import { isUrl, getValidUrl } from 'helpers/url';
-import { UnblockOptions, isPageReloaded, defaultUnblock } from 'helpers/block';
+import {
+  UnblockOptions,
+  isPageReloaded,
+  defaultUnblockSettings,
+  defaultBlockSettings,
+} from 'helpers/block';
 import { NumberInput, PasswordPrompt } from 'components';
 import queryString from 'query-string';
+import copy from 'copy-to-clipboard';
+import { ReactComponent as CopyIcon } from '../../../public/icons/copy.svg';
 import './styles.scss';
 
 export class Blocked extends Component {
@@ -17,12 +24,16 @@ export class Blocked extends Component {
       this.url = decodeURIComponent(this.url);
       this.url = getValidUrl(this.url);
     }
+    if (isDevEnv && !this.url) {
+      this.url = 'https://www.example.com';
+    }
     debug.log('url', this.url);
     const defaultUnblockTime = 10; // min
     this.state = {
       message: props.message || translate('defaultBlockingMessage'),
       isBlank: props.isBlank === undefined ? !isDevEnv : props.isBlank,
       hasUnblockButton: props.hasUnblockButton || isDevEnv, // == isDevEnv ? true : false
+      displayBlockedLink: props.displayBlockedLink || isDevEnv,
       unblockDialog: {
         isShown: false,
         options: this.getUnblockOptions(defaultUnblockTime),
@@ -77,10 +88,12 @@ export class Blocked extends Component {
     storage
       .get({
         message: this.state.message,
-        displayBlankPage: false,
+        displayBlankPage: defaultBlockSettings.displayBlankPage,
+        displayBlockedLink:
+          this.state.displayBlockedLink || defaultBlockSettings.displayBlockedLink,
         unblock: {
-          isEnabled: defaultUnblock.isEnabled,
-          requirePassword: defaultUnblock.requirePassword,
+          isEnabled: defaultUnblockSettings.isEnabled,
+          requirePassword: defaultUnblockSettings.requirePassword,
         },
         password: {
           isEnabled: false,
@@ -91,7 +104,8 @@ export class Blocked extends Component {
           this.setState({
             message: items.message.length ? items.message : this.state.message,
             isBlank: items.displayBlankPage,
-            hasUnblockButton: items.unblock.isEnabled,
+            displayBlockedLink: items.displayBlockedLink,
+            hasUnblockButton: isDevEnv || items.unblock.isEnabled,
             unblockDialog: {
               ...this.state.unblockDialog,
               requirePassword:
@@ -135,6 +149,14 @@ export class Blocked extends Component {
     }
   };
 
+  copyBlockedLink = () => {
+    if (copy(this.url)) {
+      toaster.success(translate('copiedToClipboard'), {
+        id: 'settings-toaster',
+      });
+    }
+  };
+
   render() {
     return (
       <Fragment>
@@ -146,6 +168,18 @@ export class Blocked extends Component {
                   <span className="distract-cursor distract-select distract-overlay-top-text">
                     {this.state.message}
                   </span>
+                  {this.state.displayBlockedLink && (
+                    <span className="distract-blocked-link">
+                      <input type="text" value={this.url} readOnly />
+                      <button
+                        className="copy"
+                        title={translate('copy')}
+                        onClick={this.copyBlockedLink}
+                      >
+                        <CopyIcon />
+                      </button>
+                    </span>
+                  )}
                   <div className="distract-cursor distract-select distract-overlay-img"></div>
                   {this.state.hasUnblockButton && (
                     <button className="unblock" onClick={this.openUnblockDialog}>

diff --git a/src/components/Blocked/styles.scss b/src/components/Blocked/styles.scss
@@ -54,23 +54,63 @@ $textColor: white;
   width: 100%;
 }
 .distract-overlay-top-text {
+  display: block;
+  margin: 0 auto;
   font-family: OpenSansFont !important;
-  vertical-align: middle;
   color: $textColor;
   font-size: 32px;
   line-height: 32px;
   cursor: default;
   user-select: none;
   -webkit-user-select: none;
-  position: absolute;
+}
+.distract-blocked-link {
+  position: relative;
+  display: flex;
+  align-items: center;
   margin: 0 auto;
-  left: 0;
-  right: 0;
-  top: 10px;
+  width: 40%;
+  margin-top: 50px;
+  > input {
+    font-family: OpenSansFont !important;
+    font-size: 14px;
+    color: $textColor;
+    background-color: transparent;
+    border: 2px solid #db9d61;
+    border-radius: 4px;
+    padding: 10px 48px 10px 20px;
+    width: 100%;
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+  > button.copy {
+    position: absolute;
+    // top: 10px;
+    right: 10px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    display: flex;
+    cursor: pointer;
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+    svg {
+      path {
+        fill: #d0d0d0;
+      }
+      width: 20px;
+      height: 20px;
+    }
+  }
 }
 .distract-overlay-img {
   margin: 0 auto;
-  margin-top: 100px;
+  margin-top: 50px;
   width: 128px;
   height: 128px;
   background-image: url(../../../public/icons/magnet-256.png);
@@ -126,6 +166,9 @@ button.unblock {
   .distract-overlay-top-text {
     font-size: 24px;
   }
+  .distract-blocked-link {
+    width: 80%;
+  }
   .distract-overlay-img {
     width: 100px;
     height: 100px;

diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx
@@ -29,7 +29,8 @@ import {
   defaultMode,
   defaultBlacklist,
   defaultWhitelist,
-  defaultUnblock,
+  defaultBlockSettings,
+  defaultUnblockSettings,
   defaultIsEnabled,
 } from 'helpers/block';
 import { ScheduleType, defaultSchedule, newScheduleTimeRange } from 'helpers/schedule';
@@ -105,14 +106,11 @@ export class Settings extends Component {
         isEnabled: defaultIsEnabled,
         mode: '', // don't use defaultMode to avoid annoying flickering when the mode is different from the default value
         action: defaultAction,
-        blockTab: {
-          message: '',
-          displayBlankPage: false,
-        },
+        blockTab: defaultBlockSettings,
         redirectToUrl: {
           url: '',
         },
-        unblock: defaultUnblock,
+        unblock: defaultUnblockSettings,
         schedule: defaultSchedule,
         blacklist: isDevEnv ? defaultBlacklist : [],
         whitelist: isDevEnv ? defaultWhitelist : [],
@@ -150,6 +148,7 @@ export class Settings extends Component {
         action: this.state.options.action,
         message: this.state.options.blockTab.message,
         displayBlankPage: this.state.options.blockTab.displayBlankPage,
+        displayBlockedLink: this.state.options.blockTab.displayBlockedLink,
         redirectUrl: this.state.options.redirectToUrl.url,
         enableLogs: this.state.options.logs.isEnabled,
         logsLength: this.state.options.logs.maxLength,
@@ -181,6 +180,7 @@ export class Settings extends Component {
             blockTab: {
               message: items.message,
               displayBlankPage: items.displayBlankPage,
+              displayBlockedLink: items.displayBlockedLink,
             },
             redirectToUrl: {
               url: items.redirectUrl,
@@ -341,6 +341,7 @@ export class Settings extends Component {
         action: this.state.options.action,
         message: this.state.options.blockTab.message,
         displayBlankPage: this.state.options.blockTab.displayBlankPage,
+        displayBlockedLink: this.state.options.blockTab.displayBlockedLink,
         redirectUrl: this.state.options.redirectToUrl.url,
         enableLogs: this.state.options.logs.isEnabled,
         logsLength: this.state.options.logs.maxLength,
@@ -506,6 +507,17 @@ export class Settings extends Component {
             disabled={!this.state.options.isEnabled}
             margin={0}
           />
+          <Checkbox
+            label={translate('displayBlockedLink')}
+            checked={this.state.options.blockTab.displayBlockedLink}
+            onChange={(event) =>
+              this.setOptions('blockTab.displayBlockedLink', event.target.checked)
+            }
+            disabled={
+              !this.state.options.isEnabled ||
+              this.state.options.blockTab.displayBlankPage
+            }
+          />
         </Fragment>
       )}
       {this.state.options.action === Action.redirectToUrl && (

diff --git a/src/helpers/block.js b/src/helpers/block.js
@@ -51,7 +51,13 @@ export const defaultWhitelist = [
   '*.wikipedia.org',
 ];
 
-export const defaultUnblock = {
+export const defaultBlockSettings = {
+  message: '',
+  displayBlankPage: false,
+  displayBlockedLink: false,
+};
+
+export const defaultUnblockSettings = {
   isEnabled: false,
   requirePassword: false,
   unblockOnceTimeout: 10, // seconds