Use ClipboardButton everywhere

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>