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 ? : }
+