Просмотр исходного кода
Merge branch 'web_access_fix' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI into web_access_fix
web_access_fix
37 измененных файлов: 1627 добавлений и 1100 удалений
-
+304 -121src/assets/style/navbarStyles.css
-
+3 -0src/auth/utils.js
-
+9 -6src/components/AdminLogo/index.js
-
+42 -2src/components/FiDataGrid.js
-
+4 -0src/components/Logo/index.js
-
+4 -0src/components/MobileLogo/index.js
-
+23 -0src/components/usePageTitle.js
-
+817 -746src/layout/MainLayout/Header/index.js
-
+2 -1src/pages/Announcement/Search_Public/index.js
-
+2 -1src/pages/DemandNote/Search_Public/index.js
-
+4 -0src/pages/Message/Details/index.js
-
+2 -1src/pages/Message/Search/index.js
-
+3 -0src/pages/Payment/Details_Public/index.js
-
+2 -0src/pages/Payment/Search_Public/index.js
-
+3 -0src/pages/Proof/Reply_Public/index.js
-
+3 -1src/pages/Proof/Search_Public/index.js
-
+5 -4src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
-
+3 -1src/pages/PublicNotice/ApplyForm/index.js
-
+3 -1src/pages/PublicNotice/Details_Public/index.js
-
+3 -2src/pages/PublicNotice/ListPanel/index.js
-
+3 -0src/pages/User/ChangePasswordPage/index.js
-
+2 -0src/pages/User/DetailsPage_Individual/index.js
-
+4 -2src/pages/User/DetailsPage_Organization/index.js
-
+1 -0src/pages/authentication/ForgotPassword/AuthCallback/index.js
-
+2 -0src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js
-
+1 -0src/pages/authentication/ForgotUsername/AuthCallback/index.js
-
+2 -0src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js
-
+4 -0src/pages/authentication/auth-forms/AuthLoginCustom.js
-
+48 -10src/pages/authentication/auth-forms/BusCustomFormWizard.js
-
+46 -11src/pages/authentication/auth-forms/CustomFormWizard.js
-
+6 -0src/pages/authentication/auth-forms/IAmSmartFormWizard.js
-
+2 -0src/pages/dashboard/Public/index.js
-
+255 -186src/pages/extra-pages/UserMenuPub1/index.js
-
+3 -1src/translations/en.json
-
+3 -1src/translations/zh-CN.json
-
+3 -1src/translations/zh-HK.json
-
+1 -1src/utils/CommonFunction.js
+ 304
- 121
src/assets/style/navbarStyles.css
Просмотреть файл
| @@ -1,175 +1,358 @@ | |||||
| /* assets/style/navbarStyles.css */ | |||||
| /* ===== FIX typo ===== */ | |||||
| #nav{ | #nav{ | ||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| background-color: white; | |||||
| /* padding: 20px 80px; */ | |||||
| box-shadow: 0 5px 15px rgba(0,0 0,0,0.06); | |||||
| position:fixed; | |||||
| top: 0px; | |||||
| width: 100%; | |||||
| z-index: 9999; | |||||
| border-bottom: 3px solid #0C489E; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; | |||||
| background-color: white; | |||||
| box-shadow: 0 5px 15px rgba(0,0,0,0.06); /* <-- fixed */ | |||||
| position: fixed; | |||||
| top: 0px; | |||||
| width: 100%; | |||||
| z-index: 9999; | |||||
| border-bottom: 3px solid #0C489E; | |||||
| min-height: 77px; | |||||
| } | |||||
| #navbar > div > li { | |||||
| height: 77px; /* one single source of truth */ | |||||
| display: flex; | |||||
| align-items: stretch; | |||||
| padding: 0; /* IMPORTANT: stop li padding making different widths */ | |||||
| margin: 0; | |||||
| } | |||||
| #navbar div li{ | |||||
| padding: 0; /* override your earlier padding: 0 1vw */ | |||||
| } | |||||
| /* Make dropdown button identical to anchor */ | |||||
| #navbar > div > li > button.navTrigger { | |||||
| background: transparent; | |||||
| border: 0; | |||||
| padding: 0; /* remove default button padding */ | |||||
| margin: 0; | |||||
| font: inherit; /* inherit font from li */ | |||||
| line-height: 1; /* normalize */ | |||||
| height: auto; | |||||
| display: inline-flex; | |||||
| align-items: center; | |||||
| cursor: pointer; | |||||
| } | |||||
| /* Make both anchor and button same vertical box */ | |||||
| #navbar > div > li > a, | |||||
| #navbar > div > li > button.navTrigger { | |||||
| height: 100% !important; /* override the old 72px */ | |||||
| padding: 0 24px !important; /* bigger hit area */ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| box-sizing: border-box; | |||||
| } | } | ||||
| /* Make ONLY the dropdown button not bold */ | |||||
| #navbar > div > li > button.navTrigger, | |||||
| #navbar > div > li > button.navTrigger .MuiTypography-root { | |||||
| font-weight: 400 !important; | |||||
| } | |||||
| /* (optional) keep links bold */ | |||||
| #navbar > div > li > a, | |||||
| #navbar > div > li > a .MuiTypography-root { | |||||
| font-weight: 600; | |||||
| } | |||||
| #navbar div{ | #navbar div{ | ||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| } | } | ||||
| #navbar div li{ | #navbar div li{ | ||||
| list-style: none; | |||||
| padding: 0 1vw; | |||||
| position: relative; | |||||
| list-style: none; | |||||
| padding: 0 1vw; | |||||
| position: relative; | |||||
| } | } | ||||
| /* keep your <a> styling */ | |||||
| #navbar div li a{ | #navbar div li a{ | ||||
| text-decoration: none; | |||||
| font-size: 1.2rem; | |||||
| font-weight: 600; | |||||
| /* font-family: 微軟正黑體; */ | |||||
| color: black; | |||||
| transition: 0.3s ease-in-out; | |||||
| text-decoration: none; | |||||
| font-size: 1.2rem; | |||||
| font-weight: 600; | |||||
| color: black; | |||||
| transition: 0.3s ease-in-out; | |||||
| } | } | ||||
| #navbar div li a span{ | |||||
| font-size: 1vw !important; | |||||
| /* NEW: style dropdown trigger buttons to look like links */ | |||||
| #navbar div li button.navTrigger{ | |||||
| background: transparent; | |||||
| border: 0; | |||||
| padding: 0; | |||||
| cursor: pointer; | |||||
| text-decoration: none; | |||||
| font-size: 1.2rem; | |||||
| font-weight: 600; | |||||
| color: black; | |||||
| transition: 0.3s ease-in-out; | |||||
| display: inline-flex; | |||||
| align-items: center; | |||||
| gap: 0.25rem; | |||||
| } | } | ||||
| #navbar div li a span, | |||||
| #navbar div li a svg{ | #navbar div li a svg{ | ||||
| font-size: 1vw !important; | |||||
| font-size: 1vw !important; | |||||
| } | } | ||||
| #navbar div li a:hover{ | |||||
| color: #0C489E; | |||||
| #navbar div li a:hover, | |||||
| #navbar div li button.navTrigger:hover{ | |||||
| color: #0C489E; | |||||
| } | } | ||||
| #navbar div li a:hover::after, | #navbar div li a:hover::after, | ||||
| #navbar div li a:focus-visible::after{ | |||||
| content: ""; | |||||
| width: 80%; | |||||
| height: 3px; | |||||
| background:#0C489E; | |||||
| position: absolute; | |||||
| bottom: -5px; | |||||
| left: 20px; | |||||
| } | |||||
| #navbar div li ul { | |||||
| #navbar div li a:focus-visible::after, | |||||
| #navbar div li button.navTrigger:hover::after, | |||||
| #navbar div li button.navTrigger:focus-visible::after{ | |||||
| content: ""; | |||||
| width: 80%; | |||||
| height: 3px; | |||||
| background:#0C489E; | |||||
| position: absolute; | |||||
| bottom: -5px; | |||||
| left: 20px; | |||||
| } | |||||
| /* submenu base */ | |||||
| #navbar div li ul{ | |||||
| background: white; | background: white; | ||||
| visibility: hidden; | visibility: hidden; | ||||
| opacity: 0; | opacity: 0; | ||||
| min-width: 18rem; | min-width: 18rem; | ||||
| position: absolute; | position: absolute; | ||||
| /* transition: all 0.5s ease; */ | |||||
| left: 0; | left: 0; | ||||
| display: none; | display: none; | ||||
| padding-left: 0px; | padding-left: 0px; | ||||
| padding-bottom: 7px; | padding-bottom: 7px; | ||||
| /* border: 1px solid #0C489E; */ | |||||
| background-clip: padding-box; | background-clip: padding-box; | ||||
| border: 1px solid rgba(0,0,0,.15); | border: 1px solid rgba(0,0,0,.15); | ||||
| border-radius: 0.25rem; | border-radius: 0.25rem; | ||||
| } | } | ||||
| #navbar div li:hover > ul{ | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| display: block | |||||
| } | |||||
| /* Navbar: don't show focus ring on mouse click */ | |||||
| #navbar a:focus { | |||||
| /* hover open */ | |||||
| #navbar div li:hover > ul{ | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| display: block; | |||||
| } | |||||
| /* keyboard open */ | |||||
| #navbar div li:focus-within > ul{ | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| display: block; | |||||
| } | |||||
| /* Navbar focus ring */ | |||||
| #navbar a:focus, | |||||
| #navbar button.navTrigger:focus{ | |||||
| outline: none; | outline: none; | ||||
| } | } | ||||
| /* Navbar: show focus ring for keyboard navigation */ | |||||
| #navbar a:focus-visible { | |||||
| #navbar a:focus-visible, | |||||
| #navbar button.navTrigger:focus-visible{ | |||||
| outline: 3px solid #0C489E; | outline: 3px solid #0C489E; | ||||
| outline-offset: 2px; | outline-offset: 2px; | ||||
| border-radius: 10px; /* tweak to match your design */ | |||||
| border-radius: 10px; | |||||
| } | } | ||||
| /* #navbar div li:focus-within > ul, | |||||
| #navbar div li ul:hover, | |||||
| #navbar div li ul:focus { | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| display: block | |||||
| } */ | |||||
| #navbar a.dashboard, | |||||
| #navbar a.application, | |||||
| #navbar a.proof, | |||||
| #navbar a.myDocumet, | |||||
| #navbar a.documentRecord, | |||||
| #navbar a.manageOrgUser, | |||||
| #navbar a.manageUser, | |||||
| #navbar a.systemSetting, | |||||
| #navbar a.report, | |||||
| #navbar a.payment, | |||||
| #navbar a.user, | |||||
| #navbar a.logout { | |||||
| font-size: 1.1rem !important; | |||||
| font-weight: 600 !important; | |||||
| } | |||||
| #navbar a.dashboard .MuiTypography-root, | |||||
| #navbar a.application .MuiTypography-root, | |||||
| #navbar a.proof .MuiTypography-root, | |||||
| #navbar a.myDocumet .MuiTypography-root, | |||||
| #navbar a.documentRecord .MuiTypography-root, | |||||
| #navbar a.manageOrgUser .MuiTypography-root, | |||||
| #navbar a.manageUser .MuiTypography-root, | |||||
| #navbar a.systemSetting .MuiTypography-root, | |||||
| #navbar a.report .MuiTypography-root, | |||||
| #navbar a.payment .MuiTypography-root, | |||||
| #navbar a.user .MuiTypography-root, | |||||
| #navbar a.logout .MuiTypography-root { | |||||
| font-size: 1.1rem !important; | |||||
| font-weight: 600 !important; | |||||
| } | |||||
| /* Make them bigger + bold */ | |||||
| #navbar a.login, | |||||
| #navbar a.register, | |||||
| #navbar a.login .MuiTypography-root, | |||||
| #navbar a.register .MuiTypography-root { | |||||
| font-size: 1.1rem !important; | |||||
| font-weight: 600 !important; | |||||
| } | |||||
| /* ===== your existing sidebar (unchanged) ===== */ | |||||
| #systemTitle{ | #systemTitle{ | ||||
| text-decoration: none; | |||||
| font-size: 1.3rem; | |||||
| font-weight: 600; | |||||
| color: #0C489E; | |||||
| transition: 0.3s ease-in-out; | |||||
| /* font-family: 微軟正黑體; */ | |||||
| text-align: center; | |||||
| text-decoration: none; | |||||
| font-size: 1.1rem; | |||||
| font-weight: 600; | |||||
| color: #0C489E; | |||||
| transition: 0.3s ease-in-out; | |||||
| text-align: center; | |||||
| } | } | ||||
| #mobileTitle{ | #mobileTitle{ | ||||
| text-decoration: none; | |||||
| font-size: 1.2rem; | |||||
| font-weight: 600; | |||||
| color: #0C489E; | |||||
| transition: 0.3s ease-in-out; | |||||
| /* font-family: 微軟正黑體; */ | |||||
| text-align: center; | |||||
| text-decoration: none; | |||||
| font-size: 1.1rem; | |||||
| font-weight: 600; | |||||
| color: #0C489E; | |||||
| transition: 0.3s ease-in-out; | |||||
| text-align: center; | |||||
| } | } | ||||
| #sidebar{ | #sidebar{ | ||||
| font-size: 1.3rem; | |||||
| font-weight: 600; | |||||
| /* font-family: 微軟正黑體; */ | |||||
| font-size: 1.1rem; | |||||
| font-weight: 600; | |||||
| } | } | ||||
| #sidebartop{ | #sidebartop{ | ||||
| align-items: center; | |||||
| justify-content: start; | |||||
| padding: 0; | |||||
| display: flex; | |||||
| width: 100%; | |||||
| align-items: center; | |||||
| justify-content: start; | |||||
| padding: 0; | |||||
| display: flex; | |||||
| width: 100%; | |||||
| } | } | ||||
| #logoutContent{ | #logoutContent{ | ||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 0; | |||||
| display: flex; | |||||
| width: 100%; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 0; | |||||
| display: flex; | |||||
| width: 100%; | |||||
| } | } | ||||
| #sidebarbottom{ | #sidebarbottom{ | ||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 0; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 0; | |||||
| display: flex; | |||||
| } | } | ||||
| #sidebar li{ | #sidebar li{ | ||||
| list-style: none; | |||||
| padding: 0 20px; | |||||
| position: relative; | |||||
| text-align: left; | |||||
| list-style: none; | |||||
| padding: 0 20px; | |||||
| position: relative; | |||||
| text-align: left; | |||||
| } | } | ||||
| #sidebar li a{ | #sidebar li a{ | ||||
| text-decoration: none; | |||||
| font-size: 1.3rem; | |||||
| font-weight: 600; | |||||
| /* font-family: 微軟正黑體; */ | |||||
| color: black; | |||||
| transition: 0.3s ease-in-out; | |||||
| text-decoration: none; | |||||
| font-size: 1.1rem; | |||||
| font-weight: 600; | |||||
| color: black; | |||||
| transition: 0.3s ease-in-out; | |||||
| } | } | ||||
| #sidebar li a:hover{ | #sidebar li a:hover{ | ||||
| color: #0C489E; | |||||
| } | |||||
| #sidebar div li ul { | |||||
| background: white; | |||||
| visibility: hidden; | |||||
| opacity: 0; | |||||
| min-width: 16rem; | |||||
| position: relative; | |||||
| /* transition: all 0.5s ease; */ | |||||
| left: 0; | |||||
| display: none; | |||||
| padding-left: 0px; | |||||
| /* border: 1px solid #0C489E; */ | |||||
| } | |||||
| #sidebar div li:hover > ul, | |||||
| #sidebar div li:focus-within > ul, | |||||
| #sidebar div li ul:hover, | |||||
| #sidebar div li ul:focus { | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| display: block | |||||
| } | |||||
| color: #0C489E; | |||||
| } | |||||
| #sidebar div li ul{ | |||||
| background: white; | |||||
| visibility: hidden; | |||||
| opacity: 0; | |||||
| min-width: 16rem; | |||||
| position: relative; | |||||
| left: 0; | |||||
| display: none; | |||||
| padding-left: 0px; | |||||
| } | |||||
| #sidebar div li:hover > ul, | |||||
| #sidebar div li:focus-within > ul, | |||||
| #sidebar div li ul:hover, | |||||
| #sidebar div li ul:focus{ | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| display: block; | |||||
| } | |||||
| /* ===== Mobile Drawer / Sidebar menu styling ===== */ | |||||
| #sidebar ul { | |||||
| width: 100%; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | |||||
| #sidebar li{ | |||||
| width: 100%; | |||||
| padding: 0; /* remove the old 0 20px */ | |||||
| margin: 0; | |||||
| } | |||||
| /* Make BOTH links and dropdown buttons look the same */ | |||||
| #sidebar li > a, | |||||
| #sidebar li > button.navTrigger{ | |||||
| width: 100%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: space-between; /* text left, arrow right */ | |||||
| gap: 12px; | |||||
| background: transparent; | |||||
| border: 0; /* kill grey border */ | |||||
| box-shadow: none; | |||||
| outline: none; | |||||
| padding: 14px 20px; | |||||
| text-align: left; | |||||
| font-size: 1.3rem; | |||||
| font-weight: 600; | |||||
| color: black; | |||||
| cursor: pointer; | |||||
| } | |||||
| /* Hover / focus */ | |||||
| #sidebar li > a:hover, | |||||
| #sidebar li > button.navTrigger:hover{ | |||||
| color: #0C489E; | |||||
| } | |||||
| #sidebar li > a:focus-visible, | |||||
| #sidebar li > button.navTrigger:focus-visible{ | |||||
| outline: 3px solid #0C489E; | |||||
| outline-offset: 2px; | |||||
| border-radius: 10px; | |||||
| } | |||||
| /* Submenu (indent + full width) */ | |||||
| #sidebar li ul{ | |||||
| width: 100%; | |||||
| padding: 6px 0 6px 0; | |||||
| margin: 0; | |||||
| display: none; | |||||
| visibility: hidden; | |||||
| opacity: 0; | |||||
| } | |||||
| /* Open on focus-within (tap/click focuses button) */ | |||||
| #sidebar li:focus-within > ul{ | |||||
| display: block; | |||||
| visibility: visible; | |||||
| opacity: 1; | |||||
| } | |||||
| #sidebar li ul li > a{ | |||||
| padding: 12px 20px 12px 40px; /* indent submenu */ | |||||
| font-size: 1.15rem; | |||||
| font-weight: 600; | |||||
| } | |||||
+ 3
- 0
src/auth/utils.js
Просмотреть файл
| @@ -171,3 +171,6 @@ export const getPaymentMethodByCode = (code) => { | |||||
| return "other"; | return "other"; | ||||
| }; | }; | ||||
| export function setPageTitle(title) { | |||||
| document.title = `${title} - PNSPS | Government Logistics Department`; | |||||
| } | |||||
+ 9
- 6
src/components/AdminLogo/index.js
Просмотреть файл
| @@ -15,21 +15,23 @@ import { | |||||
| checkSysEnv | checkSysEnv | ||||
| } from "utils/Utils"; | } from "utils/Utils"; | ||||
| import {useIntl} from "react-intl"; | |||||
| // ==============================|| MAIN LOGO ||============================== // | // ==============================|| MAIN LOGO ||============================== // | ||||
| const LogoSection = ({ sx, to }) => { | const LogoSection = ({ sx, to }) => { | ||||
| const { defaultId } = useSelector((state) => state.menu); | const { defaultId } = useSelector((state) => state.menu); | ||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const intl = useIntl(); | |||||
| return ( | return ( | ||||
| <Stack direction="column" justifyContent="center" alignItems="center" > | |||||
| <ButtonBase | |||||
| <ButtonBase | |||||
| disableRipple | disableRipple | ||||
| component={Link} | component={Link} | ||||
| onClick={() => dispatch(activeItem({ openItem: [defaultId] }))} | onClick={() => dispatch(activeItem({ openItem: [defaultId] }))} | ||||
| to={!to ? config.defaultPath : to} | to={!to ? config.defaultPath : to} | ||||
| aria-label={intl.formatMessage({ id: "PNSPS", defaultMessage: "PNSPS" })} | |||||
| sx={{ | sx={{ | ||||
| ...sx, | ...sx, | ||||
| /* ✅ WCAG 2.4.7 focus indicator */ | /* ✅ WCAG 2.4.7 focus indicator */ | ||||
| '&:focus-visible': { | '&:focus-visible': { | ||||
| outline: '3px solid #0C489E', | outline: '3px solid #0C489E', | ||||
| @@ -38,10 +40,11 @@ const LogoSection = ({ sx, to }) => { | |||||
| } | } | ||||
| }} | }} | ||||
| > | > | ||||
| <Logo /> | |||||
| <Stack direction="column" justifyContent="center" alignItems="center" > | |||||
| <Logo /> | |||||
| <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span> | |||||
| </Stack> | |||||
| </ButtonBase> | </ButtonBase> | ||||
| <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span> | |||||
| </Stack> | |||||
| ); | ); | ||||
| }; | }; | ||||
+ 42
- 2
src/components/FiDataGrid.js
Просмотреть файл
| @@ -1,5 +1,5 @@ | |||||
| // material-ui | // material-ui | ||||
| import { useState, useEffect } from 'react'; | |||||
| import { useState, useEffect, useRef } from 'react'; | |||||
| import { Box } from "@mui/material"; | import { Box } from "@mui/material"; | ||||
| import { | import { | ||||
| DataGrid, GridOverlay, | DataGrid, GridOverlay, | ||||
| @@ -202,9 +202,49 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true, | |||||
| }); | }); | ||||
| } | } | ||||
| const gridRootRef = useRef(null); | |||||
| useEffect(() => { | |||||
| const root = gridRootRef.current; | |||||
| if (!root) return; | |||||
| const sortText = intl.formatMessage({ id: "sort", defaultMessage: "Sort" }); | |||||
| const apply = () => { | |||||
| // 1) Make ALL column headers tabbable (optional; DataGrid already manages focus well) | |||||
| root | |||||
| .querySelectorAll('.MuiDataGrid-columnHeaders [role="columnheader"]') | |||||
| .forEach((el) => { | |||||
| if (el.getAttribute("tabindex") !== "0") el.setAttribute("tabindex", "0"); | |||||
| }); | |||||
| // 2) Localize sort icon button label (handles "sort"/"Sort"/any old value) | |||||
| const sortButtons = root.querySelectorAll( | |||||
| '.MuiDataGrid-columnHeaders button.MuiIconButton-root' | |||||
| ); | |||||
| sortButtons.forEach((btn) => { | |||||
| const al = (btn.getAttribute("aria-label") || "").trim().toLowerCase(); | |||||
| const ti = (btn.getAttribute("title") || "").trim().toLowerCase(); | |||||
| // Only rewrite the ones that are the sort icon buttons | |||||
| if (al === "sort" || ti === "sort") { | |||||
| btn.setAttribute("aria-label", sortText); | |||||
| btn.setAttribute("title", sortText); | |||||
| } | |||||
| }); | |||||
| }; | |||||
| apply(); | |||||
| const obs = new MutationObserver(apply); | |||||
| obs.observe(root, { childList: true, subtree: true }); | |||||
| return () => obs.disconnect(); | |||||
| }, [intl]); | |||||
| return ( | return ( | ||||
| <Box sx={containerSx}> | |||||
| <Box sx={containerSx} ref={gridRootRef} role="table"> | |||||
| <DataGrid | <DataGrid | ||||
| {...props} | {...props} | ||||
| rows={_rows} | rows={_rows} | ||||
+ 4
- 0
src/components/Logo/index.js
Просмотреть файл
| @@ -9,18 +9,22 @@ import { useDispatch, useSelector } from 'react-redux'; | |||||
| import Logo from './Logo'; | import Logo from './Logo'; | ||||
| import config from 'config'; | import config from 'config'; | ||||
| import { activeItem } from 'store/reducers/menu'; | import { activeItem } from 'store/reducers/menu'; | ||||
| import {useIntl} from "react-intl"; | |||||
| // ==============================|| MAIN LOGO ||============================== // | // ==============================|| MAIN LOGO ||============================== // | ||||
| const LogoSection = ({ sx, to }) => { | const LogoSection = ({ sx, to }) => { | ||||
| const { defaultId } = useSelector((state) => state.menu); | const { defaultId } = useSelector((state) => state.menu); | ||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| const intl = useIntl(); | |||||
| return ( | return ( | ||||
| <ButtonBase | <ButtonBase | ||||
| disableRipple | disableRipple | ||||
| component={Link} | component={Link} | ||||
| onClick={() => dispatch(activeItem({ openItem: [defaultId] }))} | onClick={() => dispatch(activeItem({ openItem: [defaultId] }))} | ||||
| to={!to ? config.defaultPath : to} | to={!to ? config.defaultPath : to} | ||||
| aria-label={intl.formatMessage({ id: "PNSPS", defaultMessage: "PNSPS" })} | |||||
| sx={sx} | sx={sx} | ||||
| > | > | ||||
| <Logo /> | <Logo /> | ||||
+ 4
- 0
src/components/MobileLogo/index.js
Просмотреть файл
| @@ -9,10 +9,13 @@ import { useDispatch, useSelector } from 'react-redux'; | |||||
| import Logo from './MobileLogo'; | import Logo from './MobileLogo'; | ||||
| import config from 'config'; | import config from 'config'; | ||||
| import { activeItem } from 'store/reducers/menu'; | import { activeItem } from 'store/reducers/menu'; | ||||
| import {useIntl} from "react-intl"; | |||||
| // ==============================|| MAIN LOGO ||============================== // | // ==============================|| MAIN LOGO ||============================== // | ||||
| const LogoSection = ({ sx, to }) => { | const LogoSection = ({ sx, to }) => { | ||||
| const intl = useIntl(); | |||||
| const { defaultId } = useSelector((state) => state.menu); | const { defaultId } = useSelector((state) => state.menu); | ||||
| const dispatch = useDispatch(); | const dispatch = useDispatch(); | ||||
| return ( | return ( | ||||
| @@ -21,6 +24,7 @@ const LogoSection = ({ sx, to }) => { | |||||
| component={Link} | component={Link} | ||||
| onClick={() => dispatch(activeItem({ openItem: [defaultId] }))} | onClick={() => dispatch(activeItem({ openItem: [defaultId] }))} | ||||
| to={!to ? config.defaultPath : to} | to={!to ? config.defaultPath : to} | ||||
| aria-label={intl.formatMessage({ id: "PNSPS" })} | |||||
| sx={{ | sx={{ | ||||
| ...sx, | ...sx, | ||||
+ 23
- 0
src/components/usePageTitle.js
Просмотреть файл
| @@ -0,0 +1,23 @@ | |||||
| import { useEffect } from "react"; | |||||
| import { useIntl } from "react-intl"; | |||||
| export default function usePageTitle(messageIdOrText) { | |||||
| const intl = useIntl(); | |||||
| useEffect(() => { | |||||
| let pageTitle; | |||||
| let systemName; | |||||
| let gldName; | |||||
| // If string looks like an intl id, try translate | |||||
| try { | |||||
| pageTitle = intl.formatMessage({ id: messageIdOrText }); | |||||
| systemName = intl.formatMessage({ id: "PNSPS_fullname" }); | |||||
| gldName = intl.formatMessage({ id: "HKGLD" }); | |||||
| } catch { | |||||
| pageTitle = messageIdOrText; | |||||
| } | |||||
| document.title = `${pageTitle} - ${systemName} | ${gldName}`; | |||||
| }, [messageIdOrText, intl]); | |||||
| } | |||||
+ 817
- 746
src/layout/MainLayout/Header/index.js
Разница между файлами не показана из-за своего большого размера
Просмотреть файл
+ 2
- 1
src/pages/Announcement/Search_Public/index.js
Просмотреть файл
| @@ -15,6 +15,7 @@ const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | |||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import { FormattedMessage } from "react-intl"; | import { FormattedMessage } from "react-intl"; | ||||
| import { getSearchCriteria } from "auth/utils"; | import { getSearchCriteria } from "auth/utils"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| @@ -29,7 +30,7 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const UserSearchPage_Individual = () => { | const UserSearchPage_Individual = () => { | ||||
| usePageTitle("announcement"); | |||||
| const [searchCriteria, setSearchCriteria] = React.useState({}); | const [searchCriteria, setSearchCriteria] = React.useState({}); | ||||
| const [onReady, setOnReady] = React.useState(false); | const [onReady, setOnReady] = React.useState(false); | ||||
| const [onGridReady, setGridOnReady] = React.useState(false); | const [onGridReady, setGridOnReady] = React.useState(false); | ||||
+ 2
- 1
src/pages/DemandNote/Search_Public/index.js
Просмотреть файл
| @@ -18,6 +18,7 @@ const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); | |||||
| const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | ||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import {FormattedMessage} from "react-intl"; | import {FormattedMessage} from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| @@ -32,7 +33,7 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const SearchPage_DemandNote_Pub = () => { | const SearchPage_DemandNote_Pub = () => { | ||||
| usePageTitle("paymentInfoRecord"); | |||||
| const [orgCombo, setOrgCombo] = React.useState([]); | const [orgCombo, setOrgCombo] = React.useState([]); | ||||
| const [issueCombo, setIssueCombo] = React.useState([]); | const [issueCombo, setIssueCombo] = React.useState([]); | ||||
| const [searchCriteria, setSearchCriteria] = React.useState({}); | const [searchCriteria, setSearchCriteria] = React.useState({}); | ||||
+ 4
- 0
src/pages/Message/Details/index.js
Просмотреть файл
| @@ -17,6 +17,8 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa | |||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import { FormattedMessage } from "react-intl"; | import { FormattedMessage } from "react-intl"; | ||||
| import usePageTitle from 'components/usePageTitle'; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| width: '100%', | width: '100%', | ||||
| @@ -30,6 +32,8 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Index = () => { | const Index = () => { | ||||
| usePageTitle("msgDetails"); | |||||
| const params = useParams(); | const params = useParams(); | ||||
| const navigate = useNavigate() | const navigate = useNavigate() | ||||
+ 2
- 1
src/pages/Message/Search/index.js
Просмотреть файл
| @@ -17,7 +17,7 @@ const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | |||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import {FormattedMessage} from "react-intl"; | import {FormattedMessage} from "react-intl"; | ||||
| import { getSearchCriteria } from "auth/utils"; | import { getSearchCriteria } from "auth/utils"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| width: '100%', | width: '100%', | ||||
| @@ -31,6 +31,7 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Index = () => { | const Index = () => { | ||||
| usePageTitle("systemMessage"); | |||||
| const [searchCriteria, setSearchCriteria] = React.useState({}); | const [searchCriteria, setSearchCriteria] = React.useState({}); | ||||
| const [onReady, setOnReady] = React.useState(false); | const [onReady, setOnReady] = React.useState(false); | ||||
+ 3
- 0
src/pages/Payment/Details_Public/index.js
Просмотреть файл
| @@ -20,6 +20,7 @@ const DataGrid = Loadable(React.lazy(() => import('./DataGrid'))); | |||||
| import ForwardIcon from '@mui/icons-material/Forward'; | import ForwardIcon from '@mui/icons-material/Forward'; | ||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import {FormattedMessage,useIntl} from "react-intl"; | import {FormattedMessage,useIntl} from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| width: '100%', | width: '100%', | ||||
| @@ -33,6 +34,8 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Index = () => { | const Index = () => { | ||||
| usePageTitle("payDetail"); | |||||
| const params = useParams(); | const params = useParams(); | ||||
| const navigate = useNavigate() | const navigate = useNavigate() | ||||
| const intl = useIntl(); | const intl = useIntl(); | ||||
+ 2
- 0
src/pages/Payment/Search_Public/index.js
Просмотреть файл
| @@ -15,6 +15,7 @@ const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | |||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import {FormattedMessage} from "react-intl"; | import {FormattedMessage} from "react-intl"; | ||||
| import { getSearchCriteria } from "auth/utils"; | import { getSearchCriteria } from "auth/utils"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| @@ -29,6 +30,7 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Index = () => { | const Index = () => { | ||||
| usePageTitle("onlinePaymentHistory"); | |||||
| const [searchCriteria, setSearchCriteria] = React.useState({ | const [searchCriteria, setSearchCriteria] = React.useState({ | ||||
| dateTo: DateUtils.dateValue(new Date()), | dateTo: DateUtils.dateValue(new Date()), | ||||
| dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)), | dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)), | ||||
+ 3
- 0
src/pages/Proof/Reply_Public/index.js
Просмотреть файл
| @@ -21,6 +21,7 @@ const ProofForm = Loadable(React.lazy(() => import('./ProofForm'))); | |||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import MainCard from "../../../components/MainCard"; | import MainCard from "../../../components/MainCard"; | ||||
| import {FormattedMessage} from "react-intl"; | import {FormattedMessage} from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| width: '100%', | width: '100%', | ||||
| @@ -35,6 +36,8 @@ import {useIntl} from "react-intl"; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Index = () => { | const Index = () => { | ||||
| usePageTitle("proofRecord"); | |||||
| const params = useParams(); | const params = useParams(); | ||||
| const navigate = useNavigate() | const navigate = useNavigate() | ||||
| const intl = useIntl(); | const intl = useIntl(); | ||||
+ 3
- 1
src/pages/Proof/Search_Public/index.js
Просмотреть файл
| @@ -17,6 +17,7 @@ const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); | |||||
| const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | ||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
| import {FormattedMessage} from "react-intl"; | import {FormattedMessage} from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
| @@ -31,7 +32,8 @@ const BackgroundHead = { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const UserSearchPage_Individual = () => { | const UserSearchPage_Individual = () => { | ||||
| usePageTitle("proofRecord"); | |||||
| const [issueCombo,setIssueCombo] = React.useState([]); | const [issueCombo,setIssueCombo] = React.useState([]); | ||||
| const [searchCriteria, setSearchCriteria] = React.useState({ | const [searchCriteria, setSearchCriteria] = React.useState({ | ||||
| dateTo: DateUtils.dateValue(new Date()), | dateTo: DateUtils.dateValue(new Date()), | ||||
+ 5
- 4
src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
Просмотреть файл
| @@ -545,6 +545,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => | |||||
| label: intl.formatMessage({ id: 'careOf' }) + ":", | label: intl.formatMessage({ id: 'careOf' }) + ":", | ||||
| valueName: "careOf", | valueName: "careOf", | ||||
| form: formik, | form: formik, | ||||
| inputProps: { "aria-label": intl.formatMessage({ id: 'careOf' }) } | |||||
| // disabled: true | // disabled: true | ||||
| })} | })} | ||||
| </Grid> | </Grid> | ||||
| @@ -572,7 +573,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => | |||||
| label: intl.formatMessage({ id: 'extraMark' }) + ":", | label: intl.formatMessage({ id: 'extraMark' }) + ":", | ||||
| valueName: "remarks", | valueName: "remarks", | ||||
| form: formik, | form: formik, | ||||
| inputProps: { maxLength: 255 } | |||||
| inputProps: { maxLength: 255, "aria-label": intl.formatMessage({ id: 'extraMark' }) } | |||||
| })} | })} | ||||
| </Grid> | </Grid> | ||||
| } | } | ||||
| @@ -601,6 +602,9 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => | |||||
| name="tickAccept" | name="tickAccept" | ||||
| color="primary" | color="primary" | ||||
| size="small" | size="small" | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "applyTickStr" }) | |||||
| }} | |||||
| /> | /> | ||||
| <Typography variant="h6" height="100%" > | <Typography variant="h6" height="100%" > | ||||
| <div style={{ padding: 12, textAlign: 'justify' }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} /> | <div style={{ padding: 12, textAlign: 'justify' }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} /> | ||||
| @@ -629,9 +633,6 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) => | |||||
| </Typography> | </Typography> | ||||
| </Grid> | </Grid> | ||||
| </Grid> | </Grid> | ||||
| </form> | </form> | ||||
| ) : null} | ) : null} | ||||
+ 3
- 1
src/pages/PublicNotice/ApplyForm/index.js
Просмотреть файл
| @@ -16,7 +16,7 @@ import Loadable from 'components/Loadable'; | |||||
| import { lazy } from 'react'; | import { lazy } from 'react'; | ||||
| const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | ||||
| const PublicNoticeApplyForm = Loadable(lazy(() => import('./PublicNoticeApplyForm'))); | const PublicNoticeApplyForm = Loadable(lazy(() => import('./PublicNoticeApplyForm'))); | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| import { | import { | ||||
| // isORGLoggedIn, | // isORGLoggedIn, | ||||
| isDummyLoggedIn, | isDummyLoggedIn, | ||||
| @@ -27,6 +27,8 @@ import { | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const ApplyForm = () => { | const ApplyForm = () => { | ||||
| usePageTitle("applyPublicNotice"); | |||||
| const [userData, setUserData] = React.useState(null); | const [userData, setUserData] = React.useState(null); | ||||
| const [gazetteIssueList, setGazetteIssueList] = React.useState([]); | const [gazetteIssueList, setGazetteIssueList] = React.useState([]); | ||||
+ 3
- 1
src/pages/PublicNotice/Details_Public/index.js
Просмотреть файл
| @@ -32,10 +32,12 @@ import { useNavigate } from "react-router-dom"; | |||||
| import ForwardIcon from '@mui/icons-material/Forward'; | import ForwardIcon from '@mui/icons-material/Forward'; | ||||
| import { notifyActionSuccess } from "utils/CommonFunction"; | import { notifyActionSuccess } from "utils/CommonFunction"; | ||||
| import { FormattedMessage, useIntl } from "react-intl"; | import { FormattedMessage, useIntl } from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| // ==============================|| Body - DEFAULT ||============================== // | // ==============================|| Body - DEFAULT ||============================== // | ||||
| const DashboardDefault = () => { | const DashboardDefault = () => { | ||||
| usePageTitle("myPublicNotice"); | |||||
| const params = useParams(); | const params = useParams(); | ||||
| const [applicationDetailData, setApplicationDetailData] = useState({}); | const [applicationDetailData, setApplicationDetailData] = useState({}); | ||||
| const [appNo, setAapNo] = useState(""); | const [appNo, setAapNo] = useState(""); | ||||
+ 3
- 2
src/pages/PublicNotice/ListPanel/index.js
Просмотреть файл
| @@ -31,11 +31,12 @@ import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||||
| import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst"; | import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst"; | ||||
| import { ThemeProvider } from "@emotion/react"; | import { ThemeProvider } from "@emotion/react"; | ||||
| import { FormattedMessage, useIntl } from "react-intl"; | import { FormattedMessage, useIntl } from "react-intl"; | ||||
| import usePageTitle from 'components/usePageTitle'; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const PublicNotice = () => { | const PublicNotice = () => { | ||||
| usePageTitle("myPublicNotice"); | |||||
| const [submittedCount, setSubmittedCount] = useState(0); | const [submittedCount, setSubmittedCount] = useState(0); | ||||
| const [pendingPaymentCount, setPendingPaymentCount] = useState(0); | const [pendingPaymentCount, setPendingPaymentCount] = useState(0); | ||||
| const [pendingPublishCount, setPendingPublishCount] = useState(0); | const [pendingPublishCount, setPendingPublishCount] = useState(0); | ||||
+ 3
- 0
src/pages/User/ChangePasswordPage/index.js
Просмотреть файл
| @@ -34,9 +34,12 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; | |||||
| import { useDispatch } from "react-redux"; | import { useDispatch } from "react-redux"; | ||||
| import { handleLogoutFunction} from 'auth/index'; | import { handleLogoutFunction} from 'auth/index'; | ||||
| import { isPasswordExpiry } from "utils/Utils"; | import { isPasswordExpiry } from "utils/Utils"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const Index = () => { | const Index = () => { | ||||
| usePageTitle("userChangePassword"); | |||||
| const dispatch = useDispatch() | const dispatch = useDispatch() | ||||
| const navigate = useNavigate() | const navigate = useNavigate() | ||||
| const [showPassword, setShowPassword] = React.useState(false); | const [showPassword, setShowPassword] = React.useState(false); | ||||
+ 2
- 0
src/pages/User/DetailsPage_Individual/index.js
Просмотреть файл
| @@ -36,10 +36,12 @@ import { | |||||
| isORGLoggedIn | isORGLoggedIn | ||||
| } from "utils/Utils"; | } from "utils/Utils"; | ||||
| import {FormattedMessage, useIntl} from "react-intl"; | import {FormattedMessage, useIntl} from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const UserMaintainPage_Individual = () => { | const UserMaintainPage_Individual = () => { | ||||
| usePageTitle("userProfile"); | |||||
| const intl = useIntl(); | const intl = useIntl(); | ||||
| const params = useParams(); | const params = useParams(); | ||||
+ 4
- 2
src/pages/User/DetailsPage_Organization/index.js
Просмотреть файл
| @@ -40,11 +40,13 @@ import { | |||||
| isINDLoggedIn | isINDLoggedIn | ||||
| } from "utils/Utils"; | } from "utils/Utils"; | ||||
| import {FormattedMessage, useIntl} from "react-intl"; | import {FormattedMessage, useIntl} from "react-intl"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const UserMaintainPage_Organization = () => { | const UserMaintainPage_Organization = () => { | ||||
| usePageTitle("userProfile"); | |||||
| const params = useParams(); | const params = useParams(); | ||||
| const navigate = useNavigate(); | const navigate = useNavigate(); | ||||
| const [userData, setUserData] = useState({}) | const [userData, setUserData] = useState({}) | ||||
| @@ -121,7 +123,7 @@ const UserMaintainPage_Organization = () => { | |||||
| // window.location.reload(false); | // window.location.reload(false); | ||||
| // } | // } | ||||
| const loadData = () => { | |||||
| const loadData = () => { | |||||
| const reqId = ++reqIdRef.current; | const reqId = ++reqIdRef.current; | ||||
| setLoding(true); | setLoding(true); | ||||
| if (isGLDLoggedIn()){ | if (isGLDLoggedIn()){ | ||||
+ 1
- 0
src/pages/authentication/ForgotPassword/AuthCallback/index.js
Просмотреть файл
| @@ -343,6 +343,7 @@ const Index = () => { | |||||
| aria-label={intl.formatMessage({ | aria-label={intl.formatMessage({ | ||||
| id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword" | id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword" | ||||
| })} | })} | ||||
| aria-describedby="helper-text-confirmPassword-signup" | |||||
| onClick={handleClickShowConfirmPassword} | onClick={handleClickShowConfirmPassword} | ||||
| onMouseDown={handleMouseDownPassword} | onMouseDown={handleMouseDownPassword} | ||||
| edge="end" | edge="end" | ||||
+ 2
- 0
src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js
Просмотреть файл
| @@ -150,6 +150,8 @@ const ForgotPasswordApplyForm = () => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| autoFocus | autoFocus | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({id: 'userLoginName'}), | |||||
| "aria-describedby" : 'standard-weight-helper-text-username-login', | |||||
| maxLength: 50, | maxLength: 50, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
+ 1
- 0
src/pages/authentication/ForgotUsername/AuthCallback/index.js
Просмотреть файл
| @@ -406,6 +406,7 @@ const Index = () => { | |||||
| aria-label={intl.formatMessage({ | aria-label={intl.formatMessage({ | ||||
| id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword" | id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword" | ||||
| })} | })} | ||||
| aria-describedby="helper-text-confirmPassword-signup" | |||||
| onClick={handleClickShowConfirmPassword} | onClick={handleClickShowConfirmPassword} | ||||
| onMouseDown={handleMouseDownPassword} | onMouseDown={handleMouseDownPassword} | ||||
| edge="end" | edge="end" | ||||
+ 2
- 0
src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js
Просмотреть файл
| @@ -149,6 +149,8 @@ const ForgotUsernameApplyForm = () => { | |||||
| error={Boolean(formik.touched.emailAddress && formik.errors.emailAddress)} | error={Boolean(formik.touched.emailAddress && formik.errors.emailAddress)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-describedby" : 'standard-weight-helper-text-emailAddress-login', | |||||
| "aria-label": intl.formatMessage({id: 'userContactEmail'}), | |||||
| maxLength: 50, | maxLength: 50, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
+ 4
- 0
src/pages/authentication/auth-forms/AuthLoginCustom.js
Просмотреть файл
| @@ -291,6 +291,7 @@ const AuthLoginCustom = () => { | |||||
| error={Boolean(formik.touched.username && formik.errors.username)} | error={Boolean(formik.touched.username && formik.errors.username)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-describedby": 'standard-weight-helper-text-username-login', | |||||
| maxLength: 50, | maxLength: 50, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -336,6 +337,9 @@ const AuthLoginCustom = () => { | |||||
| </InputAdornment> | </InputAdornment> | ||||
| } | } | ||||
| placeholder="" | placeholder="" | ||||
| inputProps={{ | |||||
| "aria-describedby": 'standard-weight-helper-text-password-login', | |||||
| }} | |||||
| /> | /> | ||||
| {formik.touched.password && formik.errors.password && ( | {formik.touched.password && formik.errors.password && ( | ||||
| <FormHelperText error id="standard-weight-helper-text-password-login"> | <FormHelperText error id="standard-weight-helper-text-password-login"> | ||||
+ 48
- 10
src/pages/authentication/auth-forms/BusCustomFormWizard.js
Просмотреть файл
| @@ -687,7 +687,7 @@ const BusCustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="username-login" | |||||
| id="username-signup" | |||||
| type="text" | type="text" | ||||
| value={formik.values.username.trim()} | value={formik.values.username.trim()} | ||||
| name="username" | name="username" | ||||
| @@ -702,6 +702,8 @@ const BusCustomFormWizard = (props) => { | |||||
| error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} | error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userLoginName" }), | |||||
| "aria-describedby": 'helper-text-username-login', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -762,6 +764,8 @@ const BusCustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({id: 'userPassword'})} | placeholder={intl.formatMessage({id: 'userPassword'})} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userPassword" }), | |||||
| "aria-describedby": 'helper-text-password-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -797,7 +801,7 @@ const BusCustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="confirmPassword-login" | |||||
| id="confirmPassword-signup" | |||||
| type={showConfirmPassword ? 'text' : 'password'} | type={showConfirmPassword ? 'text' : 'password'} | ||||
| value={formik.values.confirmPassword.trim()} | value={formik.values.confirmPassword.trim()} | ||||
| name="confirmPassword" | name="confirmPassword" | ||||
| @@ -810,6 +814,8 @@ const BusCustomFormWizard = (props) => { | |||||
| // changePassword(e.target.value); | // changePassword(e.target.value); | ||||
| }} | }} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "confirmPassword" }), | |||||
| "aria-describedby": 'helper-text-confirmPassword-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -879,7 +885,7 @@ const BusCustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="enCompanyName-login" | |||||
| id="enCompanyName-signup" | |||||
| type="enCompanyName" | type="enCompanyName" | ||||
| value={formik.values.enCompanyName} | value={formik.values.enCompanyName} | ||||
| name="enCompanyName" | name="enCompanyName" | ||||
| @@ -889,6 +895,8 @@ const BusCustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.enCompanyName && formik.errors.enCompanyName && selectedAddress5 !== "內地")} | error={Boolean(formik.touched.enCompanyName && formik.errors.enCompanyName && selectedAddress5 !== "內地")} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "businessEngName" }), | |||||
| "aria-describedby": 'helper-text-enCompanyName-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -921,6 +929,8 @@ const BusCustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})} | placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "businessChName" }), | |||||
| "aria-describedby": 'helper-text-chCompanyName-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -954,6 +964,8 @@ const BusCustomFormWizard = (props) => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})} | placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "businessRegCertNumber" }), | |||||
| "aria-describedby": 'helper-text-brNo-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -987,6 +999,8 @@ const BusCustomFormWizard = (props) => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})} | placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "businessRegCertExpiryDate" }), | |||||
| "aria-describedby": 'helper-text-brExpiryDate-signup', | |||||
| max: "2099-12-31", | max: "2099-12-31", | ||||
| min: new Date().toISOString().split("T")[0], | min: new Date().toISOString().split("T")[0], | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| @@ -1021,6 +1035,7 @@ const BusCustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({id: 'addressLine1'})} | placeholder={intl.formatMessage({id: 'addressLine1'})} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "addressLine1" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1038,6 +1053,7 @@ const BusCustomFormWizard = (props) => { | |||||
| onChange={formik.handleChange} | onChange={formik.handleChange} | ||||
| placeholder={intl.formatMessage({id: 'addressLine2'})} | placeholder={intl.formatMessage({id: 'addressLine2'})} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "addressLine2" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1055,6 +1071,7 @@ const BusCustomFormWizard = (props) => { | |||||
| onChange={formik.handleChange} | onChange={formik.handleChange} | ||||
| placeholder={intl.formatMessage({id: 'addressLine3'})} | placeholder={intl.formatMessage({id: 'addressLine3'})} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "addressLine3" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1177,7 +1194,7 @@ const BusCustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="enName-login" | |||||
| id="enName-signup" | |||||
| type="enName" | type="enName" | ||||
| value={formik.values.enName} | value={formik.values.enName} | ||||
| name="enName" | name="enName" | ||||
| @@ -1187,6 +1204,8 @@ const BusCustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.enName && formik.errors.enName)} | error={Boolean(formik.touched.enName && formik.errors.enName)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userContactName" }), | |||||
| "aria-describedby": 'helper-text-enName-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1214,7 +1233,7 @@ const BusCustomFormWizard = (props) => { | |||||
| <OutlinedInput | <OutlinedInput | ||||
| fullWidth | fullWidth | ||||
| error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)} | error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)} | ||||
| id="email-login" | |||||
| id="email-signup" | |||||
| type="email" | type="email" | ||||
| value={formik.values.email.trim()} | value={formik.values.email.trim()} | ||||
| name="email" | name="email" | ||||
| @@ -1222,6 +1241,8 @@ const BusCustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({id: 'userContactEmail'})} | placeholder={intl.formatMessage({id: 'userContactEmail'})} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userContactEmail" }), | |||||
| "aria-describedby": 'helper-text-email-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1252,7 +1273,7 @@ const BusCustomFormWizard = (props) => { | |||||
| <OutlinedInput | <OutlinedInput | ||||
| fullWidth | fullWidth | ||||
| error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} | error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} | ||||
| id="emailConfirm-login" | |||||
| id="emailConfirm-signup" | |||||
| type="email" | type="email" | ||||
| value={formik.values.emailConfirm.trim()} | value={formik.values.emailConfirm.trim()} | ||||
| name="emailConfirm" | name="emailConfirm" | ||||
| @@ -1264,6 +1285,8 @@ const BusCustomFormWizard = (props) => { | |||||
| onCopy={handleCCPChange} | onCopy={handleCCPChange} | ||||
| onPaste={handleCCPChange} | onPaste={handleCCPChange} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "confirmEmail" }), | |||||
| "aria-describedby": 'helper-text-emailConfirm-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1294,7 +1317,7 @@ const BusCustomFormWizard = (props) => { | |||||
| </InputLabel> | </InputLabel> | ||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="phoneCountryCode-login" | |||||
| id="phoneCountryCode-signup" | |||||
| type="phoneCountryCode" | type="phoneCountryCode" | ||||
| value={formik.values.phoneCountryCode.trim()} | value={formik.values.phoneCountryCode.trim()} | ||||
| name="phoneCountryCode" | name="phoneCountryCode" | ||||
| @@ -1312,6 +1335,7 @@ const BusCustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.phone && formik.errors.phone)} | error={Boolean(formik.touched.phone && formik.errors.phone)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "phoneCountryCode" }), | |||||
| maxLength: 3, | maxLength: 3, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1322,7 +1346,7 @@ const BusCustomFormWizard = (props) => { | |||||
| sx={{ width: '33%', mr:1 }} | sx={{ width: '33%', mr:1 }} | ||||
| /> | /> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="phone-login" | |||||
| id="phone-signup" | |||||
| type="phone" | type="phone" | ||||
| value={formik.values.phone.trim()} | value={formik.values.phone.trim()} | ||||
| name="phone" | name="phone" | ||||
| @@ -1338,6 +1362,8 @@ const BusCustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({id: 'userContactNumber'})} | placeholder={intl.formatMessage({id: 'userContactNumber'})} | ||||
| error={Boolean(formik.touched.phone && formik.errors.phone)} | error={Boolean(formik.touched.phone && formik.errors.phone)} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userContactNumber" }), | |||||
| "aria-describedby": 'helper-text-phone-signup', | |||||
| maxLength: 11, | maxLength: 11, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1369,7 +1395,7 @@ const BusCustomFormWizard = (props) => { | |||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| error={Boolean(formik.touched.fax && formik.errors.fax)} | error={Boolean(formik.touched.fax && formik.errors.fax)} | ||||
| id="faxCountryCode-login" | |||||
| id="faxCountryCode-signup" | |||||
| type="faxCountryCode" | type="faxCountryCode" | ||||
| value={formik.values.faxCountryCode.trim()} | value={formik.values.faxCountryCode.trim()} | ||||
| name="faxCountryCode" | name="faxCountryCode" | ||||
| @@ -1385,6 +1411,7 @@ const BusCustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({id: 'dialingCode'})} | placeholder={intl.formatMessage({id: 'dialingCode'})} | ||||
| endAdornment={<InputAdornment position="end">-</InputAdornment>} | endAdornment={<InputAdornment position="end">-</InputAdornment>} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "faxCountryCode" }), | |||||
| maxLength: 3, | maxLength: 3, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1395,7 +1422,7 @@ const BusCustomFormWizard = (props) => { | |||||
| sx={{ width: '33%', mr:1 }} | sx={{ width: '33%', mr:1 }} | ||||
| /> | /> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="fax-login" | |||||
| id="fax-signup" | |||||
| type="fax" | type="fax" | ||||
| value={formik.values.fax.trim()} | value={formik.values.fax.trim()} | ||||
| name="fax" | name="fax" | ||||
| @@ -1410,6 +1437,7 @@ const BusCustomFormWizard = (props) => { | |||||
| }} | }} | ||||
| placeholder={intl.formatMessage({id: 'userFaxNumber'})} | placeholder={intl.formatMessage({id: 'userFaxNumber'})} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userFaxNumber" }), | |||||
| maxLength: 8, | maxLength: 8, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1493,6 +1521,9 @@ const BusCustomFormWizard = (props) => { | |||||
| name="termsAndConAccept" | name="termsAndConAccept" | ||||
| color="primary" | color="primary" | ||||
| size="small" | size="small" | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "iConfirm" }) | |||||
| }} | |||||
| /> | /> | ||||
| <Typography variant="pnspsFormHeader"> | <Typography variant="pnspsFormHeader"> | ||||
| <FormattedMessage id="iConfirm"/> | <FormattedMessage id="iConfirm"/> | ||||
| @@ -1509,6 +1540,9 @@ const BusCustomFormWizard = (props) => { | |||||
| name="termsAndConNotAccept" | name="termsAndConNotAccept" | ||||
| color="primary" | color="primary" | ||||
| size="small" | size="small" | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "rejectTerms" }) | |||||
| }} | |||||
| /> | /> | ||||
| <Typography variant="pnspsFormHeader"> | <Typography variant="pnspsFormHeader"> | ||||
| <FormattedMessage id="rejectTerms"/> | <FormattedMessage id="rejectTerms"/> | ||||
| @@ -1553,6 +1587,10 @@ const BusCustomFormWizard = (props) => { | |||||
| formik.setFieldValue("captchaField", value); | formik.setFieldValue("captchaField", value); | ||||
| }} | }} | ||||
| sx={{ width: '75%' }} | sx={{ width: '75%' }} | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "verify" }), | |||||
| "aria-describedby": 'helper-text-captcha-signup' | |||||
| }} | |||||
| /> | /> | ||||
| </Grid> | </Grid> | ||||
| </Stack> | </Stack> | ||||
+ 46
- 11
src/pages/authentication/auth-forms/CustomFormWizard.js
Просмотреть файл
| @@ -1,7 +1,5 @@ | |||||
| import { useEffect, useState } from 'react'; | import { useEffect, useState } from 'react'; | ||||
| // material-ui | |||||
| import { | import { | ||||
| Box, | Box, | ||||
| Button, Checkbox | Button, Checkbox | ||||
| @@ -918,7 +916,7 @@ const CustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="username-login" | |||||
| id="username-signup" | |||||
| type="text" | type="text" | ||||
| value={formik.values.username.trim()} | value={formik.values.username.trim()} | ||||
| name="username" | name="username" | ||||
| @@ -933,6 +931,8 @@ const CustomFormWizard = (props) => { | |||||
| error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} | error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userLoginName" }), | |||||
| "aria-describedby": 'helper-text-username-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -993,6 +993,8 @@ const CustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({ id: 'userPassword' })} | placeholder={intl.formatMessage({ id: 'userPassword' })} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userPassword" }), | |||||
| "aria-describedby": 'helper-text-password-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1028,7 +1030,7 @@ const CustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="confirmPassword-login" | |||||
| id="confirmPassword-signup" | |||||
| type={showConfirmPassword ? 'text' : 'password'} | type={showConfirmPassword ? 'text' : 'password'} | ||||
| value={formik.values.confirmPassword.trim()} | value={formik.values.confirmPassword.trim()} | ||||
| name="confirmPassword" | name="confirmPassword" | ||||
| @@ -1041,6 +1043,8 @@ const CustomFormWizard = (props) => { | |||||
| // changePassword(e.target.value); | // changePassword(e.target.value); | ||||
| }} | }} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "confirmPassword" }), | |||||
| "aria-describedby": 'helper-text-confirmPassword-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1119,6 +1123,7 @@ const CustomFormWizard = (props) => { | |||||
| <Autocomplete | <Autocomplete | ||||
| disablePortal | disablePortal | ||||
| id="idDocType" | id="idDocType" | ||||
| label={intl.formatMessage({ id: "idDocType" })} | |||||
| //value={selectedIdDocType} | //value={selectedIdDocType} | ||||
| size="small" | size="small" | ||||
| options={idDocTypeComboList} | options={idDocTypeComboList} | ||||
| @@ -1190,6 +1195,8 @@ const CustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)} | error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "idDocNumber" }), | |||||
| "aria-describedby": 'helper-text-idNo-signup', | |||||
| maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18, | maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| // console.log(e) | // console.log(e) | ||||
| @@ -1280,6 +1287,8 @@ const CustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)} | error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "idDocNumber" }), | |||||
| "aria-describedby": 'helper-text-idNo-signup', | |||||
| maxLength: 18, | maxLength: 18, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1317,7 +1326,7 @@ const CustomFormWizard = (props) => { | |||||
| </Typography> | </Typography> | ||||
| </InputLabel> | </InputLabel> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="enName-login" | |||||
| id="enName-signup" | |||||
| type="enName" | type="enName" | ||||
| value={formik.values.enName} | value={formik.values.enName} | ||||
| name="enName" | name="enName" | ||||
| @@ -1327,6 +1336,8 @@ const CustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")} | error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userEnglishName" }), | |||||
| "aria-describedby": 'helper-text-enName-signup', | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1360,6 +1371,8 @@ const CustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })} | placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userChineseName" }), | |||||
| "aria-describedby": 'helper-text-chName-signup', | |||||
| maxLength: 6, | maxLength: 6, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1393,6 +1406,7 @@ const CustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({ id: 'addressLine1' })} | placeholder={intl.formatMessage({ id: 'addressLine1' })} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "addressLine1" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1410,6 +1424,7 @@ const CustomFormWizard = (props) => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| placeholder={intl.formatMessage({ id: 'addressLine2' })} | placeholder={intl.formatMessage({ id: 'addressLine2' })} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "addressLine2" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1427,6 +1442,7 @@ const CustomFormWizard = (props) => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| placeholder={intl.formatMessage({ id: 'addressLine3' })} | placeholder={intl.formatMessage({ id: 'addressLine3' })} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "addressLine3" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1554,7 +1570,7 @@ const CustomFormWizard = (props) => { | |||||
| <OutlinedInput | <OutlinedInput | ||||
| fullWidth | fullWidth | ||||
| error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)} | error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)} | ||||
| id="email-login" | |||||
| id="email-signup" | |||||
| type="email" | type="email" | ||||
| value={formik.values.email.trim()} | value={formik.values.email.trim()} | ||||
| name="email" | name="email" | ||||
| @@ -1562,6 +1578,8 @@ const CustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({ id: 'userContactEmail' })} | placeholder={intl.formatMessage({ id: 'userContactEmail' })} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userContactEmail" }), | |||||
| "aria-describedby": "helper-text-email-signup", | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1592,7 +1610,7 @@ const CustomFormWizard = (props) => { | |||||
| <OutlinedInput | <OutlinedInput | ||||
| fullWidth | fullWidth | ||||
| error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} | error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)} | ||||
| id="emailConfirm-login" | |||||
| id="emailConfirm-signup" | |||||
| type="email" | type="email" | ||||
| value={formik.values.emailConfirm.trim()} | value={formik.values.emailConfirm.trim()} | ||||
| name="emailConfirm" | name="emailConfirm" | ||||
| @@ -1604,6 +1622,8 @@ const CustomFormWizard = (props) => { | |||||
| onCopy={handleCCPChange} | onCopy={handleCCPChange} | ||||
| onPaste={handleCCPChange} | onPaste={handleCCPChange} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "confirmEmail" }), | |||||
| "aria-describedby": "helper-text-emailConfirm-signup", | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -1634,7 +1654,7 @@ const CustomFormWizard = (props) => { | |||||
| </InputLabel> | </InputLabel> | ||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="phoneCountryCode-login" | |||||
| id="phoneCountryCode-signup" | |||||
| type="phoneCountryCode" | type="phoneCountryCode" | ||||
| value={formik.values.phoneCountryCode.trim()} | value={formik.values.phoneCountryCode.trim()} | ||||
| name="phoneCountryCode" | name="phoneCountryCode" | ||||
| @@ -1652,6 +1672,7 @@ const CustomFormWizard = (props) => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| endAdornment={<InputAdornment position="end">-</InputAdornment>} | endAdornment={<InputAdornment position="end">-</InputAdornment>} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "dialingCode" }), | |||||
| maxLength: 3, | maxLength: 3, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1662,7 +1683,7 @@ const CustomFormWizard = (props) => { | |||||
| sx={{ width: '33%', mr: 1 }} | sx={{ width: '33%', mr: 1 }} | ||||
| /> | /> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="phone-login" | |||||
| id="phone-signup" | |||||
| type="phone" | type="phone" | ||||
| value={formik.values.phone.trim()} | value={formik.values.phone.trim()} | ||||
| name="phone" | name="phone" | ||||
| @@ -1679,6 +1700,8 @@ const CustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.phone && formik.errors.phone)} | error={Boolean(formik.touched.phone && formik.errors.phone)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userContactNumber" }), | |||||
| "aria-describedby": 'helper-text-phone-signup', | |||||
| maxLength: 11, | maxLength: 11, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1710,7 +1733,7 @@ const CustomFormWizard = (props) => { | |||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| error={Boolean(formik.touched.fax && formik.errors.fax)} | error={Boolean(formik.touched.fax && formik.errors.fax)} | ||||
| id="faxCountryCode-login" | |||||
| id="faxCountryCode-signup" | |||||
| type="faxCountryCode" | type="faxCountryCode" | ||||
| value={formik.values.faxCountryCode.trim()} | value={formik.values.faxCountryCode.trim()} | ||||
| name="faxCountryCode" | name="faxCountryCode" | ||||
| @@ -1726,6 +1749,7 @@ const CustomFormWizard = (props) => { | |||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| endAdornment={<InputAdornment position="end">-</InputAdornment>} | endAdornment={<InputAdornment position="end">-</InputAdornment>} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "faxCountryCode" }), | |||||
| maxLength: 3, | maxLength: 3, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1736,7 +1760,7 @@ const CustomFormWizard = (props) => { | |||||
| sx={{ width: '33%', mr: 1 }} | sx={{ width: '33%', mr: 1 }} | ||||
| /> | /> | ||||
| <OutlinedInput | <OutlinedInput | ||||
| id="fax-login" | |||||
| id="fax-signup" | |||||
| type="fax" | type="fax" | ||||
| value={formik.values.fax.trim()} | value={formik.values.fax.trim()} | ||||
| name="fax" | name="fax" | ||||
| @@ -1751,6 +1775,7 @@ const CustomFormWizard = (props) => { | |||||
| }} | }} | ||||
| placeholder={intl.formatMessage({ id: 'userFaxNumber' })} | placeholder={intl.formatMessage({ id: 'userFaxNumber' })} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userFaxNumber" }), | |||||
| maxLength: 8, | maxLength: 8, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| @@ -1835,6 +1860,9 @@ const CustomFormWizard = (props) => { | |||||
| name="termsAndConAccept" | name="termsAndConAccept" | ||||
| color="primary" | color="primary" | ||||
| size="small" | size="small" | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "iConfirm" }) | |||||
| }} | |||||
| /> | /> | ||||
| <Typography variant="pnspsFormHeader"> | <Typography variant="pnspsFormHeader"> | ||||
| <FormattedMessage id="iConfirm" /> | <FormattedMessage id="iConfirm" /> | ||||
| @@ -1851,6 +1879,9 @@ const CustomFormWizard = (props) => { | |||||
| name="termsAndConNotAccept" | name="termsAndConNotAccept" | ||||
| color="primary" | color="primary" | ||||
| size="small" | size="small" | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "rejectTerms" }) | |||||
| }} | |||||
| /> | /> | ||||
| <Typography variant="pnspsFormHeader"> | <Typography variant="pnspsFormHeader"> | ||||
| <FormattedMessage id="rejectTerms" /> | <FormattedMessage id="rejectTerms" /> | ||||
| @@ -1895,6 +1926,10 @@ const CustomFormWizard = (props) => { | |||||
| formik.setFieldValue("captchaField", value); | formik.setFieldValue("captchaField", value); | ||||
| }} | }} | ||||
| sx={{ width: '75%' }} | sx={{ width: '75%' }} | ||||
| inputProps={{ | |||||
| "aria-label": intl.formatMessage({ id: "verify" }), | |||||
| "aria-describedby": 'helper-text-captcha-signup' | |||||
| }} | |||||
| /> | /> | ||||
| </Grid> | </Grid> | ||||
| </Stack> | </Stack> | ||||
+ 6
- 0
src/pages/authentication/auth-forms/IAmSmartFormWizard.js
Просмотреть файл
| @@ -746,6 +746,8 @@ const CustomFormWizard = (props) => { | |||||
| placeholder={intl.formatMessage({ id: 'userContactEmail' })} | placeholder={intl.formatMessage({ id: 'userContactEmail' })} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-describedby": "helper-text-email-signup", | |||||
| "aria-label": intl.formatMessage({ id: "userContactEmail" }), | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -792,6 +794,8 @@ const CustomFormWizard = (props) => { | |||||
| onCopy={handleCCPChange} | onCopy={handleCCPChange} | ||||
| onPaste={handleCCPChange} | onPaste={handleCCPChange} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "confirmEmail" }), | |||||
| "aria-describedby": "helper-text-emailConfirm-signup", | |||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
| e.preventDefault(); | e.preventDefault(); | ||||
| @@ -870,6 +874,8 @@ const CustomFormWizard = (props) => { | |||||
| error={Boolean(formik.touched.phone && formik.errors.phone)} | error={Boolean(formik.touched.phone && formik.errors.phone)} | ||||
| onBlur={formik.handleBlur} | onBlur={formik.handleBlur} | ||||
| inputProps={{ | inputProps={{ | ||||
| "aria-label": intl.formatMessage({ id: "userContactNumber" }), | |||||
| "aria-describedby": 'helper-text-phone-signup', | |||||
| maxLength: 11, | maxLength: 11, | ||||
| onKeyDown: (e) => { | onKeyDown: (e) => { | ||||
| if (e.key === 'Enter') { | if (e.key === 'Enter') { | ||||
+ 2
- 0
src/pages/dashboard/Public/index.js
Просмотреть файл
| @@ -27,10 +27,12 @@ const Notice = Loadable(React.lazy(() => import('./Notice'))); | |||||
| const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent'))); | ||||
| import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||
| import usePageTitle from "components/usePageTitle"; | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
| const DashboardDefault = () => { | const DashboardDefault = () => { | ||||
| usePageTitle("Dashboard"); | |||||
| const navigate = useNavigate() | const navigate = useNavigate() | ||||
| const intl = useIntl(); | const intl = useIntl(); | ||||
| const userData = JSON.parse(localStorage.getItem("userData")); | const userData = JSON.parse(localStorage.getItem("userData")); | ||||
+ 255
- 186
src/pages/extra-pages/UserMenuPub1/index.js
Просмотреть файл
| @@ -1,207 +1,276 @@ | |||||
| import { Grid, Typography, Stack, } from '@mui/material'; | |||||
| import { useState, useEffect, lazy } from "react"; | |||||
| // File: src/pages/userGuide/UserMenuPub1.jsx | |||||
| // Notes: | |||||
| // - No new libraries. | |||||
| // - Fixes: target="_blank", rel="noopener noreferrer" | |||||
| // - Adds aria-label for icon-only download links (WCAG 2.4.4 / 1.1.1 friendly) | |||||
| // - Fixes invalid HTML: no <p> wrapping <table> | |||||
| // - Adds <thead>/<tbody>, scope, and React keys | |||||
| import Loadable from 'components/Loadable'; | |||||
| 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 { useIntl, FormattedMessage } from "react-intl"; | ||||
| import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||||
| import DownloadIcon from "@mui/icons-material/Download"; | |||||
| import titleBackgroundImg from "assets/images/dashboard/gazette-bar.png"; | |||||
| const LoadingComponent = Loadable(lazy(() => import("pages/extra-pages/LoadingComponent"))); | |||||
| const BackgroundHead = { | const BackgroundHead = { | ||||
| backgroundImage: `url(${titleBackgroundImg})`, | |||||
| width: 'auto', | |||||
| height: 'auto', | |||||
| backgroundSize: 'contain', | |||||
| backgroundRepeat: 'no-repeat', | |||||
| backgroundColor: '#0C489E', | |||||
| backgroundPosition: 'right' | |||||
| } | |||||
| backgroundImage: `url(${titleBackgroundImg})`, | |||||
| width: "auto", | |||||
| height: "auto", | |||||
| backgroundSize: "contain", | |||||
| backgroundRepeat: "no-repeat", | |||||
| backgroundColor: "#0C489E", | |||||
| backgroundPosition: "right", | |||||
| }; | |||||
| const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent'))); | |||||
| const tableStyle = { | |||||
| fontFamily: "arial, sans-serif", | |||||
| borderCollapse: "collapse", | |||||
| width: "100%", | |||||
| }; | |||||
| import DownloadIcon from '@mui/icons-material/Download'; | |||||
| const cellStyle = { | |||||
| border: "1px solid #dddddd", | |||||
| textAlign: "left", | |||||
| padding: "8px", | |||||
| }; | |||||
| const UserMenuPub1 = () => { | const UserMenuPub1 = () => { | ||||
| const intl = useIntl(); | |||||
| const { locale } = intl; | |||||
| const [onReady, setOnReady] = useState(false); | |||||
| const intl = useIntl(); | |||||
| const { locale } = intl; | |||||
| const [onReady, setOnReady] = useState(false); | |||||
| useEffect(() => { | |||||
| setOnReady(true); | |||||
| }, [locale]); | |||||
| useEffect(() => { | |||||
| setOnReady(true); | |||||
| }, [locale]); | |||||
| const tableStyle = { | |||||
| fontFamily: "arial, sans-serif", | |||||
| borderCollapse: "collapse", | |||||
| width: "100%", | |||||
| } | |||||
| const pnspsurl = `https://${window.location.hostname}`; | |||||
| const cellStyle = { | |||||
| border: "1px solid #dddddd", | |||||
| textAlign: "left", | |||||
| padding: "8px" | |||||
| }; | |||||
| const pickByLocale = (en, zhHK, zhCN) => (locale === "zh-HK" ? zhHK : locale === "en" ? en : zhCN); | |||||
| const getRow = ({ title, orgEn, orgZh, orgCn, indEn, indZh, indCn }) => { | |||||
| // If you already created downloadPdfAria in i18n, keep it. | |||||
| // Example en: "Download {guide} PDF ({userType})" | |||||
| const buildAria = (guideId, userTypeId) => { | |||||
| const guideTitle = intl.formatMessage({ id: guideId }); | |||||
| const userType = intl.formatMessage({ id: userTypeId }); | |||||
| return <> | |||||
| <tr> | |||||
| <td style={cellStyle}>{title}</td> | |||||
| <td style={cellStyle}><a href={locale=="zh-HK"?orgZh: locale=="en"?orgEn:orgCn} target='_brank'><DownloadIcon /></a></td> | |||||
| <td style={cellStyle}><a href={locale=="zh-HK"?indZh: locale=="en"?indEn:indCn} target='_brank'><DownloadIcon /></a></td> | |||||
| </tr> | |||||
| </> | |||||
| ; | |||||
| } | |||||
| return intl.formatMessage( | |||||
| { id: "downloadPdfAria", defaultMessage: "Download {guide} PDF ({userType})" }, | |||||
| { guide: guideTitle, userType } | |||||
| ); | |||||
| }; | |||||
| const pnspsurl = "https://"+window.location.hostname; | |||||
| const rows = [ | |||||
| { | |||||
| id: "userGuide1", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/01 - Create account - c 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/01c - Create account - c 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/01sc - Create account - c 1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/01 - Create account - p 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/01c - Create account - p 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/01sc - Create account - p 1.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide2", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/02 - Login - c 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/02c - Login - c 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/02sc - Login - c 1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/02 - Login - p 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/02c - Login - p 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/02sc - Login - p 1.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide3", // UPDATED TO v2 | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - c 2.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - c 2.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - c 2.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - p 2.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - p 2.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - p 2.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide4", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - c 2.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - c 2.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - c 2.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - p 2.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - p 2.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - p 2.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide5", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - c 2.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - c 2.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - c 2.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - p 2.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - p 2.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - p 2.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide6", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide7", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/07 - Forgot password - c 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/07c - Forgot password - c 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/07sc - Forgot password - c 1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/07 - Forgot password - p 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/07c - Forgot password - p 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/07sc - Forgot password - p 1.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide8", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/08 - Change password - c 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/08c - Change password - c 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/08sc - Change password - c 1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/08 - Change password - p 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/08c - Change password - p 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/08sc - Change password - p 1.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuide9", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/09 - Language of email notification - c 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/09c - Language of email notification - c 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/09sc - Language of email notification - c 1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/09 - Language of email notification - p 1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/09c - Language of email notification - p 1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/09sc - Language of email notification - p 1.pdf`, | |||||
| }, | |||||
| }, | |||||
| { | |||||
| id: "userGuidePub10", | |||||
| org: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/10-Payment-c1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/10c-Payment-c1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/10sc-Payment-c1.pdf`, | |||||
| }, | |||||
| ind: { | |||||
| en: `${pnspsurl}/user-guide-pub-1/eng/10-Payment-p1.pdf`, | |||||
| zhHK: `${pnspsurl}/user-guide-pub-1/cht/10c-Payment-p1.pdf`, | |||||
| zhCN: `${pnspsurl}/user-guide-pub-1/chs/10sc-Payment-p1.pdf`, | |||||
| }, | |||||
| }, | |||||
| ]; | |||||
| const renderDownloadLink = (href, ariaLabel) => ( | |||||
| <a href={href} target="_blank" rel="noopener noreferrer" aria-label={ariaLabel}> | |||||
| <DownloadIcon aria-hidden="true" focusable="false" /> | |||||
| </a> | |||||
| ); | |||||
| if (!onReady) { | |||||
| return ( | return ( | ||||
| !onReady ? | |||||
| <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center"> | |||||
| <Grid item> | |||||
| <LoadingComponent /> | |||||
| </Grid> | |||||
| </Grid> | |||||
| : | |||||
| ( | |||||
| <Grid container sx={{ minHeight: '87vh', mb: 3}} direction="column" alignItems="center" > | |||||
| <Grid item xs={12} md={12} width="100%"> | |||||
| <div style={BackgroundHead}> | |||||
| <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||||
| <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block'} }}> | |||||
| <FormattedMessage id="userGuide" /> | |||||
| </Typography> | |||||
| </Stack> | |||||
| </div> | |||||
| </Grid> | |||||
| <Grid container justifyContent="center" alignItems="center" > | |||||
| <Grid item xs={10} md={8} lg={6}> | |||||
| <div style={{ | |||||
| textAlign: "justify", | |||||
| textJustify: "interWord", | |||||
| fontStyle: "normal" | |||||
| }}> | |||||
| <p> | |||||
| <table style={tableStyle}> | |||||
| <tr> | |||||
| <th style={cellStyle} width="70%"></th> | |||||
| <th style={cellStyle} width="15%"><FormattedMessage id="forOrgUser" /></th> | |||||
| <th style={cellStyle} width="15%"><FormattedMessage id="forIndUser" /></th> | |||||
| </tr> | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide1" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/01 - Create account - c 1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/01c - Create account - c 1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/01sc - Create account - c 1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/01 - Create account - p 1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/01c - Create account - p 1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/01sc - Create account - p 1.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide2" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/02 - Login - c 1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/02c - Login - c 1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/02sc - Login - c 1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/02 - Login - p 1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/02c - Login - p 1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/02sc - Login - p 1.pdf" | |||||
| })} | |||||
| {/* UPDATED TO v2 */} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide3" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - c 2.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - c 2.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - c 2.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - p 2.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - p 2.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - p 2.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide4" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - c 2.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - c 2.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - c 2.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - p 2.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - p 2.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - p 2.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide5" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - c 2.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - c 2.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - c 2.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - p 2.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - p 2.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - p 2.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide6" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide7" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/07 - Forgot password - c 1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/07c - Forgot password - c 1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/07sc - Forgot password - c 1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/07 - Forgot password - p 1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/07c - Forgot password - p 1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/07sc - Forgot password - p 1.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide8" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/08 - Change password - c 1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/08c - Change password - c 1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/08sc - Change password - c 1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/08 - Change password - p 1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/08c - Change password - p 1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/08sc - Change password - p 1.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuide9" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/09 - Language of email notification - c 1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/09c - Language of email notification - c 1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/09sc - Language of email notification - c 1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/09 - Language of email notification - p 1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/09c - Language of email notification - p 1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/09sc - Language of email notification - p 1.pdf" | |||||
| })} | |||||
| {getRow({ | |||||
| title: <FormattedMessage id="userGuidePub10" />, | |||||
| orgEn: pnspsurl + "/user-guide-pub-1/eng/10-Payment-c1.pdf", | |||||
| orgZh: pnspsurl + "/user-guide-pub-1/cht/10c-Payment-c1.pdf", | |||||
| orgCn: pnspsurl + "/user-guide-pub-1/chs/10sc-Payment-c1.pdf", | |||||
| indEn: pnspsurl + "/user-guide-pub-1/eng/10-Payment-p1.pdf", | |||||
| indZh: pnspsurl + "/user-guide-pub-1/cht/10c-Payment-p1.pdf", | |||||
| indCn: pnspsurl + "/user-guide-pub-1/chs/10sc-Payment-p1.pdf" | |||||
| })} | |||||
| </table> | |||||
| <FormattedMessage id="userGuidePubNote" /> | |||||
| </p> | |||||
| </div> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </Grid> | |||||
| ) | |||||
| <Grid container sx={{ minHeight: "87vh", mb: 3 }} direction="column" justifyContent="center" alignItems="center"> | |||||
| <Grid item> | |||||
| <LoadingComponent /> | |||||
| </Grid> | |||||
| </Grid> | |||||
| ); | ); | ||||
| } | |||||
| return ( | |||||
| <Grid container sx={{ minHeight: "87vh", mb: 3 }} direction="column" alignItems="center"> | |||||
| <Grid item xs={12} md={12} width="100%"> | |||||
| <div style={BackgroundHead}> | |||||
| <Stack direction="row" height="70px" justifyContent="flex-start" alignItems="center"> | |||||
| <Typography ml={15} color="#FFF" variant="h4" sx={{ display: { xs: "none", sm: "none", md: "block" } }}> | |||||
| <FormattedMessage id="userGuide" /> | |||||
| </Typography> | |||||
| </Stack> | |||||
| </div> | |||||
| </Grid> | |||||
| <Grid container justifyContent="center" alignItems="center"> | |||||
| <Grid item xs={10} md={8} lg={6}> | |||||
| <div style={{ textAlign: "justify", textJustify: "interWord", fontStyle: "normal" }}> | |||||
| <table style={tableStyle}> | |||||
| <thead> | |||||
| <tr> | |||||
| <th style={cellStyle} width="70%" scope="col"></th> | |||||
| <th style={cellStyle} width="15%" scope="col"> | |||||
| <FormattedMessage id="forOrgUser" /> | |||||
| </th> | |||||
| <th style={cellStyle} width="15%" scope="col"> | |||||
| <FormattedMessage id="forIndUser" /> | |||||
| </th> | |||||
| </tr> | |||||
| </thead> | |||||
| <tbody> | |||||
| {rows.map((r) => { | |||||
| const orgHref = pickByLocale(r.org.en, r.org.zhHK, r.org.zhCN); | |||||
| const indHref = pickByLocale(r.ind.en, r.ind.zhHK, r.ind.zhCN); | |||||
| const guideTitle = intl.formatMessage({ id: r.id }); | |||||
| return ( | |||||
| <tr key={r.id}> | |||||
| <td style={cellStyle}>{guideTitle}</td> | |||||
| <td style={cellStyle}> | |||||
| {renderDownloadLink(orgHref, buildAria(r.id, "forOrgUser"))} | |||||
| </td> | |||||
| <td style={cellStyle}> | |||||
| {renderDownloadLink(indHref, buildAria(r.id, "forIndUser"))} | |||||
| </td> | |||||
| </tr> | |||||
| ); | |||||
| })} | |||||
| </tbody> | |||||
| </table> | |||||
| } | |||||
| <p style={{ marginTop: 12 }}> | |||||
| <FormattedMessage id="userGuidePubNote" /> | |||||
| </p> | |||||
| </div> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </Grid> | |||||
| ); | |||||
| }; | |||||
| export default UserMenuPub1; | export default UserMenuPub1; | ||||
+ 3
- 1
src/translations/en.json
Просмотреть файл
| @@ -626,5 +626,7 @@ | |||||
| "muiNoOptions": "No options", | "muiNoOptions": "No options", | ||||
| "paginationPrev": "Go to previous page", | "paginationPrev": "Go to previous page", | ||||
| "paginationNext": "Go to next page" | |||||
| "paginationNext": "Go to next page", | |||||
| "sort": "Sort" | |||||
| } | } | ||||
+ 3
- 1
src/translations/zh-CN.json
Просмотреть файл
| @@ -622,5 +622,7 @@ | |||||
| "muiNoOptions": "没有选项", | "muiNoOptions": "没有选项", | ||||
| "paginationPrev": "上一页", | "paginationPrev": "上一页", | ||||
| "paginationNext": "下一页" | |||||
| "paginationNext": "下一页", | |||||
| "sort": "排序" | |||||
| } | } | ||||
+ 3
- 1
src/translations/zh-HK.json
Просмотреть файл
| @@ -623,5 +623,7 @@ | |||||
| "muiNoOptions": "沒有選項", | "muiNoOptions": "沒有選項", | ||||
| "paginationPrev": "上一頁", | "paginationPrev": "上一頁", | ||||
| "paginationNext": "下一頁" | |||||
| "paginationNext": "下一頁", | |||||
| "sort": "排序" | |||||
| } | } | ||||
+ 1
- 1
src/utils/CommonFunction.js
Просмотреть файл
| @@ -208,7 +208,7 @@ export const notifyActionSuccess = (actionMsg) => { | |||||
| export const notifyActionError = (actionMsg) => { | export const notifyActionError = (actionMsg) => { | ||||
| toast.error(`${actionMsg}`, { | toast.error(`${actionMsg}`, { | ||||
| position: "bottom-right", | position: "bottom-right", | ||||
| autoClose: 5000, | |||||
| autoClose: 60000, | |||||
| hideProgressBar: false, | hideProgressBar: false, | ||||
| closeOnClick: true, | closeOnClick: true, | ||||
| pauseOnHover: true, | pauseOnHover: true, | ||||