fix copy to clipboard bug

package-lock.json

@@ -5,7 +5,6 @@
     "packages": {
         "": {
             "devDependencies": {
-                "@ryangjchandler/alpine-clipboard": "^2.2.0",
                 "@tailwindcss/forms": "^0.5.2",
                 "@tailwindcss/typography": "^0.5.9",
                 "alpinejs": "^3.4.2",
@@ -476,12 +475,6 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
-        "node_modules/@ryangjchandler/alpine-clipboard": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/@ryangjchandler/alpine-clipboard/-/alpine-clipboard-2.2.0.tgz",
-            "integrity": "sha512-2kKHd2mA6K7RuYlC+1fikIUPVJeJLQlY2w9rNGrOgVfzXUZRotjTP+EjxouDizTEvqNRkVTJnmmNle32Uhb4zw==",
-            "dev": true
-        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
@@ -2320,12 +2313,6 @@
             "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
             "dev": true
         },
-        "@ryangjchandler/alpine-clipboard": {
-            "version": "2.2.0",
-            "resolved": "https://registry.npmjs.org/@ryangjchandler/alpine-clipboard/-/alpine-clipboard-2.2.0.tgz",
-            "integrity": "sha512-2kKHd2mA6K7RuYlC+1fikIUPVJeJLQlY2w9rNGrOgVfzXUZRotjTP+EjxouDizTEvqNRkVTJnmmNle32Uhb4zw==",
-            "dev": true
-        },
         "@tailwindcss/forms": {
             "version": "0.5.3",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",

package.json

@@ -7,7 +7,6 @@
         "lint:fix": "prettier --write ./resources/views"
     },
     "devDependencies": {
-        "@ryangjchandler/alpine-clipboard": "^2.2.0",
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/typography": "^0.5.9",
         "alpinejs": "^3.4.2",

public/build/manifest.json

@@ -12,7 +12,7 @@
     "css": [
       "assets/app-a1ae07b3.css"
     ],
-    "file": "assets/app-44a1ce19.js",
+    "file": "assets/app-f7ac9558.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   }

resources/js/app.js

@@ -1,15 +1,5 @@
-import tippy from 'tippy.js';
+import Alpine from 'alpinejs';
-
-Alpine.directive('clipboard', (el) => {
-    let text = el.textContent
-
-    el.addEventListener('click', () => {
-        navigator.clipboard.writeText(text)
-    })
-})
-
 window.Alpine = Alpine;
-
 Alpine.start();
 
 import htmx from "htmx.org";
@@ -55,8 +45,8 @@ window.toastr.options = {
     "preventDuplicates": true,
 }
 
+import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
-import Alpine from 'alpinejs';
 document.body.addEventListener('htmx:afterSettle', (event) => {
     tippy('[data-tooltip]', {
         content(reference) {
@@ -69,3 +59,26 @@ tippy('[data-tooltip]', {
         return reference.getAttribute('data-tooltip');
     },
 });
+
+window.copyToClipboard = async function (text) {
+    try {
+        await navigator.clipboard.writeText(text);
+    } catch (err) {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+
+        textArea.style.position = "absolute";
+        textArea.style.left = "-999999px";
+
+        document.body.prepend(textArea);
+        textArea.select();
+
+        try {
+            document.execCommand('copy');
+        } catch (error) {
+            //
+        } finally {
+            textArea.remove();
+        }
+    }
+}

resources/js/bootstrap.js

@@ -1,9 +1,3 @@
-/**
- * We'll load the axios HTTP library which allows us to easily issue requests
- * to our Laravel back-end. This library automatically handles sending the
- * CSRF token as a header based on the value of the "XSRF" token cookie.
- */
-
 import axios from 'axios';
 
 window.axios = axios;

resources/views/databases/partials/database-user-password-modal.blade.php

@@ -20,17 +20,16 @@ class="mt-1 w-full"
                 {{ __("Close") }}
             </x-secondary-button>
 
-            <x-primary-button
+            <x-primary-button x-data="{ copied: false }" class="ml-2">
-                x-data="{ copied: false }"
-                x-clipboard.raw="{{ session()->has('password') ? session()->get('password') : '' }}"
-                class="ml-2"
-            >
                 <div x-show="copied" class="flex items-center">
                     {{ __("Copied") }}
                 </div>
                 <div
                     x-show="!copied"
                     x-on:click="
+                        window.copyToClipboard(
+                            '{{ session()->has("password") ? session()->get("password") : "" }}',
+                        )
                         copied = true
                         setTimeout(() => {
                             copied = false

resources/views/layouts/server.blade.php

@@ -7,10 +7,11 @@
         <h2 class="text-lg font-semibold">{{ $server->name }}</h2>
         <div class="flex flex-col items-end">
             @include("servers.partials.server-status")
-            <x-input-label class="mt-1 cursor-pointer" x-data="{ copied: false }" x-clipboard.raw="{{ $server->ip }}">
+            <x-input-label class="mt-1 cursor-pointer" x-data="{ copied: false }">
                 <div
                     class="flex items-center text-sm"
                     x-on:click="
+                        window.copyToClipboard('{{ $server->ip }}')
                         copied = true
                         setTimeout(() => {
                             copied = false
@@ -18,20 +19,9 @@ class="flex items-center text-sm"
                     "
                 >
                     <div x-show="copied" class="mr-1 flex items-center">
-                        <svg
+                        <x-heroicon-o-clipboard-document-check
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
                             class="h-4 w-4 font-bold text-primary-600 dark:text-white"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75"
                         />
-                        </svg>
                     </div>
                     {{ $server->ip }}
                 </div>

resources/views/layouts/site.blade.php

@@ -19,14 +19,11 @@
                     <x-heroicon-o-globe-alt class="mr-1 h-5 w-5 text-gray-500" />
                     @include("sites.partials.site-status")
                 </div>
-                <x-input-label
+                <x-input-label class="mt-1 cursor-pointer" x-data="{ copied: false }">
-                    class="mt-1 cursor-pointer"
-                    x-data="{ copied: false }"
-                    x-clipboard.raw="{{ $site->domain }}"
-                >
                     <div
                         class="flex items-center text-sm"
                         x-on:click="
+                            window.copyToClipboard('{{ $site->domain }}')
                             copied = true
                             setTimeout(() => {
                                 copied = false
@@ -34,7 +31,9 @@ class="flex items-center text-sm"
                         "
                     >
                         <div x-show="copied" class="mr-1 flex items-center">
-                            <x-heroicon-o-check class="h-4 w-4 font-bold text-primary-600 dark:text-white" />
+                            <x-heroicon-o-clipboard-document-check
+                                class="h-4 w-4 font-bold text-primary-600 dark:text-white"
+                            />
                         </div>
                         {{ $site->domain }}
                     </div>
@@ -46,14 +45,11 @@ class="flex items-center text-sm"
                     <x-heroicon-o-server class="mr-1 h-5 w-5 text-gray-500" />
                     @include("servers.partials.server-status", ["server" => $site->server])
                 </div>
-                <x-input-label
+                <x-input-label class="mt-1 cursor-pointer" x-data="{ copied: false }">
-                    class="mt-1 cursor-pointer"
-                    x-data="{ copied: false }"
-                    x-clipboard.raw="{{ $site->server->ip }}"
-                >
                     <div
                         class="flex items-center text-sm"
                         x-on:click="
+                            window.copyToClipboard('{{ $site->server->ip }}')
                             copied = true
                             setTimeout(() => {
                                 copied = false
@@ -61,7 +57,9 @@ class="flex items-center text-sm"
                         "
                     >
                         <div x-show="copied" class="mr-1 flex items-center">
-                            <x-heroicon-o-check class="h-4 w-4 font-bold text-primary-600 dark:text-white" />
+                            <x-heroicon-o-clipboard-document-check
+                                class="h-4 w-4 font-bold text-primary-600 dark:text-white"
+                            />
                         </div>
                         {{ $site->server->ip }}
                     </div>

resources/views/server-settings/index.blade.php

@@ -14,17 +14,14 @@
                     <x-input-label for="pk">
                         {{ __("Public Key") }}
                     </x-input-label>
-                    <x-input-label
+                    <x-input-label class="cursor-pointer" x-data="{ copied: false }">
-                        class="cursor-pointer"
-                        x-data="{ copied: false }"
-                        x-clipboard.raw="{{ $server->public_key }}"
-                    >
                         <div x-show="copied" class="flex items-center">
                             {{ __("Copied") }}
                         </div>
                         <div
                             x-show="!copied"
                             x-on:click="
+                                window.copyToClipboard('{{ $server->public_key }}')
                                 copied = true
                                 setTimeout(() => {
                                     copied = false

resources/views/servers/partials/public-key.blade.php

@@ -18,17 +18,16 @@ class="rounded-sm border-l-4 border-yellow-500 bg-yellow-100 px-4 py-3 text-yell
         <x-input-label for="pk">
             {{ __("Run this command on your server as root user") }}
         </x-input-label>
-        <x-input-label
+        <x-input-label class="cursor-pointer" x-data="{ copied: false }">
-            class="cursor-pointer"
-            x-data="{ copied: false }"
-            x-clipboard.raw="mkdir -p /root/.ssh && touch /root/.ssh/authorized_keys && echo '{{ $key }}' >> /root/.ssh/authorized_keys"
-        >
             <div x-show="copied" class="flex items-center">
                 {{ __("Copied") }}
             </div>
             <div
                 x-show="!copied"
                 x-on:click="
+                    window.copyToClipboard(
+                        'mkdir -p /root/.ssh && touch /root/.ssh/authorized_keys && echo \'{{ $key }}\' >> /root/.ssh/authorized_keys',
+                    )
                     copied = true
                     setTimeout(() => {
                         copied = false