Implement AppPassword section in profile view

dashboard/src/components/AppPasswords.vue

@@ -0,0 +1,183 @@
+<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()"
+    >
+      <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>
+
+            <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>
+      </div>
+    </Dialog>
+
+    <h2 class="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 { 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;
+}
+
+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>

dashboard/src/components/NewApiTokenDialog.vue

@@ -68,7 +68,8 @@ async function onSubmitAddApiToken(){
   if (!isValid.value) return;
 
   const scope = { '*': tokenScope.value };
-  const apiToken = await tokensModel.add(tokenName.value, scope);
+  const [error, apiToken] = await tokensModel.add(tokenName.value, scope);
+  if (error) return console.error(error);
 
   addedToken.value = apiToken.accessToken;
 

dashboard/src/components/ProfileView.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="content">
     <InputDialog ref="inputDialog" />
-
     <NewApiTokenDialog ref="newApiTokenDialog" @done="refreshApiTokens()"/>
+    <NewAppPasswordDialog ref="newAppPasswordDialog" @done="refreshAppPasswords()"/>
 
     <h1>{{ $t('profile.title') }}</h1>
     <Card>
@@ -54,13 +54,11 @@
       </div>
     </Card>
 
-    <h2>{{ $t('profile.appPasswords.title') }}</h2>
-    <Card>
-    </Card>
+    <AppPasswords/>
 
     <h2 v-show="user.isAtLeastAdmin" class="header-with-button">
       {{ $t('profile.apiTokens.title') }}
-      <Button @click="addApiTokenDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+      <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>
@@ -117,6 +115,7 @@ 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';
 
@@ -131,7 +130,7 @@ const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
 const config = ref({}); // TODO what is this?
 const user = ref({});
 const inputDialog = useTemplateRef('inputDialog');
-const addApiTokenDialog = useTemplateRef('newApiTokenDialog');
+const newApiTokenDialog = useTemplateRef('newApiTokenDialog');
 
 
 // Language selector
@@ -242,6 +241,10 @@ async function onPasswordReset() {
 }
 
 
+// App passwords
+const appPasswords = ref([]);
+
+
 // Tokens
 const webadminTokens = ref([]);
 const cliTokens = ref([]);
@@ -249,7 +252,9 @@ const apiTokens = ref([]);
 const revokeTokensBusy = ref(false);
 
 async function refreshApiTokens() {
-  const tokens = await tokensModel.list();
+  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; });
 }
 
@@ -259,7 +264,8 @@ async function onRevokeAllWebAndCliTokens() {
   // filter current access token to be able to logout still
   const tokens = webadminTokens.value.concat(cliTokens.value).filter(t => t.accessToken !== localStorage.token);
   for (const token of tokens) {
-    await tokensModel.remove(token.id);
+    const [error] = await tokensModel.remove(token.id);
+    if (error) console.error(error);
   }
 
   await profileModel.logout();
@@ -276,7 +282,9 @@ async function onRevokeToken(token) {
 
   if (!yes) return;
 
-  await tokensModel.remove(token.id);
+  const [error] = await tokensModel.remove(token.id);
+  if (error) return console.error(error);
+
   await refreshApiTokens();
 }
 
@@ -298,7 +306,8 @@ onMounted(async () => {
   const usedLang = window.localStorage.NG_TRANSLATE_LANG_KEY || 'en';
   language.value = languages.value.find(l => l.id === usedLang).id;
 
-  const tokens = await tokensModel.list();
+  const [error, tokens] = await tokensModel.list();
+  if (error) return console.error(error);
 
   // 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'; });