Move vue views from Card to Sections

dashboard/src/components/AppPasswords.vue

@@ -36,11 +36,11 @@
       </div>
     </Dialog>
 
-    <h2 class="header header-with-button">
-      {{ $t('profile.appPasswords.title') }}
-      <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
-    </h2>
-    <Card>
+    <Section :title="$t('profile.appPasswords.title')">
+      <template #header-buttons>
+        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
+      </template>
+
       <p>{{ $t('profile.appPasswords.description') }}</p>
       <table class="table table-hover">
         <thead>
@@ -65,7 +65,7 @@
           </tr>
         </tbody>
       </table>
-    </Card>
+    </Section>
   </div>
 </template>
 
@@ -80,7 +80,7 @@ const t = i18n.t;
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
 import { Button, Dialog, Dropdown, FormGroup, TextInput, InputDialog } from 'pankow';
 import { prettyLongDate, copyToClipboard } from 'pankow/utils';
-import Card from './Card.vue';
+import Section from './Section.vue';
 import AppPasswordsModel from '../models/AppPasswordsModel.js';
 import AppsModel from '../models/AppsModel.js';