From 65efc6babddb28d8d27ff7109e1a117b4867b2ac Mon Sep 17 00:00:00 2001
From: HFO4 <912394456@qq.com>
Date: Thu, 9 Jun 2022 16:09:20 +0800
Subject: [PATCH] i18n: captcha settings

---
 public/locales/en-US/dashboard.json    |  37 ++++-
 public/locales/zh-CN/dashboard.json    |  37 ++++-
 src/component/Admin/Setting/Captcha.js | 210 +++++++++++++++----------
 3 files changed, 198 insertions(+), 86 deletions(-)

diff --git a/public/locales/en-US/dashboard.json b/public/locales/en-US/dashboard.json
index ecb7a01..a517f2e 100644
--- a/public/locales/en-US/dashboard.json
+++ b/public/locales/en-US/dashboard.json
@@ -208,6 +208,41 @@
     "thumbFormatDes": "Available: png/jpg",
     "thumbQuality": "Quality",
     "thumbQualityDes": "Compression quality percentage, valid only for jpg encoding.",
-    "thumbGC": "Run GC after thumb generated"
+    "thumbGC": "Run GC after thumb generated",
+    "captcha": "Captcha",
+    "captchaType": "Captcha type",
+    "plainCaptcha": "Plain",
+    "reCaptchaV2": "reCAPTCHA V2",
+    "tencentCloudCaptcha": "Tencent Cloud Captcha",
+    "captchaProvider": "Provider of the captcha service.",
+    "plainCaptchaTitle": "Plain captcha",
+    "captchaWidth": "Width",
+    "captchaHeight": "Height",
+    "captchaLength": "Length",
+    "captchaMode": "Mode",
+    "captchaModeNumber": "Numbers",
+    "captchaModeLetter": "Letters",
+    "captchaModeMath": "Math",
+    "captchaModeNumberLetter": "Numbers + Letters",
+    "captchaElement": "Elements inside of the captcha image.",
+    "complexOfNoiseText": "Complex of noise text",
+    "complexOfNoiseDot": "Complex of noise dots",
+    "showHollowLine": "Show hollow lines",
+    "showNoiseDot": "Show noise dots",
+    "showNoiseText": "Show noise text",
+    "showSlimeLine": "Show slime lines",
+    "showSineLine": "Show sine lines",
+    "siteKey": "Site KEY",
+    "siteKeyDes": "You can find it at <0>App Management Page</0>.",
+    "siteSecret": "Secret",
+    "siteSecretDes": "You can find it at <0>App Management Page</0>.",
+    "secretID": "SecretId",
+    "secretIDDes": "You can find it at <0>Access Management Page</0>.",
+    "secretKey": "SecretKey",
+    "secretKeyDes": "You can find it at <0>Access Management Page</0>.",
+    "tCaptchaAppID": "APPID",
+    "tCaptchaAppIDDes": "You can find it at <0>Captcha Management Page</0>.",
+    "tCaptchaSecretKey": "App Secret Key",
+    "tCaptchaSecretKeyDes": "You can find it at <0>Captcha Management Page</0>."
   }
 }
\ No newline at end of file
diff --git a/public/locales/zh-CN/dashboard.json b/public/locales/zh-CN/dashboard.json
index 1f746a1..d2ade7d 100644
--- a/public/locales/zh-CN/dashboard.json
+++ b/public/locales/zh-CN/dashboard.json
@@ -208,6 +208,41 @@
     "thumbFormatDes": "可选：png/jpg",
     "thumbQuality": "图像质量",
     "thumbQualityDes": "压缩质量百分比，只针对 jpg 编码有效",
-    "thumbGC": "生成完成后立即回收内存"
+    "thumbGC": "生成完成后立即回收内存",
+    "captcha": "验证码",
+    "captchaType": "验证码类型",
+    "plainCaptcha": "普通",
+    "reCaptchaV2": "reCAPTCHA V2",
+    "tencentCloudCaptcha": "腾讯云验证码",
+    "captchaProvider": "验证码类型",
+    "plainCaptchaTitle": "普通验证码",
+    "captchaWidth": "宽度",
+    "captchaHeight": "高度",
+    "captchaLength": "长度",
+    "captchaMode": "模式",
+    "captchaModeNumber": "数字",
+    "captchaModeLetter": "字母",
+    "captchaModeMath": "算数",
+    "captchaModeNumberLetter": "数字+字母",
+    "captchaElement": "验证码的形式",
+    "complexOfNoiseText": "加强干扰文字",
+    "complexOfNoiseDot": "加强干扰点",
+    "showHollowLine": "使用空心线",
+    "showNoiseDot": "使用噪点",
+    "showNoiseText": "使用干扰文字",
+    "showSlimeLine": "使用波浪线",
+    "showSineLine": "使用正弦线",
+    "siteKey": "Site KEY",
+    "siteKeyDes": "<0>应用管理页面</0> 获取到的的 网站密钥",
+    "siteSecret": "Secret",
+    "siteSecretDes": "<0>应用管理页面</0> 获取到的的 秘钥",
+    "secretID": "SecretId",
+    "secretIDDes": "<0>访问密钥页面</0> 获取到的的 SecretId",
+    "secretKey": "SecretKey",
+    "secretKeyDes": "<0>访问密钥页面</0> 获取到的的 SecretKey",
+    "tCaptchaAppID": "APPID",
+    "tCaptchaAppIDDes": "<0>图形验证页面</0> 获取到的的 APPID",
+    "tCaptchaSecretKey": "App Secret Key",
+    "tCaptchaSecretKeyDes": "<0>图形验证页面</0> 获取到的的 App Secret Key"
   }
 }
\ No newline at end of file
diff --git a/src/component/Admin/Setting/Captcha.js b/src/component/Admin/Setting/Captcha.js
index 7204910..0634fa2 100644
--- a/src/component/Admin/Setting/Captcha.js
+++ b/src/component/Admin/Setting/Captcha.js
@@ -14,7 +14,7 @@ import Link from "@material-ui/core/Link";
 import { toggleSnackbar } from "../../../redux/explorer";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -101,7 +101,7 @@ export default function Captcha() {
             options: option,
         })
             .then(() => {
-                ToggleSnackbar("top", "right", "设置已更改", "success");
+                ToggleSnackbar("top", "right", t("saved"), "success");
             })
             .catch((error) => {
                 ToggleSnackbar("top", "right", error.message, "error");
@@ -124,29 +124,31 @@ export default function Captcha() {
             <form onSubmit={submit}>
                 <div className={classes.root}>
                     <Typography variant="h6" gutterBottom>
-                        验证码
+                        {t("captcha")}
                     </Typography>
                     <div className={classes.formContainer}>
                         <div className={classes.form}>
                             <FormControl fullWidth>
                                 <InputLabel htmlFor="component-helper">
-                                    验证码类型
+                                    {t("captchaType")}
                                 </InputLabel>
                                 <Select
                                     value={options.captcha_type}
                                     onChange={handleChange("captcha_type")}
                                     required
                                 >
-                                    <MenuItem value={"normal"}>普通</MenuItem>
+                                    <MenuItem value={"normal"}>
+                                        {t("plainCaptcha")}
+                                    </MenuItem>
                                     <MenuItem value={"recaptcha"}>
-                                        reCAPTCHA V2
+                                        {t("reCaptchaV2")}
                                     </MenuItem>
                                     <MenuItem value={"tcaptcha"}>
-                                        腾讯云验证码
+                                        {t("tencentCloudCaptcha")}
                                     </MenuItem>
                                 </Select>
                                 <FormHelperText id="component-helper-text">
-                                    验证码类型
+                                    {t("captchaProvider")}
                                 </FormHelperText>
                             </FormControl>
                         </div>
@@ -156,13 +158,13 @@ export default function Captcha() {
                 {options.captcha_type === "normal" && (
                     <div className={classes.root}>
                         <Typography variant="h6" gutterBottom>
-                            普通验证码
+                            {t("plainCaptchaTitle")}
                         </Typography>
                         <div className={classes.formContainer}>
                             <div className={classes.form}>
                                 <FormControl>
                                     <InputLabel htmlFor="component-helper">
-                                        宽度
+                                        {t("captchaWidth")}
                                     </InputLabel>
                                     <Input
                                         type={"number"}
@@ -180,7 +182,7 @@ export default function Captcha() {
                             <div className={classes.form}>
                                 <FormControl>
                                     <InputLabel htmlFor="component-helper">
-                                        高度
+                                        {t("captchaHeight")}
                                     </InputLabel>
                                     <Input
                                         type={"number"}
@@ -200,7 +202,7 @@ export default function Captcha() {
                             <div className={classes.form}>
                                 <FormControl>
                                     <InputLabel htmlFor="component-helper">
-                                        长度
+                                        {t("captchaLength")}
                                     </InputLabel>
                                     <Input
                                         type={"number"}
@@ -219,52 +221,58 @@ export default function Captcha() {
                             <div className={classes.form}>
                                 <FormControl>
                                     <InputLabel htmlFor="component-helper">
-                                        模式
+                                        {t("captchaMode")}
                                     </InputLabel>
                                     <Select
                                         value={options.captcha_mode}
                                         onChange={handleChange("captcha_mode")}
                                         required
                                     >
-                                        <MenuItem value={"0"}>数字</MenuItem>
-                                        <MenuItem value={"1"}>字母</MenuItem>
-                                        <MenuItem value={"2"}>算数</MenuItem>
+                                        <MenuItem value={"0"}>
+                                            {t("captchaModeNumber")}
+                                        </MenuItem>
+                                        <MenuItem value={"1"}>
+                                            {t("captchaModeLetter")}
+                                        </MenuItem>
+                                        <MenuItem value={"2"}>
+                                            {t("captchaModeMath")}
+                                        </MenuItem>
                                         <MenuItem value={"3"}>
-                                            数字+字母
+                                            {t("captchaModeNumberLetter")}
                                         </MenuItem>
                                     </Select>
                                     <FormHelperText id="component-helper-text">
-                                        验证码的形式
+                                        {t("captchaElement")}
                                     </FormHelperText>
                                 </FormControl>
                             </div>
                             {[
                                 {
-                                    name: "加强干扰文字",
+                                    name: "complexOfNoiseText",
                                     field: "captcha_ComplexOfNoiseText",
                                 },
                                 {
-                                    name: "加强干扰点",
+                                    name: "complexOfNoiseDot",
                                     field: "captcha_ComplexOfNoiseDot",
                                 },
                                 {
-                                    name: "使用空心线",
+                                    name: "showHollowLine",
                                     field: "captcha_IsShowHollowLine",
                                 },
                                 {
-                                    name: "使用噪点",
+                                    name: "showNoiseDot",
                                     field: "captcha_IsShowNoiseDot",
                                 },
                                 {
-                                    name: "使用干扰文字",
+                                    name: "showNoiseText",
                                     field: "captcha_IsShowNoiseText",
                                 },
                                 {
-                                    name: "使用波浪线",
+                                    name: "showSlimeLine",
                                     field: "captcha_IsShowSlimeLine",
                                 },
                                 {
-                                    name: "使用正弦线",
+                                    name: "showSineLine",
                                     field: "captcha_IsShowSineLine",
                                 },
                             ].map((input) => (
@@ -282,7 +290,7 @@ export default function Captcha() {
                                                     )}
                                                 />
                                             }
-                                            label={input.name}
+                                            label={t(input.name)}
                                         />
                                     </FormControl>
                                 </div>
@@ -294,14 +302,14 @@ export default function Captcha() {
                 {options.captcha_type === "recaptcha" && (
                     <div className={classes.root}>
                         <Typography variant="h6" gutterBottom>
-                            reCAPTCHA V2
+                            {t("reCaptchaV2")}
                         </Typography>
                         <div className={classes.formContainer}>
                             <div className={classes.form}>
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
                                         <InputLabel htmlFor="component-helper">
-                                            Site KEY
+                                            {t("siteKey")}
                                         </InputLabel>
                                         <Input
                                             required
@@ -311,15 +319,19 @@ export default function Captcha() {
                                             )}
                                         />
                                         <FormHelperText id="component-helper-text">
-                                            <Link
-                                                href={
-                                                    "https://www.google.com/recaptcha/admin/create"
-                                                }
-                                                target={"_blank"}
-                                            >
-                                                应用管理页面
-                                            </Link>{" "}
-                                            获取到的的 网站密钥
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={"settings.siteKeyDes"}
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://www.google.com/recaptcha/admin/create"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
@@ -327,7 +339,7 @@ export default function Captcha() {
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
                                         <InputLabel htmlFor="component-helper">
-                                            Secret
+                                            {t("siteSecret")}
                                         </InputLabel>
                                         <Input
                                             required
@@ -339,15 +351,21 @@ export default function Captcha() {
                                             )}
                                         />
                                         <FormHelperText id="component-helper-text">
-                                            <Link
-                                                href={
-                                                    "https://www.google.com/recaptcha/admin/create"
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.siteSecretDes"
                                                 }
-                                                target={"_blank"}
-                                            >
-                                                应用管理页面
-                                            </Link>{" "}
-                                            获取到的的 秘钥
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://www.google.com/recaptcha/admin/create"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
@@ -359,14 +377,14 @@ export default function Captcha() {
                 {options.captcha_type === "tcaptcha" && (
                     <div className={classes.root}>
                         <Typography variant="h6" gutterBottom>
-                            腾讯云验证码
+                            {t("tencentCloudCaptcha")}
                         </Typography>
                         <div className={classes.formContainer}>
                             <div className={classes.form}>
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
                                         <InputLabel htmlFor="component-helper">
-                                            SecretId
+                                            {t("secretID")}
                                         </InputLabel>
                                         <Input
                                             required
@@ -378,15 +396,21 @@ export default function Captcha() {
                                             )}
                                         />
                                         <FormHelperText id="component-helper-text">
-                                            <Link
-                                                href={
-                                                    "https://console.cloud.tencent.com/capi"
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.siteSecretDes"
                                                 }
-                                                target={"_blank"}
-                                            >
-                                                访问密钥页面
-                                            </Link>{" "}
-                                            获取到的的 SecretId
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/capi"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
@@ -394,7 +418,7 @@ export default function Captcha() {
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
                                         <InputLabel htmlFor="component-helper">
-                                            SecretKey
+                                            {t("secretKey")}
                                         </InputLabel>
                                         <Input
                                             required
@@ -406,15 +430,21 @@ export default function Captcha() {
                                             )}
                                         />
                                         <FormHelperText id="component-helper-text">
-                                            <Link
-                                                href={
-                                                    "https://console.cloud.tencent.com/capi"
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.secretKeyDes"
                                                 }
-                                                target={"_blank"}
-                                            >
-                                                访问密钥页面
-                                            </Link>{" "}
-                                            获取到的的 SecretKey
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/capi"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
@@ -422,7 +452,7 @@ export default function Captcha() {
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
                                         <InputLabel htmlFor="component-helper">
-                                            APPID
+                                            {t("tCaptchaAppID")}
                                         </InputLabel>
                                         <Input
                                             required
@@ -434,15 +464,21 @@ export default function Captcha() {
                                             )}
                                         />
                                         <FormHelperText id="component-helper-text">
-                                            <Link
-                                                href={
-                                                    "https://console.cloud.tencent.com/captcha/graphical"
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.tCaptchaAppIDDes"
                                                 }
-                                                target={"_blank"}
-                                            >
-                                                图形验证页面
-                                            </Link>{" "}
-                                            获取到的的 APPID
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/captcha/graphical"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
@@ -450,7 +486,7 @@ export default function Captcha() {
                                 <div className={classes.form}>
                                     <FormControl fullWidth>
                                         <InputLabel htmlFor="component-helper">
-                                            App Secret Key
+                                            {t("tCaptchaSecretKey")}
                                         </InputLabel>
                                         <Input
                                             required
@@ -462,15 +498,21 @@ export default function Captcha() {
                                             )}
                                         />
                                         <FormHelperText id="component-helper-text">
-                                            <Link
-                                                href={
-                                                    "https://console.cloud.tencent.com/captcha/graphical"
+                                            <Trans
+                                                ns={"dashboard"}
+                                                i18nKey={
+                                                    "settings.tCaptchaSecretKeyDes"
                                                 }
-                                                target={"_blank"}
-                                            >
-                                                图形验证页面
-                                            </Link>{" "}
-                                            获取到的的 App Secret Key
+                                                components={[
+                                                    <Link
+                                                        key={0}
+                                                        href={
+                                                            "https://console.cloud.tencent.com/captcha/graphical"
+                                                        }
+                                                        target={"_blank"}
+                                                    />,
+                                                ]}
+                                            />
                                         </FormHelperText>
                                     </FormControl>
                                 </div>
@@ -486,7 +528,7 @@ export default function Captcha() {
                         variant={"contained"}
                         color={"primary"}
                     >
-                        保存
+                        {t("save")}
                     </Button>
                 </div>
             </form>