✨ (admin) 添加验证Cookie有效性

admin-frontend/src/features/cookieManager/CookieAddModal.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Form, Input, Modal } from '@arco-design/web-react';
 import { useNewCookieMutation } from './cookieConfigSlice';
+import { useAppDispatch } from '../../app/hooks';
+import validateCookie from './cookieValidateReq';
 
 interface CookieAddModalProps {
   visible: boolean;
@@ -12,10 +14,11 @@ function CookieAddModal({ visible, setVisible, siteName }: CookieAddModalProps)
   const FormItem = Form.Item;
   const [content, setContent] = useState<string>('');
   const [confirmLoading, setConfirmLoading] = useState(false);
-  const [newCoookie] = useNewCookieMutation();
+  const [newCookie] = useNewCookieMutation();
+  const dispatch = useAppDispatch();
 
   const onSubmit = () => {
-    const postPromise: ReturnType<typeof newCoookie> = newCoookie({ siteName, content });
+    const postPromise: ReturnType<typeof newCookie> = newCookie({ siteName, content });
     setConfirmLoading(true);
     postPromise.then(() => {
       setConfirmLoading(false);
@@ -35,12 +38,33 @@ function CookieAddModal({ visible, setVisible, siteName }: CookieAddModalProps)
     >
 
       <Form autoComplete="off">
-        <FormItem label="Site Name" required>
+        <FormItem label="站点" required>
           <Input placeholder="Please enter site name" value={siteName} disabled />
         </FormItem>
-        <FormItem label="Content" required>
+        <FormItem
+          label="Cookie"
+          required
+          field="content"
+          hasFeedback
+          rules={[
+            {
+              validator: (value, callback) => new Promise<void>((resolve) => {
+                dispatch(validateCookie(siteName, value))
+                  .then((res) => {
+                    if (res) {
+                      callback();
+                    } else {
+                      callback('Cookie 格式错误');
+                    }
+                    resolve();
+                  });
+              }),
+            },
+          ]}
+
+        >
           <Input.TextArea
-            placeholder="Please enter content"
+            placeholder="请输入 Cookie"
             value={content}
             onChange={setContent}
           />

admin-frontend/src/features/cookieManager/cookieConfigSlice.ts

@@ -40,7 +40,7 @@ export const cookieTargetApi = createApi({
   baseQuery: baseQueryWithAuth,
   tagTypes: ['CookieTarget'],
   endpoints: (builder) => ({
-    getCookieTargets: builder.query<CookieTarget[], {cookieId: number }>({
+    getCookieTargets: builder.query<CookieTarget[], { cookieId: number }>({
       query: ({ cookieId }) => `/cookie_target?cookie_id=${cookieId}`,
       providesTags: ['CookieTarget'],
     }),

admin-frontend/src/features/cookieManager/cookieValidateReq.ts

@@ -0,0 +1,20 @@
+import { AppThunk } from '../../app/store';
+import { baseUrl } from '../../utils/urls';
+
+// eslint-disable-next-line
+export const validCookie =
+  (siteName: string, content: string): AppThunk<Promise<string>> => async (_, getState) => {
+    const url = `${baseUrl}cookie/validate?site_name=${siteName}&content=${content}`;
+    const state = getState();
+    const authToken = state.auth.token;
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+      method: 'POST',
+    });
+    const resObj = await res.json();
+    return resObj.ok;
+  };
+
+export default validCookie;

admin-frontend/src/utils/type.ts

@@ -33,8 +33,8 @@ export interface PlatformConfig {
 }
 
 export interface SiteConfig {
-  name: string
-  enable_cookie: string
+  name: string;
+  enable_cookie: string;
 }
 
 export interface SubscribeConfig {
@@ -106,12 +106,12 @@ export interface CookieTarget {
 }
 
 export interface NewCookieParam {
-  siteName: string
-  content: string
+  siteName: string;
+  content: string;
 }
 
 export interface DelCookieParam {
-  cookieId: string
+  cookieId: string;
 }
 
 export interface NewCookieTargetParam {