add a special token type for MCP

2025-07-07 01:20:38 +08:00
parent fbaf6086e3
commit 0140fc7622
26 changed files with 424 additions and 17 deletions
@@ -0,0 +1,162 @@
+<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 MCP token') }}</h4>
+                </div>
+            </template>
+
+            <v-card-text class="py-0 w-100 d-flex justify-center" v-if="generatedToken && serverUrl">
+                <v-switch class="export-data-display-switch" color="secondary"
+                          :label="tt('Configuration')"
+                          v-model="showConfiguration"
+                          @click="showConfiguration = !showConfiguration">
+                    <template #prepend>
+                        <span>{{ tt('Token') }}</span>
+                    </template>
+                </v-switch>
+            </v-card-text>
+
+            <v-card-text>
+                <v-row>
+                    <v-col cols="12" md="12" v-if="!generatedToken">
+                        <v-text-field
+                            autocomplete="current-password"
+                            type="password"
+                            :disabled="generating"
+                            :label="tt('Current Password')"
+                            :placeholder="tt('Current Password')"
+                            v-model="currentPassword"
+                            @keyup.enter="generateToken"
+                        />
+                    </v-col>
+                    <v-col cols="12" md="12" v-if="generatedToken">
+                        <v-textarea :readonly="true" :rows="4" :value="generatedToken" v-if="!showConfiguration || !serverUrl" />
+                        <v-textarea :readonly="true" :rows="15" :value="mcpServerConfiguration" v-if="showConfiguration && serverUrl" />
+                    </v-col>
+                </v-row>
+            </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="ml-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 @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 { 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 currentPassword = ref<string>('');
+const generating = ref<boolean>(false);
+const showConfiguration = ref<boolean>(false);
+const serverUrl = ref<string>('');
+const generatedToken = ref<string>('');
+
+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 = '';
+    generating.value = false;
+    showConfiguration.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.generateMCPToken({
+        password: currentPassword.value
+    }).then(result => {
+        generating.value = false;
+        currentPassword.value = '';
+        serverUrl.value = result.mcpUrl;
+        generatedToken.value = result.token;
+    }).catch(error => {
+        generating.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function copy(): void {
+    if (showConfiguration.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>