cloudron-box/dashboard/src/components/ApiTokens.vue

<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>