fix: show copy to clipboard failure (#2886)

* fix for AppButtonCopy

* add some logging

* fix if statement

* refactor, use .then

* check for copied

* Fix recipe share link

* refactor AppButtonCopy

* update tooltip text

* update use-copy

* logging

* fix is supported check

* more fixes for use-copy.ts

---------

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -143,7 +143,7 @@ export default defineComponent({
     }
 
     const { share, isSupported: shareIsSupported } = useShare();
-    const { copy } = useClipboard();
+    const { copy, copied, isSupported } = useClipboard();
 
     function getRecipeText() {
       return i18n.t("recipe.share-recipe-message", [props.name]);
@@ -154,8 +154,18 @@ export default defineComponent({
     }
 
     async function copyTokenLink(token: string) {
-      await copy(getTokenLink(token));
-      alert.success(i18n.t("recipe-share.recipe-link-copied-message") as string);
+      if (isSupported.value) {
+        await copy(getTokenLink(token));
+        if (copied.value) {
+          alert.success(i18n.t("recipe-share.recipe-link-copied-message") as string);
+        }
+        else {
+          alert.error(i18n.t("general.clipboard-copy-failure") as string);
+        }
+      }
+      else {
+        alert.error(i18n.t("general.clipboard-not-supported") as string);
+      }
     }
 
     async function shareRecipe(token: string) {

frontend/components/global/AppButtonCopy.vue

@@ -2,7 +2,7 @@
   <v-tooltip
     ref="copyToolTip"
     v-model="show"
-    color="success lighten-1"
+    :color="copied? 'success lighten-1' : 'red lighten-1'"
     top
     :open-on-hover="false"
     :open-on-click="true"
@@ -29,12 +29,14 @@
       <v-icon left dark>
         {{ $globals.icons.clipboardCheck }}
       </v-icon>
-      <slot> {{ $t("general.copied_message") }} </slot>
+      <slot v-if="!isSupported"> {{ $t("general.your-browser-does-not-support-clipboard") }} </slot>
+      <slot v-else> {{ copied ? $t("general.copied_message") : $t("general.clipboard-copy-failure") }} </slot>
     </span>
   </v-tooltip>
 </template>
 
 <script lang="ts">
+import { useClipboard } from "@vueuse/core"
 import { defineComponent, ref } from "@nuxtjs/composition-api";
 import { VTooltip } from "~/types/vuetify";
 
@@ -58,6 +60,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { copy, copied, isSupported } = useClipboard()
     const show = ref(false);
     const copyToolTip = ref<VTooltip | null>(null);
 
@@ -65,13 +68,21 @@ export default defineComponent({
       copyToolTip.value?.deactivate();
     }
 
-    function textToClipboard() {
+    async function textToClipboard() {
+      if (isSupported.value) {
+        await copy(props.copyText);
+        if (copied.value) {
+          console.log(`Copied\n${props.copyText}`)
+        }
+        else {
+          console.warn("Copy failed: ", copied.value);
+        }
+      }
+      else {
+        console.warn("Clipboard is currently not supported by your browser. Ensure you're on a secure (https) site.");
+      }
+
       show.value = true;
-      const copyText = props.copyText;
-      navigator.clipboard.writeText(copyText).then(
-        () => console.log(`Copied\n${copyText}`),
-        () => console.log(`Copied Failed\n${copyText}`)
-      );
       setTimeout(() => {
         toggleBlur();
       }, 500);
@@ -81,6 +92,8 @@ export default defineComponent({
       show,
       copyToolTip,
       textToClipboard,
+      copied,
+      isSupported,
     };
   },
 });

frontend/composables/use-copy.ts

@@ -7,23 +7,30 @@ export function useCopy() {
   const { i18n } = useContext();
 
   function copyText(text: string) {
-    if (!isSupported) {
+    if (!isSupported.value) {
       alert.error(i18n.tc("general.clipboard-not-supported"));
       return;
     }
-    copy(text);
-    alert.success(i18n.tc("general.copied-to-clipboard"));
+    copy(text).then(() => {
+      // Verify copy success as no error is thrown on failure.
+      if (copied.value) {
+        alert.success(i18n.tc("general.copied-to-clipboard"));
+      }
+      else {
+        alert.error(i18n.tc("general.clipboard-copy-failure"));
+      }
+    });
   }
 
   return { copyText, copied };
 }
 
 export function useCopyList() {
-  const { copy, isSupported } = useClipboard();
+  const { copy, isSupported, copied } = useClipboard();
   const { i18n } = useContext();
 
   function checkClipboard() {
-    if (!isSupported) {
+    if (!isSupported.value) {
       alert.error(i18n.tc("general.your-browser-does-not-support-clipboard"));
       return false;
     }
@@ -54,7 +61,13 @@ export function useCopyList() {
 
   function copyText(text: string, len: number) {
     copy(text).then(() => {
-      alert.success(i18n.tc("general.copied-items-to-clipboard", len));
+      // Verify copy success as no error is thrown on failure.
+      if (copied.value) {
+        alert.success(i18n.tc("general.copied-items-to-clipboard", len));
+      }
+      else {
+        alert.error(i18n.tc("general.clipboard-copy-failure"));
+      }
     });
   }
 

frontend/lang/messages/en-US.json

@@ -198,7 +198,8 @@
     "refresh": "Refresh",
     "upload-file": "Upload File",
     "created-on-date": "Created on: {0}",
-    "unsaved-changes": "You have unsaved changes. Do you want to save before leaving? Okay to save, Cancel to discard changes."
+    "unsaved-changes": "You have unsaved changes. Do you want to save before leaving? Okay to save, Cancel to discard changes.",
+    "clipboard-copy-failure": "Failed to copy to the clipboard."
   },
   "group": {
     "are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",