Use ClipboardButton everywhere

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>