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>