From c0cf0e6861eb443633036d53a28ca2b0cedc0a28 Mon Sep 17 00:00:00 2001
From: "haitao(lj)" <haitao@sifou.com>
Date: Mon, 9 Jan 2023 15:21:25 +0800
Subject: [PATCH] fix(siteName): Use dynamic site names on registration and
 login pages

---
 i18n/en_US.yaml                       |  2 +-
 ui/src/components/Footer/index.tsx    |  4 +---
 ui/src/components/Header/index.tsx    |  3 +--
 ui/src/pages/Users/Login/index.tsx    | 14 ++++++++++----
 ui/src/pages/Users/Register/index.tsx |  7 +++++--
 ui/src/stores/siteInfo.ts             |  6 +++++-
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index 476bc2a2..35d0f40f 100644
--- a/i18n/en_US.yaml
+++ b/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>.
diff --git a/ui/src/components/Footer/index.tsx b/ui/src/components/Footer/index.tsx
index eb31feec..578576ce 100644
--- a/ui/src/components/Footer/index.tsx
+++ b/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 =
-    siteInfoStore((state) => state.siteInfo.name) || DEFAULT_SITE_NAME;
+  const siteName = siteInfoStore((state) => state.siteInfo.name);
   const cc = `${fullYear} ${siteName}`;
   return (
     <footer className="bg-light py-3">
diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
index f98e3f4f..d18f9ae6 100644
--- a/ui/src/components/Header/index.tsx
+++ b/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>
 
diff --git a/ui/src/pages/Users/Login/index.tsx b/ui/src/pages/Users/Login/index.tsx
index ff8aec57..2172b75b 100644
--- a/ui/src/pages/Users/Login/index.tsx
+++ b/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 storeUser = loggedUserInfoStore((state) => state.user);
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
+  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}>
diff --git a/ui/src/pages/Users/Register/index.tsx b/ui/src/pages/Users/Register/index.tsx
index 2fb0d03c..fbf8b861 100644
--- a/ui/src/pages/Users/Register/index.tsx
+++ b/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} />
       ) : (
diff --git a/ui/src/stores/siteInfo.ts b/ui/src/stores/siteInfo.ts
index 978c10b4..e484f554 100644
--- a/ui/src/stores/siteInfo.ts
+++ b/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,
       };