alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

hidden ID no with after 4 digi number

master
Alex Cheung 1 year ago
parent
23abcb420b
commit
970caa576e
4 changed files with 246 additions and 74 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +79
    -28
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
  2. +80
    -33
      src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
  3. +32
    -6
      src/pages/authentication/auth-forms/CustomFormWizard.js
  4. +55
    -7
      src/pages/authentication/auth-forms/IAmSmartFormWizard.js

+ 79
- 28
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js View File

@@ -1,7 +1,9 @@
// material-ui // material-ui
import { import {
Grid, Button, Typography, Grid, Button, Typography,
FormHelperText
FormHelperText,
Stack,
IconButton
} from '@mui/material'; } from '@mui/material';
import MainCard from "components/MainCard"; import MainCard from "components/MainCard";
import * as React from "react"; import * as React from "react";
@@ -20,6 +22,7 @@ import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerify
import {useIntl} from "react-intl"; import {useIntl} from "react-intl";
import {PNSPS_BUTTON_THEME} from "themes/buttonConst"; import {PNSPS_BUTTON_THEME} from "themes/buttonConst";
import {ThemeProvider} from "@emotion/react"; import {ThemeProvider} from "@emotion/react";
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -31,7 +34,16 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
const [locked, setLocked] = useState(false); const [locked, setLocked] = useState(false);
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [errorMsg, setErrorMsg] = useState(""); const [errorMsg, setErrorMsg] = useState("");
const [showId, setshowId] = useState(false);


const handleClickShowId = () => {
setshowId(!showId);
};

const handleMouseDownId = (event) => {
event.preventDefault();
};
useEffect(() => { useEffect(() => {
//if state data are ready and assign to different field //if state data are ready and assign to different field
// console.log(currentApplicationDetailData) // console.log(currentApplicationDetailData)
@@ -359,39 +371,78 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
<Grid item xs={12} sm={12} md={9} lg={6}> <Grid item xs={12} sm={12} md={9} lg={6}>
<Grid container> <Grid container>
{formik.values.idDocType === "HKID" ? {formik.values.idDocType === "HKID" ?
<>
<Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
editMode?
<>
<Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik,
placeholder: intl.formatMessage({id: 'idDocNumber'}),
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}

</Grid>
<Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:40}}>
{FieldUtils.initField({
valueName: "checkDigit",
disabled: (!editMode),
form: formik,
})}
</Grid>
</>
:
<Stack direction="row">
<Typography variant="h5" mt={1}>
{formik.values.identification.slice(0, 4)}
</Typography>
<Typography variant="h5"mt={1}>
{showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null}
</Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowId}
onMouseDown={handleMouseDownId}
edge="end"
size="large"
>
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</Stack>
:
editMode?
<Grid item xs={10} sm={4} md={4} lg={10}>
{FieldUtils.initField({ {FieldUtils.initField({
valueName: "identification", valueName: "identification",
disabled: (!editMode), disabled: (!editMode),
form: formik,
placeholder: intl.formatMessage({id: 'idDocNumber'}),
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}

</Grid>
<Grid item xs={2} sm={2} md={2} lg={2}>
{FieldUtils.initField({
valueName: "checkDigit",
disabled: (!editMode),
form: formik form: formik
})} })}
</Grid> </Grid>
</> :
<Grid item xs={12} sm={6} md={6} lg={12}>
{FieldUtils.initField({
valueName: "identification",
disabled: (!editMode),
form: formik
})}
</Grid>
:
<Stack direction="row">
<Typography variant="h5" mt={1}>
{formik.values.identification.slice(0, 4)}
</Typography>
<Typography variant="h5"mt={1}>
{showId ?formik.values.identification.slice(4):"****"}
</Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowId}
onMouseDown={handleMouseDownId}
edge="end"
size="large"
>
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</Stack>
} }
</Grid> </Grid>
</Grid> </Grid>


+ 80
- 33
src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js View File

@@ -1,7 +1,9 @@
// material-ui // material-ui
import { import {
Grid, Button, Typography, Grid, Button, Typography,
FormHelperText
FormHelperText,
Stack,
IconButton
} from '@mui/material'; } from '@mui/material';
import MainCard from "components/MainCard"; import MainCard from "components/MainCard";
import * as React from "react"; import * as React from "react";
@@ -20,6 +22,7 @@ import {notifySaveSuccess,} from 'utils/CommonFunction';
import {FormattedMessage, useIntl} from "react-intl"; import {FormattedMessage, useIntl} from "react-intl";
import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst"; import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react"; import {ThemeProvider} from "@emotion/react";
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
// ==============================|| DASHBOARD - DEFAULT ||============================== // // ==============================|| DASHBOARD - DEFAULT ||============================== //




@@ -30,6 +33,15 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
const [editMode, setEditMode] = useState(false); const [editMode, setEditMode] = useState(false);
const [onReady, setOnReady] = useState(false); const [onReady, setOnReady] = useState(false);
const [errorMsg, setErrorMsg] = useState(""); const [errorMsg, setErrorMsg] = useState("");
const [showId, setshowId] = useState(false);

const handleClickShowId = () => {
setshowId(!showId);
};

const handleMouseDownId = (event) => {
event.preventDefault();
};


useEffect(() => { useEffect(() => {
if (Object.keys(formData).length > 0) { if (Object.keys(formData).length > 0) {
@@ -226,39 +238,74 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
<Grid item xs={12} sm={12} md={9} lg={6}> <Grid item xs={12} sm={12} md={9} lg={6}>
<Grid container> <Grid container>
{formik.values.idDocType === "HKID" ? {formik.values.idDocType === "HKID" ?
<>
<Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
{FieldUtils.initField({
valueName: "identification",
disabled: true,
form: formik,
placeholder: intl.formatMessage({id: 'idDocNumber'}),
inputProps: {
maxLength: 7,
onKeyDown: (e) => {
if (e.key === 'Enter') {
e.preventDefault();
}
},
}
})}
// <>
// <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
// {FieldUtils.initField({
// valueName: "identification",
// disabled: true,
// form: formik,
// placeholder: intl.formatMessage({id: 'idDocNumber'}),
// inputProps: {
// maxLength: 7,
// onKeyDown: (e) => {
// if (e.key === 'Enter') {
// e.preventDefault();
// }
// },
// }
// })}


</Grid>
<Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:50}}>
{FieldUtils.initField({
valueName: "checkDigit",
disabled: true,
form: formik,
})}
</Grid>
</> :
<Grid item xs={12} sm={6} md={6} lg={12}>
{FieldUtils.initField({
valueName: "identification",
disabled: true,
form: formik
})}
</Grid>
// </Grid>
// <Grid item xs={2} sm={2} md={2} lg={2} style={{minWidth:40}}>
// {FieldUtils.initField({
// valueName: "checkDigit",
// disabled: true,
// form: formik,
// })}
// </Grid>
// </>
<Stack direction="row">
<Typography variant="h5" mt={1}>
{formik.values.identification.slice(0, 4)}
</Typography>
<Typography variant="h5"mt={1}>
{showId ?formik.values.identification.slice(4):"****"}{showId ? '(' + formik.values.checkDigit + ')' :null}
</Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowId}
onMouseDown={handleMouseDownId}
edge="end"
size="large"
>
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</Stack>
:
// <Grid item xs={10} sm={4} md={4} lg={10}>
// {FieldUtils.initField({
// valueName: "identification",
// disabled: true,
// form: formik
// })}
// </Grid>
<Stack direction="row">
<Typography variant="h5" mt={1}>
{formik.values.identification.slice(0, 4)}
</Typography>
<Typography variant="h5"mt={1}>
{showId ?formik.values.identification.slice(4):"****"}
</Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowId}
onMouseDown={handleMouseDownId}
edge="end"
size="large"
>
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</Stack>
} }
</Grid> </Grid>
</Grid> </Grid>


+ 32
- 6
src/pages/authentication/auth-forms/CustomFormWizard.js View File

@@ -59,6 +59,7 @@ const CustomFormWizard = (props) => {
const [level, setLevel] = useState(); const [level, setLevel] = useState();
const [showPassword, setShowPassword] = useState(false); const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setshowConfirmPassword] = useState(false); const [showConfirmPassword, setshowConfirmPassword] = useState(false);
const [showId, setshowId] = useState(false);
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [fileListData, setFileListData] = useState([]); const [fileListData, setFileListData] = useState([]);
const [checkUpload, setCheckUpload] = useState(false); const [checkUpload, setCheckUpload] = useState(false);
@@ -70,6 +71,7 @@ const CustomFormWizard = (props) => {
const handleClickShowPassword = () => { const handleClickShowPassword = () => {
setShowPassword(!showPassword); setShowPassword(!showPassword);
}; };

const handleClickShowConfirmPassword = () => { const handleClickShowConfirmPassword = () => {
setshowConfirmPassword(!showConfirmPassword); setshowConfirmPassword(!showConfirmPassword);
}; };
@@ -78,6 +80,14 @@ const CustomFormWizard = (props) => {
event.preventDefault(); event.preventDefault();
}; };


const handleClickShowId = () => {
setshowId(!showId);
};

const handleMouseDownId = (event) => {
event.preventDefault();
};

const changePassword = (value) => { const changePassword = (value) => {
const temp = strengthIndicator(value); const temp = strengthIndicator(value);
setLevel(strengthColorChi(temp)); setLevel(strengthColorChi(temp));
@@ -969,7 +979,7 @@ const CustomFormWizard = (props) => {
inputProps={{ inputProps={{
maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18, maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
onKeyDown: (e) => { onKeyDown: (e) => {
console.log(e)
// console.log(e)
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
} }
@@ -1683,7 +1693,7 @@ const CustomFormWizard = (props) => {
</Grid> */} </Grid> */}


<Grid item xs={12} md={6} > <Grid item xs={12} md={6} >
<Stack spacing={1} direction="row">
<Stack spacing={1} direction="row" >
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}> <Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<FormattedMessage id="idDocType" />: <FormattedMessage id="idDocType" />:
</Typography> </Typography>
@@ -1694,13 +1704,29 @@ const CustomFormWizard = (props) => {
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<Stack spacing={1} direction="row">
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]}>
<Stack direction="row" >
<Typography variant="pnspsFormHeader" color={theme.palette.grey[600]} sx={{mr:1}}>
<FormattedMessage id="idDocNumber" />: <FormattedMessage id="idDocNumber" />:
</Typography> </Typography>
<Typography variant="pnspsFormHeader" id="idNo-login">
{formik.values.idNo} {selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null}
<Typography variant="pnspsFormHeader" id="idNo-f4-login">
{formik.values.idNo.slice(0, 4)}
</Typography>
<Typography variant="pnspsFormHeader" id="idNo-exf4-login"
type={showId ? "text" : "password"}
>
{showId ?formik.values.idNo.slice(4):"****"}{showId ?selectedIdDocType.type == "HKID" ? '(' + formik.values.checkDigit + ')' : null:null}
</Typography> </Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowId}
onMouseDown={handleMouseDownId}
edge="end"
size="medium"
>
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</Stack> </Stack>
</Grid> </Grid>




+ 55
- 7
src/pages/authentication/auth-forms/IAmSmartFormWizard.js View File

@@ -32,6 +32,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png'; import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';


import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import * as HttpUtils from "../../../utils/HttpUtils"; import * as HttpUtils from "../../../utils/HttpUtils";
@@ -67,7 +68,8 @@ const CustomFormWizard = (props) => {


const address4ComboList = ComboData.district; const address4ComboList = ComboData.district;
const address5ComboList = ComboData.country; const address5ComboList = ComboData.country;

const [showId, setshowId] = useState(false);
const [showComId, setshowComId] = useState(false);


useEffect(() => { useEffect(() => {
location.state?.responseData ?? {} location.state?.responseData ?? {}
@@ -76,6 +78,22 @@ const CustomFormWizard = (props) => {
responseToData(); responseToData();
}, []); }, []);


const handleClickShowId = () => {
setshowId(!showId);
};

const handleMouseDownId = (event) => {
event.preventDefault();
};
const handleClickShowComId = () => {
setshowComId(!showId);
};

const handleMouseDownComId = (event) => {
event.preventDefault();
};

useEffect(() => { useEffect(() => {
setDistrictErrStr(""); setDistrictErrStr("");
if (selectedAddress5?.type === "hongKong") { if (selectedAddress5?.type === "hongKong") {
@@ -424,11 +442,27 @@ const CustomFormWizard = (props) => {
</Grid> </Grid>
<Grid item xs={12} md={12} > <Grid item xs={12} md={12} >
<Grid container sx={{ mb: 1 }}> <Grid container sx={{ mb: 1 }}>
<Stack spacing={1}>
<Stack direction="row">
<InputLabel htmlFor="idDocType-signup"> <InputLabel htmlFor="idDocType-signup">
<Typography variant="h5" sx={{mr:1}}>
<FormattedMessage id="HKIDcard" />:
{/* {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"} */}
</Typography>
<Typography variant="h5">
{iAmSmartData.idNo.slice(0, 4)}
</Typography>
<Typography variant="h5"> <Typography variant="h5">
<FormattedMessage id="HKIDcard" />: {iAmSmartData.idNo + "(" + iAmSmartData.checkDigit + ")"}
{showId ?iAmSmartData.idNo.slice(4):"****"}{showId ? '(' + iAmSmartData.checkDigit + ')' :null}
</Typography> </Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowId}
onMouseDown={handleMouseDownId}
edge="end"
size="medium"
>
{showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</InputLabel> </InputLabel>
</Stack> </Stack>
</Grid> </Grid>
@@ -933,13 +967,27 @@ const CustomFormWizard = (props) => {
</Stack> </Stack>
</Grid> </Grid>
<Grid item xs={12} md={12} > <Grid item xs={12} md={12} >
<Stack spacing={1}>
<Typography variant="h5" color={theme.palette.grey[600]}>
<Stack direction="row">
<Typography variant="h5" color={theme.palette.grey[600]} sx={{mr:1}}>
<FormattedMessage id="userIdDoc" /> <FormattedMessage id="userIdDoc" />
</Typography> </Typography>
<Typography variant="h5" name="preview-idDocType">
{formik.values.idNo + "(" + formik.values.checkDigit + ")"}
<Typography variant="h5" name="preview-idDocType-1">
{formik.values.idNo.slice(0, 4)}
{/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
</Typography>
<Typography variant="h5" name="preview-idDocType-2">
{showComId ?formik.values.idNo.slice(4):"****"}{showComId ? '(' + formik.values.checkDigit + ')' : null}
{/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
</Typography> </Typography>
<IconButton
aria-label="toggle id visibility"
onClick={handleClickShowComId}
onMouseDown={handleMouseDownComId}
edge="end"
size="medium"
>
{showComId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
</IconButton>
</Stack> </Stack>
</Grid> </Grid>




Write Preview
Loading…
Cancel
Save