add user settings page

src/components/desktop/ConfirmDialog.vue

@@ -0,0 +1,90 @@
+<template>
+    <v-dialog persistent min-width="320" width="auto" v-model="showState">
+        <v-card>
+            <v-toolbar :color="finalColor">
+                <v-toolbar-title>{{ titleContent }}</v-toolbar-title>
+            </v-toolbar>
+            <v-card-text v-if="textContent" class="pa-4">{{ textContent }}</v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                <v-btn :color="finalColor" @click="confirm">{{ $t('OK') }}</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import { isString } from '@/lib/common.js';
+
+export default {
+    props: [
+        'show',
+        'color',
+        'title',
+        'text'
+    ],
+    emits: [
+        'update:show'
+    ],
+    expose: [
+        'open'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            showState: self.show,
+            titleContent: self.title || self.$t('global.app.title'),
+            textContent: self.text || '',
+            finalColor: self.color || 'primary',
+            resolve: null,
+            reject: null
+        }
+    },
+    watch: {
+        'show': function (newValue) {
+            this.$emit('update:show', newValue);
+        }
+    },
+    methods: {
+        open(title, text, options) {
+            this.showState = true;
+
+            if (isString(text)) {
+                this.titleContent = this.$t(title);
+                this.textContent = this.$t(text);
+            } else {
+                this.titleContent = this.$t('global.app.title');
+                this.textContent = this.$t(title);
+                options = text;
+            }
+
+            if (options && options.color) {
+                this.finalColor = options.color || 'primary';
+            }
+
+            return new Promise((resolve, reject) => {
+                this.resolve = resolve;
+                this.reject = reject;
+            })
+        },
+        confirm() {
+            if (this.resolve) {
+                this.resolve();
+            }
+
+            this.showState = false;
+            this.$emit('update:show', false);
+        },
+        cancel() {
+            if (this.reject) {
+                this.reject();
+            }
+
+            this.showState = false;
+            this.$emit('update:show', false);
+        }
+    }
+}
+</script>

src/desktop-main.js

@@ -5,6 +5,7 @@ import { createI18n } from 'vue-i18n';
 import { createVuetify } from 'vuetify';
 import { VApp } from 'vuetify/components/VApp';
 import { VAvatar } from 'vuetify/components/VAvatar';
+import { VAutocomplete } from 'vuetify/components/VAutocomplete';
 import { VBtn } from 'vuetify/components/VBtn';
 import { VCard, VCardActions, VCardItem, VCardSubtitle, VCardText, VCardTitle } from 'vuetify/components/VCard';
 import { VChip } from 'vuetify/components/VChip';
@@ -15,6 +16,7 @@ import { VContainer, VCol, VRow, VSpacer } from 'vuetify/components/VGrid';
 import { VIcon } from 'vuetify/components/VIcon';
 import { VImg } from 'vuetify/components/VImg';
 import { VInput } from 'vuetify/components/VInput';
+import { VLabel } from 'vuetify/components/VLabel';
 import { VList, VListGroup, VListImg, VListItem, VListItemAction, VListItemMedia, VListItemSubtitle, VListItemTitle, VListSubheader } from 'vuetify/components/VList';
 import { VMenu } from 'vuetify/components/VMenu';
 import { VOverlay } from 'vuetify/components/VOverlay';
@@ -27,6 +29,8 @@ import { VSnackbar } from 'vuetify/components/VSnackbar';
 import { VTabs, VTab } from 'vuetify/components/VTabs';
 import { VTable } from 'vuetify/components/VTable';
 import { VTextField } from 'vuetify/components/VTextField';
+import { VToolbar } from 'vuetify/components/VToolbar';
+import { VTooltip } from 'vuetify/components/VTooltip';
 import { VWindow, VWindowItem } from 'vuetify/components/VWindow';
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
 import 'vuetify/styles';
@@ -51,6 +55,7 @@ import {
 } from '@/lib/i18n.js';
 
 import AmountInput from '@/components/desktop/AmountInput.vue';
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 
 import '@/styles/desktop/template/base/libs/vuetify/_index.scss';
 import '@/styles/desktop/template/template/index.scss';
@@ -68,6 +73,7 @@ const vuetify = createVuetify({
     components: {
         VApp,
         VAvatar,
+        VAutocomplete,
         VBtn,
         VCard,
         VCardActions,
@@ -86,6 +92,7 @@ const vuetify = createVuetify({
         VIcon,
         VImg,
         VInput,
+        VLabel,
         VList,
         VListGroup,
         VListImg,
@@ -107,6 +114,8 @@ const vuetify = createVuetify({
         VTab,
         VTable,
         VTextField,
+        VToolbar,
+        VTooltip,
         VWindow,
         VWindowItem
     },
@@ -193,6 +202,9 @@ const vuetify = createVuetify({
             color: 'primary',
             hideDetails: 'auto'
         },
+        VToolbar: {
+            color: 'primary'
+        },
         VTooltip: {
             location: 'top'
         }
@@ -310,6 +322,7 @@ app.component('PerfectScrollbar', PerfectScrollbar);
 app.component('VueDatePicker', VueDatePicker);
 
 app.component('AmountInput', AmountInput);
+app.component('ConfirmDialog', ConfirmDialog);
 
 app.config.globalProperties.$version = version.getVersion();
 app.config.globalProperties.$buildTime = version.getBuildTime();

src/lib/ui.js

@@ -5,3 +5,16 @@ export function getSystemTheme() {
         return 'light';
     }
 }
+
+export function startDownloadFile(fileName, fileData) {
+    const dataObjectUrl = URL.createObjectURL(fileData);
+    const dataLink = document.createElement('a');
+
+    dataLink.style.display = 'none';
+    dataLink.href = dataObjectUrl;
+    dataLink.setAttribute('download', fileName);
+
+    document.body.appendChild(dataLink);
+
+    dataLink.click();
+}

src/locales/en.js

@@ -692,12 +692,16 @@ export default {
     },
     'OK': 'OK',
     'Cancel': 'Cancel',
+    'Operation': 'Operation',
     'Close': 'Close',
     'Submit': 'Submit',
     'Add': 'Add',
     'Apply': 'Apply',
     'Save': 'Save',
+    'Save changes': 'Save changes',
     'Update': 'Update',
+    'Refresh': 'Refresh',
+    'Clear': 'Clear',
     'None': 'None',
     'Not Specified': 'Not Specified',
     'No results': 'No results',
@@ -711,6 +715,7 @@ export default {
     'Enabled': 'Enabled',
     'Disable': 'Disable',
     'Disabled': 'Disabled',
+    'Copy': 'Copy',
     'Visible': 'Visible',
     'Version': 'Version',
     'Edit': 'Edit',
@@ -743,6 +748,7 @@ export default {
     'Sort By': 'Sort By',
     'User': 'User',
     'Application': 'Application',
+    'Danger Zone': 'Danger Zone',
     'Details': 'Details',
     'Accounts': 'Accounts',
     'Statistics': 'Statistics',
@@ -790,6 +796,8 @@ export default {
     'Create an account': 'Create an account',
     'Username cannot be empty': 'Username cannot be empty',
     'Password cannot be empty': 'Password cannot be empty',
+    'Current password cannot be empty': 'Current password cannot be empty',
+    'New password cannot be empty': 'New password cannot be empty',
     'Confirmation password cannot be empty': 'Confirmation password cannot be empty',
     'Password and confirmation password do not match': 'Password and confirmation password do not match',
     'Email address cannot be empty': 'Email address cannot be empty',
@@ -797,6 +805,10 @@ export default {
     'Default currency cannot be empty': 'Default currency cannot be empty',
     'Unable to login': 'Unable to login',
     'Two-Factor Authentication': 'Two-Factor Authentication',
+    'Two-factor authentication is not enabled yet.': 'Two-factor authentication is not enabled yet.',
+    'Two-factor authentication has been enabled.': 'Two-factor authentication has been enabled.',
+    'Disable two-factor authentication': 'Disable two-factor authentication',
+    'Enable two-factor authentication': 'Enable two-factor authentication',
     'Passcode': 'Passcode',
     'Backup Code': 'Backup Code',
     'Verify': 'Verify',
@@ -953,6 +965,7 @@ export default {
     'Name': 'Name',
     'Filter Accounts': 'Filter Accounts',
     'Filter Transaction Categories': 'Filter Transaction Categories',
+    'User Settings': 'User Settings',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Theme': 'Theme',
@@ -980,7 +993,13 @@ export default {
     'Unable to sign up': 'Unable to sign up',
     'User registration is disabled': 'User registration is disabled',
     'Unable to get user profile': 'Unable to get user profile',
+    'Basic': 'Basic',
+    'Security': 'Security',
+    'Basic Settings': 'Basic Settings',
+    'Security Settings': 'Security Settings',
+    'Two-Factor Authentication Settings': 'Two-Factor Authentication Settings',
     'Current Password': 'Current Password',
+    'New Password': 'New Password',
     'Modify Password': 'Modify Password',
     'Please enter your current password when modifying your password': 'Please enter your current password when modifying your password',
     'Nothing has been modified': 'Nothing has been modified',
@@ -990,6 +1009,7 @@ export default {
     'Unable to get user statistics data': 'Unable to get user statistics data',
     'Export Data': 'Export Data',
     'Clear User Data': 'Clear User Data',
+    'Export all data to csv file.': 'Export all data to csv file.',
     'Are you sure you want to export all data to csv file?': 'Are you sure you want to export all data to csv file?',
     'It may take a long time, please wait for a few minutes.': 'It may take a long time, please wait for a few minutes.',
     'Unable to get exported user data': 'Unable to get exported user data',
@@ -999,6 +1019,8 @@ export default {
     'All user data has been cleared': 'All user data has been cleared',
     'Unable to clear user data': 'Unable to clear user data',
     'Device & Sessions': 'Device & Sessions',
+    'Device Info': 'Device Info',
+    'Last Activity Time': 'Last Activity Time',
     'Logout All': 'Logout All',
     'Unable to get session list': 'Unable to get session list',
     'Session list is up to date': 'Session list is up to date',
@@ -1073,6 +1095,7 @@ export default {
     'Please use two factor authentication app scan the below qrcode and input current passcode': 'Please use two factor authentication app scan the below qrcode and input current passcode',
     'Please enter your current password when disable two factor authentication': 'Please enter your current password when disable two factor authentication',
     'Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.': 'Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.',
+    'Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.': 'Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.',
     'Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.': 'Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.',
     'Backup codes copied': 'Backup codes copied',
     'Two factor authentication has been disabled': 'Two factor authentication has been disabled',

src/locales/zh_Hans.js

@@ -692,12 +692,16 @@ export default {
     },
     'OK': '确定',
     'Cancel': '取消',
+    'Operation': '操作',
     'Close': '关闭',
     'Submit': '提交',
     'Add': '添加',
     'Apply': '应用',
     'Save': '保存',
+    'Save changes': '保存修改',
     'Update': '更新',
+    'Refresh': '刷新',
+    'Clear': '清除',
     'None': '无',
     'Not Specified': '未指定',
     'No results': '无结果',
@@ -711,6 +715,7 @@ export default {
     'Enabled': '启用',
     'Disable': '禁用',
     'Disabled': '禁用',
+    'Copy': '复制',
     'Visible': '可见',
     'Version': '版本',
     'Edit': '编辑',
@@ -743,6 +748,7 @@ export default {
     'Sort By': '排序方式',
     'User': '用户',
     'Application': '应用',
+    'Danger Zone': '危险区域',
     'Details': '详情',
     'Accounts': '账户',
     'Statistics': '统计',
@@ -790,6 +796,8 @@ export default {
     'Create an account': '创建新账号',
     'Username cannot be empty': '用户名不能为空',
     'Password cannot be empty': '密码不能为空',
+    'Current password cannot be empty': '当前密码不能为空',
+    'New password cannot be empty': '新密码不能为空',
     'Confirmation password cannot be empty': '确认密码不能为空',
     'Password and confirmation password do not match': '密码和确认密码不匹配',
     'Email address cannot be empty': '电子邮箱地址不能为空',
@@ -797,6 +805,10 @@ export default {
     'Default currency cannot be empty': '默认货币不能为空',
     'Unable to login': '无法登录',
     'Two-Factor Authentication': '两步验证',
+    'Two-factor authentication is not enabled yet.': '两步验证没有启用。',
+    'Two-factor authentication has been enabled.': '两步验证已经启用。',
+    'Disable two-factor authentication': '禁用两步验证',
+    'Enable two-factor authentication': '启用两步验证',
     'Passcode': '验证码',
     'Backup Code': '备用码',
     'Verify': '验证',
@@ -953,6 +965,7 @@ export default {
     'Name': '名称',
     'Filter Accounts': '过滤账户',
     'Filter Transaction Categories': '过滤交易类型',
+    'User Settings': '用户设置',
     'User Profile': '用户信息',
     'Language': '语言',
     'Theme': '主题',
@@ -980,7 +993,13 @@ export default {
     'Unable to sign up': '无法注册',
     'User registration is disabled': '用户注册已禁用',
     'Unable to get user profile': '无法获取用户信息',
+    'Basic': '基本',
+    'Security': '安全',
+    'Basic Settings': '基本设置',
+    'Security Settings': '安全设置',
+    'Two-Factor Authentication Settings': '两步验证设置',
     'Current Password': '当前密码',
+    'New Password': '新密码',
     'Modify Password': '修改密码',
     'Please enter your current password when modifying your password': '修改密码时请输入您的当前密码',
     'Nothing has been modified': '没有修改的项目',
@@ -990,6 +1009,7 @@ export default {
     'Unable to get user statistics data': '无法获取用户统计数据',
     'Export Data': '导出数据',
     'Clear User Data': '清除用户数据',
+    'Export all data to csv file.': '导出所有数据到 csv 文件。',
     'Are you sure you want to export all data to csv file?': '您确定要导出所有数据到 csv 文件？',
     'It may take a long time, please wait for a few minutes.': '这可能花费一些时间，请稍等几分钟。',
     'Unable to get exported user data': '无法获取导出的用户数据',
@@ -999,6 +1019,8 @@ export default {
     'All user data has been cleared': '用户所有数据已经清空',
     'Unable to clear user data': '无法清除用户数据',
     'Device & Sessions': '设备和会话',
+    'Device Info': '设备信息',
+    'Last Activity Time': '最后活跃时间',
     'Logout All': '注销全部',
     'Unable to get session list': '无法获取会话列表',
     'Session list is up to date': '会话列表已是最新',
@@ -1073,6 +1095,7 @@ export default {
     'Please use two factor authentication app scan the below qrcode and input current passcode': '请使用两步验证应用扫描下方的二维码并输入当前的验证码',
     'Please enter your current password when disable two factor authentication': '禁用两步验证时需要输入您的当前密码',
     'Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.': '重新生成两步验证备用码时需要输入您的当前密码。如果您重新生成备用码，之前的备用码将失效。',
+    'Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.': '禁用两步验证或重新生成两步验证备用码时需要输入您的当前密码。如果您重新生成备用码，之前的备用码将失效。',
     'Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.': '请将备用码复制到安全的地方，下列备用码只会展示一次。如果这些备用码丢失，您可以随时重新生成备用码。',
     'Backup codes copied': '备用码已复制',
     'Two factor authentication has been disabled': '两步验证已经禁用',

src/views/desktop/MainLayout.vue

@@ -121,7 +121,7 @@
                                         <template #prepend>
                                             <v-icon class="me-2" :icon="icons.profile" size="22"/>
                                         </template>
-                                        <v-list-item-title>{{ $t('User Profile') }}</v-list-item-title>
+                                        <v-list-item-title>{{ $t('User Settings') }}</v-list-item-title>
                                     </v-list-item>
                                     <v-list-item to="/app/settings">
                                         <template #prepend>
@@ -191,7 +191,7 @@ import {
     mdiWeatherSunny,
     mdiWeatherNight,
     mdiAccount,
-    mdiAccountOutline,
+    mdiAccountCogOutline,
     mdiLogout
 } from '@mdi/js';
 
@@ -222,7 +222,7 @@ export default {
                 themeLight: mdiWeatherSunny,
                 themeDark: mdiWeatherNight,
                 user: mdiAccount,
-                profile: mdiAccountOutline,
+                profile: mdiAccountCogOutline,
                 logout: mdiLogout
             }
         }

src/views/desktop/user/UserSettingsPage.vue

@@ -1,13 +1,74 @@
 <template>
-    <v-row class="match-height">
+    <div>
-        user settings
+        <v-tabs show-arrows class="text-uppercase" v-model="activeTab">
-    </v-row>
+            <v-tab value="basicSetting">
+                <v-icon size="20" start :icon="icons.basicSetting"/>
+                {{ $t('Basic') }}
+            </v-tab>
+            <v-tab value="securitySetting">
+                <v-icon size="20" start :icon="icons.securitySetting"/>
+                {{ $t('Security') }}
+            </v-tab>
+            <v-tab value="twoFactorSetting">
+                <v-icon size="20" start :icon="icons.twoFactorSetting"/>
+                {{ $t('Two-Factor Authentication') }}
+            </v-tab>
+            <v-tab value="dataManagementSetting">
+                <v-icon size="20" start :icon="icons.dataManagementSetting"/>
+                {{ $t('Data Management') }}
+            </v-tab>
+        </v-tabs>
+        <v-divider />
+        <v-window class="mt-5 disable-tab-transition" v-model="activeTab">
+            <v-window-item value="basicSetting">
+                <user-basic-setting-tab/>
+            </v-window-item>
+
+            <v-window-item value="securitySetting">
+                <user-security-setting-tab/>
+            </v-window-item>
+
+            <v-window-item value="twoFactorSetting">
+                <user-two-factor-auth-setting-tab/>
+            </v-window-item>
+
+            <v-window-item value="dataManagementSetting">
+                <user-data-management-setting-tab/>
+            </v-window-item>
+        </v-window>
+    </div>
 </template>
 
 <script>
-export default {
+import UserBasicSettingTab from "./settings/UserBasicSettingTab.vue";
-    created() {
+import UserSecuritySettingTab from "./settings/UserSecuritySettingTab.vue";
+import UserTwoFactorAuthSettingTab from "./settings/UserTwoFactorAuthSettingTab.vue";
+import UserDataManagementSettingTab from "./settings/UserDataManagementSettingTab.vue";
 
+import {
+    mdiAccountOutline,
+    mdiLockOpenOutline,
+    mdiOnepassword,
+    mdiDatabaseCogOutline
+} from '@mdi/js';
+
+export default {
+    components: {
+        UserBasicSettingTab,
+        UserSecuritySettingTab,
+        UserTwoFactorAuthSettingTab,
+        UserDataManagementSettingTab
+    },
+    data() {
+        return {
+            activeTab: 'basicSetting',
+            icons: {
+                basicSetting: mdiAccountOutline,
+                securitySetting: mdiLockOpenOutline,
+                twoFactorSetting: mdiOnepassword,
+                dataManagementSetting: mdiDatabaseCogOutline
+            }
+        };
     }
 }
 </script>

src/views/desktop/user/settings/UserBasicSettingTab.vue

@@ -0,0 +1,462 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': loading || saving }">
+                <template #title>
+                    <span>{{ $t('Basic Settings') }}</span>
+                    <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                </template>
+
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    type="text"
+                                    autocomplete="nickname"
+                                    clearable
+                                    :disabled="loading || saving"
+                                    :label="$t('Nickname')"
+                                    :placeholder="$t('Your nickname')"
+                                    v-model="newProfile.nickname"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    type="email"
+                                    autocomplete="email"
+                                    clearable
+                                    :disabled="loading || saving"
+                                    :label="$t('E-mail')"
+                                    :placeholder="$t('Your email address')"
+                                    v-model="newProfile.email"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="name"
+                                    item-value="id"
+                                    :disabled="loading || saving"
+                                    :label="$t('Default Account')"
+                                    :placeholder="$t('Default Account')"
+                                    :items="allVisibleAccounts"
+                                    v-model="newProfile.defaultAccountId"
+                                >
+                                    <template v-slot:selection="{ item }">
+                                        <v-label>{{ !item || item.value === 0 || item.value === '0' ? $t('Not Specified') : item.title }}</v-label>
+                                    </template>
+
+                                    <template v-slot:no-data>
+                                        <div class="px-4">{{ $t('No results') }}</div>
+                                    </template>
+                                </v-select>
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="name"
+                                    item-value="value"
+                                    :disabled="loading || saving"
+                                    :label="$t('Editable Transaction Scope')"
+                                    :placeholder="$t('Editable Transaction Scope')"
+                                    :items="allTransactionEditScopeTypes"
+                                    v-model="newProfile.transactionEditScope"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-divider />
+
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="code"
+                                    :disabled="loading || saving"
+                                    :label="$t('Language')"
+                                    :placeholder="$t('Language')"
+                                    :items="allLanguages"
+                                    v-model="newProfile.language"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-autocomplete
+                                    item-title="displayName"
+                                    item-value="code"
+                                    :disabled="loading || saving"
+                                    :label="$t('Default Currency')"
+                                    :placeholder="$t('Default Currency')"
+                                    :items="allCurrencies"
+                                    v-model="newProfile.defaultCurrency"
+
+                                >
+                                    <template v-slot:no-data>
+                                        <div class="px-4">{{ $t('No results') }}</div>
+                                    </template>
+                                </v-autocomplete>
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    :disabled="loading || saving"
+                                    :label="$t('First Day of Week')"
+                                    :placeholder="$t('First Day of Week')"
+                                    :items="allWeekDays"
+                                    v-model="newProfile.firstDayOfWeek"
+                                />
+                            </v-col>
+                        </v-row>
+
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    :disabled="loading || saving"
+                                    :label="$t('Long Date Format')"
+                                    :placeholder="$t('Long Date Format')"
+                                    :items="allLongDateFormats"
+                                    v-model="newProfile.longDateFormat"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    :disabled="loading || saving"
+                                    :label="$t('Short Date Format')"
+                                    :placeholder="$t('Short Date Format')"
+                                    :items="allShortDateFormats"
+                                    v-model="newProfile.shortDateFormat"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    :disabled="loading || saving"
+                                    :label="$t('Long Time Format')"
+                                    :placeholder="$t('Long Time Format')"
+                                    :items="allLongTimeFormats"
+                                    v-model="newProfile.longTimeFormat"
+                                />
+                            </v-col>
+
+                            <v-col cols="12" md="6">
+                                <v-select
+                                    item-title="displayName"
+                                    item-value="type"
+                                    :disabled="loading || saving"
+                                    :label="$t('Short Time Format')"
+                                    :placeholder="$t('Short Time Format')"
+                                    :items="allShortTimeFormats"
+                                    v-model="newProfile.shortTimeFormat"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-card-text class="d-flex flex-wrap gap-4">
+                        <v-btn :disabled="saving" @click="save">
+                            {{ $t('Save changes') }}
+                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="saving"></v-progress-circular>
+                        </v-btn>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <confirm-dialog ref="confirmDialog"/>
+
+    <v-snackbar v-model="showSnackbar">
+        {{ snackbarMessage }}
+
+        <template #actions>
+            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/index.js';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useAccountsStore } from '@/stores/account.js';
+
+import datetimeConstants from '@/consts/datetime.js';
+import { getNameByKeyValue } from '@/lib/common.js';
+
+export default {
+    data() {
+        const self = this;
+        const defaultFirstDayOfWeekName = self.$locale.getDefaultFirstDayOfWeek();
+        const defaultFirstDayOfWeek = datetimeConstants.allWeekDays[defaultFirstDayOfWeekName] ? datetimeConstants.allWeekDays[defaultFirstDayOfWeekName].type : datetimeConstants.defaultFirstDayOfWeek;
+
+        return {
+            newProfile: {
+                email: ' ',
+                nickname: self.$t('Your nickname'),
+                defaultAccountId: 0,
+                transactionEditScope: 1,
+                language: '',
+                defaultCurrency: self.$locale.getDefaultCurrency(),
+                firstDayOfWeek: defaultFirstDayOfWeek,
+                longDateFormat: 0,
+                shortDateFormat: 0,
+                longTimeFormat: 0,
+                shortTimeFormat: 0
+            },
+            oldProfile: {
+                email: '',
+                nickname: self.$t('Your nickname'),
+                defaultAccountId: 0,
+                transactionEditScope: 1,
+                language: '',
+                defaultCurrency: self.$locale.getDefaultCurrency(),
+                firstDayOfWeek: defaultFirstDayOfWeek,
+                longDateFormat: 0,
+                shortDateFormat: 0,
+                longTimeFormat: 0,
+                shortTimeFormat: 0
+            },
+            loading: true,
+            saving: false,
+            showSnackbar: false,
+            snackbarMessage: ''
+        };
+    },
+    computed: {
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useAccountsStore),
+        allLanguages() {
+            const ret = [];
+            const allLanguageInfo = this.$locale.getAllLanguageInfos();
+
+            ret.push({
+                code: '',
+                displayName: this.$t('System Default')
+            });
+
+            for (let code in allLanguageInfo) {
+                if (!Object.prototype.hasOwnProperty.call(allLanguageInfo, code)) {
+                    continue;
+                }
+
+                const languageInfo = allLanguageInfo[code];
+
+                ret.push({
+                    code: code,
+                    displayName: languageInfo.displayName
+                });
+            }
+
+            return ret;
+        },
+        allCurrencies() {
+            return this.$locale.getAllCurrencies();
+        },
+        allAccounts() {
+            return this.accountsStore.allPlainAccounts;
+        },
+        allVisibleAccounts() {
+            return this.accountsStore.allVisiblePlainAccounts;
+        },
+        allWeekDays() {
+            return this.$locale.getAllWeekDays();
+        },
+        allLongDateFormats() {
+            return this.$locale.getAllLongDateFormats();
+        },
+        allShortDateFormats() {
+            return this.$locale.getAllShortDateFormats();
+        },
+        allLongTimeFormats() {
+            return this.$locale.getAllLongTimeFormats();
+        },
+        allShortTimeFormats() {
+            return this.$locale.getAllShortTimeFormats();
+        },
+        allTransactionEditScopeTypes() {
+            const self = this;
+
+            return [{
+                value: 0,
+                name: self.$t('None')
+            }, {
+                value: 1,
+                name: self.$t('All')
+            }, {
+                value: 2,
+                name: self.$t('Today or later')
+            }, {
+                value: 3,
+                name: self.$t('Recent 24 hours or later')
+            }, {
+                value: 4,
+                name: self.$t('This week or later')
+            }, {
+                value: 5,
+                name: self.$t('This month or later')
+            }, {
+                value: 6,
+                name: self.$t('This year or later')
+            }];
+        },
+        inputIsNotChanged() {
+            return !!this.inputIsNotChangedProblemMessage;
+        },
+        inputIsInvalid() {
+            return !!this.inputInvalidProblemMessage;
+        },
+        extendInputIsInvalid() {
+            return !!this.extendInputInvalidProblemMessage;
+        },
+        langAndRegionInputIsInvalid() {
+            return !!this.langAndRegionInputInvalidProblemMessage;
+        },
+        inputIsNotChangedProblemMessage() {
+            if (!this.newProfile.email && !this.newProfile.nickname) {
+                return 'Nothing has been modified';
+            } else if (this.newProfile.email === this.oldProfile.email &&
+                this.newProfile.nickname === this.oldProfile.nickname &&
+                this.newProfile.defaultAccountId === this.oldProfile.defaultAccountId &&
+                this.newProfile.transactionEditScope === this.oldProfile.transactionEditScope &&
+                this.newProfile.language === this.oldProfile.language &&
+                this.newProfile.defaultCurrency === this.oldProfile.defaultCurrency &&
+                this.newProfile.firstDayOfWeek === this.oldProfile.firstDayOfWeek &&
+                this.newProfile.longDateFormat === this.oldProfile.longDateFormat &&
+                this.newProfile.shortDateFormat === this.oldProfile.shortDateFormat &&
+                this.newProfile.longTimeFormat === this.oldProfile.longTimeFormat &&
+                this.newProfile.shortTimeFormat === this.oldProfile.shortTimeFormat) {
+                return 'Nothing has been modified';
+            } else {
+                return null;
+            }
+        },
+        inputInvalidProblemMessage() {
+            if (!this.newProfile.email) {
+                return 'Email address cannot be empty';
+            } else if (!this.newProfile.nickname) {
+                return 'Nickname cannot be empty';
+            } else if (!this.newProfile.defaultCurrency) {
+                return 'Default currency cannot be empty';
+            } else {
+                return null;
+            }
+        },
+        extendInputInvalidProblemMessage() {
+            return null;
+        },
+        langAndRegionInputInvalidProblemMessage() {
+            if (!this.newProfile.defaultCurrency) {
+                return 'Default currency cannot be empty';
+            } else {
+                return null;
+            }
+        }
+    },
+    created() {
+        const self = this;
+
+        self.loading = true;
+
+        const promises = [
+            self.accountsStore.loadAllAccounts({ force: false }),
+            self.userStore.getCurrentUserProfile()
+        ];
+
+        Promise.all(promises).then(responses => {
+            const profile = responses[1];
+            self.setCurrentUserProfile(profile);
+            self.loading = false;
+        }).catch(error => {
+            self.oldProfile.nickname = '';
+            self.oldProfile.email = '';
+            self.newProfile.nickname = '';
+            self.newProfile.email = '';
+            self.loading = false;
+
+            if (!error.processed) {
+                self.showSnackbarMessage(self.$tError(error.message || error));
+            }
+        });
+    },
+    methods: {
+        save() {
+            const self = this;
+
+            const problemMessage = self.inputIsNotChangedProblemMessage || self.inputInvalidProblemMessage || self.extendInputInvalidProblemMessage || self.langAndRegionInputInvalidProblemMessage;
+
+            if (problemMessage) {
+                self.showSnackbarMessage(self.$t(problemMessage));
+                return;
+            }
+
+            self.saving = true;
+
+            self.rootStore.updateUserProfile({
+                profile: self.newProfile
+            }).then(response => {
+                self.saving = false;
+
+                if (response.user) {
+                    self.setCurrentUserProfile(response.user);
+
+                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
+                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+                }
+
+                self.showSnackbarMessage(self.$t('Your profile has been successfully updated'));
+            }).catch(error => {
+                self.saving = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        getNameByKeyValue(src, value, keyField, nameField, defaultName) {
+            return getNameByKeyValue(src, value, keyField, nameField, defaultName);
+        },
+        setCurrentUserProfile(profile) {
+            this.oldProfile.email = profile.email;
+            this.oldProfile.nickname = profile.nickname;
+            this.oldProfile.defaultAccountId = profile.defaultAccountId;
+            this.oldProfile.transactionEditScope = profile.transactionEditScope;
+            this.oldProfile.language = profile.language;
+            this.oldProfile.defaultCurrency = profile.defaultCurrency;
+            this.oldProfile.firstDayOfWeek = profile.firstDayOfWeek;
+            this.oldProfile.longDateFormat = profile.longDateFormat;
+            this.oldProfile.shortDateFormat = profile.shortDateFormat;
+            this.oldProfile.longTimeFormat = profile.longTimeFormat;
+            this.oldProfile.shortTimeFormat = profile.shortTimeFormat;
+
+            this.newProfile.email = this.oldProfile.email
+            this.newProfile.nickname = this.oldProfile.nickname;
+            this.newProfile.defaultAccountId = this.oldProfile.defaultAccountId;
+            this.newProfile.transactionEditScope = this.oldProfile.transactionEditScope;
+            this.newProfile.language = this.oldProfile.language;
+            this.newProfile.defaultCurrency = this.oldProfile.defaultCurrency;
+            this.newProfile.firstDayOfWeek = this.oldProfile.firstDayOfWeek;
+            this.newProfile.longDateFormat = this.oldProfile.longDateFormat;
+            this.newProfile.shortDateFormat = this.oldProfile.shortDateFormat;
+            this.newProfile.longTimeFormat = this.oldProfile.longTimeFormat;
+            this.newProfile.shortTimeFormat = this.oldProfile.shortTimeFormat;
+        },
+        showSnackbarMessage(message) {
+            this.showSnackbar = true;
+            this.snackbarMessage = message;
+        }
+    }
+};
+</script>

src/views/desktop/user/settings/UserDataManagementSettingTab.vue

@@ -0,0 +1,301 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': loadingDataStatistics }">
+                <template #title>
+                    <span>{{ $t('Data Management') }}</span>
+                    <v-btn density="compact" color="default" variant="text"
+                           class="ml-2" :icon="true"
+                           v-if="!loadingDataStatistics" @click="reloadUserDataStatistics">
+                        <v-icon :icon="icons.refresh" size="24" />
+                        <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                    </v-btn>
+                    <v-progress-circular indeterminate size="24" class="ml-2" v-if="loadingDataStatistics"></v-progress-circular>
+                </template>
+
+                <v-card-text>
+                    <v-row>
+                        <v-col cols="6" sm="3">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="info" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.transactions"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Transaction') }}</span>
+                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-' }}</span>
+                                </div>
+                            </div>
+                        </v-col>
+                        <v-col cols="6" sm="3">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="primary" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.accounts"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Accounts') }}</span>
+                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalAccountCount : '-' }}</span>
+                                </div>
+                            </div>
+                        </v-col>
+                        <v-col cols="6" sm="3">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="success" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.categories"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Transaction Categories') }}</span>
+                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-' }}</span>
+                                </div>
+                            </div>
+                        </v-col>
+                        <v-col cols="6" sm="3">
+                            <div class="d-flex align-center">
+                                <div class="me-3">
+                                    <v-avatar rounded color="secondary" size="42" class="elevation-1">
+                                        <v-icon size="24" :icon="icons.tags"/>
+                                    </v-avatar>
+                                </div>
+
+                                <div class="d-flex flex-column">
+                                    <span class="text-caption">{{ $t('Transaction Tags') }}</span>
+                                    <span class="text-h6">{{ displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-' }}</span>
+                                </div>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': exportingData }" :title="$t('Export Data')">
+                <v-card-text>
+                    <span class="text-subtitle-1">{{ $t('Export all data to csv file.') }}&nbsp;{{ $t('It may take a long time, please wait for a few minutes.') }}</span>
+                </v-card-text>
+
+                <v-card-text class="d-flex flex-wrap gap-4">
+                    <v-btn :disabled="exportingData" @click="exportData">
+                        {{ $t('Export Data') }}
+                        <v-progress-circular indeterminate size="24" class="ml-2" v-if="exportingData"></v-progress-circular>
+                    </v-btn>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': clearingData }">
+                <template #title>
+                    <span class="text-error">{{ $t('Danger Zone') }}</span>
+                </template>
+
+                <v-form>
+                    <v-card-text class="py-0">
+                    <span class="text-subtitle-1 text-error">
+                        <v-icon :icon="icons.alert"/>
+                        {{ $t('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please input your current password to confirm.') }}
+                    </span>
+                    </v-card-text>
+
+                    <v-card-text class="pb-0">
+                        <v-row class="mb-3">
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    ref="currentPasswordInput"
+                                    autocomplete="current-password"
+                                    clearable variant="underlined"
+                                    color="error"
+                                    :disabled="clearingData"
+                                    :placeholder="$t('Current Password')"
+                                    :type="isCurrentPasswordVisible ? 'text' : 'password'"
+                                    :append-inner-icon="isCurrentPasswordVisible ? icons.eyeSlash : icons.eye"
+                                    v-model="currentPasswordForClearData"
+                                    @click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
+                                    @keyup.enter="clearData"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-card-text class="d-flex flex-wrap gap-4">
+                        <v-btn color="error" :disabled="clearingData" @click="clearData">
+                            {{ $t('Clear User Data') }}
+                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="clearingData"></v-progress-circular>
+                        </v-btn>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <confirm-dialog ref="confirmDialog"/>
+
+    <v-snackbar v-model="showSnackbar">
+        {{ snackbarMessage }}
+
+        <template #actions>
+            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/index.js';
+import { useUserStore } from '@/stores/user.js';
+
+import { appendThousandsSeparator } from '@/lib/common.js';
+import { startDownloadFile } from '@/lib/ui.js';
+
+import {
+    mdiRefresh,
+    mdiListBoxOutline,
+    mdiCreditCardOutline,
+    mdiViewDashboardOutline,
+    mdiTagOutline,
+    mdiAlert,
+    mdiEyeOutline,
+    mdiEyeOffOutline
+} from '@mdi/js';
+
+export default {
+    data() {
+        return {
+            loadingDataStatistics: true,
+            dataStatistics: null,
+            exportingData: false,
+            currentPasswordForClearData: '',
+            isCurrentPasswordVisible: false,
+            clearingData: false,
+            showSnackbar: false,
+            snackbarMessage: '',
+            icons: {
+                refresh: mdiRefresh,
+                transactions: mdiListBoxOutline,
+                accounts: mdiCreditCardOutline,
+                categories: mdiViewDashboardOutline,
+                tags: mdiTagOutline,
+                alert: mdiAlert,
+                eye: mdiEyeOutline,
+                eyeSlash: mdiEyeOffOutline
+            }
+        }
+    },
+    computed: {
+        ...mapStores(useRootStore, useUserStore),
+        displayDataStatistics() {
+            const self = this;
+
+            if (!self.dataStatistics) {
+                return null;
+            }
+
+            return {
+                totalAccountCount: appendThousandsSeparator(self.dataStatistics.totalAccountCount),
+                totalTransactionCategoryCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCategoryCount),
+                totalTransactionTagCount: appendThousandsSeparator(self.dataStatistics.totalTransactionTagCount),
+                totalTransactionCount: appendThousandsSeparator(self.dataStatistics.totalTransactionCount)
+            };
+        },
+        isDataExportingEnabled() {
+            return this.$settings.isDataExportingEnabled();
+        },
+        exportFileName() {
+            const nickname = this.userStore.currentUserNickname;
+
+            if (nickname) {
+                return this.$t('dataExport.exportFilename', {
+                    nickname: nickname
+                }) + '.csv';
+            }
+
+            return this.$t('dataExport.defaultExportFilename') + '.csv';
+        }
+    },
+    created() {
+        this.reloadUserDataStatistics();
+    },
+    methods: {
+        reloadUserDataStatistics() {
+            const self = this;
+
+            self.loadingDataStatistics = true;
+
+            self.userStore.getUserDataStatistics().then(dataStatistics => {
+                self.dataStatistics = dataStatistics;
+                self.loadingDataStatistics = false;
+            }).catch(error => {
+                self.loadingDataStatistics = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        exportData() {
+            const self = this;
+
+            if (self.exportingData) {
+                return;
+            }
+
+            self.exportingData = true;
+
+            self.userStore.getExportedUserData().then(data => {
+                startDownloadFile(self.exportFileName, data);
+                self.exportingData = false;
+            }).catch(error => {
+                self.exportingData = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        clearData() {
+            const self = this;
+
+            if (!self.currentPasswordForClearData) {
+                self.showSnackbarMessage(self.$t('Current password cannot be empty'));
+                return;
+            }
+
+            if (self.clearingData) {
+                return;
+            }
+
+            self.$refs.confirmDialog.open('Are you sure you want to clear all data?', { color: 'error' }).then(() => {
+                self.clearingData = true;
+                self.isCurrentPasswordVisible = false;
+
+                self.rootStore.clearUserData({
+                    password: self.currentPasswordForClearData
+                }).then(() => {
+                    self.clearingData = false;
+
+                    self.showSnackbarMessage(self.$t('All user data has been cleared'));
+                    self.reloadUserDataStatistics();
+                }).catch(error => {
+                    self.clearingData = false;
+
+                    if (!error.processed) {
+                        self.showSnackbarMessage(self.$tError(error.message || error));
+                    }
+                });
+            });
+        },
+        showSnackbarMessage(message) {
+            this.showSnackbar = true;
+            this.snackbarMessage = message;
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,374 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': updatingPassword }" :title="$t('Modify Password')">
+                <v-form>
+                    <v-card-text>
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    ref="currentPasswordInput"
+                                    autocomplete="current-password"
+                                    clearable
+                                    :disabled="updatingPassword"
+                                    :label="$t('Current Password')"
+                                    :placeholder="$t('Current Password')"
+                                    :type="isCurrentPasswordVisible ? 'text' : 'password'"
+                                    :append-inner-icon="isCurrentPasswordVisible ? icons.eyeSlash : icons.eye"
+                                    v-model="currentPassword"
+                                    @click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
+                                    @keyup.enter="$refs.newPasswordInput.focus()"
+                                />
+                            </v-col>
+                        </v-row>
+
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    ref="newPasswordInput"
+                                    autocomplete="new-password"
+                                    clearable
+                                    :disabled="updatingPassword"
+                                    :label="$t('New Password')"
+                                    :placeholder="$t('New Password')"
+                                    :type="isNewPasswordVisible ? 'text' : 'password'"
+                                    :append-inner-icon="isNewPasswordVisible ? icons.eyeSlash : icons.eye"
+                                    v-model="newPassword"
+                                    @click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
+                                    @keyup.enter="$refs.confirmPasswordInput.focus()"
+                                />
+                            </v-col>
+                        </v-row>
+
+                        <v-row>
+                            <v-col cols="12" md="6">
+                                <v-text-field
+                                    ref="confirmPasswordInput"
+                                    clearable
+                                    :disabled="updatingPassword"
+                                    :type="isConfirmPasswordVisible ? 'text' : 'password'"
+                                    :label="$t('Confirmation Password')"
+                                    :placeholder="$t('Re-enter the password')"
+                                    :append-inner-icon="isConfirmPasswordVisible ? icons.eyeSlash : icons.eye"
+                                    v-model="confirmPassword"
+                                    @click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
+                                    @keyup.enter="updatePassword"
+                                />
+                            </v-col>
+                        </v-row>
+                    </v-card-text>
+
+                    <v-card-text class="d-flex flex-wrap gap-4">
+                        <v-btn :disabled="updatingPassword" @click="updatePassword">
+                            {{ $t('Save changes') }}
+                            <v-progress-circular indeterminate size="24" class="ml-2" v-if="updatingPassword"></v-progress-circular>
+                        </v-btn>
+                    </v-card-text>
+                </v-form>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': loadingSession }">
+                <template #title>
+                    <span>{{ $t('Device & Sessions') }}</span>
+                    <v-btn density="compact" color="default" variant="text"
+                           class="ml-2" :icon="true"
+                           v-if="!loadingSession" @click="reloadSessions">
+                        <v-icon :icon="icons.refresh" size="24" />
+                        <v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
+                    </v-btn>
+                    <v-progress-circular indeterminate size="24" class="ml-2" v-if="loadingSession"></v-progress-circular>
+                </template>
+
+                <v-table class="text-no-wrap">
+                    <thead>
+                    <tr>
+                        <th class="text-uppercase">{{ $t('Type') }}</th>
+                        <th class="text-uppercase">{{ $t('Device Info') }}</th>
+                        <th class="text-uppercase">{{ $t('Last Activity Time') }}</th>
+                        <th class="text-uppercase text-center">
+                            <v-btn density="comfortable"
+                                   :disabled="sessions.length < 2 || loadingSession"
+                                   @click="revokeAllSessions">
+                                {{ $t('Logout All') }}
+                            </v-btn>
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr :key="session.tokenId" v-for="session in sessions">
+                        <td>
+                            <v-icon start :icon="session.icon"/>
+                            {{ session.deviceType }}
+                        </td>
+                        <td>{{ session.deviceInfo }}</td>
+                        <td>{{ session.createdAt }}</td>
+                        <td class="text-center">
+                            <v-btn density="comfortable"
+                                   :disabled="session.isCurrent || loadingSession"
+                                   @click="revokeSession(session)">
+                                {{ $t('Log Out') }}
+                            </v-btn>
+                        </td>
+                    </tr>
+                    </tbody>
+                </v-table>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <confirm-dialog ref="confirmDialog"/>
+
+    <v-snackbar v-model="showSnackbar">
+        {{ snackbarMessage }}
+
+        <template #actions>
+            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/index.js';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useTokensStore } from '@/stores/token.js';
+
+import { isEquals } from '@/lib/common.js';
+import { parseDeviceInfo, parseUserAgent } from '@/lib/misc.js';
+
+import {
+    mdiRefresh,
+    mdiEyeOffOutline,
+    mdiEyeOutline,
+    mdiCellphone,
+    mdiTablet,
+    mdiWatch,
+    mdiTelevision,
+    mdiDevices
+} from "@mdi/js";
+
+export default {
+    data() {
+        return {
+            tokens: [],
+            currentPassword: '',
+            newPassword: '',
+            confirmPassword: '',
+            isCurrentPasswordVisible: false,
+            isNewPasswordVisible: false,
+            isConfirmPasswordVisible: false,
+            updatingPassword: false,
+            loadingSession: true,
+            showSnackbar: false,
+            snackbarMessage: '',
+            icons: {
+                refresh: mdiRefresh,
+                eye: mdiEyeOutline,
+                eyeSlash: mdiEyeOffOutline
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useRootStore, useSettingsStore, useUserStore, useTokensStore),
+        inputProblemMessage() {
+            if (!this.currentPassword) {
+                return 'Current password cannot be empty';
+            } else if (!this.newPassword && !this.confirmPassword) {
+                return 'Nothing has been modified';
+            } else if (!this.newPassword && this.confirmPassword) {
+                return 'New password cannot be empty';
+            } else if (this.newPassword && !this.confirmPassword) {
+                return 'Confirmation password cannot be empty';
+            } else if (this.newPassword && this.confirmPassword && this.newPassword !== this.confirmPassword) {
+                return 'Password and confirmation password do not match';
+            } else {
+                return null;
+            }
+        },
+        sessions() {
+            if (!this.tokens) {
+                return this.tokens;
+            }
+
+            const sessions = [];
+
+            for (let i = 0; i < this.tokens.length; i++) {
+                const token = this.tokens[i];
+
+                sessions.push({
+                    tokenId: token.tokenId,
+                    isCurrent: token.isCurrent,
+                    deviceType: this.$t(token.isCurrent ? 'Current' : 'Other Device'),
+                    deviceInfo: parseDeviceInfo(token.userAgent),
+                    icon: this.getTokenIcon(token),
+                    createdAt: this.$locale.formatUnixTimeToLongDateTime(this.userStore, token.createdAt)
+                });
+            }
+
+            return sessions;
+        }
+    },
+    created() {
+        const self = this;
+
+        self.loadingSession = true;
+
+        self.tokensStore.getAllTokens().then(tokens => {
+            self.tokens = tokens;
+            self.loadingSession = false;
+        }).catch(error => {
+            self.loadingSession = false;
+
+            if (!error.processed) {
+                self.showSnackbarMessage(self.$tError(error.message || error));
+            }
+        });
+    },
+    methods: {
+        updatePassword() {
+            const self = this;
+
+            const problemMessage = self.inputProblemMessage;
+
+            if (problemMessage) {
+                self.showSnackbarMessage(self.$t(problemMessage));
+                return;
+            }
+
+            self.updatingPassword = true;
+            self.isCurrentPasswordVisible = false;
+            self.isNewPasswordVisible = false;
+            self.isConfirmPasswordVisible = false;
+
+            self.rootStore.updateUserProfile({
+                profile: {
+                    password: self.newPassword,
+                    confirmPassword: self.confirmPassword
+                },
+                currentPassword: self.currentPassword
+            }).then(response => {
+                self.updatingPassword = false;
+                self.currentPassword = '';
+                self.newPassword = '';
+                self.confirmPassword = '';
+
+                if (response.user) {
+                    const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
+                    self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+                }
+
+                self.showSnackbarMessage(self.$t('Your profile has been successfully updated'));
+            }).catch(error => {
+                self.updatingPassword = false;
+                self.currentPassword = '';
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        reloadSessions() {
+            const self = this;
+
+            self.loadingSession = true;
+
+            self.tokensStore.getAllTokens().then(tokens => {
+                if (isEquals(self.tokens, tokens)) {
+                    self.showSnackbarMessage(this.$t('Session list is up to date'));
+                } else {
+                    self.showSnackbarMessage(this.$t('Session list has been updated'));
+                }
+
+                self.tokens = tokens;
+                self.loadingSession = false;
+            }).catch(error => {
+                self.loadingSession = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        revokeSession(session) {
+            const self = this;
+
+            self.$refs.confirmDialog.open('Are you sure you want to logout from this session?').then(() => {
+                self.loadingSession = true;
+
+                self.tokensStore.revokeToken({
+                    tokenId: session.tokenId
+                }).then(() => {
+                    self.loadingSession = false;
+
+                    for (let i = 0; i < self.tokens.length; i++) {
+                        if (self.tokens[i].tokenId === session.tokenId) {
+                            self.tokens.splice(i, 1);
+                        }
+                    }
+                }).catch(error => {
+                    self.loadingSession = false;
+
+                    if (!error.processed) {
+                        self.showSnackbarMessage(self.$tError(error.message || error));
+                    }
+                });
+            });
+        },
+        revokeAllSessions() {
+            const self = this;
+
+            if (self.tokens.length < 2) {
+                return;
+            }
+
+            self.$refs.confirmDialog.open('Are you sure you want to logout all other sessions?').then(() => {
+                self.loadingSession = true;
+
+                self.tokensStore.revokeAllTokens().then(() => {
+                    self.loadingSession = false;
+
+                    for (let i = self.tokens.length - 1; i >= 0; i--) {
+                        if (!self.tokens[i].isCurrent) {
+                            self.tokens.splice(i, 1);
+                        }
+                    }
+
+                    self.showSnackbarMessage(this.$t('You have logged out all other sessions'));
+                }).catch(error => {
+                    self.loadingSession = false
+
+                    if (!error.processed) {
+                        self.showSnackbarMessage(self.$tError(error.message || error));
+                    }
+                });
+            });
+        },
+        getTokenIcon(token) {
+            const ua = parseUserAgent(token.userAgent);
+
+            if (!ua || !ua.device) {
+                return mdiDevices;
+            }
+
+            if (ua.device.type === 'mobile') {
+                return mdiCellphone;
+            } else if (ua.device.type === 'wearable') {
+                return mdiWatch;
+            } else if (ua.device.type === 'tablet') {
+                return mdiTablet;
+            } else if (ua.device.type === 'smarttv') {
+                return mdiTelevision;
+            } else {
+                return mdiDevices;
+            }
+        },
+        showSnackbarMessage(message) {
+            this.showSnackbar = true;
+            this.snackbarMessage = message;
+        }
+    }
+};
+</script>

src/views/desktop/user/settings/UserTwoFactorAuthSettingTab.vue

@@ -0,0 +1,348 @@
+<template>
+    <v-row>
+        <v-col cols="12">
+            <v-card :class="{ 'disabled': loading }">
+                <template #title>
+                    <span>{{ $t('Two-Factor Authentication') }}</span>
+                    <v-progress-circular indeterminate size="24" class="ml-2" v-if="loading"></v-progress-circular>
+                </template>
+
+                <v-card-text class="pb-0">
+                    <p class="text-subtitle-1 font-weight-semibold" v-if="!new2FAQRCode">
+                        {{ status === true ? $t('Two-factor authentication has been enabled.') : $t('Two-factor authentication is not enabled yet.') }}
+                    </p>
+                    <p class="text-subtitle-1" v-if="new2FAQRCode">
+                        {{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}
+                    </p>
+                    <p class="text-subtitle-1" v-if="status === true">
+                        {{ $t('Please enter your current password when disable two factor authentication or regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}
+                    </p>
+                </v-card-text>
+
+                <v-card-text v-if="status === false && new2FAQRCode">
+                    <v-img alt="qrcode" class="img-qrcode" :src="new2FAQRCode" />
+                    <v-row class="mb-3">
+                        <v-col cols="12" md="3">
+                            <v-text-field
+                                type="number"
+                                autocomplete="one-time-code"
+                                clearable variant="underlined"
+                                :disabled="loading || enabling || enableConfirming || disabling"
+                                :placeholder="$t('Passcode')"
+                                v-model="currentPasscode"
+                                @keyup.enter="enableConfirm"
+                            />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <v-card-text class="pb-0" v-if="status === true">
+                    <v-row class="mb-3">
+                        <v-col cols="12" md="6">
+                            <v-text-field
+                                autocomplete="current-password"
+                                clearable variant="underlined"
+                                :disabled="loading || enabling || enableConfirming || disabling"
+                                :placeholder="$t('Current Password')"
+                                :type="isCurrentPasswordVisible ? 'text' : 'password'"
+                                :append-inner-icon="isCurrentPasswordVisible ? icons.eyeSlash : icons.eye"
+                                v-model="currentPassword"
+                                @click:append-inner="isCurrentPasswordVisible = !isCurrentPasswordVisible"
+                            />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <v-card-text>
+                    <v-row>
+                        <v-col cols="12" class="d-flex flex-wrap gap-4">
+                            <v-btn :disabled="loading || disabling " v-if="status === true" @click="disable">
+                                {{ $t('Disable two-factor authentication') }}
+                                <v-progress-circular indeterminate size="24" class="ml-2" v-if="disabling"></v-progress-circular>
+                            </v-btn>
+                            <v-btn :disabled="loading || regenerating" v-if="status === true" @click="regenerateBackupCode()">
+                                {{ $t('Regenerate Backup Codes') }}
+                                <v-progress-circular indeterminate size="24" class="ml-2" v-if="regenerating"></v-progress-circular>
+                            </v-btn>
+                            <v-btn :disabled="loading || enabling" v-if="status === false && !new2FAQRCode" @click="enable">
+                                {{ $t('Enable two-factor authentication') }}
+                                <v-progress-circular indeterminate size="24" class="ml-2" v-if="enabling"></v-progress-circular>
+                            </v-btn>
+                            <v-btn :disabled="loading || enableConfirming" v-if="status === false && new2FAQRCode" @click="enableConfirm">
+                                {{ $t('Continue') }}
+                                <v-progress-circular indeterminate size="24" class="ml-2" v-if="enableConfirming"></v-progress-circular>
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </v-card>
+        </v-col>
+
+        <v-col cols="12">
+            <v-card v-if="currentBackupCode">
+                <template #title>
+                    <span>{{ $t('Backup Code') }}</span>
+                    <v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
+                           density="compact" color="default" variant="text"
+                           class="ml-2" :icon="true">
+                        <v-icon :icon="icons.copy" size="20" />
+                        <v-tooltip activator="parent">{{ $t('Copy') }}</v-tooltip>
+                    </v-btn>
+                </template>
+
+                <v-card-text>
+                    <p class="text-subtitle-1" v-if="status === true">
+                        {{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}
+                    </p>
+                    <v-textarea class="backup-code" readonly="readonly" :rows="10" :value="currentBackupCode"/>
+                </v-card-text>
+            </v-card>
+        </v-col>
+    </v-row>
+
+    <v-snackbar v-model="showSnackbar">
+        {{ snackbarMessage }}
+
+        <template #actions>
+            <v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
+        </template>
+    </v-snackbar>
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useTwoFactorAuthStore } from '@/stores/twoFactorAuth.js';
+
+import { makeButtonCopyToClipboard, changeClipboardObjectText } from '@/lib/misc.js';
+
+import {
+    mdiEyeOutline,
+    mdiEyeOffOutline,
+    mdiContentCopy
+} from '@mdi/js';
+
+export default {
+    data() {
+        return {
+            status: null,
+            loading: true,
+            new2FASecret: '',
+            new2FAQRCode: '',
+            currentPassword: '',
+            isCurrentPasswordVisible: false,
+            currentPasscode: '',
+            currentBackupCode: '',
+            enabling: false,
+            enableConfirming: false,
+            disabling: false,
+            regenerating: false,
+            clipboardHolder: null,
+            showSnackbar: false,
+            snackbarMessage: '',
+            icons: {
+                eye: mdiEyeOutline,
+                eyeSlash: mdiEyeOffOutline,
+                copy: mdiContentCopy
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useTwoFactorAuthStore),
+    },
+    created() {
+        const self = this;
+
+        self.loading = true;
+
+        self.twoFactorAuthStore.get2FAStatus().then(response => {
+            self.status = response.enable;
+            self.loading = false;
+        }).catch(error => {
+            self.loading = false;
+
+            if (!error.processed) {
+                self.showSnackbarMessage(self.$tError(error.message || error));
+            }
+        });
+    },
+    watch: {
+        'currentBackupCode': function (newValue) {
+            if (this.clipboardHolder) {
+                changeClipboardObjectText(this.clipboardHolder, newValue);
+            }
+        }
+    },
+    methods: {
+        enable() {
+            const self = this;
+
+            self.new2FAQRCode = '';
+            self.new2FASecret = '';
+            self.currentBackupCode = '';
+
+            self.enabling = true;
+
+            self.twoFactorAuthStore.enable2FA().then(response => {
+                self.enabling = false;
+
+                self.new2FAQRCode = response.qrcode;
+                self.new2FASecret = response.secret;
+            }).catch(error => {
+                self.enabling = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        enableConfirm() {
+            const self = this;
+
+            if (!self.currentPasscode) {
+                self.showSnackbarMessage(self.$t('Passcode cannot be empty'));
+                return;
+            }
+
+            if (self.enableConfirming) {
+                return;
+            }
+
+            const password = self.currentPasscode;
+
+            self.currentBackupCode = '';
+            self.currentPasscode = '';
+
+            self.enableConfirming = true;
+
+            self.twoFactorAuthStore.confirmEnable2FA({
+                secret: self.new2FASecret,
+                passcode: password
+            }).then(response => {
+                self.enableConfirming = false;
+
+                self.new2FAQRCode = '';
+                self.new2FASecret = '';
+
+                self.status = true;
+
+                if (response.recoveryCodes && response.recoveryCodes.length) {
+                    self.currentBackupCode = response.recoveryCodes.join('\n');
+                }
+
+                self.$nextTick(() => {
+                    self.makeCopyToClipboardClickable();
+                });
+            }).catch(error => {
+                self.enableConfirming = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        disable() {
+            const self = this;
+
+            if (!self.currentPassword) {
+                self.showSnackbarMessage(self.$t('Current password cannot be empty'));
+                return;
+            }
+
+            if (self.disabling) {
+                return;
+            }
+
+            const password = self.currentPassword;
+
+            self.currentBackupCode = '';
+            self.currentPassword = '';
+
+            self.disabling = true;
+
+            self.twoFactorAuthStore.disable2FA({
+                password: password
+            }).then(() => {
+                self.disabling = false;
+
+                self.status = false;
+                self.showSnackbarMessage(self.$t('Two factor authentication has been disabled'));
+            }).catch(error => {
+                self.disabling = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        regenerateBackupCode() {
+            const self = this;
+
+            if (!self.currentPassword) {
+                self.showSnackbarMessage(self.$t('Current password cannot be empty'));
+                return;
+            }
+
+            if (self.regenerating) {
+                return;
+            }
+
+            const password = self.currentPassword;
+
+            self.currentBackupCode = '';
+            self.currentPassword = '';
+
+            self.regenerating = true;
+
+            self.twoFactorAuthStore.regenerate2FARecoveryCode({
+                password: password
+            }).then(response => {
+                self.regenerating = false;
+
+                self.currentBackupCode = response.recoveryCodes.join('\n');
+
+                self.$nextTick(() => {
+                    self.makeCopyToClipboardClickable();
+                });
+            }).catch(error => {
+                self.regenerating = false;
+
+                if (!error.processed) {
+                    self.showSnackbarMessage(self.$tError(error.message || error));
+                }
+            });
+        },
+        makeCopyToClipboardClickable() {
+            const self = this;
+
+            if (self.clipboardHolder) {
+                return;
+            }
+
+            if (self.$refs.copyToClipboardIcon) {
+                self.clipboardHolder = makeButtonCopyToClipboard({
+                    el: '#copy-to-clipboard-icon',
+                    text: self.currentBackupCode,
+                    successCallback: function () {
+                        self.showSnackbarMessage(self.$t('Backup codes copied'));
+                    }
+                });
+            }
+        },
+        showSnackbarMessage(message) {
+            this.showSnackbar = true;
+            this.snackbarMessage = message;
+        }
+    }
+};
+</script>
+
+<style>
+.img-qrcode {
+    width: 240px;
+    height: 240px
+}
+
+.backup-code {
+    font-family: monospace;
+}
+</style>