🥅 Catch error, if clipboard not enabled (#681)

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);
+      if (navigator.clipboard) {
-      this.$toasted.show(this.$t('config.data-copied-msg'));
+        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() {

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.copyToClipboard(url);
-        this.$toasted.show(this.$t('context-menus.item.copied-toast'));
       }
       // 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.copyToClipboard(url);
-          this.$toasted.show(this.$t('context-menus.item.copied-toast'));
           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) || '{}');

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) {
+export const ErrorHandler = function handler(msg, errorStack) {
-  // Print to console
+  warningMsg(msg, errorStack); // Print to console
-  warningMsg(msg, errorStack);
+  appendToErrorLog(msg); // Save to local storage
-  // Save to local storage
+  Sentry.captureMessage(`[USER-WARN] ${msg}`); // Report to bug tracker (if enabled)
-  appendToErrorLog(msg);
-  // Report to bug tracker (if enabled)
-  Sentry.captureMessage(`[USER-WARN] ${msg}`);
 };
 
 /* Similar to error handler, but for recording general info */