add a special token type for MCP

src/views/desktop/user/settings/dialogs/UserGenerateMCPTokenDialog.vue

@@ -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>

src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue

@@ -68,6 +68,8 @@
                 <template #title>
                     <div class="d-flex align-center">
                         <span>{{ tt('Device & Sessions') }}</span>
+                        <v-btn class="ml-3" density="compact" color="default" variant="outlined"
+                               @click="generateMCPToken">{{ tt('Generate MCP token') }}</v-btn>
                         <v-btn density="compact" color="default" variant="text" size="24"
                                class="ml-2" :icon="true" :loading="loadingSession" @click="reloadSessions(false)">
                             <template #loader>
@@ -106,7 +108,7 @@
                         v-for="session in sessions">
                         <td class="text-sm">
                             <v-icon start :icon="session.icon"/>
-                            {{ tt(session.isCurrent ? 'Current' : 'Other Device') }}
+                            {{ session.deviceType === 'mcp' ? 'MCP' : (tt(session.isCurrent ? 'Current' : 'Other Device')) }}
                         </td>
                         <td class="text-sm">{{ session.deviceInfo }}</td>
                         <td class="text-sm">{{ session.lastSeenDateTime }}</td>
@@ -124,12 +126,14 @@
         </v-col>
     </v-row>
 
+    <user-generate-m-c-p-token-dialog ref="generateMCPTokenDialog" />
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
 </template>
 
 <script setup lang="ts">
 import { VTextField } from 'vuetify/components/VTextField';
+import UserGenerateMCPTokenDialog from '@/views/desktop/user/settings/dialogs/UserGenerateMCPTokenDialog.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
@@ -152,6 +156,7 @@ import {
     mdiTablet,
     mdiWatch,
     mdiTelevision,
+    mdiMagicStaff,
     mdiConsole,
     mdiDevices
 } from '@mdi/js';
@@ -167,6 +172,7 @@ class DesktopPageSessionInfo extends SessionInfo {
     }
 }
 
+type UserGenerateMCPTokenDialogType = InstanceType<typeof UserGenerateMCPTokenDialog>;
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 
@@ -178,6 +184,7 @@ const tokensStore = useTokensStore();
 
 const newPasswordInput = useTemplateRef<VTextField>('newPasswordInput');
 const confirmPasswordInput = useTemplateRef<VTextField>('confirmPasswordInput');
+const generateMCPTokenDialog = useTemplateRef<UserGenerateMCPTokenDialogType>('generateMCPTokenDialog');
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
@@ -229,6 +236,8 @@ function getTokenIcon(deviceType: string): string {
         return mdiTablet;
     } else if (deviceType === 'tv') {
         return mdiTelevision;
+    } else if (deviceType === 'mcp') {
+        return mdiMagicStaff;
     } else if (deviceType === 'cli') {
         return mdiConsole;
     } else {
@@ -288,6 +297,12 @@ function updatePassword(): void {
     });
 }
 
+function generateMCPToken(): void {
+    generateMCPTokenDialog.value?.open().then(() => {
+        reloadSessions(true);
+    });
+}
+
 function reloadSessions(silent?: boolean): void {
     loadingSession.value = true;
 

src/views/mobile/users/SessionListPage.vue

@@ -24,7 +24,7 @@
         <f7-list strong inset dividers media-list class="margin-top" v-else-if="!loading">
             <f7-list-item class="list-item-media-valign-middle" swipeout
                           :id="session.domId"
-                          :title="tt(session.isCurrent ? 'Current' : 'Other Device')"
+                          :title="session.deviceType === 'mcp' ? 'MCP' : (tt(session.isCurrent ? 'Current' : 'Other Device'))"
                           :text="session.deviceInfo"
                           :key="session.tokenId"
                           v-for="session in sessions">
@@ -107,6 +107,8 @@ function getTokenIcon(deviceType: string): string {
         return 'device_tablet_portrait';
     } else if (deviceType === 'tv') {
         return 'tv';
+    } else if (deviceType === 'mcp') {
+        return 'wand_stars';
     } else if (deviceType === 'cli') {
         return 'chevron_left_slash_chevron_right';
     } else {