feat: support configuring method and headers in webhook

ui/src/components/access/AccessFormWebhookConfig.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input, Switch } from "antd";
+import { Form, type FormInstance, Input, Select, Switch } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
@@ -18,6 +18,9 @@ export type AccessFormWebhookConfigProps = {
 const initFormModel = (): AccessFormWebhookConfigFieldValues => {
   return {
     url: "",
+    method: "POST",
+    headers: "Content-Type: application/json",
+    allowInsecureConnections: false,
   };
 };
 
@@ -26,10 +29,34 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
 
   const formSchema = z.object({
     url: z.string().url(t("common.errmsg.url_invalid")),
+    method: z.union([z.literal("GET"), z.literal("POST"), z.literal("PUT"), z.literal("PATCH"), z.literal("DELETE")], {
+      message: t("access.form.webhook_method.placeholder"),
+    }),
+    headers: z
+      .string()
+      .nullish()
+      .refine((v) => {
+        if (!v) return true;
+
+        const lines = v.split(/\r?\n/);
+        for (const line of lines) {
+          if (line.split(":").length < 2) {
+            return false;
+          }
+        }
+        return true;
+      }, t("access.form.webhook_headers.errmsg.invalid")),
     allowInsecureConnections: z.boolean().nullish(),
   });
   const formRule = createSchemaFieldRule(formSchema);
 
+  const handleWebhookHeadersBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    let value = e.target.value;
+    value = value.trim();
+    value = value.replace(/(?<!\r)\n/g, "\r\n");
+    formInst.setFieldValue("headers", value);
+  };
+
   const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
     onValuesChange?.(values);
   };
@@ -47,6 +74,22 @@ const AccessFormWebhookConfig = ({ form: formInst, formName, disabled, initialVa
         <Input placeholder={t("access.form.webhook_url.placeholder")} />
       </Form.Item>
 
+      <Form.Item name="method" label={t("access.form.webhook_method.label")} rules={[formRule]}>
+        <Select
+          options={["GET", "POST", "PUT", "PATCH", "DELETE"].map((s) => ({ label: s, value: s }))}
+          placeholder={t("access.form.webhook_method.placeholder")}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="headers"
+        label={t("access.form.webhook_headers.label")}
+        rules={[formRule]}
+        tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.webhook_headers.tooltip") }}></span>}
+      >
+        <Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} placeholder={t("access.form.webhook_headers.placeholder")} onBlur={handleWebhookHeadersBlur} />
+      </Form.Item>
+
       <Form.Item
         name="allowInsecureConnections"
         label={t("access.form.webhook_allow_insecure_conns.label")}

ui/src/domain/access.ts

@@ -307,7 +307,11 @@ export type AccessConfigForWangsu = {
 
 export type AccessConfigForWebhook = {
   url: string;
+  method: string;
+  headers?: string;
   allowInsecureConnections?: boolean;
+  templateDataForDeployment?: string;
+  templateDataForNotification?: string;
 };
 
 export type AccessConfigForWestcn = {

ui/src/i18n/locales/en/nls.access.json

@@ -340,6 +340,12 @@
   "access.form.wangsu_api_key.tooltip": "For more information, see <a href=\"https://en.wangsu.com/document/account-manage/15776\" target=\"_blank\">https://en.wangsu.com/document/account-manage/15776</a>",
   "access.form.webhook_url.label": "Webhook URL",
   "access.form.webhook_url.placeholder": "Please enter Webhook URL",
+  "access.form.webhook_method.label": "Webhook request method",
+  "access.form.webhook_method.placeholder": "Please select Webhook request method",
+  "access.form.webhook_headers.label": "Webhook request headers (Optional)",
+  "access.form.webhook_headers.placeholder": "Please enter Webhook request headers",
+  "access.form.webhook_headers.errmsg.invalid": "Please enter a valid request headers",
+  "access.form.webhook_headers.tooltip": "Format: <br><i>key1: val2<br>key2: val2</i><br><br>Example: <br><i>Content-Type: application/json<br>User-Agent: certimate</i>",
   "access.form.webhook_allow_insecure_conns.label": "Insecure SSL/TLS connections",
   "access.form.webhook_allow_insecure_conns.tooltip": "Allowing insecure connections may lead to data leak or tampering. Use this option only when under trusted networks.",
   "access.form.webhook_allow_insecure_conns.switch.on": "Allow",

ui/src/i18n/locales/zh/nls.access.json

@@ -340,6 +340,12 @@
   "access.form.wangsu_api_key.tooltip": "这是什么？请参阅 <a href=\"https://www.wangsu.com/document/account-manage/15776\" target=\"_blank\">https://www.wangsu.com/document/account-manage/15776</a>",
   "access.form.webhook_url.label": "Webhook 回调地址",
   "access.form.webhook_url.placeholder": "请输入 Webhook 回调地址",
+  "access.form.webhook_method.label": "Webhook 请求谓词",
+  "access.form.webhook_method.placeholder": "请选择 Webhook 请求谓词",
+  "access.form.webhook_headers.label": "Webhook 请求标头（可选）",
+  "access.form.webhook_headers.placeholder": "请输入 Webhook 请求标头",
+  "access.form.webhook_headers.errmsg.invalid": "请输入有效的请求标头",
+  "access.form.webhook_headers.tooltip": "格式：<br><i>key1: val2<br>key2: val2</i><br><br>示例：<br><i>Content-Type: application/json<br>User-Agent: certimate</i>",
   "access.form.webhook_allow_insecure_conns.label": "忽略 SSL/TLS 证书错误",
   "access.form.webhook_allow_insecure_conns.tooltip": "忽略 SSL/TLS 证书错误可能导致数据泄露或被篡改。建议仅在可信网络下启用。",
   "access.form.webhook_allow_insecure_conns.switch.on": "允许",