Use ClipboardButton everywhere

dashboard/src/components/ApiTokens.vue

@@ -6,8 +6,8 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
-import { Button, Menu, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
-import { copyToClipboard, prettyLongDate } from '@cloudron/pankow/utils';
+import { Button, Menu, ClipboardButton, Dialog, InputDialog, FormGroup, Radiobutton, TableView, TextInput, InputGroup } from '@cloudron/pankow';
+import { prettyLongDate } from '@cloudron/pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
 import Section from './Section.vue';
 import TokensModel from '../models/TokensModel.js';
@@ -89,11 +89,6 @@ async function onSubmitAddApiToken(){
   await refreshApiTokens();
 }
 
-function onCopyToClipboard(apiToken) {
-  copyToClipboard(apiToken);
-  window.pankow.notify({ type: 'success', text: 'API Token copied!' });
-}
-
 function onReset() {
   setTimeout(() => {
     addedToken.value = '';
@@ -167,7 +162,7 @@ onMounted(async () => {
             <p>{{ $t('profile.createApiToken.description') }}</p>
             <InputGroup>
               <TextInput v-model="addedToken" readonly style="flex-grow: 1;"/>
-              <Button tool @click="onCopyToClipboard(addedToken)" icon="fa fa-clipboard" />
+              <ClipboardButton :value="addedToken" />
             </InputGroup>
             <p>{{ $t('profile.createApiToken.copyNow') }}</p>
           </div>

dashboard/src/components/AppPasswords.vue

@@ -6,8 +6,8 @@ const t = i18n.t;
 
 import moment from 'moment-timezone';
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Menu, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
-import { prettyLongDate, copyToClipboard } from '@cloudron/pankow/utils';
+import { Button, Menu, ClipboardButton, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
+import { prettyLongDate } from '@cloudron/pankow/utils';
 import Section from './Section.vue';
 import AppPasswordsModel from '../models/AppPasswordsModel.js';
 import AppsModel from '../models/AppsModel.js';
@@ -106,11 +106,6 @@ async function onSubmit() {
   await refresh();
 }
 
-function onCopyToClipboard(password) {
-  copyToClipboard(password);
-  window.pankow.notify({ type: 'success', text: 'Password copied!' });
-}
-
 async function onRemove(appPassword) {
   const yes = await inputDialog.value.confirm({
     message: t('profile.removeAppPassword.title', { name: appPassword.name }),
@@ -193,7 +188,7 @@ onMounted(async () => {
             <p>{{ $t('profile.createAppPassword.description') }}</p>
             <InputGroup>
               <TextInput v-model="addedPassword" readonly style="flex-grow: 1;"/>
-              <Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
+              <ClipboardButton :value="addedPassword" />
             </InputGroup>
             <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
           </div>

dashboard/src/components/ImpersonateDialog.vue

@@ -1,8 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, TextInput, FormGroup, Button, InputGroup } from '@cloudron/pankow';
-import { copyToClipboard } from '@cloudron/pankow/utils';
+import { Dialog, TextInput, ClipboardButton, FormGroup, Button, InputGroup } from '@cloudron/pankow';
 import UsersModel from '../models/UsersModel.js';
 
 const usersModel = UsersModel.create();
@@ -27,11 +26,6 @@ function onGeneratePassword() {
   password.value = tmp;
 }
 
-function onCopyPassword() {
-  copyToClipboard(password.value);
-  window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
-}
-
 async function onSubmit() {
   busy.value = true;
 
@@ -76,7 +70,7 @@ defineExpose({
           <label for="passwordInput">{{ $t('users.setGhostDialog.password') }}</label>
           <InputGroup>
             <TextInput id="passwordInput" v-model="password" style="flex-grow: 1;"/>
-            <Button tool v-if="success" @click="onCopyPassword()" icon="fa fa-clipboard" />
+            <ClipboardButton v-if="success" :value="password" />
             <Button tool v-else @click="onGeneratePassword()" v-tooltip="$t('users.setGhostDialog.generatePassword')" icon="fa fa-key" />
           </InputGroup>
         </FormGroup>

dashboard/src/components/InvitationDialog.vue

@@ -5,8 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, TextInput, EmailInput, FormGroup, Button, InputGroup, ProgressBar } from '@cloudron/pankow';
-import { copyToClipboard } from '@cloudron/pankow/utils';
+import { Dialog, TextInput, ClipboardButton, EmailInput, FormGroup, Button, InputGroup, ProgressBar } from '@cloudron/pankow';
 import UsersModel from '../models/UsersModel.js';
 
 const emit = defineEmits([ 'refreshRequired' ]);
@@ -21,11 +20,6 @@ const email = ref('');
 const success = ref(false);
 const busy = ref(false);
 
-function onCopyToClipboard() {
-  copyToClipboard(inviteLink.value);
-  window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
-}
-
 async function onSendInvite() {
   const [error] = await usersModel.sendInviteEmail(user.value.id, email.value);
   if (error) return console.error(error);
@@ -77,7 +71,7 @@ defineExpose({
           <label>{{ $t('users.invitationDialog.descriptionLink') }}</label>
           <InputGroup>
             <TextInput style="flex-grow: 1;" v-model="inviteLink" readonly/>
-            <Button tool @click="onCopyToClipboard()" icon="fa fa-clipboard"/>
+            <ClipboardButton :value="inviteLink" />
           </InputGroup>
         </FormGroup>
 

dashboard/src/components/LdapServer.vue

@@ -1,8 +1,7 @@
 <script setup>
 
 import { ref, onMounted, computed } from 'vue';
-import { Button, FormGroup, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
-import { copyToClipboard } from '@cloudron/pankow/utils';
+import { Button, FormGroup, ClipboardButton, Checkbox, PasswordInput, TextInput, InputGroup } from '@cloudron/pankow';
 import Section from './Section.vue';
 import DomainsModel from '../models/DomainsModel.js';
 import DashboardModel from '../models/DashboardModel.js';
@@ -29,11 +28,6 @@ const isValid = computed(() => {
   return true;
 });
 
-function onCopyToClipboard(value) {
-  copyToClipboard(value);
-  window.pankow.notify({ type: 'success', text: 'LDAP URL copied!' });
-}
-
 async function onSubmit() {
   if (!isValid.value) return;
 
@@ -90,7 +84,7 @@ onMounted(async () => {
           <label for="ldapUrlInput">{{ $t('users.exposedLdap.secret.url') }}</label>
           <InputGroup>
             <TextInput id="ldapUrlInput" v-model="ldapUrl" readonly style="flex-grow: 1;"/>
-            <Button tool @click="onCopyToClipboard(ldapUrl)" icon="fa fa-clipboard" />
+            <ClipboardButton :value="ldapUrl" />
           </InputGroup>
           <div class="warning-label" v-show="adminDomain.provider === 'cloudflare'">{{ $t('users.exposedLdap.cloudflarePortWarning') }}</div>
         </FormGroup>

dashboard/src/components/PasswordResetDialog.vue

@@ -5,8 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, TextInput, FormGroup, Button, InputGroup } from '@cloudron/pankow';
-import { copyToClipboard } from '@cloudron/pankow/utils';
+import { Dialog, TextInput, ClipboardButton, FormGroup, Button, InputGroup } from '@cloudron/pankow';
 import UsersModel from '../models/UsersModel.js';
 
 const usersModel = UsersModel.create();
@@ -34,11 +33,6 @@ async function onSend() {
   dialog.value.close();
 }
 
-function onCopyLink() {
-  copyToClipboard(resetLink.value);
-  window.pankow.notify({ type: 'success', text: 'Copied to clipboard!' });
-}
-
 defineExpose({
   async open(u) {
     user.value = u;
@@ -64,7 +58,7 @@ defineExpose({
       <label class="control-label">{{ $t('users.passwordResetDialog.descriptionLink') }}</label>
       <InputGroup>
         <TextInput id="passwordResetLinkInput" style="flex-grow: 1;" v-model="resetLink" readonly/>
-        <Button tool @click="onCopyLink()" icon="fa fa-clipboard" />
+        <ClipboardButton :value="resetLink" />
       </InputGroup>
     </FormGroup>