Request more 5 minutes must be verified (#241)

Author: sheepzh

src/app/locale.ts

@@ -1,13 +1,14 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
 import { I18nKey as _I18nKey, t as _t } from "@i18n"
-import { tN as _tN } from "@i18n/i18n-vue"
+import { tN as _tN } from "@i18n"
 import messages, { AppMessage } from "@i18n/message/app"
+import { VNode } from "vue"
 
 export type I18nKey = _I18nKey<AppMessage>
 
@@ -25,5 +26,5 @@ export function tWith(key: I18nKey, specLocale: timer.Locale, param?: any) {
 }
 
 export function tN(key: I18nKey, param?: any) {
-    return _tN<AppMessage>(messages, { key, param })
+    return _tN<AppMessage, VNode>(messages, { key, param })
 }

src/content-script/limit/delay/button.ts

@@ -0,0 +1,26 @@
+import { t } from "@src/content-script/locale"
+import { LimitReason } from "../common"
+import { LINK_STYLE } from "../modal-style"
+
+const canDelay = ({ allowDelay, type }: LimitReason) => allowDelay && (type === "DAILY" || type === "VISIT")
+
+export class DelayButton {
+    public dom: HTMLDivElement
+
+    constructor(reason: LimitReason, onClick: () => void) {
+        if (!canDelay(reason)) return
+
+        this.dom = document.createElement('p')
+        this.dom.style.marginTop = '100px'
+
+        // Only delay-allowed rules exist, can delay
+        // @since 0.4.0
+        const link = document.createElement('a')
+        Object.assign(link.style || {}, LINK_STYLE)
+        link.setAttribute('href', 'javascript:void(0)')
+        const text = t(msg => msg.more5Minutes)
+        link.innerText = text
+        link.onclick = onClick
+        this.dom.append(link)
+    }
+}

src/content-script/limit/delay/confirm.ts

@@ -0,0 +1,185 @@
+import { VerificationPair } from "@service/limit-service/verification/common"
+import verificationProcessor from "@service/limit-service/verification/processor"
+import { LINK_STYLE } from "../modal-style"
+import { t as t_, locale, I18nKey, tN as tN_, I18nResultItem } from "@i18n"
+import { LimitMessage, verificationMessages } from "@i18n/message/app/limit"
+
+const tV = (key: I18nKey<LimitMessage['verification']>, param?: any) => {
+    return t_(verificationMessages, { key, param })
+}
+
+const tVN = (key: I18nKey<LimitMessage['verification']>, param?: any) => {
+    return tN_<LimitMessage['verification'], HTMLElement>(verificationMessages, { key, param })
+}
+
+const generatePromptEle = (text: string): HTMLElement => {
+    const b = document.createElement('b')
+    b.innerText = text
+    const style: Partial<CSSStyleDeclaration> = {
+        userSelect: "none",
+    }
+    Object.assign(b.style || {}, style)
+    return b
+}
+
+const ANSWER_CANVAS_FONT_SIZE = 20
+
+const generatePromptCanvas = (text: string): HTMLCanvasElement => {
+    const ele = document.createElement('canvas')
+    const ctx = ele.getContext("2d")
+    const height = Math.floor(ANSWER_CANVAS_FONT_SIZE * 1.3)
+    ele.height = height
+    const font = LINK_STYLE.fontFamily
+    // Set font to measure width
+    ctx.font = font
+    const { width } = ctx.measureText(text)
+    ele.width = width
+    // Need set font again after width changed
+    ctx.font = font
+    ctx.fillStyle = 'rgb(238, 238, 238)'
+    ctx.fillText(text, 0, ANSWER_CANVAS_FONT_SIZE)
+    return ele
+}
+
+const CONFIRM_STYLE: Partial<CSSStyleDeclaration> = {
+    width: "500px",
+    left: "calc(50vw - 250px)",
+    top: "200px",
+    height: "250px",
+    padding: "50px 20px 20px 20px",
+    position: "absolute",
+    textAlign: "center",
+    background: "#111",
+    borderRadius: "8px",
+}
+
+const INPUT_STYLE: Partial<CSSStyleDeclaration> = {
+    color: "#000",
+    padding: "2px 6px",
+    borderRadius: "2px",
+    marginTop: "20px",
+    width: "200px",
+    border: "none",
+    outline: "none",
+}
+
+const FOOT_STYLE: Partial<CSSStyleDeclaration> = {
+    display: "flex",
+    marginTop: "20px",
+    justifyContent: "center",
+}
+
+const FOOT_BTN_STYLE: Partial<CSSStyleDeclaration> = {
+    cursor: "pointer",
+    padding: "5px 10px",
+    textDecoration: "underline",
+}
+
+const createFooterBtn = (text: string, onClick: () => void): HTMLDivElement => {
+    const btn = document.createElement('div')
+    btn.innerText = text
+    Object.assign(btn.style || {}, FOOT_BTN_STYLE)
+    btn.addEventListener('click', onClick)
+    return btn
+}
+
+export class DelayConfirm {
+    public dom: HTMLDivElement
+    private incorrectMessage: string
+    private answerValue: string
+    private isPassword: boolean = false
+    private input: HTMLInputElement
+    private visible = false
+    private onSuccess: () => void
+    private onError: (msg: string) => void
+
+    constructor(option: timer.option.DailyLimitOption) {
+        const { limitLevel = "nothing", limitPassword, limitVerifyDifficulty } = option || {}
+        let tips: I18nResultItem<HTMLElement>[] = []
+        if (limitLevel === "password" && limitPassword) {
+            this.answerValue = limitPassword
+            this.isPassword = true
+            tips.push(tV(msg => msg.pswInputTip))
+            this.incorrectMessage = tV(msg => msg.incorrectPsw)
+        } else if (limitLevel === "verification") {
+            const pair: VerificationPair = verificationProcessor.generate(limitVerifyDifficulty, locale)
+            const { prompt, promptParam, answer } = pair || {}
+            this.answerValue = typeof answer === 'function' ? tV(answer) : answer
+            this.incorrectMessage = tV(msg => msg.incorrectAnswer)
+            if (prompt) {
+                const promptTxt = typeof prompt === 'function'
+                    ? tV(prompt, { ...promptParam, answer: this.answerValue })
+                    : prompt
+                tips = tVN(msg => msg.inputTip, { prompt: generatePromptEle(promptTxt) })
+            } else {
+                const answer: HTMLElement = limitVerifyDifficulty === 'disgusting'
+                    ? generatePromptCanvas(this.answerValue)
+                    : generatePromptEle(this.answerValue)
+                tips = tVN(msg => msg.inputTip2, { answer })
+            }
+        } else {
+            return
+        }
+        this.dom = document.createElement("div")
+        Object.assign(this.dom.style || {}, CONFIRM_STYLE)
+        this.dom.style.display = 'none'
+        // tips
+        const tipContainer = document.createElement('div')
+        tipContainer.append(...tips)
+        this.dom.append(tipContainer)
+        this.initInput()
+        this.initFooter()
+    }
+
+    private initInput() {
+        this.input = document.createElement('input')
+        this.input.addEventListener("keypress", e => e?.key === "Enter" && this.handleConfirmClick())
+        Object.assign(this.input.style || {}, INPUT_STYLE)
+        this.isPassword && (this.input.type = 'password')
+        this.dom.append(this.input)
+    }
+
+    private initFooter() {
+        const footer = document.createElement('div')
+        Object.assign(footer.style || {}, FOOT_STYLE)
+        const cancelBtn = createFooterBtn('Cancel', () => this.hide())
+        const confirmBtn = createFooterBtn('Confirm', () => this.handleConfirmClick())
+        footer.append(confirmBtn)
+        footer.append(cancelBtn)
+        this.dom.append(footer)
+    }
+
+    private show() {
+        if (this.visible) return
+        this.visible = true
+        this.dom?.style && (this.dom.style.display = "inherit")
+        this.input?.focus?.()
+    }
+
+    private hide() {
+        if (!this.visible) return
+        this.visible = false
+        this.onSuccess = undefined
+        this.onError = undefined
+        this.dom?.style && (this.dom.style.display = "none")
+    }
+
+    private handleConfirmClick() {
+        const inputValue = this.input.value
+        if (inputValue === this.answerValue) {
+            this.onSuccess?.()
+        } else {
+            this.onError?.(this.incorrectMessage)
+        }
+    }
+
+    async doConfirm(): Promise<void> {
+        if (!this.dom) return Promise.resolve()
+        return new Promise<void>((resolve) => {
+            this.onSuccess = resolve
+            this.onError = msg => alert(msg)
+            this.show()
+        })
+    }
+}
+

src/content-script/limit/index.ts

@@ -30,12 +30,11 @@ export default async function processLimit(url: string) {
         const anyFail = allMatch(results, r => r.code === "fail")
         if (anyFail) return { code: "fail" }
         // Merge data of all the handlers
-        const datas = results
+        const items = results
             .filter(r => r.code === "success")
             .map(r => r.data)
             .filter(r => r !== undefined && r !== null)
-        const data = datas.length <= 1 ? datas[0] : datas
-        console.log("sdadsa", data)
+        const data = items.length <= 1 ? items[0] : items
         return { code: "success", data }
     })
 }

src/content-script/limit/modal.ts

@@ -4,6 +4,8 @@ import { LimitReason, LimitType, MaskModal } from "./common"
 import { sendMsg2Runtime } from "@api/chrome/runtime"
 import optionService from "@service/option-service"
 import { FILTER_STYLES, LINK_STYLE, MASK_STYLE } from "./modal-style"
+import { DelayConfirm } from "./delay/confirm"
+import { DelayButton } from "./delay/Button"
 
 const TYPE_SORT: { [reason in LimitType]: number } = {
     PERIOD: 0,
@@ -77,13 +79,15 @@ class ModalInstance implements MaskModal {
     delayHandlers: (() => void)[] = [
         () => sendMsg2Runtime('cs.moreMinutes', this.url)
     ]
+    options: timer.option.AllOption
 
     constructor(url: string) {
         this.url = url
         this.mask = document.createElement('div')
         this.mask.id = "_timer_mask"
         this.initStyle()
         window?.addEventListener?.("load", () => this.refresh())
+        optionService.getAllOption().then(val => this.options = val)
     }
 
     addDelayHandler(handler: () => void): void {
@@ -148,9 +152,8 @@ class ModalInstance implements MaskModal {
         beforeCount !== afterCount && this.refresh()
     }
 
-    private showModalInner(reason: LimitReason): any {
+    private showModalInner(reason: LimitReason): void {
         const url = this.url
-        const { allowDelay, type } = reason
 
         // Clear
         Array.from(this.mask.children).forEach(e => e.remove())
@@ -159,25 +162,13 @@ class ModalInstance implements MaskModal {
         this.mask.append(document.createElement("br"))
         this.mask.append(link2Setup(url))
 
-        const canDelay = (type === "DAILY" || type === "VISIT") && allowDelay
-
-        if (canDelay) {
-            const delayContainer = document.createElement('p')
-            delayContainer.style.marginTop = '100px'
-
-            // Only delay-allowed rules exist, can delay
-            // @since 0.4.0
-            const link = document.createElement('a')
-            Object.assign(link.style || {}, LINK_STYLE)
-            link.setAttribute('href', 'javascript:void(0)')
-            const text = t(msg => msg.more5Minutes)
-            link.innerText = text
-            link.onclick = () => [
-                this.delayHandlers?.forEach(h => h?.())
-            ]
-            delayContainer.append(link)
-            this.mask.append(delayContainer)
-        }
+        const delayConfirm = new DelayConfirm(this.options)
+        const delayButton = new DelayButton(
+            reason,
+            () => delayConfirm.doConfirm().then(() => this.delayHandlers?.forEach?.(h => h?.()))
+        )
+        this.mask.append(delayButton.dom)
+        this.mask.append(delayConfirm.dom)
 
         document.body.append(this.mask)
         document.body.style.overflow = 'hidden'

src/guide/locale.ts

@@ -1,13 +1,13 @@
 /**
  * Copyright (c) 2022 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
-import { I18nKey as _I18nKey, t as _t } from "@i18n"
-import { tN as _tN } from "@i18n/i18n-vue"
+import { I18nKey as _I18nKey, t as _t, tN as _tN } from "@i18n"
 import messages, { GuideMessage } from "@i18n/message/guide"
+import { VNode } from "vue"
 
 export type I18nKey = _I18nKey<GuideMessage>
 
@@ -18,5 +18,5 @@ export function t(key: I18nKey, param?: any) {
 
 export function tN(key: I18nKey, param?: any) {
     const props = { key, param }
-    return _tN<GuideMessage>(messages, props)
+    return _tN<GuideMessage, VNode>(messages, props)
 }