Implement AppPassword section in profile view

dashboard/src/components/ProfileView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="content">
     <InputDialog ref="inputDialog" />
-
     <NewApiTokenDialog ref="newApiTokenDialog" @done="refreshApiTokens()"/>
+    <NewAppPasswordDialog ref="newAppPasswordDialog" @done="refreshAppPasswords()"/>
 
     <h1>{{ $t('profile.title') }}</h1>
     <Card>
@@ -54,13 +54,11 @@
       </div>
     </Card>
 
-    <h2>{{ $t('profile.appPasswords.title') }}</h2>
-    <Card>
-    </Card>
+    <AppPasswords/>
 
     <h2 v-show="user.isAtLeastAdmin" class="header-with-button">
       {{ $t('profile.apiTokens.title') }}
-      <Button @click="addApiTokenDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+      <Button @click="newApiTokenDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
     </h2>
     <Card v-show="user.isAtLeastAdmin">
       <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
@@ -117,6 +115,7 @@ import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, Dropdown, InputDialog } from 'pankow';
 import { prettyLongDate } from 'pankow/utils';
 import { TOKEN_TYPES } from '../constants.js';
+import AppPasswords from './AppPasswords.vue';
 import Card from './Card.vue';
 import NewApiTokenDialog from './NewApiTokenDialog.vue';
 
@@ -131,7 +130,7 @@ const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
 const config = ref({}); // TODO what is this?
 const user = ref({});
 const inputDialog = useTemplateRef('inputDialog');
-const addApiTokenDialog = useTemplateRef('newApiTokenDialog');
+const newApiTokenDialog = useTemplateRef('newApiTokenDialog');
 
 
 // Language selector
@@ -242,6 +241,10 @@ async function onPasswordReset() {
 }
 
 
+// App passwords
+const appPasswords = ref([]);
+
+
 // Tokens
 const webadminTokens = ref([]);
 const cliTokens = ref([]);
@@ -249,7 +252,9 @@ const apiTokens = ref([]);
 const revokeTokensBusy = ref(false);
 
 async function refreshApiTokens() {
-  const tokens = await tokensModel.list();
+  const [error, tokens] = await tokensModel.list();
+  if (error) return console.error(error);
+
   apiTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_SDK; });
 }
 
@@ -259,7 +264,8 @@ async function onRevokeAllWebAndCliTokens() {
   // filter current access token to be able to logout still
   const tokens = webadminTokens.value.concat(cliTokens.value).filter(t => t.accessToken !== localStorage.token);
   for (const token of tokens) {
-    await tokensModel.remove(token.id);
+    const [error] = await tokensModel.remove(token.id);
+    if (error) console.error(error);
   }
 
   await profileModel.logout();
@@ -276,7 +282,9 @@ async function onRevokeToken(token) {
 
   if (!yes) return;
 
-  await tokensModel.remove(token.id);
+  const [error] = await tokensModel.remove(token.id);
+  if (error) return console.error(error);
+
   await refreshApiTokens();
 }
 
@@ -298,7 +306,8 @@ onMounted(async () => {
   const usedLang = window.localStorage.NG_TRANSLATE_LANG_KEY || 'en';
   language.value = languages.value.find(l => l.id === usedLang).id;
 
-  const tokens = await tokensModel.list();
+  const [error, tokens] = await tokensModel.list();
+  if (error) return console.error(error);
 
   // dashboard and development clientIds were issued with 7.5.0
   webadminTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_WEBADMIN || c.clientId === TOKEN_TYPES.ID_DEVELOPMENT || c.clientId === 'dashboard' || c.clientId === 'development'; });