Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

src/auth/index.js

@@ -93,7 +93,7 @@ export const handleLogoutFunction = () => {
         localStorage.removeItem(windowCount)
         localStorage.removeItem(predictProductionQty)
         localStorage.removeItem(predictUsageCount)
-
+        setTimeout(()=> localStorage.removeItem("expiredAlertShown"), 5000)
     }
 }
 
@@ -102,7 +102,6 @@ export const SetupAxiosInterceptors = () => {
     const navigate = useNavigate()
     const dispatch = useDispatch();
     //const updateLastRequestTime = useContext(TimerContext);
-
     axios.interceptors.request.use(
         config => {
             // ** Get token from localStorage
@@ -113,10 +112,11 @@ export const SetupAxiosInterceptors = () => {
                 config.headers.Authorization = `${jwtApplicationConfig.tokenType} ${accessToken}`
             }
             config.headers['X-Authorization'] = process.env.REACT_APP_API_KEY
-
             return config
         },
-        error => Promise.reject(error)
+        error => {
+            Promise.reject(error)
+        }
     )
 
     axios.interceptors.response.use(
@@ -127,23 +127,36 @@ export const SetupAxiosInterceptors = () => {
         error => {
             // ** const { config, response: { status } } = error
             const {response} = error
-
             if (error.response.status === 401) {
-                dispatch(handleLogoutFunction());
-                navigate('/login');
+                if (localStorage.getItem("expiredAlertShown") === null) {
+                    localStorage.setItem("expiredAlertShown", true)
+                    alert("登入驗證已過期，請重新登入。")
+                }
+                
             }
 
             // ** if (status === 401) {
             if (response.status === 401) {
-                dispatch(handleLogoutFunction());
-                navigate('/login');
+                if (localStorage.getItem("expiredAlertShown") === null) {
+                    localStorage.setItem("expiredAlertShown", true)
+                    alert("登入驗證已過期，請重新登入。")
+                }
             }
 
             if (response && response.status === 401) {
+                if (localStorage.getItem("expiredAlertShown") === null) {
+                    localStorage.setItem("expiredAlertShown", true)
+                    alert("登入驗證已過期，請重新登入。")
+                }
+            }
+
+            if (localStorage.getItem("expiredAlertShown")) {
                 dispatch(handleLogoutFunction());
                 navigate('/login');
             }
+
             return Promise.reject(error)
-        }
+        },
+        
     )
 }

src/pages/OrganizationSearchPage/OrganizationTable.js

@@ -62,7 +62,7 @@ export default function OrganizationTable({ recordList }) {
         {
             id: 'contactTel',
             field: 'contactTel',
-            headerName: 'Tel.',
+            headerName: 'Phone',
             flex: 1,
             renderCell: (params) => {
                 let phone = JSON.parse(params.value);
@@ -85,7 +85,7 @@ export default function OrganizationTable({ recordList }) {
     ];
 
     return (
-        <div style={{ height: 400, width: '100%' }}>
+        <div style={{ height: "fit-content", width: '100%' }}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/pages/User/DetailsPage_Individual/index.js

@@ -40,7 +40,7 @@ const UserMaintainPage_Individual = () => {
                 let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
                 response.data["createDate"] = createDate;
                 response.data["modifieDate"] = modifiedBy;
-                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verify yet";
+                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
         
                 response.data["country"] = response.data.address?.country;
                 response.data["district"] = response.data.address?.district;

src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js

@@ -307,17 +307,19 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                         );
                                         return displayOptions;
                                     },
-                                    getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? item["brNo"] + "-" + item["enCompanyName"]: "") : "",
+                                    getOptionLabel: (item) => item ? typeof item === 'number' ? item + "" : (item["brNo"] ? 
+                                        <div>BR No.: {item["brNo"]}<div>Org. Name(Eng): {item["enCompanyName"] === null ? "N/A" : item["enCompanyName"]}</div><div>Org. Name(CH): {item["chCompanyName"] === null ? "N/A" : item["chCompanyName"]}</div></div>: "") 
+                                        : "",
                                     isOptionEqualToValue: (option, newValue, setValue, setInputValue) => {
-                                        if (option.id == newValue) {
+                                        if (option.id == newValue || option.id == newValue.id) {
                                             setValue(option);
-                                            setInputValue(option["brNo"] + "-" + option["enCompanyName"]);
+                                            setInputValue(option["brNo"]);
                                             return true;
                                         }
-                                        return option == newValue;
+                                        return option == newValue || option.id == newValue.id;
                                     },
                                     onInputChange: (event, newValue, setInputValue) => {
-                                        if (newValue != null) {
+                                        if (newValue !== "[object Object]" ) {
                                             setInputValue(newValue);
                                         }
                                     },

src/pages/User/DetailsPage_Organization/index.js

@@ -63,7 +63,7 @@ const UserMaintainPage_Organization = () => {
                 let modifiedBy = DateUtils.datetimeStr(response.data.modified)+", "+response.data.modifiedBy;
                 response.data["createDate"] = createDate;
                 response.data["modifieDate"] = modifiedBy;
-                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verify yet";
+                response.data["verifiedStatus"] = response.data.verifiedBy? DateUtils.datetimeStr(response.data.verifiedDate)+", "+response.data.verifiedByName: "Not verified";
         
                 response.data["lastLoginDate"] = response.data.lastLogin?DateUtils.datetimeStr(response.data.lastLoginDate):"";
         

src/pages/User/SearchPage/UserTable.js

@@ -122,7 +122,7 @@ export default function UserTable({recordList,setChangeLocked}) {
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/pages/User/SearchPage_Individual/UserTable_Individual.js

@@ -63,7 +63,7 @@ export default function UserTable_Individual({ recordList }) {
         {
             id: 'mobileNumber',
             field: 'mobileNumber',
-            headerName: 'Tel.',
+            headerName: 'Phone',
             flex: 1,
             valueGetter: (params) => {
                 if (params.value) {
@@ -130,7 +130,7 @@ export default function UserTable_Individual({ recordList }) {
     ];
 
     return (
-        <div style={{ height: 400, width: '100%' }}>
+        <div style={{ height: "fit-content", width: '100%' }}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/pages/User/SearchPage_Organization/UserTable_Organization.js

@@ -127,7 +127,7 @@ export default function UserTable_Organization({recordList}) {
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/pages/authentication/auth-forms/AuthLoginCustom.js

@@ -86,6 +86,7 @@ const AuthLoginCustom = () => {
           // setSuccess(true)
           dispatch(handleLogin(data))
           navigate('/dashboard');
+          location.reload()
           // setSumitting(false)
         })
         .catch((error) => {

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -29,7 +29,7 @@ import * as yup from 'yup';
 import { strengthColorChi, strengthIndicator } from 'utils/password-strength';
 // import {apiPath} from "auth/utils";
 import axios from "axios";
-import {POST_PUBLIC_USER_REGISTER,POST_CAPTCHA} from "utils/ApiPathConst";
+import {POST_PUBLIC_USER_REGISTER,POST_CAPTCHA, GET_USERNAME} from "utils/ApiPathConst";
 // import * as HttpUtils from 'utils/HttpUtils';
 import * as ComboData from "utils/ComboData";
 
@@ -62,6 +62,7 @@ const CustomFormWizard = (props) => {
     const [checkUpload, setCheckUpload] = useState(false);
     const [isLoading, setLoding] = useState(true);
     const [updateRows, setUpdateRows] = useState([]);
+    const [userNameList, setUserNameList] = useState();
 
     const [captcha, setCaptcha] = useState([]);
     const [captchaImg, setCaptchaImage] = useState([]);
@@ -109,6 +110,17 @@ const CustomFormWizard = (props) => {
     useEffect(() => {
         changePassword('');
         onCaptchaChange();
+        axios.get(`${GET_USERNAME}`)
+            .then((response) => {
+                if (response.status === 200) {
+                    setUserNameList(response.data);
+                }
+                
+            })
+            .catch(error => {
+                console.log(error);
+                return false;
+            });
     }, []);
 
     const onCaptchaChange = ()=>{
@@ -364,21 +376,66 @@ const CustomFormWizard = (props) => {
     }
 
     function handleIdNo(idNo,selectedIdDocType,checkDigit) {
-        var pattern = /^[A-Z][0-9]*$/;
-        var space = /\s/;
-        if (!idNo.match(pattern)) {
-            return false;
-        }else if
-        (selectedIdDocType=="HKID"&&checkDigit==""){
-            return false;
-        }
-        else if (idNo.match(space)) {
-            return false;
-        }else if (idNo.length < 7) {
-            return false;
-        } else {
-            // console.log("IdNo true")
-            return true;
+        // var pattern = /^[A-Z][0-9]*$/;
+        var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
+        var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
+        var pattern_passport = /^[A-Z]{1}[0-9]{8}$/;
+        var pattern_CHID = /^[0-9]{6}(20|19)[0-9]{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9X]{1}/;
+        var pattern_otherCert = /^[A-Z]{1}[0-9]{5,}/;
+        // var space = /\s/;
+        // if (!idNo.match(pattern)) {
+        //     return false;
+        // } else if (selectedIdDocType=="HKID"&&checkDigit==""){
+        //     return false;
+        // } else if (idNo.match(space)) {
+        //     return false;
+        // } else if (idNo.length < 6) {
+        //     return false;
+        // } else {
+        //     // console.log("IdNo true")
+        //     return true;
+        // }
+        switch (selectedIdDocType) {
+            case "HKID":
+                if (checkDigit === "") return false
+                if (idNo.match(pattern_HKIDv1)) {
+                    return true
+                } else if (idNo.match(pattern_HKIDv2)) {
+                    return true
+                } else {
+                    return false
+                }
+            case "passport":
+                if (idNo.match(pattern_passport)) {
+                    return true
+                } else {
+                    return false
+                }
+            case "CNID":
+                if (idNo.match(pattern_CHID)) {
+                    const subStr_year = idNo.substring(6, 10)
+                    const subStr_month = idNo.substring(10, 12)
+                    const subStr_date = idNo.substring(12, 14)
+                    
+                    const today = new Date()
+                    const inputDate = new Date(`${subStr_year}-${subStr_month}-${subStr_date}`)
+
+                    if (inputDate > today || inputDate === "Invalid Date" || inputDate.getFullYear().toString() !== subStr_year || (inputDate.getMonth() + 1).toString().padStart(2, "0") !== subStr_month || inputDate.getDate().toString().padStart(2, "0") !== subStr_date) {
+                        return false
+                    } else {
+                        return true
+                    }
+                } else {
+                    return false
+                }
+            case "otherCert":
+                if (idNo.match(pattern_otherCert)) {
+                    return true
+                } else {
+                    return false
+                }
+            default:
+                break;
         }
     }
 
@@ -441,7 +498,17 @@ const CustomFormWizard = (props) => {
             captchaField:''
         }),
         validationSchema:yup.object().shape({
-            username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱')
+            username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱').test(
+                "checkUserNameUsed",
+                "此用戶登入名稱已被注冊，請使用其他用戶登入名稱",
+                function(value) {
+                    if (userNameList.some(item => item.username === value)) {
+                        return false
+                    } else {
+                        return true
+                    }
+                }
+              )
             .matches(/^[aA-zZ0-9\s]+$/, "用戶名稱不包含特殊字符")
             .matches(/^\S*$/, '用戶名稱不包含空格'),
             password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼')
@@ -458,17 +525,57 @@ const CustomFormWizard = (props) => {
             address3: yup.string().max(255).required('請輸入第三行地址'),
             email: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵'),
             emailConfirm: yup.string().email('請輸入電郵格式').max(255).required('請輸入電郵').oneOf([yup.ref('email'), null], '請輸入相同電郵'),
-            idNo: yup.string().required('請輸入證件號碼')
-                .matches(/^[aA-zZ0-9\s]+$/, "證件號碼不包含特殊字符")
-                .matches(/^\S*$/, '證件號碼不包含空格')
-                .test('checkIDCardFormat', '請輸入香港身份證號碼', function(value) {
+            idNo: yup.string().required(`請輸入${selectedIdDocInputType}號碼`)
+                .matches(/^[aA-zZ0-9\s]+$/, `${selectedIdDocInputType}號碼不包含特殊字符`)
+                .matches(/^\S*$/, `${selectedIdDocInputType}號碼不包含空格`)
+                .test('checkIDCardFormat', `請輸入有效的${selectedIdDocInputType}號碼`, function(value) {
                     const idDocType = selectedIdDocType.type;
-                    var pattern = /^[A-Z][0-9]*$/;
+                    var pattern_HKIDv1 = /^[A-Z]{1}[0-9]{6}$/;
+                    var pattern_HKIDv2 = /^[A-Z]{2}[0-9]{6}$/;
+                    var pattern_passport = /^[A-Z]{1}[0-9]{8}$/;
+                    var pattern_CHID = /^[0-9]{6}(20|19)[0-9]{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9X]{1}/;
+                    var pattern_otherCert = /^[A-Z]{1}[0-9]{5,}/;
                     if(value!==undefined){
-                        if (!value.match(pattern)&&idDocType=="HKID"&&value.length<7) {
-                            return false
-                        } else {
-                            return true
+                        switch (idDocType) {
+                            case "HKID":
+                                if (value.match(pattern_HKIDv1)) {
+                                    return true
+                                } else if (value.match(pattern_HKIDv2)) {
+                                    return true
+                                } else {
+                                    return false
+                                }
+                            case "passport":
+                                if (value.match(pattern_passport)) {
+                                    return true
+                                } else {
+                                    return false
+                                }
+                            case "CNID":
+                                if (value.match(pattern_CHID)) {
+                                    const subStr_year = value.substring(6, 10)
+                                    const subStr_month = value.substring(10, 12)
+                                    const subStr_date = value.substring(12, 14)
+                                    
+                                    const today = new Date()
+                                    const inputDate = new Date(`${subStr_year}-${subStr_month}-${subStr_date}`)
+
+                                    if (inputDate > today || inputDate === "Invalid Date" || inputDate.getFullYear().toString() !== subStr_year || (inputDate.getMonth() + 1).toString().padStart(2, "0") !== subStr_month || inputDate.getDate().toString().padStart(2, "0") !== subStr_date) {
+                                        return false
+                                    } else {
+                                        return true
+                                    }
+                                } else {
+                                    return false
+                                }
+                            case "otherCert":
+                                if (value.match(pattern_otherCert)) {
+                                    return true
+                                } else {
+                                    return false
+                                }
+                            default:
+                                break;
                         }
                     }
                 }),
@@ -732,17 +839,31 @@ const CustomFormWizard = (props) => {
                                                         <OutlinedInput
                                                             id="idNo-login"
                                                             type="text"
-                                                            value={formik.values.idNo.toUpperCase().trim()}
                                                             name="idNo"
-                                                            onChange={formik.handleChange}
+                                                            value={formik.values.idNo}
+                                                            onChange={async (e)=>{
+                                                                const ele = document.getElementById('idNo-login')
+                                                                const startPos = ele.selectionStart
+                                                                if (e.type === "change") {
+                                                                    if (!(e.target.value.match(/\s/g))) {
+                                                                        const newValue = await e.target.value.toUpperCase()
+                                                                        await formik.setFieldValue("idNo", newValue)
+                                                                        ele.setSelectionRange(startPos, startPos)
+                                                                    } else {
+                                                                        await formik.setFieldValue("idNo", formik.values.idNo)
+                                                                        ele.setSelectionRange(startPos-1, startPos-1)
+                                                                    }
+                                                                }
+                                                            }}
                                                             placeholder="證件號碼"
                                                             fullWidth
                                                             sx={{mr:1}}
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo)}
                                                             onBlur={formik.handleBlur}
                                                             inputProps={{
-                                                                maxLength: selectedIdDocType.type =='HKID'?7:18,
+                                                                maxLength: selectedIdDocType.type =='HKID'?8:18,
                                                                 onKeyDown: (e) => {
+                                                                    console.log(e)
                                                                     if (e.key === 'Enter') {
                                                                         e.preventDefault();
                                                                     }
@@ -791,9 +912,22 @@ const CustomFormWizard = (props) => {
                                                     <OutlinedInput
                                                         id="idNo-login"
                                                         type="text"
-                                                        value={formik.values.idNo.trim()}
+                                                        value={formik.values.idNo}
                                                         name="idNo"
-                                                        onChange={formik.handleChange}
+                                                        onChange={async (e)=>{
+                                                            const ele = document.getElementById('idNo-login')
+                                                            const startPos = ele.selectionStart
+                                                            if (e.type === "change") {
+                                                                if (!(e.target.value.match(/\s/g))) {
+                                                                    const newValue = await e.target.value.toUpperCase()
+                                                                    await formik.setFieldValue("idNo", newValue)
+                                                                    ele.setSelectionRange(startPos, startPos)
+                                                                } else {
+                                                                    await formik.setFieldValue("idNo", formik.values.idNo)
+                                                                    ele.setSelectionRange(startPos-1, startPos-1)
+                                                                }
+                                                            }
+                                                        }}
                                                         placeholder="證件號碼"
                                                         fullWidth
                                                         sx={{mr:1}}

src/pages/pnspsUserGroupSearchPage/UserGroupTable.js

@@ -55,7 +55,7 @@ export default function UserGroupTable({recordList}) {
     ];
 
     return (
-        <div style={{height: 400, width: '100%'}}>
+        <div style={{height: "fit-content", width: '100%'}}>
             <FiDataGrid
                 rows={rows}
                 columns={columns}

src/utils/ApiPathConst.js

@@ -43,6 +43,7 @@ export const POST_CAPTCHA = apiPath+'/captcha';
 
 //register
 export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';
+export const GET_USERNAME = apiPath+'/user/username';
 
 
 //Public

src/utils/Combo.js

@@ -25,9 +25,10 @@ export default function Combo ({valueName, disabled, form, dataList, filterOptio
                     isOptionEqualToValue(option,newValue, setValue,setInputValue )
             }}
             onInputChange={(event, newValue) => {
-                setInputValue(newValue);
                 if(onInputChange){
                     onInputChange(event,newValue, setInputValue)
+                } else {
+                    setInputValue(newValue);
                 }
             }}
             onChange={(event, newValue) => {