feat: copy token to clipboard (monicahq/chandler#315)

monicahq · Nov 27, 2022 · 987a8e7 · 987a8e7
1 parent 21351b3
commit 987a8e7
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "v-calendar": "^3.0.0-alpha.8",
     "vite": "^3.0.2",
     "vue": "^3.2.36",
+    "vue-clipboard3": "^2.0.0",
     "vuedraggable": "^4.1.0",
     "ziggy-js": "^1.4.6"
   },

diff --git a/resources/js/Components/Jetstream/ConfirmationModal.vue b/resources/js/Components/Jetstream/ConfirmationModal.vue
@@ -25,13 +25,13 @@ const close = () => {
 
 <template>
   <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
-    <div class="bg-white">
+    <div class="bg-white dark:bg-gray-900">
       <div>
         <!-- title -->
         <div class="flex items-center px-4 pt-5 pb-4">
           <div
-            class="mx-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-6 sm:w-6">
-            <svg class="h-4 w-4 text-red-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+            class="mx-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-6 sm:w-6">
+            <svg class="h-4 w-4 text-red-600 dark:text-red-400" stroke="currentColor" fill="none" viewBox="0 0 24 24">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -54,7 +54,7 @@ const close = () => {
       </div>
     </div>
 
-    <div class="flex flex-row justify-end bg-gray-100 px-6 py-4 text-right">
+    <div class="flex flex-row justify-end bg-gray-100 px-6 py-4 text-right dark:bg-gray-900">
       <slot name="footer" />
     </div>
   </Modal>

diff --git a/resources/js/Pages/API/Partials/ApiTokenManager.vue b/resources/js/Pages/API/Partials/ApiTokenManager.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 import { useForm } from '@inertiajs/inertia-vue3';
+import useClipboard from 'vue-clipboard3';
 import JetActionMessage from '@/Components/Jetstream/ActionMessage.vue';
 import JetActionSection from '@/Components/Jetstream/ActionSection.vue';
 import JetButton from '@/Components/Button.vue';
@@ -69,6 +70,16 @@ const deleteApiToken = () => {
     onSuccess: () => (apiTokenBeingDeleted.value = null),
   });
 };
+
+const copied = ref(false);
+const { toClipboard } = useClipboard();
+const copyToClipboard = (token) => {
+  toClipboard(token).then(() => {
+    copied.value = true;
+    setTimeout(() => (copied.value = false), 2000);
+    flash($t('Value copied into your clipboard'));
+  });
+};
 </script>
 
 <template>
@@ -173,10 +184,23 @@ const deleteApiToken = () => {
           {{ $t('Please copy your new API token. For your security, it won’t be shown again.') }}
         </div>
 
-        <div
-          v-if="$page.props.jetstream.flash.token"
-          class="mt-4 rounded bg-gray-100 px-4 py-2 font-mono text-sm text-gray-500">
-          {{ $page.props.jetstream.flash.token }}
+        <div v-if="$page.props.jetstream.flash.token" class="mt-4 flex">
+          <div
+            class="rounded bg-gray-100 px-4 py-2 font-mono text-sm text-gray-500"
+            @click.prevent="copyToClipboard($page.props.jetstream.flash.token)">
+            {{ $page.props.jetstream.flash.token }}
+          </div>
+
+          <JetButton
+            class="ml-3"
+            :title="$t('Copy value into the clipboard')"
+            @click.prevent="copyToClipboard($page.props.jetstream.flash.token)">
+            {{ $t('Copy') }}
+          </JetButton>
+
+          <JetActionMessage :on="copied" class="px-2 py-2">
+            {{ $t('Copied.') }}
+          </JetActionMessage>
         </div>
       </template>
 

diff --git a/yarn.lock b/yarn.lock
@@ -661,6 +661,15 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
+clipboard@^2.0.6:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -794,6 +803,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 detective@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
@@ -1321,6 +1335,13 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -2107,6 +2128,11 @@ scroll-into-view-if-needed@^2.2.25:
   dependencies:
     compute-scroll-into-view "^1.0.17"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -2315,7 +2341,7 @@ through@^2.3.8:
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
-tiny-emitter@^2.1.0:
+tiny-emitter@^2.0.0, tiny-emitter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
@@ -2420,6 +2446,13 @@ vite@^3.0.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-clipboard3@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz#79b026c765c0f6a5cde18a477c2dbfc7d3b9f178"
+  integrity sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==
+  dependencies:
+    clipboard "^2.0.6"
+
 vue-eslint-parser@^9.0.1:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz#0e121d1bb29bd10763c83e3cc583ee03434a9dd5"