Improvements to "Copy to Clipboard" wrapper

css/legacy/includes/_styles.scss

@@ -1099,6 +1099,7 @@
    .copy_to_clipboard_wrapper {
       display: flex;
       align-items: center;
+      font-style: normal;
 
       input[type=text] {
          padding-right: 18px !important;
@@ -1134,6 +1135,20 @@
       }
    }
 
+   .input-group.copy_to_clipboard_wrapper {
+      &:after {
+         content: none;
+      }
+
+      & i.copy_to_clipboard_wrapper:after {
+         left: 0;
+      }
+
+      & i.copy_to_clipboard_wrapper:before {
+         content: none;
+      }
+   }
+
    /* ################--------------- Log history filters ---------------#################### */
 
    tr.log_history_filter_row {

js/clipboard.js

@@ -35,28 +35,56 @@ $(function() {
     // set a function to track drag hover event
     $(document).on("click", ".copy_to_clipboard_wrapper", function(event) {
 
+        var succeed;
         // find the good element
         var target = $(event.target);
-        if (target.attr('class') == 'copy_to_clipboard_wrapper') {
-            target = target.find('*');
+
+        // click on other button
+        if (target.hasClass('input-group-text') && !target.hasClass('copy_to_clipboard_wrapper')) {
+            return false;
         }
 
-        // copy text
-        target.select();
-        var succeed;
-        try {
-            succeed = document.execCommand("copy");
-        } catch (e) {
-            succeed = false;
+        // click on 'copy button'
+        if (target.hasClass('input-group-text') || target.is('input')) {
+            target = target.parent('.copy_to_clipboard_wrapper').find('input');
+
+            // copy text
+            succeed = copyTextToClipboard(target.val());
+        } else {
+            if (target.attr('class') == 'copy_to_clipboard_wrapper') {
+                target = target.find('*');
+            }
+
+            // copy text
+            target.select();
+            try {
+                succeed = document.execCommand("copy");
+            } catch (e) {
+                succeed = false;
+            }
+            target.blur();
+        }
+
+        // get copy icon
+        var icon;
+        if (target.attr('class') == 'copy_to_clipboard_wrapper') {
+            icon = target;
+        } else {
+            icon = target.parent('.copy_to_clipboard_wrapper').find('i.copy_to_clipboard_wrapper');
+            if (!icon.length) {
+                icon = target.parent('.copy_to_clipboard_wrapper');
+            }
         }
-        target.blur();
 
         // indicate success
         if (succeed) {
             $('.copy_to_clipboard_wrapper.copied').removeClass('copied');
-            target.parent('.copy_to_clipboard_wrapper').addClass('copied');
+            icon.addClass('copied');
+            setTimeout(function(){
+                icon.removeClass('copied');
+            }, 1000);
         } else {
-            target.parent('.copy_to_clipboard_wrapper').addClass('copyfail');
+            icon.addClass('copyfail');
         }
     });
 });
@@ -78,8 +106,15 @@ function copyTextToClipboard (text) {
 
     // Select and copy text to clipboard
     textarea.select();
-    document.execCommand('copy');
+    var succeed;
+    try {
+        succeed = document.execCommand('copy');
+    } catch (e) {
+        succeed = false;
+    }
 
     // Remove textarea
     document.body.removeChild(textarea);
+
+    return succeed;
 }

src/Dashboard/Grid.php

@@ -800,18 +800,20 @@ public function displayEmbedForm()
         echo "<label>" . __("Embed in another application") . "</label><br>";
         echo "<fieldset class='embed_block'>";
         echo __("Direct link");
-        echo "<div class='copy_to_clipboard_wrapper'>";
+        echo "<div class='input-group flex-grow-1 copy_to_clipboard_wrapper'>";
         echo Html::input('direct_link', [
             'value' => $embed_url,
         ]);
+        echo "<i class='input-group-text fa-lg pointer copy_to_clipboard_wrapper' role='button'></i>";
         echo "</div><br>";
 
         $iframe = "<iframe src='$embed_url' frameborder='0' width='800' height='600' allowtransparency></iframe>";
         echo __("Iframe");
-        echo "<div class='copy_to_clipboard_wrapper'>";
+        echo "<div class='input-group flex-grow-1 copy_to_clipboard_wrapper'>";
         echo Html::input('iframe_code', [
             'value' => $iframe,
         ]);
+        echo "<i class='input-group-text fa-lg pointer copy_to_clipboard_wrapper' role='button'></i>";
         echo "</div>";
         echo "</fieldset><br>";
 

src/User.php

@@ -3044,11 +3044,12 @@ public function showForm($ID, array $options = [])
                 echo __("API token");
                 echo "</td><td colspan='2'>";
                 if (!empty($this->fields["api_token"])) {
-                     echo "<div class='copy_to_clipboard_wrapper'>";
+                     echo "<div class='input-group flex-grow-1 copy_to_clipboard_wrapper'>";
                      echo Html::input('_api_token', [
                          'value'    => $this->fields["api_token"],
                          'style'    => 'width:90%'
                      ]);
+                     echo "<i class='input-group-text fa-lg pointer copy_to_clipboard_wrapper' role='button'></i>";
                      echo "</div>";
                      echo "(" . sprintf(
                          __('generated on %s'),