Add a second confirmation when setting the unlock password (#355)

Author: sheepzh

.codebeatignore

@@ -1,2 +1,5 @@
 src/**/*.tsx
-src/**/*Wrapper.ts
+src/**/*Wrapper.ts
+test/**
+test-e2e/**
+webpack/**

package.json

@@ -27,17 +27,17 @@
     "license": "MIT",
     "devDependencies": {
         "@babel/plugin-transform-modules-commonjs": "^7.26.3",
-        "@babel/preset-env": "^7.26.7",
+        "@babel/preset-env": "^7.26.9",
         "@crowdin/crowdin-api-client": "^1.41.1",
         "@rsdoctor/webpack-plugin": "^0.4.13",
-        "@swc/core": "^1.10.15",
+        "@swc/core": "^1.10.16",
         "@swc/jest": "^0.2.37",
         "@types/chrome": "0.0.304",
         "@types/decompress": "^4.2.7",
         "@types/echarts": "^5.0.0",
         "@types/generate-json-webpack-plugin": "^0.3.7",
         "@types/jest": "^29.5.14",
-        "@types/node": "^22.13.1",
+        "@types/node": "^22.13.4",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
@@ -46,31 +46,31 @@
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
         "decompress": "^4.2.1",
-        "eslint": "^9.20.0",
+        "eslint": "^9.20.1",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
         "html-webpack-plugin": "^5.6.3",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "mini-css-extract-plugin": "^2.9.2",
-        "postcss": "^8.5.1",
+        "postcss": "^8.5.2",
         "postcss-loader": "^8.1.1",
         "postcss-rtlcss": "^5.6.0",
-        "puppeteer": "^24.2.0",
-        "sass": "^1.84.0",
-        "sass-loader": "^16.0.4",
+        "puppeteer": "^24.2.1",
+        "sass": "^1.85.0",
+        "sass-loader": "^16.0.5",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.2",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
         "typescript": "5.7.3",
         "url-loader": "^4.1.1",
-        "webpack": "^5.97.1",
+        "webpack": "^5.98.0",
         "webpack-cli": "^6.0.1"
     },
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
-        "@vueuse/core": "^12.5.0",
+        "@vueuse/core": "^12.7.0",
         "countup.js": "^2.8.0",
         "echarts": "^5.6.0",
         "element-plus": "2.9.4",
@@ -83,4 +83,4 @@
     "engines": {
         "node": ">=20"
     }
-}
+}

src/i18n/message/app/option-resource.json

@@ -72,7 +72,8 @@
                 "strict": "不允许手动解锁",
                 "strictTitle": "危险操作",
                 "strictContent": "当您选择这个选项之后，如果某个站点触发了每日限制，除了等到第二天自动解锁以外，不允许您手动解锁。如果规则设置不当，很有可能会阻碍您的日常工作！",
-                "passwordContent": "请设置您的解锁密码"
+                "pswFormLabel": "解锁密码",
+                "pswFormAgain": "再次输入"
             }
         },
         "backup": {
@@ -201,8 +202,7 @@
                 },
                 "strict": "不允許手動解鎖",
                 "strictTitle": "危險操作",
-                "strictContent": "當您選擇這個選項之後，如果某個網站觸發了每日限制，除了等到第二天自動解鎖以外，不允許您手動解鎖。 如果規則設定不當，很有可能會阻礙您的日常工作！",
-                "passwordContent": "請設定您的解鎖密碼"
+                "strictContent": "當您選擇這個選項之後，如果某個網站觸發了每日限制，除了等到第二天自動解鎖以外，不允許您手動解鎖。 如果規則設定不當，很有可能會阻礙您的日常工作！"
             }
         },
         "backup": {
@@ -331,7 +331,8 @@
                 "strict": "Not allow unlocking anyway",
                 "strictTitle": "Operation confirm",
                 "strictContent": "When you select this option, if a site triggers daily limit, you will not be allowed to manually unblock it other than waiting until the next day. If rules are not set up properly, they can very well hinder your routines!",
-                "passwordContent": "Please set your unlock password"
+                "pswFormLabel": "Password",
+                "pswFormAgain": "Re-enter"
             }
         },
         "backup": {
@@ -460,8 +461,7 @@
                 },
                 "strict": "とにかくロック解除を許可しない",
                 "strictTitle": "操作確認",
-                "strictContent": "このオプションを選択した場合、サイトが毎日の制限をトリガーする場合 手動でブロックを解除することは翌日まで待つ以外はできません ルールが適切に設定されていない場合、彼らはあなたのルーチンを非常によく妨げることができます!",
-                "passwordContent": "ロック解除パスワードを設定してください"
+                "strictContent": "このオプションを選択した場合、サイトが毎日の制限をトリガーする場合 手動でブロックを解除することは翌日まで待つ以外はできません ルールが適切に設定されていない場合、彼らはあなたのルーチンを非常によく妨げることができます!"
             }
         },
         "backup": {
@@ -589,8 +589,7 @@
                 },
                 "strict": "Não permitir desbloqueio mesmo assim",
                 "strictTitle": "Confirmação de operação",
-                "strictContent": "Ao selecionar esta opção, se um site acionar o limite diário, você não poderá desbloqueá-lo manualmente, a não ser esperar até o dia seguinte. Se as regras não forem configuradas corretamente, elas podem atrapalhar suas rotinas!",
-                "passwordContent": "Por favor, defina a sua palavra-passe de desbloqueio"
+                "strictContent": "Ao selecionar esta opção, se um site acionar o limite diário, você não poderá desbloqueá-lo manualmente, a não ser esperar até o dia seguinte. Se as regras não forem configuradas corretamente, elas podem atrapalhar suas rotinas!"
             }
         },
         "backup": {
@@ -717,8 +716,7 @@
                 },
                 "strict": "Не дозволяти розблокування",
                 "strictTitle": "Підтвердження операції",
-                "strictContent": "Коли ви вибираєте цю опцію, якщо сайт активує щоденний ліміт, ви не зможете розблокувати його вручну до наступного дня. Якщо не налаштувати правила належним чином, вони можуть дуже заважати вашій роботі!",
-                "passwordContent": "Встановіть пароль розблокування"
+                "strictContent": "Коли ви вибираєте цю опцію, якщо сайт активує щоденний ліміт, ви не зможете розблокувати його вручну до наступного дня. Якщо не налаштувати правила належним чином, вони можуть дуже заважати вашій роботі!"
             }
         },
         "backup": {
@@ -845,8 +843,7 @@
                 },
                 "strict": "No permitir desbloquear de ningún modo",
                 "strictTitle": "Confirmación de operación",
-                "strictContent": "Al seleccionar esta opción, si un sitio activa el límite diario, no se te permitirá desbloquearlo manualmente, más que esperar hasta el día siguiente. ¡Si las reglas no se establecen correctamente, pueden entorpecer tus rutinas!",
-                "passwordContent": "Por favor, configure su contraseña de desbloqueo"
+                "strictContent": "Al seleccionar esta opción, si un sitio activa el límite diario, no se te permitirá desbloquearlo manualmente, más que esperar hasta el día siguiente. ¡Si las reglas no se establecen correctamente, pueden entorpecer tus rutinas!"
             }
         },
         "backup": {
@@ -973,8 +970,7 @@
                 },
                 "strict": "Entsperren trotzdem nicht zulassen",
                 "strictTitle": "Operation bestätigen",
-                "strictContent": "Wenn Sie diese Option wählen, wenn eine Site Tageslimit auslöst, Sie dürfen die Blockierung nur bis zum nächsten Tag manuell entsperren. Wenn Regeln nicht richtig eingerichtet sind, können sie sehr gut Ihre Routinen behindern!",
-                "passwordContent": "Bitte Passwort zum Entsperren festlegen"
+                "strictContent": "Wenn Sie diese Option wählen, wenn eine Site Tageslimit auslöst, Sie dürfen die Blockierung nur bis zum nächsten Tag manuell entsperren. Wenn Regeln nicht richtig eingerichtet sind, können sie sehr gut Ihre Routinen behindern!"
             }
         },
         "backup": {
@@ -1101,8 +1097,7 @@
                 },
                 "strict": "Ne pas autoriser le déblocage quand même",
                 "strictTitle": "Confirmation de l'opération",
-                "strictContent": "Lorsque vous sélectionnez cette option, si un site déclenche une limite quotidienne, vous ne serez pas autorisé à le débloquer manuellement sauf en attendant le lendemain. Si les règles ne sont pas correctement configurées, elles peuvent très bien gêner vos routines !",
-                "passwordContent": "Veuillez définir votre mot de passe de déverrouillage"
+                "strictContent": "Lorsque vous sélectionnez cette option, si un site déclenche une limite quotidienne, vous ne serez pas autorisé à le débloquer manuellement sauf en attendant le lendemain. Si les règles ne sont pas correctement configurées, elles peuvent très bien gêner vos routines !"
             }
         },
         "backup": {

src/i18n/message/app/option.ts

@@ -72,7 +72,8 @@ export type OptionMessage = {
             }
             strictTitle: string
             strictContent: string
-            passwordContent: string
+            pswFormLabel: string
+            pswFormAgain: string
         }
     }
     backup: {

src/pages/app/components/Limit/LimitTable/column/LimitEnabledColumn.tsx

@@ -20,7 +20,7 @@ const _default = defineComponent({
     setup(_, ctx) {
         const handleChange = async (row: timer.limit.Item, newVal: boolean) => {
             try {
-                newVal && await verifyCanModify(row)
+                !newVal && await verifyCanModify(row)
                 row.enabled = newVal
                 ctx.emit("rowChange", toRaw(row), newVal)
             } catch (e) {

src/pages/app/components/Option/components/LimitOption/index.tsx

@@ -6,14 +6,15 @@
  */
 import { t } from "@app/locale"
 import { processVerification } from "@app/util/limit"
-import { Edit, Lock } from "@element-plus/icons-vue"
+import { Edit } from "@element-plus/icons-vue"
 import { defaultDailyLimit } from "@util/constant/option"
 import { ElButton, ElInput, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus"
 import { defineComponent } from "vue"
 import { type OptionInstance } from "../../common"
 import { useOption } from "../../useOption"
 import OptionItem from "../OptionItem"
 import "./limit-option.sass"
+import { usePswEdit } from "./usePswEdit"
 import { useVerify } from "./useVerify"
 
 const ALL_LEVEL: timer.limit.RestrictionLevel[] = [
@@ -59,34 +60,10 @@ const confirm4Strict = async (): Promise<void> => {
     })
 }
 
-const modifyPsw = async (oldPsw?: string): Promise<string> => {
-    const content = t(msg => msg.option.dailyLimit.level.passwordContent)
-    const data = await ElMessageBox({
-        message: content,
-        type: 'success',
-        icon: <Lock />,
-        confirmButtonText: t(msg => msg.button.save),
-        showCancelButton: true,
-        cancelButtonText: t(msg => msg.button.cancel),
-        showInput: true,
-        inputValue: oldPsw,
-        closeOnClickModal: false,
-    })
-    const { action, value } = data || {}
-    if (action !== 'confirm') {
-        ElMessage.warning("Unknown action: " + action)
-        throw "Ignore this message"
-    } else if (!value) {
-        ElMessage.error("No password filled in")
-        throw "No password filled in"
-    }
-    return value
-}
-
 const _default = defineComponent((_, ctx) => {
     const { option } = useOption({ defaultValue: defaultDailyLimit, copy })
-
     const { verified, verify } = useVerify(option)
+    const { modifyPsw } = usePswEdit({ reset: () => option.limitPassword })
 
     ctx.expose({
         reset: () => verify().then(() => reset(option)).catch(() => { })
@@ -109,7 +86,7 @@ const _default = defineComponent((_, ctx) => {
     const handlePswEdit = async () => {
         try {
             await verify()
-            option.limitPassword = await modifyPsw(option.limitPassword)
+            option.limitPassword = await modifyPsw()
             ElMessage.success(t(msg => msg.operation.successMsg))
         } catch (e) {
             console.log("Failed to verify", e)

src/pages/app/components/Option/components/LimitOption/limit-option.sass

@@ -1,3 +1,11 @@
+.option-daily-limit-psw-box
+    .el-message-box__container
+        padding: 15px 10px
+        .el-message-box__status
+            display: none
+        .el-message-box__message
+            flex: 1
+
 .option-daily-limit-level-select>.el-select__wrapper
     width: 100% !important
 

src/pages/app/components/Option/components/LimitOption/usePswEdit.tsx

@@ -0,0 +1,60 @@
+import { t } from "@app/locale"
+import { useState } from "@hooks/useState"
+import { ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox } from "element-plus"
+
+type Options = {
+    reset: () => string
+}
+
+export const usePswEdit = (options: Options) => {
+    const { reset } = options || {}
+
+    const [psw, setPsw] = useState(reset?.())
+    const [confirmPsw, setConfirmPsw, resetConfirmPsw] = useState('')
+
+    const modifyPsw = async (): Promise<string> => {
+        setPsw(reset?.())
+        resetConfirmPsw()
+
+        const action = await ElMessageBox({
+            title: t(msg => msg.option.dailyLimit.level.password),
+            message: (
+                <ElForm labelWidth={120} labelPosition="left">
+                    <ElFormItem required label={t(msg => msg.option.dailyLimit.level.pswFormLabel)}>
+                        <ElInput modelValue={psw.value} onInput={setPsw} />
+                    </ElFormItem>
+                    <ElFormItem required label={t(msg => msg.option.dailyLimit.level.pswFormAgain)}>
+                        <ElInput modelValue={confirmPsw.value} onInput={setConfirmPsw} />
+                    </ElFormItem>
+                </ElForm>
+            ),
+            customClass: 'option-daily-limit-psw-box',
+            confirmButtonText: t(msg => msg.button.confirm),
+            showCancelButton: true,
+            cancelButtonText: t(msg => msg.button.cancel),
+            closeOnClickModal: false,
+            beforeClose(action, instance, done) {
+                if (action === 'confirm') {
+                    // check input
+                    if (!psw.value) {
+                        return ElMessage.error("No password filled in")
+                    } else if (!confirmPsw.value) {
+                        return ElMessage.error("Please re-enter the password")
+                    } else if (psw.value !== confirmPsw.value) {
+                        return ElMessage.error("The two passwords you entered are different")
+                    } else {
+                        instance.action = action
+                        instance.inputValue = psw.value
+                    }
+                }
+                done()
+            },
+        })
+        if (action !== 'confirm') {
+            ElMessage.warning("Unknown action: " + action)
+            throw "Ignore this message"
+        }
+        return psw.value
+    }
+    return { modifyPsw }
+}