Use ClipboardButton everywhere

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>