feat: i18n

src/routes/reg/Register.tsx

@@ -11,6 +11,7 @@ import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
 import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
 import GoogleLoginButton from "../../common/component/GoogleLoginButton";
 import GithubLoginButton from "../../common/component/GithubLoginButton";
+import { useTranslation } from "react-i18next";
 
 interface AuthForm {
   email: string;
@@ -19,6 +20,7 @@ interface AuthForm {
 }
 
 export default function Reg() {
+  const { t } = useTranslation("auth");
   const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
     useSendRegMagicLinkMutation();
   const [checkEmail, { isLoading: checkingEmail }] = useLazyCheckEmailQuery();
@@ -107,8 +109,8 @@ export default function Reg() {
     <>
       <div className="tips">
         <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
-        <h2 className="title">Sign Up to VoceChat</h2>
-        <span className="desc">Please enter your details.</span>
+        <h2 className="title">{t("reg.title")}</h2>
+        <span className="desc">{t("reg.desc")}</span>
       </div>
 
       <form onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
@@ -117,7 +119,7 @@ export default function Reg() {
           name="email"
           value={email}
           required
-          placeholder="Enter email"
+          placeholder={t("placeholder_email") || ""}
           data-type="email"
           onChange={handleInput}
         />
@@ -129,7 +131,7 @@ export default function Reg() {
           required
           data-type="password"
           onChange={handleInput}
-          placeholder="Enter password"
+          placeholder={t("placeholder_pwd") || ""}
         />
         <Input
           required
@@ -139,10 +141,10 @@ export default function Reg() {
           value={confirmPassword}
           data-type="confirmPassword"
           onChange={handleInput}
-          placeholder="Confirm Password"
+          placeholder={t("placeholder_confirm_pwd") || ""}
         ></Input>
         <Button type="submit" disabled={isLoading}>
-          {isLoading ? "Signing Up" : `Sign Up`}
+          {isLoading ? "Signing Up" : t("sign_up")}
         </Button>
       </form>
       <hr className="or" />

src/routes/reg/SignInLink.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 export default function SignInLink({ token }: { token?: string }) {
+  const { t } = useTranslation("auth");
   const handleSignIn = () => {
     location.href = "/#/login";
   };
@@ -14,8 +16,8 @@ export default function SignInLink({ token }: { token?: string }) {
 
   return (
     <div className="flex gap-1 mt-7 text-sm text-[#667085] justify-center">
-      <span>Have an account?</span>
-      <a onClick={handleSignIn} className="text-[#22d3ee]">Sign In</a>
+      <span>{t("reg.have_account")}</span>
+      <a onClick={handleSignIn} className="text-[#22d3ee] cursor-pointer">{t("sign_in")}</a>
     </div>
   );
 }