MaysWind
249 lines
10 KiB
Vue
249 lines
10 KiB
Vue
<template>
|
|
<v-dialog width="800" :persistent="true" v-model="showState">
|
|
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
|
<template #title>
|
|
<div class="d-flex align-center justify-center">
|
|
<h4 class="text-h4">{{ tt('Generate Token') }}</h4>
|
|
</div>
|
|
</template>
|
|
|
|
<v-card-text class="py-0 w-100 d-flex justify-center" v-if="tokenType === 'mcp' && generatedToken && serverUrl">
|
|
<v-switch class="bidirectional-switch" color="secondary"
|
|
:label="tt('Configuration')"
|
|
v-model="showMCPConfiguration"
|
|
@click="showMCPConfiguration = !showMCPConfiguration">
|
|
<template #prepend>
|
|
<span>{{ tt('Token') }}</span>
|
|
</template>
|
|
</v-switch>
|
|
</v-card-text>
|
|
|
|
<v-card-text class="mt-md-4 w-100 d-flex justify-center">
|
|
<div class="w-100" v-if="!generatedToken">
|
|
<v-row>
|
|
<v-col cols="12" md="12">
|
|
<v-select
|
|
item-title="name"
|
|
item-value="value"
|
|
:disabled="generating"
|
|
:label="tt('Token Type')"
|
|
:placeholder="tt('Token Type')"
|
|
:items="tokenTypeOptions"
|
|
v-model="tokenType"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" :md="tokenExpirationTime >= 0 ? 12 : 6">
|
|
<v-select
|
|
item-title="displayName"
|
|
item-value="value"
|
|
:disabled="generating"
|
|
:label="tt('Expiration Time (Seconds)')"
|
|
:placeholder="tt('Expiration Time (Seconds)')"
|
|
:items="[
|
|
{ displayName: tt('No Expiration'), value: 0 },
|
|
{ displayName: tt('format.misc.nHour', { n: 1 }), value: 3600 },
|
|
{ displayName: tt('format.misc.nDays', { n: 1 }), value: 86400 },
|
|
{ displayName: tt('format.misc.nDays', { n: 7 }), value: 604800 },
|
|
{ displayName: tt('format.misc.nDays', { n: 30 }), value: 2592000 },
|
|
{ displayName: tt('format.misc.nDays', { n: 90 }), value: 7776000 },
|
|
{ displayName: tt('format.misc.nDays', { n: 180 }), value: 15552000 },
|
|
{ displayName: tt('format.misc.nDays', { n: 365 }), value: 31536000 },
|
|
{ displayName: tt('Custom'), value: -1 }
|
|
]"
|
|
v-model="tokenExpirationTime"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6" v-if="tokenExpirationTime < 0">
|
|
<v-text-field
|
|
type="number"
|
|
persistent-placeholder
|
|
:disabled="generating"
|
|
:label="tt('Custom Expiration Time (Seconds)')"
|
|
:placeholder="tt('Custom Expiration Time (Seconds)')"
|
|
v-model.number="tokenCustomExpirationTime"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="12">
|
|
<v-text-field
|
|
autocomplete="current-password"
|
|
type="password"
|
|
persistent-placeholder
|
|
:autofocus="true"
|
|
:disabled="generating"
|
|
:label="tt('Current Password')"
|
|
:placeholder="tt('Current Password')"
|
|
v-model="currentPassword"
|
|
@keyup.enter="generateToken"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
<div class="w-100 code-container" v-if="generatedToken">
|
|
<v-textarea class="w-100 always-cursor-text" :readonly="true"
|
|
:rows="4" :value="generatedToken" v-if="!showMCPConfiguration || !serverUrl" />
|
|
<v-textarea class="w-100 always-cursor-text" :readonly="true"
|
|
:rows="15" :value="mcpServerConfiguration" v-if="showMCPConfiguration && serverUrl" />
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-card-text class="w-100" v-if="(tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)) || tokenType === 'mcp'">
|
|
<v-alert type="warning" variant="tonal">
|
|
<span v-if="tokenExpirationTime === 0 || (tokenExpirationTime < 0 && tokenCustomExpirationTime === 0)">{{ tt('Your token does not expire, please keep it secure.') }}</span>
|
|
<span v-if="tokenType === 'mcp'">{{ tt('When connecting to third-party apps, be aware that they and any large language models they use can access your private data.') }}</span>
|
|
</v-alert>
|
|
</v-card-text>
|
|
|
|
<v-card-text class="overflow-y-visible">
|
|
<div ref="buttonContainer" class="w-100 d-flex justify-center gap-4">
|
|
<v-btn :disabled="generating || !currentPassword" @click="generateToken" v-if="!generatedToken">
|
|
{{ tt('Generate') }}
|
|
<v-progress-circular indeterminate size="22" class="ms-2" v-if="generating"></v-progress-circular>
|
|
</v-btn>
|
|
<v-btn color="secondary" variant="tonal" :disabled="generating"
|
|
@click="cancel" v-if="!generatedToken">{{ tt('Cancel') }}</v-btn>
|
|
<v-btn variant="tonal" @click="copy" v-if="generatedToken">{{ tt('Copy') }}</v-btn>
|
|
<v-btn color="secondary" variant="tonal" @click="close" v-if="generatedToken">{{ tt('Close') }}</v-btn>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<snack-bar ref="snackbar" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SnackBar from '@/components/desktop/SnackBar.vue';
|
|
|
|
import { ref, computed, useTemplateRef } from 'vue';
|
|
|
|
import { useI18n } from '@/locales/helpers.ts';
|
|
|
|
import { useTokensStore } from '@/stores/token.ts';
|
|
|
|
import { type NameValue } from '@/core/base.ts';
|
|
import { type TokenGenerateMCPResponse } from '@/models/token.ts';
|
|
|
|
import { isAPITokenEnabled, isMCPServerEnabled } from '@/lib/server_settings.ts';
|
|
import { copyTextToClipboard } from '@/lib/ui/common.ts';
|
|
|
|
type SnackBarType = InstanceType<typeof SnackBar>;
|
|
|
|
const { tt } = useI18n();
|
|
|
|
const tokensStore = useTokensStore();
|
|
|
|
const buttonContainer = useTemplateRef<HTMLElement>('buttonContainer');
|
|
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
|
|
|
let resolveFunc: (() => void) | null = null;
|
|
let rejectFunc: ((reason?: unknown) => void) | null = null;
|
|
|
|
const showState = ref<boolean>(false);
|
|
const tokenType = ref<'api' | 'mcp'>(isAPITokenEnabled() ? 'api' : (isMCPServerEnabled() ? 'mcp' : 'api'));
|
|
const tokenExpirationTime = ref<number>(86400);
|
|
const tokenCustomExpirationTime = ref<number>(86400);
|
|
const currentPassword = ref<string>('');
|
|
const generating = ref<boolean>(false);
|
|
const showMCPConfiguration = ref<boolean>(false);
|
|
const serverUrl = ref<string>('');
|
|
const generatedToken = ref<string>('');
|
|
|
|
const tokenTypeOptions = computed<NameValue[]>(() => {
|
|
const options: NameValue[] = [];
|
|
|
|
if (isAPITokenEnabled()) {
|
|
options.push({ name: tt('API Token'), value: 'api' });
|
|
}
|
|
|
|
if (isMCPServerEnabled()) {
|
|
options.push({ name: tt('MCP Token'), value: 'mcp' });
|
|
}
|
|
|
|
return options;
|
|
});
|
|
|
|
const mcpServerConfiguration = computed<string>(() => {
|
|
return '{\n' +
|
|
' "mcpServers": {\n' +
|
|
' "ezbookkeeping-mcp": {\n' +
|
|
' "type": "streamable-http",\n' +
|
|
' "url": "' + serverUrl.value + '",\n' +
|
|
' "headers": {\n' +
|
|
' "Authorization": "Bearer ' + generatedToken.value + '"\n' +
|
|
' }\n' +
|
|
' }\n' +
|
|
' }\n' +
|
|
'}'
|
|
});
|
|
|
|
function open(): Promise<void> {
|
|
showState.value = true;
|
|
currentPassword.value = '';
|
|
tokenType.value = isAPITokenEnabled() ? 'api' : (isMCPServerEnabled() ? 'mcp' : 'api');
|
|
tokenExpirationTime.value = 86400;
|
|
tokenCustomExpirationTime.value = 86400;
|
|
generating.value = false;
|
|
showMCPConfiguration.value = false;
|
|
serverUrl.value = '';
|
|
generatedToken.value = '';
|
|
|
|
return new Promise((resolve, reject) => {
|
|
resolveFunc = resolve;
|
|
rejectFunc = reject;
|
|
});
|
|
}
|
|
|
|
function generateToken(): void {
|
|
if (generating.value || !currentPassword.value) {
|
|
return;
|
|
}
|
|
|
|
generating.value = true;
|
|
|
|
tokensStore.generateToken({
|
|
type: tokenType.value,
|
|
expiresInSeconds: tokenExpirationTime.value >= 0 ? tokenExpirationTime.value : tokenCustomExpirationTime.value,
|
|
password: currentPassword.value
|
|
}).then(result => {
|
|
generating.value = false;
|
|
currentPassword.value = '';
|
|
|
|
if (tokenType.value === 'mcp') {
|
|
serverUrl.value = (result as TokenGenerateMCPResponse).mcpUrl;
|
|
}
|
|
|
|
generatedToken.value = result.token;
|
|
}).catch(error => {
|
|
generating.value = false;
|
|
|
|
if (!error.processed) {
|
|
snackbar.value?.showError(error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function copy(): void {
|
|
if (showMCPConfiguration.value) {
|
|
copyTextToClipboard(mcpServerConfiguration.value, buttonContainer.value);
|
|
} else {
|
|
copyTextToClipboard(generatedToken.value, buttonContainer.value);
|
|
}
|
|
|
|
snackbar.value?.showMessage('Data copied');
|
|
}
|
|
|
|
function cancel(): void {
|
|
rejectFunc?.();
|
|
showState.value = false;
|
|
}
|
|
|
|
function close(): void {
|
|
resolveFunc?.();
|
|
showState.value = false;
|
|
}
|
|
|
|
defineExpose({
|
|
open
|
|
});
|
|
</script>
|