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

<template>
  <div>
    <InputDialog ref="inputDialog" />

    <Dialog ref="newDialog"
      :title="$t('profile.createAppPassword.title')"
      :confirm-label="addedPassword ? '' : $t('profile.createAppPassword.generatePassword')"
       confirm-style="success"
      :reject-label="$t('main.dialog.close')"
      @confirm="onSubmit()"
      @close="onReset()"
    >
      <div>
        <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-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>

    <h2 class="header header-with-button">
      {{ $t('profile.appPasswords.title') }}
      <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
    </h2>
    <Card>
      <p>{{ $t('profile.appPasswords.description') }}</p>
      <table class="table table-hover">
        <thead>
          <tr>
            <th>{{ $t('profile.appPasswords.name') }}</th>
            <th>{{ $t('profile.appPasswords.app') }}</th>
            <th>{{ $t('main.table.date') }}</th>
            <th style="width: 30px" class="text-right">{{ $t('main.actions') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-show="passwords.length === 0">
            <td colspan="4" class="text-center">{{ $t('profile.appPasswords.noPasswordsPlaceholder') }}</td>
          </tr>
          <tr v-for="password in passwords" :key="password.id">
            <td class="elide-table-cell">{{ password.name }}</td>
            <td class="elide-table-cell">{{ password.label }}</td>
            <td class="elide-table-cell">{{ prettyLongDate(password.creationTime) }}</td>
            <td class="text-right">
              <Button tool small danger @click="onRemove(password.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" 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, useTemplateRef, computed } from 'vue';
import { Button, Dialog, Dropdown, FormGroup, TextInput, InputDialog } from 'pankow';
import { prettyLongDate, copyToClipboard } from 'pankow/utils';
import Card from './Card.vue';
import AppPasswordsModel from '../models/AppPasswordsModel.js';
import AppsModel from '../models/AppsModel.js';

const appPasswordsModel = AppPasswordsModel.create(API_ORIGIN, localStorage.token);
const appsModel = AppsModel.create(API_ORIGIN, localStorage.token);

const newDialog = useTemplateRef('newDialog');
const inputDialog = useTemplateRef('inputDialog');
const passwords = ref([]);

// new dialog props
const addedPassword = ref('');
const passwordName = ref('');
const identifiers = ref([]);
const identifier = ref('');

const appsById = {};
async function refresh() {
  const [error, result] = await appPasswordsModel.list();
  if (error) return console.error(error);

  // setup label for the table UI
  result.forEach(function (password) {
    if (password.identifier === 'mail') return password.label = password.identifier;
    const app = appsById[password.identifier];
    if (!app) return password.label = password.identifier + ' (App not found)';

    const ftp = app.manifest.addons && app.manifest.addons.localstorage && app.manifest.addons.localstorage.ftp;
    const labelSuffix = ftp ? ' - SFTP' : '';
    password.label = app.label ? app.label + ' (' + app.fqdn + ')' + labelSuffix : app.fqdn + labelSuffix;
  });

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

async function onSubmit() {
  if (!isValid.value) return;

  addedPassword.value = '';

  const [error, result] = await appPasswordsModel.add(identifier.value, passwordName.value);
  if (error) return console.error(error);

  addedPassword.value = result.password;
  passwordName.value = '';
  identifier.value = '';

  await refresh();
}

function onCopyToClipboard(password) {
  copyToClipboard(password);
  window.pankow.notify({ type: 'success', text: 'Password copied!' });
}

async function onRemove(id) {
  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 appPasswordsModel.remove(id);
  if (error) return console.error(error);

  await refresh();
}

onMounted(async () => {
  // build the password identifier selection model
  identifiers.value = [{ id: 'mail', label: 'Mail client' }];

  const apps = await appsModel.list();
  apps.forEach(function (app) {
    if (!app.manifest.addons) return;
    if (app.manifest.addons.email) return;

    const ftp = app.manifest.addons.localstorage && app.manifest.addons.localstorage.ftp;
    const sso = app.sso && (app.manifest.addons.ldap || app.manifest.addons.proxyAuth);

    if (!ftp && !sso) return;

    let labelSuffix = '';
    if (ftp && sso) labelSuffix = ' - SFTP & App Login';
    else if (ftp) labelSuffix = ' - SFTP Only';

    const label = app.label ? app.label + ' (' + app.fqdn + ')' + labelSuffix : app.fqdn + labelSuffix;
    identifiers.value.push({ id: app.id, label: label });

    // stash for later use in table labels
    appsById[app.id] = app;
  });

  await refresh();
});

</script>