From 970caa576e85fd192744b5d017d550584cd2460d Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Tue, 9 Apr 2024 15:53:14 +0800 Subject: [PATCH] hidden ID no with after 4 digi number --- .../UserInformationCard_Individual.js | 107 ++++++++++++----- .../UserInformationCard_Individual_Pub.js | 113 +++++++++++++----- .../auth-forms/CustomFormWizard.js | 38 +++++- .../auth-forms/IAmSmartFormWizard.js | 62 ++++++++-- 4 files changed, 246 insertions(+), 74 deletions(-) diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js index 2442b15..bfb3498 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js +++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js @@ -1,7 +1,9 @@ // material-ui import { Grid, Button, Typography, - FormHelperText + FormHelperText, + Stack, + IconButton } from '@mui/material'; import MainCard from "components/MainCard"; import * as React from "react"; @@ -20,6 +22,7 @@ import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerify import {useIntl} from "react-intl"; import {PNSPS_BUTTON_THEME} from "themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; +import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -31,7 +34,16 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { const [locked, setLocked] = useState(false); const [onReady, setOnReady] = useState(false); const [errorMsg, setErrorMsg] = useState(""); + const [showId, setshowId] = useState(false); + const handleClickShowId = () => { + setshowId(!showId); + }; + + const handleMouseDownId = (event) => { + event.preventDefault(); + }; + useEffect(() => { //if state data are ready and assign to different field // console.log(currentApplicationDetailData) @@ -359,39 +371,78 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { {formik.values.idDocType === "HKID" ? - <> - + editMode? + <> + + {FieldUtils.initField({ + valueName: "identification", + disabled: (!editMode), + form: formik, + placeholder: intl.formatMessage({id: 'idDocNumber'}), + inputProps: { + maxLength: 7, + onKeyDown: (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + } + }, + } + })} + + + + {FieldUtils.initField({ + valueName: "checkDigit", + disabled: (!editMode), + form: formik, + })} + + + : + + + {formik.values.identification.slice(0, 4)} + + + {showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null} + + + {showId ? : } + + + : + editMode? + {FieldUtils.initField({ valueName: "identification", disabled: (!editMode), - form: formik, - placeholder: intl.formatMessage({id: 'idDocNumber'}), - inputProps: { - maxLength: 7, - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - } - })} - - - - {FieldUtils.initField({ - valueName: "checkDigit", - disabled: (!editMode), form: formik })} - : - - {FieldUtils.initField({ - valueName: "identification", - disabled: (!editMode), - form: formik - })} - + : + + + {formik.values.identification.slice(0, 4)} + + + {showId ?formik.values.identification.slice(4):"****"} + + + {showId ? : } + + } diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js index a1b3d7f..24f7acf 100644 --- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js +++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js @@ -1,7 +1,9 @@ // material-ui import { Grid, Button, Typography, - FormHelperText + FormHelperText, + Stack, + IconButton } from '@mui/material'; import MainCard from "components/MainCard"; import * as React from "react"; @@ -20,6 +22,7 @@ import {notifySaveSuccess,} from 'utils/CommonFunction'; import {FormattedMessage, useIntl} from "react-intl"; import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; import {ThemeProvider} from "@emotion/react"; +import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; // ==============================|| DASHBOARD - DEFAULT ||============================== // @@ -30,6 +33,15 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => { const [editMode, setEditMode] = useState(false); const [onReady, setOnReady] = useState(false); const [errorMsg, setErrorMsg] = useState(""); + const [showId, setshowId] = useState(false); + + const handleClickShowId = () => { + setshowId(!showId); + }; + + const handleMouseDownId = (event) => { + event.preventDefault(); + }; useEffect(() => { if (Object.keys(formData).length > 0) { @@ -226,39 +238,74 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => { {formik.values.idDocType === "HKID" ? - <> - - {FieldUtils.initField({ - valueName: "identification", - disabled: true, - form: formik, - placeholder: intl.formatMessage({id: 'idDocNumber'}), - inputProps: { - maxLength: 7, - onKeyDown: (e) => { - if (e.key === 'Enter') { - e.preventDefault(); - } - }, - } - })} + // <> + // + // {FieldUtils.initField({ + // valueName: "identification", + // disabled: true, + // form: formik, + // placeholder: intl.formatMessage({id: 'idDocNumber'}), + // inputProps: { + // maxLength: 7, + // onKeyDown: (e) => { + // if (e.key === 'Enter') { + // e.preventDefault(); + // } + // }, + // } + // })} - - - {FieldUtils.initField({ - valueName: "checkDigit", - disabled: true, - form: formik, - })} - - : - - {FieldUtils.initField({ - valueName: "identification", - disabled: true, - form: formik - })} - + // + // + // {FieldUtils.initField({ + // valueName: "checkDigit", + // disabled: true, + // form: formik, + // })} + // + // + + + {formik.values.identification.slice(0, 4)} + + + {showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null} + + + {showId ? : } + + + : + // + // {FieldUtils.initField({ + // valueName: "identification", + // disabled: true, + // form: formik + // })} + // + + + {formik.values.identification.slice(0, 4)} + + + {showId ?formik.values.identification.slice(4):"****"} + + + {showId ? : } + + } diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js index 580a982..b1a3855 100644 --- a/src/pages/authentication/auth-forms/CustomFormWizard.js +++ b/src/pages/authentication/auth-forms/CustomFormWizard.js @@ -59,6 +59,7 @@ const CustomFormWizard = (props) => { const [level, setLevel] = useState(); const [showPassword, setShowPassword] = useState(false); const [showConfirmPassword, setshowConfirmPassword] = useState(false); + const [showId, setshowId] = useState(false); const [fileList, setFileList] = useState([]); const [fileListData, setFileListData] = useState([]); const [checkUpload, setCheckUpload] = useState(false); @@ -70,6 +71,7 @@ const CustomFormWizard = (props) => { const handleClickShowPassword = () => { setShowPassword(!showPassword); }; + const handleClickShowConfirmPassword = () => { setshowConfirmPassword(!showConfirmPassword); }; @@ -78,6 +80,14 @@ const CustomFormWizard = (props) => { event.preventDefault(); }; + const handleClickShowId = () => { + setshowId(!showId); + }; + + const handleMouseDownId = (event) => { + event.preventDefault(); + }; + const changePassword = (value) => { const temp = strengthIndicator(value); setLevel(strengthColorChi(temp)); @@ -969,7 +979,7 @@ const CustomFormWizard = (props) => { inputProps={{ maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18, onKeyDown: (e) => { - console.log(e) + // console.log(e) if (e.key === 'Enter') { e.preventDefault(); } @@ -1683,7 +1693,7 @@ const CustomFormWizard = (props) => { */} - + : @@ -1694,13 +1704,29 @@ const CustomFormWizard = (props) => { - - + + : - - {formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null} + + {formik.values.idNo.slice(0, 4)} + + + + {showId ?formik.values.idNo.slice(4):"****"}{showId ?selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null:null} + + + {showId ? : } + diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js index 61360d3..03775be 100644 --- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js +++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js @@ -32,6 +32,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png'; +import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import { Link } from 'react-router-dom'; import * as HttpUtils from "../../../utils/HttpUtils"; @@ -67,7 +68,8 @@ const CustomFormWizard = (props) => { const address4ComboList = ComboData.district; const address5ComboList = ComboData.country; - + const [showId, setshowId] = useState(false); + const [showComId, setshowComId] = useState(false); useEffect(() => { location.state?.responseData ?? {} @@ -76,6 +78,22 @@ const CustomFormWizard = (props) => { responseToData(); }, []); + const handleClickShowId = () => { + setshowId(!showId); + }; + + const handleMouseDownId = (event) => { + event.preventDefault(); + }; + + const handleClickShowComId = () => { + setshowComId(!showId); + }; + + const handleMouseDownComId = (event) => { + event.preventDefault(); + }; + useEffect(() => { setDistrictErrStr(""); if (selectedAddress5?.type === "hongKong") { @@ -424,11 +442,27 @@ const CustomFormWizard = (props) => { - + + + : + {/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */} + + + {iAmSmartData.idNo.slice(0, 4)} + - : {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} + {showId ?iAmSmartData.idNo.slice(4):"****"}{showId ? '(' + iAmSmartData.checkDigit + ')' :null} + + {showId ? : } + @@ -933,13 +967,27 @@ const CustomFormWizard = (props) => { - - + + - - {formik.values.idNo + "(" + formik.values.checkDigit + ")"} + + {formik.values.idNo.slice(0, 4)} + {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} + + + {showComId ?formik.values.idNo.slice(4):"****"}{showComId ? '(' + formik.values.checkDigit + ')' : null} + {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} + + {showComId ? : } +