Move ApiTokens into their own component

dashboard/src/components/ProfileView.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="content">
     <InputDialog ref="inputDialog" />
-    <NewApiTokenDialog ref="newApiTokenDialog" @done="refreshApiTokens()"/>
-    <NewAppPasswordDialog ref="newAppPasswordDialog" @done="refreshAppPasswords()"/>
 
     <h1>{{ $t('profile.title') }}</h1>
     <Card>
@@ -55,45 +53,7 @@
     </Card>
 
     <AppPasswords/>
-
-    <h2 v-show="user.isAtLeastAdmin" class="header-with-button">
-      {{ $t('profile.apiTokens.title') }}
-      <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>
-      <table class="table table-hover" style="margin: 0;">
-        <thead>
-          <tr>
-            <th>{{ $t('profile.apiTokens.name') }}</th>
-            <th class="hide-mobile">{{ $t('profile.apiTokens.lastUsed') }}</th>
-            <th>{{ $t('profile.apiTokens.scope') }}</th>
-            <th class="text-right">{{ $t('main.actions') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-show="apiTokens.length === 0">
-            <td colspan="3" class="text-center">{{ $t('profile.apiTokens.noTokensPlaceholder') }}</td>
-          </tr>
-          <tr v-for="token in apiTokens" :key="token.id">
-            <td>
-              {{ token.name || 'unnamed' }}
-            </td>
-            <td class="hide-mobile">
-              <span v-if="token.lastUsedTime">{{ prettyLongDate(token.lastUsedTime) }}</span>
-              <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
-            </td>
-            <td>
-              <span v-if="token.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
-              <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
-            </td>
-            <td class="text-right">
-              <Button small tool danger @click="onRevokeToken(token)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </Card>
+    <ApiTokens v-show="user.isAtLeastAdmin"/>
 
     <h2>{{ $t('profile.loginTokens.title') }}</h2>
     <Card>
@@ -113,11 +73,10 @@ const t = i18n.t;
 
 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';
+import ApiTokens from './ApiTokens.vue';
 
 import ProfileModel from '../models/ProfileModel.js';
 import CloudronModel from '../models/CloudronModel.js';
@@ -130,8 +89,6 @@ const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
 const config = ref({}); // TODO what is this?
 const user = ref({});
 const inputDialog = useTemplateRef('inputDialog');
-const newApiTokenDialog = useTemplateRef('newApiTokenDialog');
-
 
 // Language selector
 const languages = ref([]);
@@ -241,23 +198,11 @@ async function onPasswordReset() {
 }
 
 
-// App passwords
-const appPasswords = ref([]);
-
-
 // Tokens
 const webadminTokens = ref([]);
 const cliTokens = ref([]);
-const apiTokens = ref([]);
 const revokeTokensBusy = ref(false);
 
-async function refreshApiTokens() {
-  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; });
-}
-
 async function onRevokeAllWebAndCliTokens() {
   revokeTokensBusy.value = true;
 
@@ -271,23 +216,6 @@ async function onRevokeAllWebAndCliTokens() {
   await profileModel.logout();
 }
 
-async function onRevokeToken(token) {
-  const yes = await inputDialog.value.confirm({
-    message: 'Really remove this token?', // TODO translate
-    modal: true,
-    confirmStyle: 'danger',
-    confirmLabel: t('main.dialog.yes'),
-    rejectLabel: t('main.dialog.no')
-  });
-
-  if (!yes) return;
-
-  const [error] = await tokensModel.remove(token.id);
-  if (error) return console.error(error);
-
-  await refreshApiTokens();
-}
-
 
 // Init
 onMounted(async () => {
@@ -312,7 +240,6 @@ onMounted(async () => {
   // 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'; });
   cliTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_CLI; });
-  apiTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_SDK; });
 });