feat: i18n

2022-11-23 19:38:45 +08:00
parent 9b3dc2f740
commit 48ffdcc1b5
97 changed files with 1470 additions and 652 deletions
@@ -7,8 +7,10 @@ import Label from "../../../common/component/styled/Label";
 import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "../../../common/hook/useConfig";
 import { FirebaseConfig } from "../../../types/server";
+import { useTranslation } from "react-i18next";

 export default function ConfigFirebase() {
+  const { t } = useTranslation("setting");
  const { values, toggleEnable, updateConfig, setValues, reset, changed } = useConfig("firebase");
  const handleUpdate = () => {
    // const { token_url, description } = values;
@@ -34,33 +36,33 @@ export default function ConfigFirebase() {
    <StyledContainer>
      <div className="inputs">
        <div className="input row">
-          <Label>Enable</Label>
+          <Label>{t("firebase.enable")}</Label>
          <Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
        </div>
        <div className="input">
-          <Label htmlFor="name">Token Url</Label>
+          <Label htmlFor="name">{t("firebase.token_url")}</Label>
          <Input
            disabled={!enabled}
            data-type="token_url"
            onChange={handleChange}
            value={token_url}
            name="token_url"
-            placeholder="Token URL"
+            placeholder={t("firebase.token_url") || ""}
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">Project ID</Label>
+          <Label htmlFor="desc">{t("firebase.project_id")}</Label>
          <Input
            disabled={!enabled}
            data-type="project_id"
            onChange={handleChange}
            value={project_id}
            name="project_id"
-            placeholder="Project ID"
+            placeholder={t("firebase.project_id") || ""}
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">Private Key</Label>
+          <Label htmlFor="desc">{t("firebase.private_key")}</Label>
          <Textarea
            rows={10}
            spellCheck={false}
@@ -69,18 +71,18 @@ export default function ConfigFirebase() {
            onChange={handleChange}
            value={private_key}
            name="private_key"
-            placeholder="Private key"
+            placeholder={t("firebase.private_key") || ""}
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">Client Email</Label>
+          <Label htmlFor="desc">{t("firebase.client_email")}</Label>
          <Input
            disabled={!enabled}
            data-type="client_email"
            onChange={handleChange}
            value={client_email}
            name="client_email"
-            placeholder="Client Email address"
+            placeholder={t("firebase.client_email") || ""}
          />
        </div>
      </div>
@@ -6,6 +6,7 @@ import Toggle from "../../../../common/component/styled/Toggle";
 import options from "./items.json";
 import Styled from "./styled";
 import IconMinus from "../../../../assets/icons/minus.circle.svg";
+import { useTranslation } from "react-i18next";

 interface Issuer {
  domain: string;
@@ -19,6 +20,7 @@ interface Props {
 }

 const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
+  const { t } = useTranslation();
  const [select, setSelect] = useState<Partial<Option> | null>(null);
  const [newDomain, setNewDomain] = useState("");

@@ -111,7 +113,7 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
                setNewDomain("");
              }}
            >
-              Add
+              {t("action.add")}
            </Button>
          </div>
        </li>
@@ -11,8 +11,10 @@ import IssuerList from "./IssuerList";
 import useGoogleAuthConfig from "../../../common/hook/useGoogleAuthConfig";
 import useGithubAuthConfig from "../../../common/hook/useGithubAuthConfig";
 import { LoginConfig } from "../../../types/server";
+import { useTranslation } from "react-i18next";

 export default function Logins() {
+  const { t } = useTranslation("setting", { keyPrefix: "login" });
  const {
    changed: clientIdChanged,
    clientId,
@@ -74,9 +76,9 @@ export default function Logins() {
          <div className="row">
            <div className="title">
              <div className="txt">
-                <Label>Password</Label>
+                <Label>{t("password")}</Label>
              </div>
-              <span className="desc">Allows members login with password.</span>
+              <span className="desc">{t("password_desc")}</span>
            </div>
            <Toggle
              onClick={handleToggle.bind(null, { password: !password })}
@@ -88,9 +90,9 @@ export default function Logins() {
          <div className="row">
            <div className="title">
              <div className="txt">
-                <Label>Magic Link</Label>
+                <Label>{t("magic_link")}</Label>
              </div>
-              <span className="desc">Allows members login with Magic Link.</span>
+              <span className="desc">{t("magic_link_desc")}</span>
            </div>
            <Toggle
              onClick={handleToggle.bind(null, { magic_link: !magic_link })}
@@ -102,10 +104,10 @@ export default function Logins() {
          <div className="row">
            <div className="title">
              <div className="txt">
-                <Label>Google</Label>
+                <Label>{t("google")}</Label>
                <Tooltip link="https://doc.voce.chat/setting/third_login/login-google" />
              </div>
-              <span className="desc">Allows members login with Google.</span>
+              <span className="desc">{t("google_desc")}</span>
            </div>
            <Toggle
              onClick={handleToggle.bind(null, { google: !google })}
@@ -125,10 +127,10 @@ export default function Logins() {
          <div className="row">
            <div className="title">
              <div className="txt">
-                <Label>Github</Label>
+                <Label>{t("github")}</Label>
                <Tooltip link="https://doc.voce.chat/setting/third_login/login-github" />
              </div>
-              <span className="desc">Allows members login with Github.</span>
+              <span className="desc">{t("github_desc")}</span>
            </div>
            <Toggle
              onClick={handleToggle.bind(null, { github: !github })}
@@ -156,10 +158,10 @@ export default function Logins() {
          <div className="row">
            <div className="title">
              <div className="txt">
-                <Label>Metamask</Label>
+                <Label>{t("metamask")}</Label>
                <Tooltip link="https://doc.voce.chat/setting/third_login/login-metamask" />
              </div>
-              <span className="desc">Allows members login with Metamask.</span>
+              <span className="desc">{t("metamask_desc")}</span>
            </div>
            <Toggle
              onClick={handleToggle.bind(null, { metamask: !metamask })}
@@ -171,10 +173,10 @@ export default function Logins() {
          <div className="row">
            <div className="title">
              <div className="txt">
-                <Label htmlFor="desc">OIDC</Label>
+                <Label htmlFor="desc">{t("oidc")}</Label>
                <Tooltip link="https://doc.voce.chat/setting/third_login/login-webid" />
              </div>
-              <span className="desc">Save my login details for next time.</span>
+              <span className="desc">{t("oidc_desc")}</span>
            </div>
          </div>
          <div className="row">
@@ -17,8 +17,10 @@ import Label from "../../../common/component/styled/Label";
 import SaveTip from "../../../common/component/SaveTip";
 import toast from "react-hot-toast";
 import { SMTPConfig } from "../../../types/server";
+import { useTranslation } from "react-i18next";

 export default function ConfigSMTP() {
+  const { t } = useTranslation("setting", { keyPrefix: "smtp" });
  const [testEmail, setTestEmail] = useState("");
  const [sendTestEmail, { isSuccess, isError }] = useSendTestEmailMutation();
  const { reset, updateConfig, values, setValues, changed, toggleEnable } = useConfig("smtp");
@@ -61,11 +63,11 @@ export default function ConfigSMTP() {
    <StyledContainer>
      <div className="inputs">
        <div className="input row">
-          <Label>Enable</Label>
+          <Label>{t("enable")}</Label>
          <Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
        </div>
        <div className="input">
-          <Label htmlFor="name">Host</Label>
+          <Label htmlFor="name">{t("host")}</Label>
          <Input
            disabled={!enabled}
            data-type="host"
@@ -76,7 +78,7 @@ export default function ConfigSMTP() {
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">Port</Label>
+          <Label htmlFor="desc">{t("port")}</Label>
          <Input
            disabled={!enabled}
            type={"number"}
@@ -88,7 +90,7 @@ export default function ConfigSMTP() {
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">From</Label>
+          <Label htmlFor="desc">{t("from")}</Label>
          <Input
            disabled={!enabled}
            data-type="from"
@@ -99,7 +101,7 @@ export default function ConfigSMTP() {
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">Username</Label>
+          <Label htmlFor="desc">{t("username")}</Label>
          <Input
            disabled={!enabled}
            data-type="username"
@@ -110,7 +112,7 @@ export default function ConfigSMTP() {
          />
        </div>
        <div className="input">
-          <Label htmlFor="desc">Password</Label>
+          <Label htmlFor="desc">{t("password")}</Label>
          <Input
            type={"password"}
            disabled={!enabled}
@@ -130,7 +132,7 @@ export default function ConfigSMTP() {
          className="link"
          rel="noreferrer"
        >
-          How to set up SMTP?
+          {t("how_to")}
        </a>
      </div>
      <StyledTest>
@@ -143,7 +145,7 @@ export default function ConfigSMTP() {
          placeholder="test@email.com"
        />
        <Button disabled={!enabled || !testEmail} onClick={handleTestClick}>
-          Send Test Email
+          {t("send_test_email")}
        </Button>
      </StyledTest>
      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
@@ -1,22 +1,17 @@
 import Tippy from "@tippyjs/react";
 import { roundArrow } from "tippy.js";
 import "tippy.js/dist/svg-arrow.css";
-import styled from "styled-components";
 import IconQuestion from "../../../assets/icons/question.svg";
+// import { useTranslation } from "react-i18next";
+import { PropsWithChildren } from "react";
+import { Trans } from 'react-i18next';

-const StyledContent = styled.div`
-  padding: 8px 12px;
-  background: #101828;
-  border-radius: 8px;
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 18px;
-  color: #ffffff;
-  a {
-    color: #55c7ec;
-  }
-`;
+const Link = ({ to, children }: PropsWithChildren<{ to: string }>) => {

+  return <a href={to} className="text-primary-500" target="_blank" rel="noreferrer" >
+    {children}
+  </a>;
+};
 export default function Tooltip({ link = "#" }) {
  return (
    <Tippy
@@ -25,13 +20,11 @@ export default function Tooltip({ link = "#" }) {
      arrow={roundArrow}
      placement="bottom"
      content={
-        <StyledContent>
-          Need more detail? See our{" "}
-          <a target={"doc"} href={link}>
-            doc
-          </a>
-          .
-        </StyledContent>
+        <div className="py-2 px-3 bg-gray-800 text-xs text-white rounded-lg">
+          <Trans ns="setting" i18nKey={"login.more_details"}  >
+            <Link to={link} />
+          </Trans>
+        </div>
      }
    >
      <IconQuestion className="icon" />