Move ApiTokens into their own component

dashboard/src/components/ApiTokens.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <InputDialog ref="inputDialog" />
+
+    <Dialog ref="newDialog"
+      :title="$t('profile.createApiToken.title')"
+      :confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
+       confirm-style="success"
+      :reject-label="$t('main.dialog.close')"
+      @confirm="onSubmitAddApiToken()"
+      @close="onReset()"
+    >
+      <div>
+        <Transition name="slide-left" mode="out-in">
+          <div v-if="!addedToken">
+            <form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
+              <input style="display: none" type="submit" :disabled="!isValid"/>
+              <FormGroup>
+                <label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
+                <TextInput id="apiTokenName" v-model="tokenName" required/>
+              </FormGroup>
+
+              <FormGroup>
+                <label>{{ $t('profile.createApiToken.access') }}</label>
+                <Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
+                <Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
+              </FormGroup>
+            </form>
+          </div>
+          <div v-else>
+            {{ $t('profile.createApiToken.description') }}
+            <TextInput v-model="addedToken" readonly/>
+            <Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
+            <p>{{ $t('profile.createApiToken.copyNow') }}</p>
+          </div>
+        </Transition>
+      </div>
+    </Dialog>
+
+    <h2 class="header-with-button">
+      {{ $t('profile.apiTokens.title') }}
+      <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+    </h2>
+
+    <Card>
+      <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 class="elide-table-cell">{{ token.name || 'unnamed' }}</td>
+            <td class="elide-table-cell hide-mobile">
+              <span v-if="token.lastUsedTime">{{ prettyLongDate(token.lastUsedTime) }}</span>
+              <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
+            </td>
+            <td class="elide-table-cell">
+              <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>
+  </div>
+</template>
+
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, computed, useTemplateRef } from 'vue';
+import { Button, Dialog, InputDialog, FormGroup, Radiobutton, TextInput } from 'pankow';
+import { copyToClipboard, prettyLongDate } from 'pankow/utils';
+import { TOKEN_TYPES } from '../constants.js';
+import Card from './Card.vue';
+import TokensModel from '../models/TokensModel.js';
+
+const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
+
+const apiTokens = ref([]);
+const inputDialog = useTemplateRef('inputDialog');
+const newDialog = useTemplateRef('newDialog');
+const addedToken = ref('');
+const tokenName = ref('');
+const tokenScope = ref('r');
+
+const isValid = computed(() => {
+  if (!tokenName.value) return false;
+  if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
+  return true;
+});
+
+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 onSubmitAddApiToken(){
+  if (!isValid.value) return;
+
+  const scope = { '*': tokenScope.value };
+  const [error, apiToken] = await tokensModel.add(tokenName.value, scope);
+  if (error) return console.error(error);
+
+  addedToken.value = apiToken.accessToken;
+
+  await refreshApiTokens();
+}
+
+function onCopyApiTokenToClipboard(apiToken) {
+  copyToClipboard(apiToken);
+  window.pankow.notify({ type: 'success', text: 'Token copied!' });
+}
+
+function onReset() {
+  setTimeout(() => {
+    addedToken.value = '';
+    tokenName.value = '';
+    tokenScope.value = 'r';
+  }, 500);
+}
+
+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();
+}
+
+onMounted(async () => {
+  await refreshApiTokens();
+});
+
+</script>

dashboard/src/components/AppInstallDialog.vue

@@ -208,20 +208,6 @@ defineExpose({
 
 <style scoped>
 
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: all 0.25s ease-out;
-}
-
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.slide-left-leave-to {
-  opacity: 0;
-}
-
 .content {
   max-width: 100%;
   max-height: 100%;

dashboard/src/components/AppPasswords.vue

@@ -8,28 +8,31 @@
        confirm-style="success"
       :reject-label="$t('main.dialog.close')"
       @confirm="onSubmit()"
+      @close="onReset()"
     >
       <div>
-        <div v-show="!addedPassword">
-          <form novalidate @submit="onSubmit()" autocomplete="off">
-            <input style="display: none" type="submit" :disabled="!isValid"/>
-            <FormGroup>
-              <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
-              <TextInput id="passwordName" v-model="passwordName" required/>
-            </FormGroup>
+        <Transition name="slide-left" mode="out-in">
+          <div v-if="!addedPassword">
+            <form novalidate @submit="onSubmit()" autocomplete="off">
+              <input style="display: none" type="submit" :disabled="!isValid"/>
+              <FormGroup>
+                <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
+                <TextInput id="passwordName" v-model="passwordName" required/>
+              </FormGroup>
 
-            <FormGroup>
-              <label>{{ $t('profile.createAppPassword.app') }}</label>
-              <Dropdown outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" /> {{ dropdownValueWithKey }}
-            </FormGroup>
-          </form>
-        </div>
-        <div v-show="addedPassword">
-          {{ $t('profile.createAppPassword.description') }}
-          <TextInput v-model="addedPassword" readonly/>
-          <Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
-          <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
-        </div>
+              <FormGroup>
+                <label>{{ $t('profile.createAppPassword.app') }}</label>
+                <Dropdown outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" /> {{ dropdownValueWithKey }}
+              </FormGroup>
+            </form>
+          </div>
+          <div v-else>
+            {{ $t('profile.createAppPassword.description') }}
+            <TextInput v-model="addedPassword" readonly/>
+            <Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
+            <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
+          </div>
+        </Transition>
       </div>
     </Dialog>
 
@@ -70,6 +73,10 @@
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+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';
@@ -109,6 +116,14 @@ async function refresh() {
   passwords.value = result;
 }
 
+function onReset() {
+  setTimeout(() => {
+    passwordName.value = '';
+    identifier.value = '';
+    addedPassword.value = '';
+  }, 500);
+}
+
 const isValid = computed(() => {
   if (!passwordName.value) return false;
   if (!identifier.value) return false;

dashboard/src/components/NewApiTokenDialog.vue

@@ -1,84 +0,0 @@
-<template>
-  <Dialog ref="dialog"
-    :title="$t('profile.createApiToken.title')"
-    :confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
-     confirm-style="success"
-    :reject-label="$t('main.dialog.close')"
-    @confirm="onSubmitAddApiToken()"
-  >
-    <div>
-      <div v-show="!addedToken">
-        <form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
-          <input style="display: none" type="submit" :disabled="!isValid"/>
-          <FormGroup>
-            <label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
-            <TextInput id="apiTokenName" v-model="tokenName" required/>
-          </FormGroup>
-
-          <FormGroup>
-            <label>{{ $t('profile.createApiToken.access') }}</label>
-            <Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
-            <Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
-          </FormGroup>
-        </form>
-      </div>
-      <div v-show="addedToken">
-        {{ $t('profile.createApiToken.description') }}
-        <TextInput v-model="addedToken" readonly/>
-        <Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
-        <p>{{ $t('profile.createApiToken.copyNow') }}</p>
-      </div>
-    </div>
-  </Dialog>
-</template>
-
-<script setup>
-
-const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
-
-import { ref, computed, useTemplateRef } from 'vue';
-import { Button, Dialog, FormGroup, Radiobutton, TextInput } from 'pankow';
-import { copyToClipboard } from 'pankow/utils';
-import TokensModel from '../models/TokensModel.js';
-
-const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
-
-const dialog = useTemplateRef('dialog');
-const addedToken = ref('');
-const tokenName = ref('');
-const tokenScope = ref('r');
-
-function open() {
-  addedToken.value = '';
-  tokenName.value = '';
-  tokenScope.value = 'r';
-  dialog.value.open();
-}
-
-const emit = defineEmits(['done']);
-defineExpose({ open });
-
-const isValid = computed(() => {
-  if (!tokenName.value) return false;
-  if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
-  return true;
-});
-
-async function onSubmitAddApiToken(){
-  if (!isValid.value) return;
-
-  const scope = { '*': tokenScope.value };
-  const [error, apiToken] = await tokensModel.add(tokenName.value, scope);
-  if (error) return console.error(error);
-
-  addedToken.value = apiToken.accessToken;
-
-  emit('done');
-}
-
-function onCopyApiTokenToClipboard(apiToken) {
-  copyToClipboard(apiToken);
-  window.pankow.notify({ type: 'success', text: 'Token copied!' });
-}
-
-</script>

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; });
 });
 
 

dashboard/src/style.css

@@ -52,4 +52,18 @@ footer > .p {
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-left-leave-to {
+  opacity: 0;
+}