feat(dashboard): customize character length in graphical captcha (cloudreve/cloudreve#2879)

public/locales/de-DE/dashboard.json

@@ -473,6 +473,7 @@
     "captchaWidth": "Breite",
     "captchaHeight": "Höhe",
     "captchaLength": "Länge",
+    "captchaLengthDes": "Die Länge der Zeichen im Captcha.",
     "captchaMode": "Modus",
     "captchaModeNumber": "Zahlen",
     "captchaModeLetter": "Buchstaben",

public/locales/en-US/dashboard.json

@@ -472,6 +472,7 @@
     "captchaWidth": "Width",
     "captchaHeight": "Height",
     "captchaLength": "Length",
+    "captchaLengthDes": "The length of characters in the captcha.",
     "captchaMode": "Mode",
     "captchaModeNumber": "Numbers",
     "captchaModeLetter": "Letters",

public/locales/es-ES/dashboard.json

@@ -473,6 +473,7 @@
     "captchaWidth": "Ancho",
     "captchaHeight": "Altura",
     "captchaLength": "Longitud",
+    "captchaLengthDes": "La longitud de los caracteres en el captcha.",
     "captchaMode": "Modo",
     "captchaModeNumber": "Números",
     "captchaModeLetter": "Letras",

public/locales/fr-FR/dashboard.json

@@ -473,6 +473,7 @@
     "captchaWidth": "Largeur",
     "captchaHeight": "Hauteur",
     "captchaLength": "Longueur",
+    "captchaLengthDes": "La longueur des caractères dans le captcha.",
     "captchaMode": "Mode",
     "captchaModeNumber": "Chiffres",
     "captchaModeLetter": "Lettres",

public/locales/it-IT/dashboard.json

@@ -473,6 +473,7 @@
     "captchaWidth": "Larghezza",
     "captchaHeight": "Altezza",
     "captchaLength": "Lunghezza",
+    "captchaLengthDes": "La lunghezza dei caratteri nel captcha.",
     "captchaMode": "Modalità",
     "captchaModeNumber": "Numeri",
     "captchaModeLetter": "Lettere",

public/locales/ja-JP/dashboard.json

@@ -472,6 +472,7 @@
     "captchaWidth": "幅",
     "captchaHeight": "高さ",
     "captchaLength": "長さ",
+    "captchaLengthDes": "キャプチャ内の文字の長さ。",
     "captchaMode": "モード",
     "captchaModeNumber": "数字",
     "captchaModeLetter": "アルファベット",

public/locales/ko-KR/dashboard.json

@@ -472,6 +472,7 @@
     "captchaWidth": "너비",
     "captchaHeight": "높이",
     "captchaLength": "길이",
+    "captchaLengthDes": "캡차 내 문자의 길이입니다.",
     "captchaMode": "모드",
     "captchaModeNumber": "숫자",
     "captchaModeLetter": "문자",

public/locales/pt-BR/dashboard.json

@@ -473,6 +473,7 @@
     "captchaWidth": "Largura",
     "captchaHeight": "Altura",
     "captchaLength": "Comprimento",
+    "captchaLengthDes": "O comprimento dos caracteres no captcha.",
     "captchaMode": "Modo",
     "captchaModeNumber": "Números",
     "captchaModeLetter": "Letras",

public/locales/ru-RU/dashboard.json

@@ -473,6 +473,7 @@
     "captchaWidth": "Ширина",
     "captchaHeight": "Высота",
     "captchaLength": "Длина",
+    "captchaLengthDes": "Длина символов в капче.",
     "captchaMode": "Режим",
     "captchaModeNumber": "Цифры",
     "captchaModeLetter": "Буквы",

public/locales/zh-CN/dashboard.json

@@ -472,6 +472,7 @@
     "captchaWidth": "宽度",
     "captchaHeight": "高度",
     "captchaLength": "长度",
+    "captchaLengthDes": "验证码中字符的长度。",
     "captchaMode": "模式",
     "captchaModeNumber": "数字",
     "captchaModeLetter": "字母",

public/locales/zh-TW/dashboard.json

@@ -472,6 +472,7 @@
     "captchaWidth": "寬度",
     "captchaHeight": "高度",
     "captchaLength": "長度",
+    "captchaLengthDes": "驗證碼中字符的長度。",
     "captchaMode": "模式",
     "captchaModeNumber": "數字",
     "captchaModeLetter": "字母",

src/component/Admin/Settings/Captcha/GraphicCaptcha.tsx

@@ -1,10 +1,10 @@
+import { Collapse, FormControl, FormControlLabel, ListItemText, Stack, Switch } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { FormControl, FormControlLabel, ListItemText, Stack, Switch } from "@mui/material";
-import SettingForm from "../../../Pages/Setting/SettingForm.tsx";
-import { DenseSelect } from "../../../Common/StyledComponents.tsx";
-import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx";
-import * as React from "react";
 import { isTrueVal } from "../../../../session/utils.ts";
+import { DenseFilledTextField, DenseSelect } from "../../../Common/StyledComponents.tsx";
+import { SquareMenuItem } from "../../../FileManager/ContextMenu/ContextMenu.tsx";
+import SettingForm from "../../../Pages/Setting/SettingForm.tsx";
+import { NoMarginHelperText } from "../Settings.tsx";
 
 export interface GraphicCaptchaProps {
   values: {
@@ -41,6 +41,28 @@ const GraphicCaptcha = ({ values, setSettings }: GraphicCaptchaProps) => {
           </DenseSelect>
         </FormControl>
       </SettingForm>
+      <Collapse in={values.captcha_mode !== "2"} unmountOnExit>
+        <SettingForm title={t("settings.captchaLength")} lgWidth={5}>
+          <FormControl>
+            <DenseFilledTextField
+              value={values.captcha_CaptchaLen}
+              slotProps={{
+                htmlInput: {
+                  type: "number",
+                  min: 1,
+                  max: 10,
+                },
+              }}
+              onChange={(e) =>
+                setSettings({
+                  captcha_CaptchaLen: e.target.value,
+                })
+              }
+            />
+            <NoMarginHelperText>{t("settings.captchaLengthDes")}</NoMarginHelperText>
+          </FormControl>
+        </SettingForm>
+      </Collapse>
       {[
         {
           name: "complexOfNoiseText",