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

<script setup>

import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;

import moment from 'moment-timezone';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Menu, ClipboardButton, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
import { prettyLongDate } from '@cloudron/pankow/utils';
import Section from './Section.vue';
import AppPasswordsModel from '../models/AppPasswordsModel.js';
import AppsModel from '../models/AppsModel.js';

const appPasswordsModel = AppPasswordsModel.create();
const appsModel = AppsModel.create();

const newDialog = useTemplateRef('newDialog');
const inputDialog = useTemplateRef('inputDialog');
const passwords = ref([]);
const columns = {
  name: {
    label: t('profile.appPasswords.name'),
    sort: true
  },
  label: {
    label: t('profile.appPasswords.app'),
    sort: true,
    hideMobile: true,
  },
  creationTime: {
    label: t('main.table.date'),
    hideMobile: true,
    sort(a, b) {
      if (!a) return 1;
      if (!b) return -1;
      return moment(a).isBefore(b) ? 1 : -1;
    }
  },
  actions: {}
};

const actionMenuModel = ref([]);
const actionMenuElement = useTemplateRef('actionMenuElement');
function onActionMenu(appPassword, event) {
  actionMenuModel.value = [{
    icon: 'fa-solid fa-trash-alt',
    label: t('main.action.remove'),
    action: onRemove.bind(null, appPassword),
  }];

  actionMenuElement.value.open(event, event.currentTarget);
}

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

const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
  isFormValid.value = form.value ? form.value.checkValidity() : false;
}

function onReset() {
  setTimeout(() => {
    passwordName.value = '';
    identifier.value = '';
    addedPassword.value = '';
    setTimeout(checkValidity, 100); // update state of the confirm button
  }, 500);
}

async function onSubmit() {
  if (!form.value.reportValidity()) 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();
}

async function onRemove(appPassword) {
  const yes = await inputDialog.value.confirm({
    title: t('profile.removeAppPassword.title'),
    message: t('profile.removeAppPassword.description', { name: appPassword.name }),
    confirmLabel: t('main.action.remove'),
    confirmStyle: 'danger',
    rejectLabel: t('main.dialog.cancel'),
    rejectStyle: 'secondary'
  });

  if (!yes) return;

  const [error] = await appPasswordsModel.remove(appPassword.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 [error, apps] = await appsModel.list();
  if (error) return console.error(error);

  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>

<template>
  <div>
    <Menu ref="actionMenuElement" :model="actionMenuModel" />
    <InputDialog ref="inputDialog" />

    <Dialog ref="newDialog"
      :title="$t('profile.createAppPassword.title')"
      :confirm-active="addedPassword || isFormValid"
      :confirm-label="addedPassword ? '' : $t('main.action.add')"
       confirm-style="primary"
      :reject-label="addedPassword ? $t('main.dialog.close') : $t('main.dialog.cancel')"
       reject-style="secondary"
      @confirm="onSubmit()"
      @close="onReset()"
    >
      <div>
        <Transition name="slide-left" mode="out-in">
          <div v-if="!addedPassword">
            <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
              <input style="display: none" type="submit"/>
              <FormGroup>
                <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
                <TextInput id="passwordName" v-model="passwordName" required/>
              </FormGroup>

              <FormGroup>
                <label>{{ $t('profile.createAppPassword.app') }}</label>
                <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" required/>
              </FormGroup>
            </form>
          </div>
          <div v-else>
            <p>{{ $t('profile.createAppPassword.description') }}</p>
            <InputGroup>
              <TextInput v-model="addedPassword" readonly style="flex-grow: 1;"/>
              <ClipboardButton :value="addedPassword" />
            </InputGroup>
            <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
          </div>
        </Transition>
      </div>
    </Dialog>

    <Section :title="$t('profile.appPasswords.title')">
      <template #header-buttons>
        <Button @click="newDialog.open()">{{ $t('main.action.add') }}</Button>
      </template>

      <div>{{ $t('profile.appPasswords.description') }}</div>
      <br/>

      <TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
        <template #creationTime="password">{{ prettyLongDate(password.creationTime) }}</template>
        <template #actions="password">
          <div style="text-align: right;">
            <Button tool plain secondary @click.capture="onActionMenu(password, $event)" icon="fa-solid fa-ellipsis" />
          </div>
        </template>
      </TableView>
    </Section>
  </div>
</template>