fix(siteName): Use dynamic site names on registration and login pages

i18n/en_US.yaml

@@ -607,7 +607,7 @@ ui:
     msg:
       empty: Cannot be empty.
   login:
-    page_title: Welcome to Answer
+    page_title: Welcome to {{site_name}}
     info_sign: Don't have an account? <1>Sign up</1>
     info_login: Already have an account? <1>Log in</1>
     agreements: By registering, you agree to the <1>privacy policy</1> and <3>terms of service</3>.

ui/src/components/Footer/index.tsx

@@ -5,12 +5,10 @@ import { Trans } from 'react-i18next';
 import dayjs from 'dayjs';
 
 import { siteInfoStore } from '@/stores';
-import { DEFAULT_SITE_NAME } from '@/common/constants';
 
 const Index = () => {
   const fullYear = dayjs().format('YYYY');
-  const siteName =
+  const siteName = siteInfoStore((state) => state.siteInfo.name);
-    siteInfoStore((state) => state.siteInfo.name) || DEFAULT_SITE_NAME;
   const cc = `${fullYear} ${siteName}`;
   return (
     <footer className="bg-light py-3">

ui/src/components/Header/index.tsx

@@ -28,7 +28,6 @@ import {
   themeSettingStore,
 } from '@/stores';
 import { logout, useQueryNotificationStatus } from '@/services';
-import { DEFAULT_SITE_NAME } from '@/common/constants';
 
 import NavItems from './components/NavItems';
 
@@ -121,7 +120,7 @@ const Header: FC = () => {
                 />
               </>
             ) : (
-              <span>{siteInfo.name || DEFAULT_SITE_NAME}</span>
+              <span>{siteInfo.name}</span>
             )}
           </Navbar.Brand>
 

ui/src/pages/Users/Login/index.tsx

@@ -12,7 +12,11 @@ import type {
   FormDataType,
 } from '@/common/interface';
 import { Unactivate } from '@/components';
-import { loggedUserInfoStore, loginSettingStore } from '@/stores';
+import {
+  loggedUserInfoStore,
+  loginSettingStore,
+  siteInfoStore,
+} from '@/stores';
 import { guard, floppyNavigation, handleFormError } from '@/utils';
 import { login, checkImgCode } from '@/services';
 import { PicAuthCodeModal } from '@/components/Modal';
@@ -23,8 +27,8 @@ const Index: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [refresh, setRefresh] = useState(0);
-  const updateUser = loggedUserInfoStore((state) => state.update);
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
-  const storeUser = loggedUserInfoStore((state) => state.user);
+  const { user: storeUser, update: updateUser } = loggedUserInfoStore((_) => _);
   const loginSetting = loginSettingStore((state) => state.login);
   const [formData, setFormData] = useState<FormDataType>({
     e_mail: {
@@ -170,7 +174,9 @@ const Index: React.FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <h3 className="text-center mb-5">
+        {t('page_title', { site_name: siteName })}
+      </h3>
       {step === 1 && (
         <Col className="mx-auto" md={3}>
           <Form noValidate onSubmit={handleSubmit}>

ui/src/pages/Users/Register/index.tsx

@@ -4,13 +4,14 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import { Unactivate } from '@/components';
+import { siteInfoStore } from '@/stores';
 
 import SignUpForm from './components/SignUpForm';
 
 const Index: React.FC = () => {
   const [showForm, setShowForm] = useState(true);
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
-
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
   const onStep = () => {
     setShowForm((bol) => !bol);
   };
@@ -19,7 +20,9 @@ const Index: React.FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <h3 className="text-center mb-5">
+        {t('page_title', { site_name: siteName })}
+      </h3>
       {showForm ? (
         <SignUpForm callback={onStep} />
       ) : (

ui/src/stores/siteInfo.ts

@@ -1,6 +1,7 @@
 import create from 'zustand';
 
 import { AdminSettingsGeneral } from '@/common/interface';
+import { DEFAULT_SITE_NAME } from '@/common/constants';
 
 interface SiteInfoType {
   siteInfo: AdminSettingsGeneral;
@@ -9,7 +10,7 @@ interface SiteInfoType {
 
 const siteInfo = create<SiteInfoType>((set) => ({
   siteInfo: {
-    name: '',
+    name: DEFAULT_SITE_NAME,
     description: '',
     short_description: '',
     site_url: '',
@@ -19,6 +20,9 @@ const siteInfo = create<SiteInfoType>((set) => ({
   update: (params) =>
     set((_) => {
       const o = { ..._.siteInfo, ...params };
+      if (!o.name) {
+        o.name = DEFAULT_SITE_NAME;
+      }
       return {
         siteInfo: o,
       };