From 4d2f9d749ef9953b1cde83dfdcab22d288e20518 Mon Sep 17 00:00:00 2001
From: GoEdgeLab <goedgecloud@gmail.com>
Date: Sun, 10 Sep 2023 18:05:38 +0800
Subject: [PATCH] =?UTF-8?q?WAF=E7=AD=96=E7=95=A5=E4=B8=AD=E9=AA=8C?=
 =?UTF-8?q?=E8=AF=81=E7=A0=81=E5=8A=A8=E4=BD=9C=E9=A1=B5=E9=9D=A2=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E4=B8=AD=E4=BD=BF=E7=94=A8<form></form>=E5=8C=85?=
 =?UTF-8?q?=E8=A3=B9${body}=E6=97=B6=E6=8F=90=E7=A4=BA=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/http-firewall-captcha-options.js          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/public/js/components/server/http-firewall-captcha-options.js b/web/public/js/components/server/http-firewall-captcha-options.js
index 3ddc34ae..54686f3b 100644
--- a/web/public/js/components/server/http-firewall-captcha-options.js
+++ b/web/public/js/components/server/http-firewall-captcha-options.js
@@ -30,7 +30,8 @@ Vue.component("http-firewall-captcha-options", {
 		return {
 			options: options,
 			isEditing: false,
-			summary: ""
+			summary: "",
+			uiBodyWarning: ""
 		}
 	},
 	watch: {
@@ -74,6 +75,13 @@ Vue.component("http-firewall-captcha-options", {
 		},
 		"options.uiIsOn": function (v) {
 			this.updateSummary()
+		},
+		"options.uiBody": function (v) {
+			if (/<form(>|\s).+\$\{body}.*<\/form>/s.test(v)) {
+				this.uiBodyWarning = "页面模板中不能使用<form></form>标签包裹\${body}变量，否则将导致验证码表单无法提交。"
+			} else {
+				this.uiBodyWarning = ""
+			}
 		}
 	},
 	methods: {
@@ -208,7 +216,7 @@ Vue.component("http-firewall-captcha-options", {
 					<td class="color-border">页面模板</td>
 					<td>
 						<textarea spellcheck="false" rows="2" v-model="options.uiBody"></textarea>
-						<p class="comment"><span v-if="options.uiBody.length > 0 && options.uiBody.indexOf('\${body}') < 0 " class="red">模板中必须包含\${body}表示验证码表单！</span>整个页面的模板，支持HTML，其中必须使用<code-label>\${body}</code-label>变量代表验证码表单，否则将无法正常显示验证码。</p>
+						<p class="comment"><span v-if="uiBodyWarning.length > 0" class="red">警告：{{uiBodyWarning}}</span><span v-if="options.uiBody.length > 0 && options.uiBody.indexOf('\${body}') < 0 " class="red">模板中必须包含\${body}表示验证码表单！</span>整个页面的模板，支持HTML，其中必须使用<code-label>\${body}</code-label>变量代表验证码表单，否则将无法正常显示验证码。</p>
 					</td>
 				</tr>
 			</tbody>