@@ -14,7 +14,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||
const [_columns, set_columns] = React.useState([]); | |||
const [_rowModesModel, set_rowModesModel] = React.useState({}); | |||
const [_editMode, set_editMode] = React.useState("row"); | |||
const [_pageSizeOptions, set_pageSizeOptions] = React.useState([5, 10, 25]); | |||
const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10, 25, 50]); | |||
const [_autoHeight, set_autoHeight] = React.useState(true); | |||
const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true); | |||
@@ -90,13 +90,13 @@ export default function BaseGrid({rows}) { | |||
} | |||
return ( | |||
<div style={{height: 400, width: '100%', padding: 4}}> | |||
<div style={{height: '100%', width: '100%', padding: 4}}> | |||
<FiDataGrid | |||
rows={rows} | |||
columns={columns} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: {page: 0, pageSize: 5}, | |||
paginationModel: {page: 0, pageSize: 10}, | |||
}, | |||
}} | |||
onRowDoubleClick={handleRowDoubleClick} | |||
@@ -101,7 +101,7 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||
columns={columns} | |||
initialState={{ | |||
pagination: { | |||
paginationModel: { page: 0, pageSize: 5 }, | |||
paginationModel: { page: 0, pageSize: 10 }, | |||
}, | |||
}} | |||
onRowDoubleClick={handleRowDoubleClick} | |||
@@ -30,7 +30,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, GET_USERNAME } from "utils/ApiPathConst"; | |||
import { POST_PUBLIC_USER_REGISTER, POST_CAPTCHA, GET_USERNAME, GET_USER_EMAIL } from "utils/ApiPathConst"; | |||
// import * as HttpUtils from 'utils/HttpUtils'; | |||
import * as ComboData from "utils/ComboData"; | |||
@@ -65,7 +65,7 @@ const BusCustomFormWizard = (props) => { | |||
const [checkUpload, setCheckUpload] = useState(false); | |||
const [isLoading, setLoding] = useState(true); | |||
const [updateRows, setUpdateRows] = useState([]); | |||
const [userNameList, setUserNameList] = useState([]); | |||
// const [userNameList, setUserNameList] = useState([]); | |||
const [captcha, setCaptcha] = useState([]); | |||
const [captchaImg, setCaptchaImage] = useState([]); | |||
@@ -92,7 +92,12 @@ const BusCustomFormWizard = (props) => { | |||
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); | |||
const [isValid, setisValid] = useState(false); | |||
const [checkCountry, setCheckCountry] = useState(false); | |||
const username = document.getElementById("username-login") | |||
const [checkUsername, setCheckUsername] = useState(false); | |||
const [checkUsernameBlur, setCheckUsernameBlur] = useState(false) | |||
const email = document.getElementById("email-login") | |||
const [checkEmail, setCheckEmail] = useState(false) | |||
const [checkEmailBlur, setCheckEmailBlur] = useState(false) | |||
const address4ComboList = ComboData.district; | |||
const address5ComboList = ComboData.country; | |||
@@ -115,19 +120,19 @@ const BusCustomFormWizard = (props) => { | |||
// localStorage.setItem("checkCode",null); | |||
// localStorage.setItem("base64Url",null); | |||
// }else{ | |||
onCaptchaChange(); | |||
// } | |||
axios.get(`${GET_USERNAME}`) | |||
.then((response) => { | |||
if (response.status === 200) { | |||
setUserNameList(response.data); | |||
} | |||
// onCaptchaChange(); | |||
// // } | |||
// axios.get(`${GET_USERNAME}`) | |||
// .then((response) => { | |||
// if (response.status === 200) { | |||
// setUserNameList(response.data); | |||
// } | |||
}) | |||
.catch(error => { | |||
console.log(error); | |||
return false; | |||
}); | |||
// }) | |||
// .catch(error => { | |||
// console.log(error); | |||
// return false; | |||
// }); | |||
}, []); | |||
const handleCheckUsername = async () => { | |||
@@ -142,6 +147,48 @@ const BusCustomFormWizard = (props) => { | |||
} | |||
} | |||
const handleCheckEmail = async () => { | |||
if (values?.email) { | |||
const response = await axios.get(`${GET_USER_EMAIL}`, { | |||
params: { | |||
email: values.email, | |||
} | |||
}) | |||
setCheckEmail((Number(response.data[0]) === 1)) | |||
return Number(response.data[0]) === 1 | |||
} | |||
} | |||
useEffect(() => { | |||
if (username) { | |||
username.addEventListener("blur", function () { | |||
setCheckUsernameBlur(true) | |||
}) | |||
} | |||
}, [username]) | |||
useEffect(() => { | |||
if (checkUsernameBlur) { | |||
handleCheckUsername() | |||
setCheckUsernameBlur(false) | |||
} | |||
}, [checkUsernameBlur]) | |||
useEffect(() => { | |||
if (email) { | |||
email.addEventListener("blur", function () { | |||
setCheckEmailBlur(true) | |||
}) | |||
} | |||
}, [email]) | |||
useEffect(() => { | |||
if (checkEmailBlur) { | |||
handleCheckEmail() | |||
setCheckEmailBlur(false) | |||
} | |||
}, [checkEmailBlur]) | |||
const onCaptchaChange = () => { | |||
HttpUtils.post({ | |||
url: POST_CAPTCHA, | |||
@@ -355,6 +402,7 @@ const BusCustomFormWizard = (props) => { | |||
formData.append("userFaxNo", JSON.stringify(userFaxNo)); | |||
formData.append("busUserContactTel", JSON.stringify(busUserContactTel)); | |||
formData.append("busUserAddress", JSON.stringify(busUserAddress)); | |||
// formData.append("preferLocale", "en"); | |||
if (isValid) { | |||
axios.post(POST_PUBLIC_USER_REGISTER, formData, { | |||
@@ -466,17 +514,7 @@ const BusCustomFormWizard = (props) => { | |||
}), | |||
validationSchema: yup.object().shape({ | |||
username: yup.string().min(6, displayErrorMsg('用戶名稱最少6位')).required(displayErrorMsg('請輸入用戶名稱')).test( | |||
"checkUserNameUsed", | |||
displayErrorMsg("此用戶登入名稱已被注冊,請使用其他用戶登入名稱"), | |||
function (value) { | |||
if (userNameList.some(item => item.username === value)) { | |||
return false | |||
} else { | |||
return true | |||
} | |||
} | |||
) | |||
username: yup.string().min(6, displayErrorMsg('用戶名稱最少6位')).required(displayErrorMsg('請輸入用戶名稱')) | |||
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg("用戶名稱不包含特殊字符") }) | |||
.matches(/^\S*$/, { message: displayErrorMsg('用戶名稱不包含空格') }), | |||
password: yup.string().min(8, displayErrorMsg('請輸入最少8位密碼')).required(displayErrorMsg('請輸入密碼')) | |||
@@ -563,12 +601,12 @@ const BusCustomFormWizard = (props) => { | |||
<Typography variant="h5"> | |||
用戶登入名稱 | |||
<span style={{ color: '#f10000' }}>*</span> | |||
<Button | |||
{/* <Button | |||
variant="contained" | |||
onClick={handleCheckUsername} | |||
sx={{ ml: 2, height: "40px" }}> | |||
<Typography variant="h6">檢查是否重覆</Typography> | |||
</Button> | |||
</Button> */} | |||
</Typography> | |||
</InputLabel> | |||
<OutlinedInput | |||
@@ -583,7 +621,7 @@ const BusCustomFormWizard = (props) => { | |||
}} | |||
placeholder="用戶登入名稱" | |||
fullWidth | |||
error={Boolean(formik.touched.username && formik.errors.username)} | |||
error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} | |||
onBlur={formik.handleBlur} | |||
inputProps={{ | |||
onKeyDown: (e) => { | |||
@@ -1039,7 +1077,7 @@ const BusCustomFormWizard = (props) => { | |||
</InputLabel> | |||
<OutlinedInput | |||
fullWidth | |||
error={Boolean(formik.touched.email && formik.errors.email)} | |||
error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)} | |||
id="email-login" | |||
type="email" | |||
value={formik.values.email.trim()} | |||
@@ -1060,6 +1098,11 @@ const BusCustomFormWizard = (props) => { | |||
{formik.errors.email} | |||
</FormHelperText> | |||
)} | |||
{checkEmail && ( | |||
<FormHelperText error id="helper-text-email-signup"> | |||
此電郵已被注冊,請使用其他電郵 | |||
</FormHelperText> | |||
)} | |||
</Stack> | |||
</Grid> | |||
<Grid item xs={12} md={6}> | |||
@@ -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, GET_USERNAME } from "utils/ApiPathConst"; | |||
import { POST_PUBLIC_USER_REGISTER, POST_CAPTCHA, GET_USERNAME, GET_USER_EMAIL } from "utils/ApiPathConst"; | |||
// import * as HttpUtils from 'utils/HttpUtils'; | |||
import * as ComboData from "utils/ComboData"; | |||
@@ -93,7 +93,12 @@ const CustomFormWizard = (props) => { | |||
const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false); | |||
const [isValid, setisValid] = useState(false); | |||
const [checkCountry, setCheckCountry] = useState(false); | |||
const username = document.getElementById("username-login") | |||
const [checkUsername, setCheckUsername] = useState(false); | |||
const [checkUsernameBlur, setCheckUsernameBlur] = useState(false) | |||
const email = document.getElementById("email-login") | |||
const [checkEmail, setCheckEmail] = useState(false) | |||
const [checkEmailBlur, setCheckEmailBlur] = useState(false) | |||
const idDocTypeComboList = ComboData.idDocType; | |||
const address4ComboList = ComboData.district; | |||
@@ -125,6 +130,48 @@ const CustomFormWizard = (props) => { | |||
} | |||
} | |||
const handleCheckEmail = async () => { | |||
if (values?.email) { | |||
const response = await axios.get(`${GET_USER_EMAIL}`, { | |||
params: { | |||
email: values.email, | |||
} | |||
}) | |||
setCheckEmail((Number(response.data[0]) === 1)) | |||
return Number(response.data[0]) === 1 | |||
} | |||
} | |||
useEffect(() => { | |||
if (username) { | |||
username.addEventListener("blur", function () { | |||
setCheckUsernameBlur(true) | |||
}) | |||
} | |||
}, [username]) | |||
useEffect(() => { | |||
if (checkUsernameBlur) { | |||
handleCheckUsername() | |||
setCheckUsernameBlur(false) | |||
} | |||
}, [checkUsernameBlur]) | |||
useEffect(() => { | |||
if (email) { | |||
email.addEventListener("blur", function () { | |||
setCheckEmailBlur(true) | |||
}) | |||
} | |||
}, [email]) | |||
useEffect(() => { | |||
if (checkEmailBlur) { | |||
handleCheckEmail() | |||
setCheckEmailBlur(false) | |||
} | |||
}, [checkEmailBlur]) | |||
const onCaptchaChange = () => { | |||
HttpUtils.post({ | |||
url: POST_CAPTCHA, | |||
@@ -162,7 +209,8 @@ const CustomFormWizard = (props) => { | |||
handlePhone(data.phone) && | |||
handleUsername(data.username) && | |||
handleCaptcha(data.captchaField) && | |||
!checkUsername | |||
!checkUsername && | |||
!checkEmail | |||
) { | |||
setisValid(true) | |||
return isValid | |||
@@ -324,6 +372,7 @@ const CustomFormWizard = (props) => { | |||
formData.append("userFaxNo", JSON.stringify(userFaxNo)); | |||
formData.append("userMobileNumber", JSON.stringify(userMobileNumber)); | |||
formData.append("userAddress", JSON.stringify(userAddress)); | |||
// formData.append("preferLocale", "en"); | |||
// if(refCode){ | |||
// formData.append("refCode", refCode); | |||
@@ -503,7 +552,7 @@ const CustomFormWizard = (props) => { | |||
captchaField: '' | |||
}), | |||
validationSchema: yup.object().shape({ | |||
username: yup.string().min(6, displayErrorMsg('用戶名稱最少6位')).required(displayErrorMsg("請輸入用戶登入名稱")) | |||
username: yup.string().min(6, displayErrorMsg('用戶名稱最少6位')).required(displayErrorMsg("請輸入用戶名稱")) | |||
.matches(/^[aA-zZ0-9\s]+$/, { message: displayErrorMsg("用戶名稱不包含特殊字符") }) | |||
.matches(/^\S*$/, { message: displayErrorMsg("用戶名稱不包含空格") }), | |||
password: yup.string().min(8, displayErrorMsg('請輸入最少8位密碼')).required(displayErrorMsg('請輸入密碼')) | |||
@@ -626,13 +675,13 @@ const CustomFormWizard = (props) => { | |||
<InputLabel htmlFor="username-signup"> | |||
<Typography variant="h5"> | |||
用戶登入名稱 | |||
<span style={{ color: '#f10000' }}>*</span> | |||
{/* <span style={{ color: '#f10000' }}>*</span> | |||
<Button | |||
variant="contained" | |||
onClick={handleCheckUsername} | |||
sx={{ ml: 2, height: "40px" }}> | |||
<Typography variant="h6">檢查是否重覆</Typography> | |||
</Button> | |||
</Button> */} | |||
</Typography> | |||
</InputLabel> | |||
<OutlinedInput | |||
@@ -647,7 +696,7 @@ const CustomFormWizard = (props) => { | |||
}} | |||
placeholder="用戶登入名稱" | |||
fullWidth | |||
error={Boolean(formik.touched.username && formik.errors.username)} | |||
error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)} | |||
onBlur={formik.handleBlur} | |||
inputProps={{ | |||
onKeyDown: (e) => { | |||
@@ -1168,7 +1217,7 @@ const CustomFormWizard = (props) => { | |||
</InputLabel> | |||
<OutlinedInput | |||
fullWidth | |||
error={Boolean(formik.touched.email && formik.errors.email)} | |||
error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)} | |||
id="email-login" | |||
type="email" | |||
value={formik.values.email.trim()} | |||
@@ -1189,6 +1238,11 @@ const CustomFormWizard = (props) => { | |||
{formik.errors.email} | |||
</FormHelperText> | |||
)} | |||
{checkEmail && ( | |||
<FormHelperText error id="helper-text-email-signup"> | |||
此電郵已被注冊,請使用其他電郵 | |||
</FormHelperText> | |||
)} | |||
</Stack> | |||
</Grid> | |||
<Grid item xs={12} md={6}> | |||
@@ -44,7 +44,7 @@ export const POST_CAPTCHA = apiPath+'/captcha'; | |||
//register | |||
export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register'; | |||
export const GET_USERNAME = apiPath+'/user/username'; | |||
export const GET_USER_EMAIL = apiPath+'/user/email'; | |||
//Public | |||
export const GET_PUBLIC_ORG_USER_LIST = apiPath+'/user/listOrg'; | |||