Implement AppPassword section in profile view
This commit is contained in:
Johannes Zellner
@@ -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>
|
||||
Reference in New Issue
Block a user