apply html title and description to match the page contents

1周前 · 7673697565
--- a/public/index.html
+++ b/public/index.html
@@ -8,10 +8,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="title" content="PNSPS" />
    <meta name="title" content="PNSPS - Public Notice Submission and Payment System" />
    <meta
      name="description"
      content="The Government of the Hong Kong Special Administrative Region Gazette Public Notice Submission and Payment System."
      content="Public Notice Submission and Payment System - Government Logistics Department"
    />
    <meta
      name="keywords"
@@ -19,7 +19,7 @@
    />
    <meta name="author" content="Government Logistics Department" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
    <title>PNSPS</title>
    <title>PNSPS - Public Notice Submission and Payment System</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap&family=Public+Sans:wght@400;500;600;700"
--- a/src/components/usePageTitle.js
+++ b/src/components/usePageTitle.js
@@ -18,6 +18,25 @@ export default function usePageTitle(messageIdOrText) {
      pageTitle = messageIdOrText;
    }

    document.title = `${pageTitle} - ${systemName} | ${gldName}`;
    const fullTitle = `${pageTitle} - ${systemName} | ${gldName}`;

    // Update document title (tab title)
    document.title = fullTitle;

    // Update <meta name="title"> and <meta name="description"> 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 <html lang="..."> in sync with current locale
    if (document.documentElement) {
      document.documentElement.lang = intl.locale || "en";
    }
  }, [messageIdOrText, intl]);
 }
--- 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([])
--- 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);
--- 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);
--- 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'));
--- 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);
--- 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();

--- 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(() => {
--- 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);
--- 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();

--- 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(() => {
--- 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);
--- 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'}),
--- 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);
--- 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);
--- 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 = `/`;
--- 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 (
--- 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 (
--- 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]);