i18n: basic setting and public access setting in dashboard

This commit is contained in:
HFO4 2022-05-25 19:59:33 +08:00
parent ea50113e9f
commit c0f8a7ef6d
4 changed files with 138 additions and 65 deletions

View File

@ -44,5 +44,50 @@
"buyPro": "Upgrade to Pro",
"publishedAt": "published at <0></0>",
"newsTag": "announcements"
},
"settings": {
"saved": "Settings saved.",
"save": "Save",
"basicInformation": "Basic information",
"mainTitle": "Main title",
"mainTitleDes": "Main title of the website.",
"subTitle": "Subtitle",
"subTitleDes": "Subtitle of the website.",
"siteDescription": "Site description",
"siteDescriptionDes": "Description of the website, which may be displayed in the shared page summary.",
"siteURL": "Site URL",
"siteURLDes": "Very important, please make sure it is consistent with the actual situation. When using cloud storage policy and payment platform, please fill in the address that can be accessed by WAN.",
"customFooterHTML": "Custom footer HTML",
"customFooterHTMLDes": "Custom HTML code inserted at the bottom of the page.",
"pwa": "Progressive Web Application (PWA)",
"smallIcon": "Small icon",
"smallIconDes": "URL of the small icon with the ico as extension",
"mediumIcon": "Medium icon",
"mediumIconDes": "URL of the medium icon, prefer size at 192x192, png format.",
"largeIcon": "Large icon",
"largeIconDes": "URL of the medium icon, prefer size at 512x512, png format.",
"displayMode": "Display mode",
"displayModeDes": "The display mode of a PWA application after it's installed.",
"themeColor": "Theme color",
"themeColorDes": "CSS color value that affect the color of the status bar on the PWA launch screen, the status bar in the content page, and the address bar.",
"backgroundColor": "Background color",
"backgroundColorDes": "CSS color value.",
"hint": "Hint",
"webauthnNoHttps": "Web Authn requires your website to be HTTPS enabled, and please confirm that in Settings - Basic - Site URL also uses HTTPS.",
"accountManagement": "Accounts",
"allowNewRegistrations": "Accept new signups",
"allowNewRegistrationsDes": "After disabled, no new users can be registered, unless manually added by admins.",
"emailActivation": "Email activation",
"emailActivationDes": "After enabled, new users need to click the activation link in the email to complete signups. Please make sure the email delivery settings are correct, otherwise the activation email will not be delivered.",
"captchaForSignup": "Captcha for signups",
"captchaForSignupDes": "Whether to enable the captcha for signups.",
"captchaForLogin": "Captcha for logins",
"captchaForLoginDes": "Whether to enable the captcha for logins.",
"captchaForReset": "Captcha for resetting password",
"captchaForResetDes": "Whether to enable the captcha for resetting password.",
"webauthnDes": "Whether to allow users to log in using a hardware authenticator, the website must enable HTTPS for this to work.",
"webauthn": "Hardware authenticator",
"defaultGroup": "Default group",
"defaultGroupDes": "The initial user group after user registration."
}
}

View File

@ -46,6 +46,48 @@
"newsTag": "notice"
},
"settings": {
"saved": "设置已更改"
"saved": "设置已更改",
"save": "保存",
"basicInformation": "基本信息",
"mainTitle": "主标题",
"mainTitleDes": "站点的主标题",
"subTitle": "副标题",
"subTitleDes": "站点的副标题",
"siteDescription": "站点描述",
"siteDescriptionDes": "站点描述信息,可能会在分享页面摘要内展示",
"siteURL": "站点 URL",
"siteURLDes": "非常重要,请确保与实际情况一致。使用云存储策略、支付平台时,请填入可以被外网访问的地址",
"customFooterHTML": "页脚代码",
"customFooterHTMLDes": "在页面底部插入的自定义 HTML 代码",
"pwa": "渐进式应用 (PWA)",
"smallIcon": "小图标",
"smallIconDes": "扩展名为 ico 的小图标地址",
"mediumIcon": "中图标",
"mediumIconDes": "192x192 的中等图标地址png 格式",
"largeIcon": "大图标",
"largeIconDes": "512x512 的大图标地址png 格式",
"displayMode": "展示模式",
"displayModeDes": "PWA 应用添加后的展示模式",
"themeColor": "主题色",
"themeColorDes": "CSS 色值,影响 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色",
"backgroundColor": "背景色",
"backgroundColorDes": "CSS 色值",
"hint": "提示",
"webauthnNoHttps": "Web Authn 需要您的站点启用 HTTPS并确认 参数设置 - 站点信息 - 站点URL 也使用了 HTTPS 后才能开启。",
"accountManagement": "注册与登录",
"allowNewRegistrations": "允许新用户注册",
"allowNewRegistrationsDes": "关闭后,无法再通过前台注册新的用户",
"emailActivation": "邮件激活",
"emailActivationDes": "开启后,新用户注册需要点击邮件中的激活链接才能完成。请确认邮件发送设置是否正确,否则激活邮件无法送达。",
"captchaForSignup": "注册验证码",
"captchaForSignupDes": "是否启用注册表单验证码",
"captchaForLogin": "登录验证码",
"captchaForLoginDes": "是否启用登录表单验证码",
"captchaForReset": "找回密码验证码",
"captchaForResetDes": "是否启用找回密码表单验证码",
"webauthnDes": "是否允许用户使用绑定的外部验证器登录,站点必须启动 HTTPS 才能使用。",
"webauthn": "外部验证器登录",
"defaultGroup": "默认用户组",
"defaultGroupDes": "用户注册后的初始用户组"
}
}

View File

@ -13,6 +13,7 @@ import { useDispatch } from "react-redux";
import { toggleSnackbar } from "../../../redux/explorer";
import API from "../../../middleware/Api";
import AlertDialog from "../Dialogs/Alert";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles((theme) => ({
root: {
@ -34,6 +35,8 @@ const useStyles = makeStyles((theme) => ({
}));
export default function Access() {
const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
const { t: tVas } = useTranslation("dashboard", { keyPrefix: "vas" });
const classes = useStyles();
const [loading, setLoading] = useState(false);
const [options, setOptions] = useState({
@ -112,7 +115,7 @@ export default function Access() {
options: option,
})
.then(() => {
ToggleSnackbar("top", "right", "设置已更改", "success");
ToggleSnackbar("top", "right", t("saved"), "success");
})
.catch((error) => {
ToggleSnackbar("top", "right", error.message, "error");
@ -125,17 +128,15 @@ export default function Access() {
return (
<div>
<AlertDialog
title={"提示"}
msg={
"Web Authn 需要您的站点启用 HTTPS并确认 参数设置 - 站点信息 - 站点URL 也使用了 HTTPS 后才能开启。"
}
title={t("hint")}
msg={t("webauthnNoHttps")}
onClose={() => setHttpAlert(false)}
open={httpAlert}
/>
<form onSubmit={submit}>
<div className={classes.root}>
<Typography variant="h6" gutterBottom>
注册与登录
{t("accountManagement")}
</Typography>
<div className={classes.formContainer}>
<div className={classes.form}>
@ -151,10 +152,10 @@ export default function Access() {
)}
/>
}
label="允许新用户注册"
label={t("allowNewRegistrations")}
/>
<FormHelperText id="component-helper-text">
关闭后无法再通过前台注册新的用户
{t("allowNewRegistrationsDes")}
</FormHelperText>
</FormControl>
</div>
@ -172,10 +173,10 @@ export default function Access() {
)}
/>
}
label="邮件激活"
label={t("emailActivation")}
/>
<FormHelperText id="component-helper-text">
开启后新用户注册需要点击邮件中的激活链接才能完成请确认邮件发送设置是否正确否则激活邮件无法送达
{t("emailActivationDes")}
</FormHelperText>
</FormControl>
</div>
@ -193,10 +194,10 @@ export default function Access() {
)}
/>
}
label="注册验证码"
label={t("captchaForSignup")}
/>
<FormHelperText id="component-helper-text">
是否启用注册表单验证码
{t("captchaForSignupDes")}
</FormHelperText>
</FormControl>
</div>
@ -214,10 +215,10 @@ export default function Access() {
)}
/>
}
label="登录验证码"
label={t("captchaForLogin")}
/>
<FormHelperText id="component-helper-text">
是否启用登录表单验证码
{t("captchaForLoginDes")}
</FormHelperText>
</FormControl>
</div>
@ -235,10 +236,10 @@ export default function Access() {
)}
/>
}
label="找回密码验证码"
label={t("captchaForReset")}
/>
<FormHelperText id="component-helper-text">
是否启用找回密码表单验证码
{t("captchaForResetDes")}
</FormHelperText>
</FormControl>
</div>
@ -266,11 +267,10 @@ export default function Access() {
}}
/>
}
label="Web Authn"
label={t("webauthn")}
/>
<FormHelperText id="component-helper-text">
是否允许用户使用绑定的外部验证器登录站点必须启动
HTTPS 才能使用
{t("webauthnDes")}
</FormHelperText>
</FormControl>
</div>
@ -278,7 +278,7 @@ export default function Access() {
<div className={classes.form}>
<FormControl>
<InputLabel htmlFor="component-helper">
默认用户组
{t("defaultGroup")}
</InputLabel>
<Select
value={options.default_group}
@ -302,7 +302,7 @@ export default function Access() {
})}
</Select>
<FormHelperText id="component-helper-text">
用户注册后的初始用户组
{t("defaultGroupDes")}
</FormHelperText>
</FormControl>
</div>
@ -316,7 +316,7 @@ export default function Access() {
variant={"contained"}
color={"primary"}
>
保存
{t("save")}
</Button>
</div>
</form>

View File

@ -11,6 +11,7 @@ import React, { useCallback, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { toggleSnackbar } from "../../../redux/explorer";
import API from "../../../middleware/Api";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles((theme) => ({
root: {
@ -32,6 +33,7 @@ const useStyles = makeStyles((theme) => ({
}));
export default function SiteInformation() {
const { t } = useTranslation("dashboard", { keyPrefix: "settings" });
const classes = useStyles();
const [loading, setLoading] = useState(false);
const [options, setOptions] = useState({
@ -39,7 +41,6 @@ export default function SiteInformation() {
siteName: "",
siteTitle: "",
siteDes: "",
siteICPId: "",
siteScript: "",
pwa_small_icon: "",
pwa_medium_icon: "",
@ -90,7 +91,7 @@ export default function SiteInformation() {
options: option,
})
.then(() => {
ToggleSnackbar("top", "right", "设置已更改", "success");
ToggleSnackbar("top", "right", t("saved"), "success");
})
.catch((error) => {
ToggleSnackbar("top", "right", error.message, "error");
@ -105,13 +106,13 @@ export default function SiteInformation() {
<form onSubmit={submit}>
<div className={classes.root}>
<Typography variant="h6" gutterBottom>
基本信息
{t("basicInformation")}
</Typography>
<div className={classes.formContainer}>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
主标题
{t("mainTitle")}
</InputLabel>
<Input
value={options.siteName}
@ -119,42 +120,42 @@ export default function SiteInformation() {
required
/>
<FormHelperText id="component-helper-text">
站点的主标题
{t("mainTitleDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
副标题
{t("subTitle")}
</InputLabel>
<Input
value={options.siteTitle}
onChange={handleChange("siteTitle")}
/>
<FormHelperText id="component-helper-text">
站点的副标题
{t("subTitleDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
站点描述
{t("siteDescription")}
</InputLabel>
<Input
value={options.siteDes}
onChange={handleChange("siteDes")}
/>
<FormHelperText id="component-helper-text">
站点描述信息可能会在分享页面摘要内展示
{t("siteDescriptionDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
站点URL
{t("siteURL")}
</InputLabel>
<Input
type={"url"}
@ -163,28 +164,14 @@ export default function SiteInformation() {
required
/>
<FormHelperText id="component-helper-text">
非常重要请确保与实际情况一致使用云存储策略支付平台时请填入可以被外网访问的地址
{t("siteURLDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
网站备案号
</InputLabel>
<Input
value={options.siteICPId}
onChange={handleChange("siteICPId")}
/>
<FormHelperText id="component-helper-text">
工信部网站ICP备案号
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
页脚代码
{t("customFooterHTML")}
</InputLabel>
<Input
multiline
@ -192,7 +179,7 @@ export default function SiteInformation() {
onChange={handleChange("siteScript")}
/>
<FormHelperText id="component-helper-text">
在页面底部插入的自定义HTML代码
{t("customFooterHTMLDes")}
</FormHelperText>
</FormControl>
</div>
@ -200,55 +187,55 @@ export default function SiteInformation() {
</div>
<div className={classes.root}>
<Typography variant="h6" gutterBottom>
渐进式应用 (PWA)
{t("pwa")}
</Typography>
<div className={classes.formContainer}>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
小图标
{t("smallIcon")}
</InputLabel>
<Input
value={options.pwa_small_icon}
onChange={handleChange("pwa_small_icon")}
/>
<FormHelperText id="component-helper-text">
扩展名为 ico 的小图标地址
{t("smallIconDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
中图标
{t("mediumIcon")}
</InputLabel>
<Input
value={options.pwa_medium_icon}
onChange={handleChange("pwa_medium_icon")}
/>
<FormHelperText id="component-helper-text">
192x192 的中等图标地址png 格式
{t("mediumIconDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
大图标
{t("largeIcon")}
</InputLabel>
<Input
value={options.pwa_large_icon}
onChange={handleChange("pwa_large_icon")}
/>
<FormHelperText id="component-helper-text">
512x512 的大图标地址png 格式
{t("largeIconDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl>
<InputLabel htmlFor="component-helper">
展示模式
{t("displayMode")}
</InputLabel>
<Select
value={options.pwa_display}
@ -268,22 +255,21 @@ export default function SiteInformation() {
</MenuItem>
</Select>
<FormHelperText id="component-helper-text">
PWA 应用添加后的展示模式
{t("displayModeDes")}
</FormHelperText>
</FormControl>
</div>
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
主题色
{t("themeColor")}
</InputLabel>
<Input
value={options.pwa_theme_color}
onChange={handleChange("pwa_theme_color")}
/>
<FormHelperText id="component-helper-text">
CSS 色值影响 PWA
启动画面上状态栏内容页中状态栏地址栏的颜色
{t("themeColorDes")}
</FormHelperText>
</FormControl>
</div>
@ -292,7 +278,7 @@ export default function SiteInformation() {
<div className={classes.form}>
<FormControl fullWidth>
<InputLabel htmlFor="component-helper">
背景色
{t("backgroundColor")}
</InputLabel>
<Input
value={options.pwa_background_color}
@ -301,7 +287,7 @@ export default function SiteInformation() {
)}
/>
<FormHelperText id="component-helper-text">
CSS 色值
{t("backgroundColorDes")}
</FormHelperText>
</FormControl>
</div>
@ -314,7 +300,7 @@ export default function SiteInformation() {
variant={"contained"}
color={"primary"}
>
保存
{t("save")}
</Button>
</div>
</form>