add application lock setting tab for desktop

src/desktop-main.js

@@ -27,12 +27,14 @@ import { VProgressLinear } from 'vuetify/components/VProgressLinear';
 import { VSelect } from 'vuetify/components/VSelect';
 import { VSheet } from 'vuetify/components/VSheet';
 import { VSnackbar } from 'vuetify/components/VSnackbar';
+import { VSwitch } from 'vuetify/components/VSwitch';
 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';
 
@@ -114,6 +116,7 @@ const vuetify = createVuetify({
         VSelect,
         VSheet,
         VSnackbar,
+        VSwitch,
         VTabs,
         VTab,
         VTable,

src/locales/en.js

@@ -1119,11 +1119,13 @@ export default {
     'Application Lock': 'Application Lock',
     'Application lock has been enabled': 'Application lock has been enabled',
     'Application lock is not enabled': 'Application lock is not enabled',
+    'Enable Application Lock': 'Enable Application Lock',
+    'Disable Application Lock': 'Disable Application Lock',
     'PIN Code': 'PIN Code',
     'Unlock By PIN Code': 'Unlock By PIN Code',
     'Unlock By WebAuthn': 'Unlock By WebAuthn',
     'Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.': 'Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.',
-    'Please enter your current PIN code when disable application lock': 'Please enter your current PIN code when disable application lock',
+    'Please enter your current PIN code when disable application lock.': 'Please enter your current PIN code when disable application lock.',
     'You have enabled WebAuthn successfully': 'You have enabled WebAuthn successfully',
     'This device does not support WebAuthn': 'This device does not support WebAuthn',
     'Failed to enable WebAuthn': 'Failed to enable WebAuthn',

src/locales/zh_Hans.js

@@ -1119,11 +1119,13 @@ export default {
     'Application Lock': '应用锁',
     'Application lock has been enabled': '应用锁已经启用',
     'Application lock is not enabled': '应用锁没有启用',
+    'Enable Application Lock': '启用应用锁',
+    'Disable Application Lock': '禁用应用锁',
     'PIN Code': 'PIN码',
     'Unlock By PIN Code': '使用PIN码解锁',
     'Unlock By WebAuthn': '使用WebAuthn解锁',
     'Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.': '请输入一个新的6位数字PIN码，PIN码会加密你的本地数据，所以您每次打开应用时都需要输入PIN码。如果您忘记了PIN码，您需要重新登录。',
-    'Please enter your current PIN code when disable application lock': '禁用应用锁时需要输入当前的PIN码',
+    'Please enter your current PIN code when disable application lock.': '禁用应用锁时需要输入当前的PIN码。',
     'You have enabled WebAuthn successfully': '您已经成功开启 WebAuth',
     'This device does not support WebAuthn': '当前设备不支持 WebAuth',
     'Failed to enable WebAuthn': '启用 WebAuth 失败',

src/views/desktop/app/settings/AppLockSetingTab.vue

@@ -2,16 +2,199 @@
     <v-row>
         <v-col cols="12">
             <v-card :title="$t('Application Lock')">
-                <v-form>
-                    <v-card-text>
-                    </v-card-text>
-                </v-form>
+                <v-card-text class="pb-0">
+                    <p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock">
+                        {{ $t('Application lock is not enabled') }}
+                    </p>
+                    <p class="text-subtitle-1" v-if="isEnableApplicationLock">
+                        {{ $t('Application lock has been enabled') }}
+                    </p>
+                </v-card-text>
+
+                <v-card-text v-if="isEnableApplicationLock">
+                    <v-switch inset :disabled="true"
+                              :label="$t('Unlock By PIN Code')"
+                              v-model="isEnableApplicationLock"/>
+                    <v-switch inset
+                              :label="$t('Unlock By WebAuthn')"
+                              :loading="enablingWebAuthn"
+                              v-model="isEnableApplicationLockWebAuthn"/>
+                </v-card-text>
+
+                <v-card-text class="pb-0">
+                    <p class="text-subtitle-1 font-weight-semibold" v-if="!isEnableApplicationLock">
+                        {{ $t('Please input a new 6-digit PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}
+                    </p>
+                    <p class="text-subtitle-1 font-weight-semibold" v-if="isEnableApplicationLock">
+                        {{ $t('Please enter your current PIN code when disable application lock.') }}
+                    </p>
+                </v-card-text>
+
+                <v-card-text class="pb-0">
+                    <v-row class="mb-3">
+                        <v-col cols="12" md="4">
+                            <div style="max-width: 428px">
+                                <pin-code-input :secure="true" :length="6" v-model="pinCode" />
+                            </div>
+                        </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 :class="{ 'disabled': !pinCodeValid }"
+                                   v-if="!isEnableApplicationLock" @click="enable">
+                                {{ $t('Enable Application Lock') }}
+                            </v-btn>
+                            <v-btn :class="{ 'disabled': !pinCodeValid }"
+                                   v-if="isEnableApplicationLock" @click="disable">
+                                {{ $t('Disable Application Lock') }}
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
             </v-card>
         </v-col>
     </v-row>
+
+    <snack-bar ref="snackbar" />
 </template>
 
 <script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
 
+import logger from '@/lib/logger.js';
+import webauthn from '@/lib/webauthn.js';
+
+export default {
+    data() {
+        return {
+            isSupportedWebAuthn: false,
+            enablingWebAuthn: false,
+            pinCode: ''
+        };
+    },
+    computed: {
+        ...mapStores(useSettingsStore, useUserStore),
+        isEnableApplicationLock: {
+            get: function () {
+                return this.settingsStore.appSettings.applicationLock;
+            },
+            set: function (value) {
+                this.settingsStore.setEnableApplicationLock(value);
+            }
+        },
+        isEnableApplicationLockWebAuthn: {
+            get: function () {
+                return this.settingsStore.appSettings.applicationLockWebAuthn;
+            },
+            set: function (value) {
+                this.settingsStore.setEnableApplicationLockWebAuthn(value);
+            }
+        },
+        pinCodeValid() {
+            return this.pinCode && this.pinCode.length === 6;
+        }
+    },
+    watch: {
+        isEnableApplicationLockWebAuthn: function (newValue) {
+            const self = this;
+
+            if (newValue) {
+                self.enablingWebAuthn = true;
+
+                webauthn.registerCredential(
+                    self.$user.getUserAppLockState(),
+                    self.userStore.currentUserInfo,
+                ).then(({ id }) => {
+                    self.enablingWebAuthn = false;
+
+                    self.$user.saveWebAuthnConfig(id);
+                    self.settingsStore.setEnableApplicationLockWebAuthn(true);
+                    self.$refs.snackbar.showMessage('You have enabled WebAuthn successfully');
+                }).catch(error => {
+                    logger.error('failed to enable WebAuthn', error);
+
+                    self.enablingWebAuthn = false;
+
+                    if (error.notSupported) {
+                        self.$refs.snackbar.showMessage('This device does not support WebAuthn');
+                    } else if (error.name === 'NotAllowedError') {
+                        self.$refs.snackbar.showMessage('User has canceled authentication');
+                    } else if (error.invalid) {
+                        self.$refs.snackbar.showMessage('Failed to enable WebAuthn');
+                    } else {
+                        self.$refs.snackbar.showMessage('User has canceled or this device does not support WebAuthn');
+                    }
+
+                    self.isEnableApplicationLockWebAuthn = false;
+                    self.settingsStore.setEnableApplicationLockWebAuthn(false);
+                    self.$user.clearWebAuthnConfig();
+                });
+            } else {
+                self.settingsStore.setEnableApplicationLockWebAuthn(false);
+                self.$user.clearWebAuthnConfig();
+            }
+        }
+    },
+    created() {
+        const self = this;
+        webauthn.isCompletelySupported().then(result => {
+            self.isSupportedWebAuthn = result;
+        });
+    },
+    methods: {
+        enable() {
+            if (this.settingsStore.appSettings.applicationLock) {
+                this.$refs.snackbar.showMessage('Application lock has been enabled');
+                return;
+            }
+
+            if (!this.pinCode || this.pinCode.length !== 6) {
+                this.pinCode = '';
+                this.$refs.snackbar.showMessage('PIN code is invalid');
+                return;
+            }
+
+            const user = this.userStore.currentUserInfo;
+
+            if (!user || !user.username) {
+                this.pinCode = '';
+                this.$refs.snackbar.showMessage('An error has occurred');
+                return;
+            }
+
+            this.$user.encryptToken(user.username, this.pinCode);
+            this.settingsStore.setEnableApplicationLock(true);
+
+            this.settingsStore.setEnableApplicationLockWebAuthn(false);
+            this.$user.clearWebAuthnConfig();
+
+            this.pinCode = '';
+        },
+        disable() {
+            if (!this.settingsStore.appSettings.applicationLock) {
+                this.$refs.snackbar.showMessage('Application lock is not enabled');
+                return;
+            }
+
+            if (!this.$user.isCorrectPinCode(this.pinCode)) {
+                this.pinCode = '';
+                this.$refs.snackbar.showMessage('PIN code is wrong');
+                return;
+            }
+
+            this.pinCode = '';
+
+            this.$user.decryptToken();
+            this.settingsStore.setEnableApplicationLock(false);
+
+            this.settingsStore.setEnableApplicationLockWebAuthn(false);
+            this.$user.clearWebAuthnConfig();
+        }
+    }
+}
 </script>
-

src/views/mobile/ApplicationLockPage.vue

@@ -27,7 +27,7 @@
         </pin-code-input-sheet>
 
         <pin-code-input-sheet :title="$t('PIN Code')"
-                              :hint="$t('Please enter your current PIN code when disable application lock')"
+                              :hint="$t('Please enter your current PIN code when disable application lock.')"
                               v-model:show="showInputPinCodeSheetForDisable"
                               v-model="currentPinCodeForDisable"
                               @pincode:confirm="disable">