chore: server name in login and reg page

public/locales/en/auth.json

@@ -1,6 +1,6 @@
 {
   "login": {
-    "title": "Login to VoceChat",
+    "title": "Login to {{name}}",
     "desc": "Please enter your details.",
     "google": "Sign in with Google",
     "github": "Sign in with GitHub",
@@ -10,7 +10,7 @@
     "no_account": "Don't have an account?"
   },
   "reg": {
-    "title": "Sign Up to VoceChat",
+    "title": "Sign Up to {{name}}",
     "desc": "Please enter your details.",
     "google": "Sign Up with Google",
     "github": "Sign Up with GitHub",

public/locales/zh/auth.json

@@ -1,6 +1,6 @@
 {
   "login": {
-    "title": "登录VoceChat",
+    "title": "登录{{name}}",
     "desc": "请输入用户名密码",
     "google": "谷歌登录",
     "github": "Github登录",
@@ -10,7 +10,7 @@
     "no_account": "没有账号？"
   },
   "reg": {
-    "title": "注册VoceChat",
+    "title": "注册{{name}}",
     "desc": "请输入邮箱和密码",
     "google": "谷歌注册",
     "github": "Github注册",

src/routes/login/index.tsx

@@ -15,8 +15,10 @@ import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query";
 import { useTranslation } from "react-i18next";
 import SocialLoginButtons from "./SocialLoginButtons";
 import Divider from "../../common/component/Divider";
+import { useAppSelector } from "../../app/store";
 
 export default function LoginPage() {
+  const serverName = useAppSelector(store => store.server.name);
   const { t } = useTranslation("auth");
   const { t: ct } = useTranslation();
   const { data: enableSMTP, isLoading: loadingSMTPStatus } = useGetSMTPStatusQuery();
@@ -128,7 +130,7 @@ export default function LoginPage() {
       <div className="py-8 px-10 shadow-md rounded-xl">
         <div className="flex-center flex-col pb-6">
           <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-3 md:mb-7 rounded-full" />
-          <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("login.title")}</h2>
+          <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("login.title", { name: serverName })}</h2>
           <span className="text-gray-400 dark:text-gray-100">{t("login.desc")}</span>
         </div>
         <form className="flex flex-col gap-5 w-80 md:min-w-[360px] " onSubmit={handleLogin}>

src/routes/reg/Register.tsx

@@ -13,6 +13,7 @@ import { useGetLoginConfigQuery } from "../../app/services/server";
 import SocialLoginButtons from "../login/SocialLoginButtons";
 import { setAuthData } from "../../app/slices/auth.data";
 import { useDispatch } from "react-redux";
+import { useAppSelector } from "../../app/store";
 
 interface AuthForm {
   name?: string,
@@ -22,6 +23,7 @@ interface AuthForm {
 }
 
 export default function Register() {
+  const serverName = useAppSelector(store => store.server.name);
   const { t } = useTranslation("auth");
   const { t: ct } = useTranslation();
   const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
@@ -125,7 +127,7 @@ export default function Register() {
     <>
       <div className="flex-center flex-col pb-6">
         <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 md:mb-7 rounded-full" />
-        <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("reg.title")}</h2>
+        <h2 className="font-semibold text-2xl text-gray-800 dark:text-white md:mb-2">{t("reg.title", { name: serverName })}</h2>
         <span className="hidden md:block text-gray-400 dark:text-gray-100">{t("reg.desc")}</span>
       </div>