From 76736975653e5febd861df714260938aa625c55c Mon Sep 17 00:00:00 2001 From: Jason Chuang Date: Fri, 13 Mar 2026 05:14:49 +0800 Subject: [PATCH] apply html title and description to match the page contents --- public/index.html | 6 +++--- src/components/usePageTitle.js | 21 ++++++++++++++++++- src/pages/Organization/DetailPage/index.js | 4 ++++ .../Organization/DetailPage_FromUser/index.js | 4 ++++ src/pages/Organization/SearchPage/index.js | 3 +++ src/pages/User/ManagePage_OrgPublic/index.js | 4 ++++ .../User/SearchPage_Organization/index.js | 4 ++++ .../ForgotPassword/AfterForgotPasswordPage.js | 4 ++++ .../AuthCallback/ResetPasswordSuccess.js | 4 ++++ .../authentication/ForgotPassword/index.js | 3 +++ .../ForgotUsername/AfterForgotUsernamePage.js | 4 ++++ .../AuthCallback/ResetPasswordSuccess.js | 4 ++++ .../authentication/ForgotUsername/index.js | 3 +++ src/pages/authentication/Register.js | 3 +++ src/pages/authentication/RegisterCustom.js | 4 ++++ .../auth-forms/AuthLoginCustom.js | 4 ++++ src/pages/extra-pages/ErrorPage.js | 3 +++ .../extra-pages/ImportantNoticePage/index.js | 3 +++ .../extra-pages/PrivacyPolicyPage/index.js | 3 +++ src/pages/extra-pages/UserMenuPub1/index.js | 4 ++++ 20 files changed, 88 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index 4b587cd..b049e2e 100644 --- a/public/index.html +++ b/public/index.html @@ -8,10 +8,10 @@ - + - PNSPS + PNSPS - Public Notice Submission and Payment System and so they're language-dependent too + const metaTitle = document.querySelector('meta[name="title"]'); + if (metaTitle) { + metaTitle.setAttribute("content", fullTitle); + } + + const metaDescription = document.querySelector('meta[name="description"]'); + if (metaDescription) { + metaDescription.setAttribute("content", fullTitle); + } + + // Keep in sync with current locale + if (document.documentElement) { + document.documentElement.lang = intl.locale || "en"; + } }, [messageIdOrText, intl]); } \ No newline at end of file diff --git a/src/pages/Organization/DetailPage/index.js b/src/pages/Organization/DetailPage/index.js index 006e492..72a621c 100644 --- a/src/pages/Organization/DetailPage/index.js +++ b/src/pages/Organization/DetailPage/index.js @@ -22,6 +22,7 @@ import { isORGLoggedIn, isPrimaryLoggedIn } from "utils/Utils"; +import usePageTitle from "components/usePageTitle"; const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, @@ -42,6 +43,9 @@ import { const OrganizationDetailPage = () => { + // Localized document title/meta for organisation details (GLD) + usePageTitle("organizationProfile"); + const params = useParams(); const [formData, setFormData] = React.useState({}) const [list, setList] = React.useState([]) diff --git a/src/pages/Organization/DetailPage_FromUser/index.js b/src/pages/Organization/DetailPage_FromUser/index.js index be32755..6cb4de2 100644 --- a/src/pages/Organization/DetailPage_FromUser/index.js +++ b/src/pages/Organization/DetailPage_FromUser/index.js @@ -25,10 +25,14 @@ const BackgroundHead = { backgroundColor: '#0C489E', backgroundPosition: 'right' } +import usePageTitle from "components/usePageTitle"; // ==============================|| DASHBOARD - DEFAULT ||============================== // const OrganizationDetailPage_FromUser = () => { + // Localized document title/meta for organisation details (from user) + usePageTitle("organizationProfile"); + const params = useParams(); const [formData, setFormData] = useState({}) const [isLoading, setLoding] = useState(true); diff --git a/src/pages/Organization/SearchPage/index.js b/src/pages/Organization/SearchPage/index.js index 778cb49..71b9052 100644 --- a/src/pages/Organization/SearchPage/index.js +++ b/src/pages/Organization/SearchPage/index.js @@ -6,6 +6,7 @@ import MainCard from "components/MainCard"; import { useEffect, useState } from "react"; import * as React from "react"; import { getSearchCriteria } from "auth/utils"; +import usePageTitle from "components/usePageTitle"; // import LoadingComponent from "../extra-pages/LoadingComponent"; // import SearchForm from "./OrganizationSearchForm"; @@ -29,6 +30,8 @@ const BackgroundHead = { // ==============================|| DASHBOARD - DEFAULT ||============================== // const OrganizationSearchPage = () => { + // Localized document title/meta for organisation search + usePageTitle("organizationProfile"); const [searchCriteria, setSearchCriteria] = useState({}); const [onReady, setOnReady] = useState(false); diff --git a/src/pages/User/ManagePage_OrgPublic/index.js b/src/pages/User/ManagePage_OrgPublic/index.js index 03e31dc..5a24ba1 100644 --- a/src/pages/User/ManagePage_OrgPublic/index.js +++ b/src/pages/User/ManagePage_OrgPublic/index.js @@ -12,6 +12,7 @@ import {GET_PUBLIC_ORG_USER_LIST, GET_USER_UNLOCK, GET_SET_PRIMARY_USER, GET_SET import * as DateUtils from "utils/DateUtils"; import { FormattedMessage, useIntl } from "react-intl"; import { useTheme } from "@emotion/react"; +import usePageTitle from "components/usePageTitle"; const BackgroundHead = { backgroundImage: `url(${titleBackgroundImg})`, @@ -28,6 +29,9 @@ const BackgroundHead = { const ManageOrgUserPage = () => { + // Localized document title/meta for manage org users + usePageTitle("companyOrUserRecord"); + const intl = useIntl(); const theme = useTheme(); const isMdOrLg = useMediaQuery(theme.breakpoints.up('md')); diff --git a/src/pages/User/SearchPage_Organization/index.js b/src/pages/User/SearchPage_Organization/index.js index 4af63ff..1d63d2a 100644 --- a/src/pages/User/SearchPage_Organization/index.js +++ b/src/pages/User/SearchPage_Organization/index.js @@ -8,6 +8,7 @@ import Loadable from 'components/Loadable'; import * as HttpUtils from "utils/HttpUtils"; import {GET_ORG_COMBO} from "utils/ApiPathConst"; import { getSearchCriteria } from "auth/utils"; +import usePageTitle from "components/usePageTitle"; const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const SearchForm = Loadable(lazy(() => import('./UserSearchForm_Organization'))); @@ -27,6 +28,9 @@ const BackgroundHead = { // ==============================|| DASHBOARD - DEFAULT ||============================== // const UserSearchPage_Organization = () => { + // Localized document title/meta for organization user search + usePageTitle("organizationProfile"); + const [orgCombo, setOrgCombo] = useState([]); const [searchCriteria, setSearchCriteria] = useState({}); const [onReady, setOnReady] = useState(false); diff --git a/src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js b/src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js index fbbe889..83cfa3d 100644 --- a/src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js +++ b/src/pages/authentication/ForgotPassword/AfterForgotPasswordPage.js @@ -18,10 +18,14 @@ import { useNavigate } from "react-router-dom"; import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; import {FormattedMessage, useIntl} from "react-intl"; +import usePageTitle from "components/usePageTitle"; // ==============================|| DASHBOARD - DEFAULT ||============================== // const AfterForgotPasswordPage = () => { + // Localized document title/meta for forgot password "sent" page + usePageTitle("forgotUserPassword"); + const intl = useIntl(); const navigate = useNavigate(); diff --git a/src/pages/authentication/ForgotPassword/AuthCallback/ResetPasswordSuccess.js b/src/pages/authentication/ForgotPassword/AuthCallback/ResetPasswordSuccess.js index 502600f..bc1a884 100644 --- a/src/pages/authentication/ForgotPassword/AuthCallback/ResetPasswordSuccess.js +++ b/src/pages/authentication/ForgotPassword/AuthCallback/ResetPasswordSuccess.js @@ -14,11 +14,15 @@ import MainCard from 'components/MainCard'; import {FormattedMessage,} from "react-intl"; import { Link } from 'react-router-dom'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import usePageTitle from "components/usePageTitle"; // ==============================|| DASHBOARD - DEFAULT ||============================== // const ResetPasswordSuccess = () => { + // Localized document title/meta for reset password success + usePageTitle("resetPasswordSuccess"); + const [isLoading, setLoding] = React.useState(true); React.useEffect(() => { diff --git a/src/pages/authentication/ForgotPassword/index.js b/src/pages/authentication/ForgotPassword/index.js index 5e65f0e..16bcc0b 100644 --- a/src/pages/authentication/ForgotPassword/index.js +++ b/src/pages/authentication/ForgotPassword/index.js @@ -11,6 +11,7 @@ import { import Loadable from 'components/Loadable'; import { lazy } from 'react'; +import usePageTitle from "components/usePageTitle"; const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const ForgotPasswordApplyForm = Loadable(lazy(() => import('./ForgotPasswordApplyForm'))); @@ -18,6 +19,8 @@ const ForgotPasswordApplyForm = Loadable(lazy(() => import('./ForgotPasswordAppl // ==============================|| DASHBOARD - DEFAULT ||============================== // const ApplyForm = () => { + // Localized document title/meta for forgot password + usePageTitle("forgotUserPassword"); // const [userData, setUserData] = React.useState(null); // const [selections, setSelection] = React.useState([]); const [isLoading, setLoding] = React.useState(true); diff --git a/src/pages/authentication/ForgotUsername/AfterForgotUsernamePage.js b/src/pages/authentication/ForgotUsername/AfterForgotUsernamePage.js index e4352df..66b6b28 100644 --- a/src/pages/authentication/ForgotUsername/AfterForgotUsernamePage.js +++ b/src/pages/authentication/ForgotUsername/AfterForgotUsernamePage.js @@ -18,10 +18,14 @@ import { useNavigate } from "react-router-dom"; import {PNSPS_LONG_BUTTON_THEME} from "themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; import {FormattedMessage, useIntl} from "react-intl"; +import usePageTitle from "components/usePageTitle"; // ==============================|| DASHBOARD - DEFAULT ||============================== // const AfterForgotUsernamePage = () => { + // Localized document title/meta for forgot username "sent" page + usePageTitle("forgotUsername"); + const intl = useIntl(); const navigate = useNavigate(); diff --git a/src/pages/authentication/ForgotUsername/AuthCallback/ResetPasswordSuccess.js b/src/pages/authentication/ForgotUsername/AuthCallback/ResetPasswordSuccess.js index c786e24..013776f 100644 --- a/src/pages/authentication/ForgotUsername/AuthCallback/ResetPasswordSuccess.js +++ b/src/pages/authentication/ForgotUsername/AuthCallback/ResetPasswordSuccess.js @@ -15,12 +15,16 @@ import { Link } from 'react-router-dom'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; +import usePageTitle from "components/usePageTitle"; // ==============================|| DASHBOARD - DEFAULT ||============================== // const ResetPasswordSuccess = () => { + // Localized document title/meta for forgot-username success + usePageTitle("sendUsernameSuccess"); + const [isLoading, setLoding] = React.useState(true); React.useEffect(() => { diff --git a/src/pages/authentication/ForgotUsername/index.js b/src/pages/authentication/ForgotUsername/index.js index e57cac8..64c9159 100644 --- a/src/pages/authentication/ForgotUsername/index.js +++ b/src/pages/authentication/ForgotUsername/index.js @@ -11,6 +11,7 @@ import { import Loadable from 'components/Loadable'; import { lazy } from 'react'; +import usePageTitle from "components/usePageTitle"; const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); const ForgotUsernameApplyForm = Loadable(lazy(() => import('./ForgotUsernameApplyForm'))); @@ -18,6 +19,8 @@ const ForgotUsernameApplyForm = Loadable(lazy(() => import('./ForgotUsernameAppl // ==============================|| DASHBOARD - DEFAULT ||============================== // const ApplyForm = () => { + // Localized document title/meta for forgot username + usePageTitle("forgotUsername"); // const [userData, setUserData] = React.useState(null); // const [selections, setSelection] = React.useState([]); const [isLoading, setLoding] = React.useState(true); diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js index e525e2d..427fab5 100644 --- a/src/pages/authentication/Register.js +++ b/src/pages/authentication/Register.js @@ -23,6 +23,7 @@ import { lazy } from 'react'; import { notifyActionError } from 'utils/CommonFunction'; import axios from "axios"; import {FormattedMessage, useIntl} from "react-intl"; +import usePageTitle from "components/usePageTitle"; const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/CustomFormWizard'))); const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom'))); // ================================|| REGISTER ||================================ // @@ -35,6 +36,8 @@ const Register = () => { const [base64Url, setBase64Url] = useState("") const [checkCode, setCheckCode] = useState("") const intl = useIntl(); + // Localized document title/meta for register flow + usePageTitle("register"); const steps = [ intl.formatMessage({id: 'personalInformation'}), intl.formatMessage({id: 'preview'}), diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js index 1369708..adfc4e2 100644 --- a/src/pages/authentication/RegisterCustom.js +++ b/src/pages/authentication/RegisterCustom.js @@ -16,6 +16,7 @@ import { I_AM_SMART_PATH } from "utils/ApiPathConst"; import * as React from 'react'; import { FormattedMessage, useIntl } from "react-intl"; +import usePageTitle from "components/usePageTitle"; // ================================|| LOGIN ||================================ // @@ -24,6 +25,9 @@ const RegisterCustom = () => { const intl = useIntl(); const { locale } = intl; + // Localized document title/meta on register landing page + usePageTitle("register"); + const registerWithIAmSmart = () => { getQRWithIAmSmart(); setIsPopUp(false); diff --git a/src/pages/authentication/auth-forms/AuthLoginCustom.js b/src/pages/authentication/auth-forms/AuthLoginCustom.js index 6e4c9ba..f024b31 100644 --- a/src/pages/authentication/auth-forms/AuthLoginCustom.js +++ b/src/pages/authentication/auth-forms/AuthLoginCustom.js @@ -46,6 +46,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { SysContext } from "components/SysSettingProvider" import { IAmSmartButton } from "components/iAmSmartButton"; +import usePageTitle from "components/usePageTitle"; const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent'))); // ============================|| FIREBASE - LOGIN ||============================ // @@ -57,6 +58,9 @@ const AuthLoginCustom = () => { const { locale } = intl; const { sysSetting } = useContext(SysContext); + // Localized document title/meta on login page + usePageTitle("login"); + const [showPassword, setShowPassword] = useState(false); const handleClickShowPassword = () => { setShowPassword(!showPassword); diff --git a/src/pages/extra-pages/ErrorPage.js b/src/pages/extra-pages/ErrorPage.js index bc29e49..5022dc1 100644 --- a/src/pages/extra-pages/ErrorPage.js +++ b/src/pages/extra-pages/ErrorPage.js @@ -4,11 +4,14 @@ import { import { useNavigate } from "react-router-dom"; import { useIntl } from 'react-intl'; import MainCard from 'components/MainCard'; +import usePageTitle from "components/usePageTitle"; //import errorImg from '@src/assets/images/pages/error.svg' const ErrorPage = () => { const intl = useIntl(); + // Localized document title/meta for error page + usePageTitle("error"); let navigate = useNavigate(); const handleToHomePage = () =>{ let path = `/`; diff --git a/src/pages/extra-pages/ImportantNoticePage/index.js b/src/pages/extra-pages/ImportantNoticePage/index.js index 8075006..65ee728 100644 --- a/src/pages/extra-pages/ImportantNoticePage/index.js +++ b/src/pages/extra-pages/ImportantNoticePage/index.js @@ -1,5 +1,6 @@ import { Grid, Typography, Stack } from '@mui/material'; import { useIntl, FormattedMessage } from 'react-intl'; +import usePageTitle from "components/usePageTitle"; import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'; @@ -15,6 +16,8 @@ const BackgroundHead = { const ImportantNotice = () => { const intl = useIntl(); + // Localized document title/meta for Important Notice + usePageTitle("importantNotice"); const htmlContent = intl.formatMessage({ id: 'importantNoticeContent', defaultMessage: '' }); return ( diff --git a/src/pages/extra-pages/PrivacyPolicyPage/index.js b/src/pages/extra-pages/PrivacyPolicyPage/index.js index 1a6e488..900308b 100644 --- a/src/pages/extra-pages/PrivacyPolicyPage/index.js +++ b/src/pages/extra-pages/PrivacyPolicyPage/index.js @@ -1,5 +1,6 @@ import { Grid, Typography, Stack } from '@mui/material'; import { useIntl, FormattedMessage } from 'react-intl'; +import usePageTitle from "components/usePageTitle"; import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'; @@ -15,6 +16,8 @@ const BackgroundHead = { const PrivacyPolicy = () => { const intl = useIntl(); + // Localized document title/meta for Privacy Policy + usePageTitle("privacyPolicy"); const htmlContent = intl.formatMessage({ id: 'privacyPolicyContent', defaultMessage: '' }); return ( diff --git a/src/pages/extra-pages/UserMenuPub1/index.js b/src/pages/extra-pages/UserMenuPub1/index.js index a30cf38..2ed4f39 100644 --- a/src/pages/extra-pages/UserMenuPub1/index.js +++ b/src/pages/extra-pages/UserMenuPub1/index.js @@ -10,6 +10,7 @@ import { Grid, Typography, Stack } from "@mui/material"; import { useState, useEffect, lazy } from "react"; import Loadable from "components/Loadable"; import { useIntl, FormattedMessage } from "react-intl"; +import usePageTitle from "components/usePageTitle"; import DownloadIcon from "@mui/icons-material/Download"; import titleBackgroundImg from "assets/images/dashboard/gazette-bar.png"; @@ -44,6 +45,9 @@ const UserMenuPub1 = () => { const [onReady, setOnReady] = useState(false); + // Localized document title/meta for /userGuidePub + usePageTitle("userGuide"); + useEffect(() => { setOnReady(true); }, [locale]);