Add new api token generation dialog
This commit is contained in:
Johannes Zellner
@@ -2,6 +2,8 @@
|
||||
<div class="content">
|
||||
<InputDialog ref="inputDialog" />
|
||||
|
||||
<NewApiTokenDialog ref="newApiTokenDialog" @done="refreshApiTokens()"/>
|
||||
|
||||
<h1>{{ $t('profile.title') }}</h1>
|
||||
<Card>
|
||||
<div style="display: flex;">
|
||||
@@ -43,7 +45,7 @@
|
||||
<!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
|
||||
<Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
|
||||
<Button tool v-show="!user.source && !config.external2FA" @click="on2FactorAuthConfig()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
|
||||
<Button tool @click="onLogout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
|
||||
<Button tool @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -56,8 +58,43 @@
|
||||
<Card>
|
||||
</Card>
|
||||
|
||||
<h2 v-show="user.isAtLeastAdmin">{{ $t('profile.apiTokens.title') }}</h2>
|
||||
<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>
|
||||
</h2>
|
||||
<Card v-show="user.isAtLeastAdmin">
|
||||
<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>
|
||||
{{ token.name || 'unnamed' }}
|
||||
</td>
|
||||
<td class="hide-mobile">
|
||||
<span v-if="token.lastUsedTime">{{ prettyLongDate(token.lastUsedTime) }}</span>
|
||||
<span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
|
||||
<h2>{{ $t('profile.loginTokens.title') }}</h2>
|
||||
@@ -70,19 +107,22 @@
|
||||
|
||||
<script setup>
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, onMounted, useTemplateRef } from 'vue';
|
||||
import { Button, Dropdown, InputDialog } from 'pankow';
|
||||
import { TOKEN_TYPES } from '../constants.js';
|
||||
import Card from './Card.vue';
|
||||
import ProfileModel from '../models/ProfileModel.js';
|
||||
import CloudronModel from '../models/CloudronModel.js';
|
||||
import TokensModel from '../models/TokensModel.js';
|
||||
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;
|
||||
|
||||
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
|
||||
import { ref, onMounted, useTemplateRef } from 'vue';
|
||||
import { Button, Dropdown, InputDialog } from 'pankow';
|
||||
import { prettyLongDate } from 'pankow/utils';
|
||||
import { TOKEN_TYPES } from '../constants.js';
|
||||
import Card from './Card.vue';
|
||||
import NewApiTokenDialog from './NewApiTokenDialog.vue';
|
||||
|
||||
import ProfileModel from '../models/ProfileModel.js';
|
||||
import CloudronModel from '../models/CloudronModel.js';
|
||||
import TokensModel from '../models/TokensModel.js';
|
||||
|
||||
const profileModel = ProfileModel.create(API_ORIGIN, localStorage.token);
|
||||
const cloudronModel = CloudronModel.create(API_ORIGIN, localStorage.token);
|
||||
@@ -90,9 +130,11 @@ 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');
|
||||
|
||||
|
||||
// Language selector
|
||||
const languages = ref([]);
|
||||
const language = ref('');
|
||||
async function onSelectLanguage(lang) {
|
||||
@@ -105,6 +147,8 @@ async function onSelectLanguage(lang) {
|
||||
// TODO dynamically change lange instead of reloading
|
||||
}
|
||||
|
||||
|
||||
// Profile edits
|
||||
async function onChangeDisplayName(currentDisplayName) {
|
||||
const displayName = await inputDialog.value.prompt({
|
||||
message: t('profile.changeDisplayName.title'),
|
||||
@@ -161,6 +205,19 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
|
||||
user.value = await profileModel.get();
|
||||
}
|
||||
|
||||
const avatarFileInput = useTemplateRef('avatarFileInput');
|
||||
async function onAvatarChanged() {
|
||||
if (!avatarFileInput.value.files[0]) return;
|
||||
await profileModel.setAvatar(avatarFileInput.value.files[0]);
|
||||
|
||||
// invalidate and refresh profile avatar url
|
||||
const u = new URL(user.value.avatarUrl);
|
||||
u.searchParams.set('ts', Date.now());
|
||||
user.value.avatarUrl = u.toString();
|
||||
}
|
||||
|
||||
|
||||
// Password changes
|
||||
async function onPasswordChange() {
|
||||
const result = await inputDialog.value.prompt({
|
||||
message: [ t('profile.changePassword.newPassword'), t('profile.changePassword.newPasswordRepeat'), t('profile.changePassword.currentPassword') ],
|
||||
@@ -184,26 +241,18 @@ async function onPasswordReset() {
|
||||
window.pankow.notify({ type: 'success', timeout: 5000, text: t('profile.passwordResetNotification.title') + '. ' + t('profile.passwordResetNotification.body', { email: user.value.fallbackEmail || user.value.email }) });
|
||||
}
|
||||
|
||||
async function onLogout() {
|
||||
await profileModel.logout();
|
||||
}
|
||||
|
||||
const avatarFileInput = useTemplateRef('avatarFileInput');
|
||||
async function onAvatarChanged() {
|
||||
if (!avatarFileInput.value.files[0]) return;
|
||||
await profileModel.setAvatar(avatarFileInput.value.files[0]);
|
||||
|
||||
// invalidate and refresh profile avatar url
|
||||
const u = new URL(user.value.avatarUrl);
|
||||
u.searchParams.set('ts', Date.now());
|
||||
user.value.avatarUrl = u.toString();
|
||||
}
|
||||
|
||||
// Tokens
|
||||
const webadminTokens = ref([]);
|
||||
const cliTokens = ref([]);
|
||||
const apiTokens = ref([]);
|
||||
const revokeTokensBusy = ref(false);
|
||||
|
||||
async function refreshApiTokens() {
|
||||
const tokens = await tokensModel.list();
|
||||
apiTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_SDK; });
|
||||
}
|
||||
|
||||
async function onRevokeAllWebAndCliTokens() {
|
||||
revokeTokensBusy.value = true;
|
||||
|
||||
@@ -216,6 +265,23 @@ async function onRevokeAllWebAndCliTokens() {
|
||||
await profileModel.logout();
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
await tokensModel.remove(token.id);
|
||||
await refreshApiTokens();
|
||||
}
|
||||
|
||||
|
||||
// Init
|
||||
onMounted(async () => {
|
||||
user.value = await profileModel.get();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user