Add verification messages for file download process

frontend/src/i18n.ts

@@ -167,6 +167,8 @@ export const i18nData = {
       "Downloads Descending": "Downloads Descending",
       "File Url": "File Url",
       "Provide a file url for the server to download, and the file will be moved to the selected storage.": "Provide a file url for the server to download, and the file will be moved to the selected storage.",
+      "Verifying your request": "Verifying your request",
+      "Please check your network if the verification takes too long or the captcha does not appear.": "Please check your network if the verification takes too long or the captcha does not appear.",
     }
   },
   "zh-CN": {
@@ -337,6 +339,8 @@ export const i18nData = {
       "Downloads Descending": "下载量降序",
       "File Url": "文件链接",
       "Provide a file url for the server to download, and the file will be moved to the selected storage.": "提供一个文件链接供服务器下载，文件将被移动到选定的存储中。",
+      "Verifying your request": "正在验证您的请求",
+      "Please check your network if the verification takes too long or the captcha does not appear.": "如果验证时间过长或验证码未出现, 请检查您的网络连接",
     }
   },
   "zh-TW": {
@@ -507,6 +511,8 @@ export const i18nData = {
       "Downloads Descending": "下載量降序",
       "File Url": "檔案連結",
       "Provide a file url for the server to download, and the file will be moved to the selected storage.": "提供一個檔案連結供伺服器下載，檔案將被移動到選定的儲存中。",
+      "Verifying your request": "正在驗證您的請求",
+      "Please check your network if the verification takes too long or the captcha does not appear.": "如果驗證時間過長或驗證碼未出現，請檢查您的網絡連接。",
     }
   }
 }

frontend/src/pages/resource_details_page.tsx

@@ -380,19 +380,25 @@ function CloudflarePopup({file}: { file: RFile }) {
 
   const [isLoading, setLoading] = useState(true)
 
-  return <div className={"menu bg-base-100 rounded-box z-1 w-80 p-2 shadow-sm h-20 relative"}>
+  const {t} = useTranslation()
+
+  return <div className={"menu bg-base-100 rounded-box z-1 w-80 p-2 shadow-sm relative"}>
     {
       isLoading ? <div className={"absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center"}>
         <span className={"loading loading-spinner loading-lg"}></span>
       </div> : null
     }
-    <Turnstile siteKey={app.cloudflareTurnstileSiteKey!} onWidgetLoad={() => {
+    <h3 className={"font-bold m-2"}>{t("Verifying your request")}</h3>
-      setLoading(false)
+    <div className={"h-20 w-full"}>
-    }} onSuccess={(token) => {
+      <Turnstile siteKey={app.cloudflareTurnstileSiteKey!} onWidgetLoad={() => {
-      closePopup();
+        setLoading(false)
-      const link = network.getFileDownloadLink(file.id, token);
+      }} onSuccess={(token) => {
-      window.open(link, "_blank");
+        closePopup();
-    }}></Turnstile>
+        const link = network.getFileDownloadLink(file.id, token);
+        window.open(link, "_blank");
+      }}></Turnstile>
+    </div>
+    <p className={"text-xs text-base-content/80 m-2"}>{t("Please check your network if the verification takes too long or the captcha does not appear.")}</p>
   </div>
 }