From ac97be20be897e0bebfed490db8f4213f54370f1 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <gh@d0h.co>
Date: Tue, 31 May 2022 18:48:24 +0100
Subject: [PATCH] :goal_net: Catch error, if clipboard not enabled (#681)

---
 .../InteractiveEditor/ExportConfigMenu.vue    | 11 +++++++---
 src/mixins/ItemMixin.js                       | 20 +++++++++++++++----
 src/utils/ErrorHandler.js                     | 11 ++++------
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
index 3b1bdf10..f1892029 100644
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@@ -38,7 +38,7 @@ import { modalNames } from '@/utils/defaults';
 import AccessError from '@/components/Configuration/AccessError';
 import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
 import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
-import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
+import { ErrorHandler, InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 
 export default {
   name: 'ExportConfigMenu',
@@ -80,8 +80,13 @@ export default {
     },
     copyConfigToClipboard() {
       const config = this.convertJsonToYaml();
-      navigator.clipboard.writeText(config);
-      this.$toasted.show(this.$t('config.data-copied-msg'));
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(config);
+        this.$toasted.show(this.$t('config.data-copied-msg'));
+      } else {
+        ErrorHandler('Clipboard access requires HTTPS. See: https://bit.ly/3N5WuAA');
+        this.$toasted.show('Unable to copy, see log', { className: 'toast-error' });
+      }
       InfoHandler('Config copied to clipboard', InfoKeys.EDITOR);
     },
     modalClosed() {
diff --git a/src/mixins/ItemMixin.js b/src/mixins/ItemMixin.js
index 7b082dda..47148c4c 100644
--- a/src/mixins/ItemMixin.js
+++ b/src/mixins/ItemMixin.js
@@ -2,6 +2,7 @@
 import axios from 'axios';
 import router from '@/router';
 import longPress from '@/directives/LongPress';
+import ErrorHandler from '@/utils/ErrorHandler';
 import {
   openingMethod as defaultOpeningMethod,
   serviceEndpoints,
@@ -149,8 +150,7 @@ export default {
         router.push({ name: 'workspace', query: { url } });
       } else if (this.accumulatedTarget === 'clipboard') {
         e.preventDefault();
-        navigator.clipboard.writeText(url);
-        this.$toasted.show(this.$t('context-menus.item.copied-toast'));
+        this.copyToClipboard(url);
       }
       // Emit event to clear search field, etc
       this.$emit('itemClicked');
@@ -178,8 +178,7 @@ export default {
           router.push({ name: 'workspace', query: { url } });
           break;
         case 'clipboard':
-          navigator.clipboard.writeText(url);
-          this.$toasted.show(this.$t('context-menus.item.copied-toast'));
+          this.copyToClipboard(url);
           break;
         default: window.open(url, '_blank');
       }
@@ -199,6 +198,19 @@ export default {
     closeContextMenu() {
       this.contextMenuOpen = false;
     },
+    /* Copies a string to the users clipboard / shows error if not possible  */
+    copyToClipboard(content) {
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(content);
+        this.$toasted.show(
+          this.$t('context-menus.item.copied-toast'),
+          { className: 'toast-success' },
+        );
+      } else {
+        ErrorHandler('Clipboard access requires HTTPS. See: https://bit.ly/3N5WuAA');
+        this.$toasted.show('Unable to copy, see log', { className: 'toast-error' });
+      }
+    },
     /* Used for smart-sort when sorting items by most used apps */
     incrementMostUsedCount(itemId) {
       const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
diff --git a/src/utils/ErrorHandler.js b/src/utils/ErrorHandler.js
index c62dc725..aeaeb4e7 100644
--- a/src/utils/ErrorHandler.js
+++ b/src/utils/ErrorHandler.js
@@ -22,13 +22,10 @@ const appendToErrorLog = (msg) => {
  * If error reporting is enabled, will also log the message to Sentry
  * If you wish to use your own error logging service, put code for it here
  */
-const ErrorHandler = function handler(msg, errorStack) {
-  // Print to console
-  warningMsg(msg, errorStack);
-  // Save to local storage
-  appendToErrorLog(msg);
-  // Report to bug tracker (if enabled)
-  Sentry.captureMessage(`[USER-WARN] ${msg}`);
+export const ErrorHandler = function handler(msg, errorStack) {
+  warningMsg(msg, errorStack); // Print to console
+  appendToErrorLog(msg); // Save to local storage
+  Sentry.captureMessage(`[USER-WARN] ${msg}`); // Report to bug tracker (if enabled)
 };
 
 /* Similar to error handler, but for recording general info */