|
|
import React, { useEffect, useState } from "react";
|
|
|
import InputText from "../../../_components/Auth/InputText";
|
|
|
import InputDate from "../../../_components/Auth/InputDate";
|
|
|
import "./index.scss";
|
|
|
import { apiCaller } from "../../../_helpers";
|
|
|
import {history} from '../../../_helpers/history'
|
|
|
import dayjs from "dayjs";
|
|
|
import { roleRegister } from "../../../_constants/register";
|
|
|
import { useParams } from "react-router-dom";
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
import { Alert } from "../../../_components/Alert";
|
|
|
import { configConstants, userConstants } from "../../../_constants";
|
|
|
import { alertActions } from "../../../_actions";
|
|
|
import { isEmail } from "../../../_helpers/validateEmail";
|
|
|
|
|
|
const CreateAccount = () => {
|
|
|
const params = new URL(document.location).searchParams;
|
|
|
const alert = useSelector((state) => state.alert);
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
const agents_code = params.get("mds");
|
|
|
const [email, setEmail] = useState("");
|
|
|
const [phone, setPhone] = useState("");
|
|
|
const [fullname, setFullname] = useState('');
|
|
|
const [birthday, setBirthday] = useState();
|
|
|
const [gender, setGender] = useState();
|
|
|
const [address, setAddress] = useState('')
|
|
|
const [role, setRole] = useState(roleRegister.agents)
|
|
|
|
|
|
const [phoneWarning, setPhoneWarning] = useState("");
|
|
|
const [nameWarning, setNameWarning] = useState("");
|
|
|
const [addressWarning, setAddressWarning] = useState("");
|
|
|
const [birthdayWarning, setBirthdayWarning] = useState("");
|
|
|
const [password, setPassword] = useState("");
|
|
|
const [rePassword, setRePassword] = useState("");
|
|
|
const [emailError, setEmailError] = useState("");
|
|
|
const [pwError, setPwError] = useState("");
|
|
|
const [rePwError, setRePwError] = useState("");
|
|
|
const [cacheEmailPass, setCacheEmailPass] = useState([]);
|
|
|
const [cacheEmailFail, setCacheEmailFail] = useState([]);
|
|
|
const [disabledBtn, setDisabledBtn] = useState(false);
|
|
|
const [message, setMessage] = useState("");
|
|
|
|
|
|
async function handleSubmit(e) {
|
|
|
e.preventDefault();
|
|
|
const url = '/register'
|
|
|
const dataSubmit = {
|
|
|
agents_code,
|
|
|
password,
|
|
|
address,
|
|
|
birthday: dayjs(birthday).format('YYYY-MM-DD'),
|
|
|
email,
|
|
|
fullname,
|
|
|
gender,
|
|
|
phone,
|
|
|
role
|
|
|
}
|
|
|
try {
|
|
|
const res = await apiCaller(url, "POST", dataSubmit, null, true, configConstants.API_URL_SETEST, true, true)
|
|
|
if (res.status) {
|
|
|
dispatch(alertActions.success({ 'message': res?.msg, 'screen': userConstants.SCREEN_REGISTER }));
|
|
|
} else {
|
|
|
dispatch(alertActions.error({ 'message': typeof res?.msg === 'string' ? res?.msg : Object.values(res?.msg)?.join('\n'), 'screen': userConstants.SCREEN_REGISTER, isShowPopup: true }));
|
|
|
}
|
|
|
} catch (err) {
|
|
|
dispatch(alertActions.error({ 'message': err, 'screen': userConstants.SCREEN_REGISTER, isShowPopup: true }));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const checkEmail = () => {
|
|
|
if (!isEmail(email)) {
|
|
|
setEmailError("Định dạng email không đúng");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const checkPw = () => {
|
|
|
if (password.length < 6 || password.trim() === "") {
|
|
|
setPwError("Mật khẩu cần tối thiểu 6 kí tự và không gồm toàn dấu cách");
|
|
|
}
|
|
|
if(password?.trim()?.length > 50) {
|
|
|
setPwError("Mật khẩu không được quá 50 kí tự");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const checkRePw = () => {
|
|
|
if (password !== rePassword) {
|
|
|
setRePwError("Mật khẩu không khớp");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const changeEmail = (value) => {
|
|
|
setDisabledBtn(false);
|
|
|
if (emailError) {
|
|
|
if (!!value) {
|
|
|
setEmailError("");
|
|
|
}
|
|
|
}
|
|
|
setEmail(value.trim());
|
|
|
};
|
|
|
|
|
|
|
|
|
const changePhone = (value) => {
|
|
|
const validatedValue = value.replace(/[^0-9]/g, "");
|
|
|
setPhone(validatedValue);
|
|
|
if (phoneWarning) {
|
|
|
if (value.length === 10 || value.length === 11) {
|
|
|
setPhoneWarning("");
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const changePassword = (value) => {
|
|
|
if (pwError) {
|
|
|
if (value.length >= 6) {
|
|
|
setPwError("");
|
|
|
}
|
|
|
}
|
|
|
if (value == rePassword && !!rePwError) {
|
|
|
setRePwError("");
|
|
|
}
|
|
|
setPassword(value);
|
|
|
};
|
|
|
|
|
|
const changeRePassword = (value) => {
|
|
|
if (rePwError) {
|
|
|
if (value === password) {
|
|
|
setRePwError("");
|
|
|
}
|
|
|
}
|
|
|
setRePassword(value);
|
|
|
};
|
|
|
|
|
|
const changeBirthday = (birthday) => {
|
|
|
const today = new Date();
|
|
|
if (dayjs(birthday).isBefore(dayjs(today))) {
|
|
|
setBirthday(birthday);
|
|
|
// setBirthdayWarning("");
|
|
|
} else {
|
|
|
setBirthday(today);
|
|
|
// setBirthdayWarning("Ngày sinh không được ở tương lai");
|
|
|
}
|
|
|
};
|
|
|
|
|
|
function changeGender(gender) {
|
|
|
setGender(gender);
|
|
|
}
|
|
|
|
|
|
const onBlurField = (type) => {
|
|
|
switch (type) {
|
|
|
case "email": {
|
|
|
if (email && !emailError) {
|
|
|
checkEmail();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
case "password": {
|
|
|
if (password && !pwError) {
|
|
|
checkPw();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
case "phone": {
|
|
|
if (phone && !phoneWarning) {
|
|
|
if (phone.length !== 10 && phone.length !== 11) {
|
|
|
setPhoneWarning("Số điện thoại hợp lệ có từ 10-11");
|
|
|
}
|
|
|
if (phone && phone.length && phone[0] !== "0") {
|
|
|
setPhoneWarning("Định dạng số điện thoại không đúng");
|
|
|
}
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
case 'fullname': {
|
|
|
if (!!fullname && fullname?.trim()?.length > 50 && !nameWarning) {
|
|
|
setNameWarning("Họ tên không được quá 50 kí tự");
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
case 'address': {
|
|
|
if (!!address && address?.trim()?.length > 80 && !addressWarning) {
|
|
|
setAddressWarning("Địa chỉ không được quá 80 kí tự");
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
default: {
|
|
|
if (rePassword && !rePwError) {
|
|
|
checkRePw();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleChooseRole = (e) => {
|
|
|
setRole(e.target.value)
|
|
|
}
|
|
|
|
|
|
const handleBack = () => {
|
|
|
history.push('/login')
|
|
|
}
|
|
|
|
|
|
function validateParam() {
|
|
|
if (
|
|
|
!!email &&
|
|
|
password.length >= 6 &&
|
|
|
rePassword === password &&
|
|
|
password.trim() !== "" &&
|
|
|
!!fullname.trim() &&
|
|
|
!!gender &&
|
|
|
!nameWarning &&
|
|
|
!addressWarning &&
|
|
|
!disabledBtn
|
|
|
) {
|
|
|
if (emailError) {
|
|
|
return false
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
const renderEmailIcon = () => {
|
|
|
return (
|
|
|
<svg
|
|
|
width="31"
|
|
|
height="29"
|
|
|
viewBox="0 0 31 29"
|
|
|
fill="none"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
d="M30.2412 11.4491L25.2341 7.79102V6.91003C25.2157 6.04501 24.8553 5.22259 24.2317 4.6228C23.6081 4.02302 22.7721 3.69481 21.907 3.71008H19.647L15.604 0.756104C15.4999 0.680115 15.3745 0.63916 15.2456 0.63916C15.1167 0.63916 14.9913 0.680115 14.8872 0.756104L10.844 3.71008H8.58521C7.71995 3.69454 6.88357 4.02262 6.25977 4.62244C5.63596 5.22225 5.27547 6.04483 5.25708 6.91003V7.79102L0.25 11.4491C0.173 11.5054 0.110312 11.5789 0.0668945 11.6638C0.0234769 11.7487 0.000539448 11.8426 0 11.938C0.00129897 11.9716 0.00551907 12.0051 0.012207 12.0381C0.00662848 12.0655 0.00241492 12.0932 0 12.1211V27.255C0.0812238 27.478 0.092936 27.7204 0.0332031 27.9501C0.0739633 28.0702 0.151258 28.1745 0.254395 28.2484C0.357531 28.3223 0.481275 28.3621 0.608154 28.3621H29.8811C30.008 28.3617 30.1318 28.3217 30.2349 28.2477C30.338 28.1736 30.4152 28.0693 30.4561 27.9491C30.3962 27.7199 30.4074 27.4778 30.488 27.255V12.1211C30.4861 12.0936 30.4825 12.0661 30.4771 12.0391C30.4841 12.0035 30.4877 11.9673 30.488 11.931C30.4865 11.8371 30.4635 11.7448 30.4207 11.6613C30.3778 11.5777 30.3166 11.5052 30.2412 11.4491ZM25.2341 9.297L28.8691 11.953L25.364 14.6531L25.2351 14.7461L25.2341 9.297ZM15.2461 1.99707L17.5852 3.70703H12.905L15.2461 1.99707ZM6.47412 6.9071C6.49214 6.3643 6.72452 5.85073 7.12036 5.47888C7.5162 5.10703 8.04331 4.90719 8.58618 4.9231H21.9082C22.4509 4.90746 22.9777 5.10743 23.3733 5.47925C23.7689 5.85107 24.001 6.36448 24.019 6.9071V15.625L19.2332 19.1011C19.1506 19.118 19.0726 19.152 19.0042 19.201L15.2842 22.011L11.3892 19.1941L6.4751 15.6261L6.47412 6.9071ZM5.25806 9.29504V14.629L1.63501 11.942L5.25806 9.29504ZM1.21899 13.313L9.99805 19.687L1.21899 26.061V13.313ZM2.39014 27.144L11.0452 20.4441L14.9351 23.2581C15.0405 23.3343 15.1677 23.3747 15.2979 23.3734C15.428 23.3722 15.5542 23.3293 15.6582 23.2511L19.3672 20.451L28.0901 27.145L2.39014 27.144ZM29.2742 26.0601L20.4951 19.686L29.2742 13.312V26.0601Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
</svg>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const renderPhoneIcon = () => {
|
|
|
return (
|
|
|
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path
|
|
|
d="M21.425 29.748C17.162 28.572 13.7791 25.919 10.5181 23.119C6.61393 19.7541 3.41185 15.6521 1.09509 11.048C0.743168 10.2318 0.448377 9.39214 0.213013 8.53503V6.86401C0.239013 6.83101 0.281086 6.80104 0.288086 6.76404C0.482266 5.35579 1.09287 4.03763 2.0415 2.97888C2.99014 1.92013 4.2335 1.16907 5.61206 0.822021H6.51208C7.048 1.1827 7.5464 1.5961 8 2.05603C9.418 3.79803 10.77 5.59397 12.152 7.36597C12.3379 7.55391 12.4824 7.77882 12.5759 8.02612C12.6694 8.27342 12.7099 8.53768 12.6948 8.80164C12.6797 9.06559 12.6093 9.32343 12.4883 9.55847C12.3672 9.79351 12.1982 10.0005 11.9921 10.166C11.5381 10.62 11.0661 11.058 10.6271 11.526C10.3964 11.741 10.2562 12.0358 10.235 12.3505C10.2138 12.6651 10.3133 12.976 10.5131 13.22C11.8909 15.0786 13.4858 16.7659 15.264 18.246C15.734 18.617 16.1991 18.994 16.6731 19.361C16.7977 19.4728 16.9432 19.559 17.1012 19.6145C17.2592 19.67 17.4265 19.6939 17.5938 19.6846C17.761 19.6753 17.9247 19.6331 18.0756 19.5604C18.2264 19.4877 18.3615 19.3859 18.473 19.261C18.954 18.804 19.407 18.317 19.884 17.861C20.209 17.5109 20.6557 17.2986 21.1323 17.2676C21.609 17.2365 22.0794 17.389 22.447 17.694C24.431 19.223 26.4151 20.75 28.3661 22.319C28.6787 22.6576 28.9405 23.04 29.1431 23.454V24.354C28.8348 25.5598 28.2155 26.6637 27.3473 27.5554C26.4791 28.4472 25.3922 29.0956 24.1951 29.436C23.7951 29.57 23.3791 29.649 22.9711 29.754L21.425 29.748ZM22.188 28.625L22.2461 28.437C22.3956 28.4456 22.5455 28.4456 22.6951 28.437C22.9293 28.4148 23.1616 28.3754 23.39 28.319C24.4128 28.1122 25.3607 27.6328 26.1332 26.9313C26.9057 26.2297 27.4741 25.3322 27.7781 24.334C27.8622 24.1355 27.8755 23.9141 27.8156 23.707C27.7556 23.5 27.6262 23.3199 27.4491 23.197C25.5631 21.7544 23.686 20.2994 21.818 18.832C21.7426 18.7487 21.6492 18.6837 21.5448 18.6421C21.4404 18.6005 21.328 18.5833 21.2159 18.592C21.1039 18.6007 20.9954 18.6351 20.8987 18.6923C20.802 18.7495 20.7197 18.828 20.6581 18.922C20.2221 19.393 19.7711 19.853 19.2941 20.282C18.8499 20.6751 18.2855 20.9059 17.6931 20.9366C17.1007 20.9673 16.5155 20.7962 16.0331 20.451C13.5387 18.6663 11.3497 16.4894 9.55103 14.005C9.17174 13.5066 8.98416 12.8886 9.02234 12.2634C9.06052 11.6383 9.32192 11.0476 9.75903 10.599C10.159 10.18 10.559 9.75803 10.99 9.37903C11.0988 9.31058 11.1899 9.21736 11.2557 9.10693C11.3216 8.99651 11.3604 8.87194 11.3689 8.74365C11.3774 8.61536 11.3554 8.48692 11.3047 8.36877C11.254 8.25063 11.1759 8.14616 11.077 8.06396C9.69103 6.32397 8.33602 4.55798 6.96802 2.80298C6.36802 2.03198 6.14702 1.95598 5.22302 2.30298C4.86337 2.43868 4.52049 2.61516 4.20105 2.82898C2.93989 3.63336 2.03781 4.89347 1.68274 6.34656C1.32766 7.79965 1.54698 9.33367 2.29504 10.629C6.07714 17.9216 12.0226 23.8656 19.316 27.646C20.2459 28.0464 21.2058 28.3728 22.187 28.6221L22.188 28.625Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
</svg>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const renderPasswordIcon = () => {
|
|
|
return (
|
|
|
<svg
|
|
|
width="24"
|
|
|
height="30"
|
|
|
viewBox="0 0 24 30"
|
|
|
fill="none"
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
>
|
|
|
<path
|
|
|
d="M20.7312 29.1361H3.94824C3.12902 29.1316 2.34484 28.8029 1.76715 28.222C1.18946 27.6412 0.865222 26.8552 0.865234 26.036V12.8629C0.866293 12.0456 1.1914 11.2621 1.76935 10.6842C2.34729 10.1063 3.1309 9.78097 3.94824 9.77991H4.7912V8.53601C4.7912 6.53363 5.58666 4.61329 7.00256 3.19739C8.41846 1.78149 10.3388 0.985962 12.3412 0.985962C14.3436 0.985962 16.264 1.78149 17.6799 3.19739C19.0958 4.61329 19.8912 6.53363 19.8912 8.53601V9.77991H20.7342C21.5534 9.77989 22.3393 10.1043 22.9202 10.682C23.5011 11.2597 23.8297 12.0437 23.8342 12.8629V26.036C23.8321 26.8581 23.5044 27.6457 22.9229 28.2267C22.3413 28.8077 21.5532 29.1348 20.7312 29.1361ZM3.94824 11.3361C3.54627 11.3415 3.16225 11.5035 2.87799 11.7877C2.59373 12.072 2.43164 12.4561 2.42621 12.858V26.0311C2.42381 26.4375 2.58276 26.828 2.8681 27.1173C3.15345 27.4066 3.54192 27.5709 3.94824 27.5741H20.7312C21.1403 27.5736 21.5325 27.4107 21.8217 27.1215C22.111 26.8322 22.2737 26.4402 22.2742 26.0311V12.858C22.2708 12.4518 22.1064 12.0635 21.8172 11.7782C21.528 11.4929 21.1374 11.3339 20.7312 11.3361H18.3312V8.53113C18.3312 6.94328 17.7004 5.42027 16.5776 4.29749C15.4549 3.17471 13.9321 2.54407 12.3442 2.54407C10.7564 2.54407 9.23356 3.17471 8.11078 4.29749C6.988 5.42027 6.35724 6.94328 6.35724 8.53113V11.3361H3.94824ZM13.3262 26.65H11.7182C11.4462 26.6498 11.1854 26.5416 10.993 26.3492C10.8007 26.1569 10.6925 25.8959 10.6922 25.6239V22.7511C10.1144 22.4294 9.63341 21.9585 9.29926 21.3878C8.9651 20.8171 8.79003 20.1673 8.79224 19.506C8.79224 19.0154 8.88885 18.5296 9.0766 18.0763C9.26435 17.623 9.53955 17.2113 9.88647 16.8644C10.2334 16.5175 10.6452 16.2421 11.0985 16.0543C11.5518 15.8666 12.0376 15.7699 12.5282 15.7699C13.0188 15.7699 13.5047 15.8666 13.9579 16.0543C14.4112 16.2421 14.8231 16.5175 15.17 16.8644C15.5169 17.2113 15.792 17.623 15.9798 18.0763C16.1675 18.5296 16.2642 19.0154 16.2642 19.506C16.2664 20.1673 16.0914 20.8171 15.7572 21.3878C15.423 21.9585 14.942 22.4294 14.3642 22.7511V25.6239C14.3613 25.8972 14.2507 26.1583 14.0563 26.3505C13.8619 26.5426 13.5995 26.6503 13.3262 26.65ZM12.2532 25.089H12.8122V21.724L13.3122 21.5311C13.7867 21.3492 14.1826 21.0069 14.431 20.5636C14.6795 20.1203 14.7649 19.6041 14.6724 19.1044C14.5799 18.6047 14.3154 18.153 13.9247 17.828C13.534 17.503 13.0419 17.3251 12.5337 17.3251C12.0255 17.3251 11.5334 17.503 11.1428 17.828C10.7521 18.153 10.4875 18.6047 10.395 19.1044C10.3025 19.6041 10.388 20.1203 10.6364 20.5636C10.8849 21.0069 11.2807 21.3492 11.7552 21.5311L12.2552 21.724L12.2532 25.089ZM16.8322 11.3361H7.8512V8.53113C7.8512 7.34017 8.32431 6.19797 9.16644 5.35583C10.0086 4.5137 11.1508 4.04041 12.3417 4.04041C13.5327 4.04041 14.6748 4.5137 15.517 5.35583C16.3591 6.19797 16.8322 7.34017 16.8322 8.53113V11.3361ZM9.41223 9.77502H15.2682V8.53113C15.2682 7.75418 14.9595 7.00898 14.4102 6.45959C13.8608 5.91021 13.1156 5.60144 12.3387 5.60144C11.5617 5.60144 10.8167 5.91021 10.2673 6.45959C9.71789 7.00898 9.40924 7.75418 9.40924 8.53113L9.41223 9.77502Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
</svg>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const renderNameIcon = () => {
|
|
|
return (
|
|
|
<svg width="24" height="31" viewBox="0 0 24 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path
|
|
|
d="M18.596 30.1279H5.85504C4.53242 30.1252 3.2647 29.5988 2.32946 28.6635C1.39423 27.7283 0.867629 26.4605 0.864986 25.1379V23.979C0.861079 21.8411 1.46254 19.7459 2.59973 17.9355C3.73692 16.1251 5.36339 14.6736 7.29101 13.749C6.10097 12.7273 5.25791 11.3609 4.87848 9.83907C4.49905 8.31722 4.60203 6.71511 5.17315 5.25435C5.74428 3.79359 6.7553 2.54642 8.06634 1.68551C9.37738 0.824588 10.9236 0.392489 12.491 0.448933C14.4337 0.53576 16.2708 1.35799 17.6299 2.74874C18.9891 4.13949 19.7688 5.99475 19.811 7.93892C19.8237 9.04326 19.5926 10.1368 19.1342 11.1416C18.6758 12.1463 18.0013 13.0376 17.159 13.7519C19.0865 14.6763 20.713 16.1278 21.8502 17.9379C22.9874 19.7481 23.5889 21.8432 23.585 23.9809V25.1401C23.5818 26.4622 23.0552 27.729 22.1202 28.6638C21.1853 29.5986 19.9181 30.125 18.596 30.1279ZM12.223 2.12789C10.9078 2.12197 9.62861 2.55797 8.59057 3.36568C7.55254 4.1734 6.81571 5.3061 6.49823 6.58248C6.18075 7.85885 6.30098 9.20484 6.83966 10.4047C7.37833 11.6046 8.30423 12.589 9.46899 13.1999L11.238 14.144L9.32702 14.75C7.37159 15.3806 5.66455 16.6113 4.44836 18.2673C3.23217 19.9233 2.56862 21.9205 2.552 23.9751V25.134C2.552 26.0092 2.89968 26.8486 3.51855 27.4675C4.13742 28.0864 4.97683 28.434 5.85205 28.434H18.596C19.4712 28.434 20.3106 28.0864 20.9294 27.4675C21.5483 26.8486 21.896 26.0092 21.896 25.134V23.9751C21.8794 21.9202 21.2157 19.9229 19.9991 18.2668C18.7825 16.6107 17.0749 15.3801 15.119 14.75L13.205 14.144L14.976 13.1989C15.9321 12.6984 16.7315 11.9438 17.2864 11.0183C17.8412 10.0927 18.1301 9.03219 18.121 7.95308C18.0883 6.4421 17.4823 5.00001 16.426 3.91915C15.3696 2.83828 13.9418 2.19944 12.432 2.13204C12.365 2.13304 12.296 2.13204 12.225 2.13204L12.223 2.12789Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
</svg>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const renderBirthdayIcon = () => {
|
|
|
return (
|
|
|
<svg width="24" height="29" viewBox="0 0 24 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path
|
|
|
d="M10.757 11.814C10.757 10.329 10.757 8.89899 10.757 7.46799C10.757 6.50999 10.757 6.50999 11.693 6.48899C11.769 6.48899 11.844 6.47799 11.954 6.46899C12.054 5.99799 12.169 5.59499 11.51 5.35899C11.1646 5.20686 10.8836 4.93837 10.7158 4.60031C10.5481 4.26225 10.5043 3.87604 10.592 3.50899C10.8263 2.49791 11.3652 1.58306 12.136 0.887989C12.2324 0.83612 12.3403 0.809471 12.4498 0.81052C12.5592 0.811569 12.6666 0.840283 12.762 0.89399C13.3301 1.62662 13.8179 2.41816 14.217 3.25499C14.3036 3.46434 14.3457 3.6894 14.3406 3.91589C14.3356 4.14238 14.2835 4.36535 14.1877 4.57063C14.0919 4.77592 13.9544 4.95903 13.784 5.10835C13.6136 5.25767 13.4141 5.36992 13.198 5.43799C12.656 5.67199 12.959 6.07099 12.904 6.39199C12.961 6.42999 12.992 6.46999 13.023 6.46999C14.265 6.46299 14.123 6.56999 14.136 7.69899C14.146 9.01599 14.145 10.333 14.151 11.65C14.1615 11.7049 14.1779 11.7586 14.2 11.81H16.394C16.406 11.631 16.431 11.431 16.431 11.232C16.431 9.95299 16.431 8.67399 16.436 7.39499C16.436 6.51999 16.436 6.52099 17.336 6.48899C17.429 6.48899 17.521 6.46799 17.636 6.45499C17.713 5.98999 17.836 5.59599 17.195 5.36599C16.8315 5.2045 16.5389 4.9167 16.3714 4.55593C16.2038 4.19516 16.1728 3.7859 16.284 3.40399C16.5393 2.43815 17.0686 1.56679 17.808 0.894989C17.904 0.840931 18.0123 0.812534 18.1225 0.812534C18.2327 0.812534 18.341 0.840931 18.437 0.894989C19.1892 1.58124 19.7221 2.4742 19.969 3.46199C20.0622 3.81744 20.0309 4.19407 19.8805 4.52933C19.7301 4.86458 19.4695 5.13829 19.142 5.30499C19.0259 5.33162 18.9173 5.38384 18.8239 5.45782C18.7306 5.53181 18.655 5.62569 18.6025 5.73264C18.5501 5.83958 18.5223 5.95687 18.5209 6.07596C18.5196 6.19505 18.5449 6.31293 18.595 6.42099C18.6527 6.45046 18.7143 6.47134 18.778 6.48299C19.803 6.54799 19.804 6.54699 19.805 7.54899C19.805 8.95799 19.805 10.367 19.805 11.835C20.078 11.848 20.299 11.856 20.521 11.869C21.0241 11.8844 21.5023 12.0918 21.8573 12.4487C22.2123 12.8056 22.4172 13.2848 22.43 13.788C22.461 15.639 22.462 17.488 22.416 19.342C22.3828 19.7373 22.2233 20.1114 21.961 20.409C21.838 20.5353 21.7418 20.6852 21.6782 20.8497C21.6146 21.0141 21.5849 21.1898 21.591 21.366C21.61 22.702 21.606 24.039 21.591 25.375C21.5685 25.5131 21.5975 25.6548 21.6725 25.7729C21.7476 25.8911 21.8634 25.9776 21.998 26.016C22.3188 26.1471 22.5985 26.3619 22.8082 26.6378C23.0178 26.9137 23.1496 27.2408 23.19 27.585C23.268 28.021 23.134 28.302 22.637 28.297H22.465C15.497 28.297 8.53033 28.297 1.565 28.297C0.859 28.297 0.710999 28.103 0.864999 27.424C0.938901 27.1069 1.08463 26.8109 1.29094 26.559C1.49726 26.3071 1.75866 26.1059 2.055 25.971C2.14935 25.9143 2.22989 25.8374 2.29078 25.7457C2.35166 25.654 2.39137 25.5499 2.407 25.441C2.434 23.685 2.432 21.929 2.413 20.173C2.40246 19.953 2.31667 19.7433 2.17 19.579C1.82855 19.1741 1.62999 18.668 1.605 18.139C1.528 16.731 1.565 15.315 1.582 13.903C1.57767 13.6348 1.62733 13.3684 1.72804 13.1198C1.82875 12.8712 1.97845 12.6454 2.16822 12.4558C2.35799 12.2662 2.58396 12.1167 2.83268 12.0163C3.0814 11.9158 3.34779 11.8664 3.616 11.871C4.07 11.858 4.525 11.871 5.072 11.871C5.072 11.556 5.072 11.298 5.072 11.041C5.072 9.81899 5.07533 8.59733 5.082 7.37599C5.082 6.52499 5.099 6.51399 5.945 6.49499C6.039 6.49499 6.132 6.48399 6.257 6.47599C6.375 5.98799 6.47 5.59799 5.814 5.36099C5.46127 5.19909 5.17813 4.91631 5.01581 4.56377C4.85348 4.21124 4.82269 3.81226 4.929 3.43899C5.17731 2.4512 5.71453 1.55989 6.472 0.87899C6.56213 0.827985 6.66393 0.801178 6.7675 0.801178C6.87106 0.801178 6.97287 0.827985 7.063 0.87899C7.84799 1.58732 8.39494 2.5209 8.629 3.55199C8.68597 3.90283 8.6343 4.26271 8.48095 4.58336C8.32759 4.90401 8.07987 5.17011 7.771 5.34599C7.135 5.68599 7.135 5.68599 7.256 6.41999C7.288 6.43899 7.319 6.47299 7.356 6.47399C8.434 6.52799 8.469 6.34899 8.456 7.71199C8.443 9.07499 8.456 10.419 8.456 11.822L10.757 11.814ZM3.317 25.779H20.727V21.036C20.3121 21.0363 19.9092 20.8964 19.5838 20.639C19.2583 20.3816 19.0293 20.0218 18.934 19.618C18.879 19.2406 18.863 18.8586 18.886 18.478C18.871 17.86 18.598 17.506 18.101 17.468C17.604 17.43 17.268 17.739 17.179 18.345C17.1525 18.8209 16.9405 19.2675 16.5886 19.589C16.2366 19.9105 15.7727 20.0812 15.2963 20.0646C14.8199 20.048 14.369 19.8453 14.0403 19.5001C13.7116 19.1549 13.5313 18.6946 13.538 18.218C13.475 17.523 13.096 17.118 12.532 17.148C11.968 17.178 11.624 17.605 11.617 18.309C11.609 19.209 11.617 20.103 11.61 21C11.628 21.2571 11.593 21.5151 11.5073 21.7582C11.4215 22.0012 11.2868 22.2241 11.1115 22.413C10.9362 22.6019 10.724 22.7528 10.488 22.8564C10.252 22.96 9.99732 23.0141 9.73961 23.0153C9.48189 23.0166 9.22666 22.9649 8.98971 22.8636C8.75275 22.7622 8.53911 22.6133 8.362 22.4261C8.18488 22.2389 8.04806 22.0173 7.95999 21.7751C7.87193 21.5329 7.83449 21.2752 7.85 21.018C7.842 20.118 7.861 19.223 7.839 18.327C7.84027 18.0241 7.78147 17.724 7.666 17.444C7.54648 17.214 7.35392 17.0303 7.1186 16.9217C6.88328 16.8131 6.61854 16.7857 6.366 16.844C6.08583 16.9133 5.83742 17.0756 5.66127 17.3042C5.48511 17.5328 5.39161 17.8144 5.396 18.103C5.41117 18.3623 5.37303 18.6219 5.28393 18.8659C5.19482 19.1098 5.05664 19.3329 4.87793 19.5214C4.69921 19.7099 4.48375 19.8597 4.24486 19.9616C4.00597 20.0635 3.74872 20.1154 3.489 20.114C3.43089 20.1301 3.37485 20.1529 3.322 20.182L3.317 25.779ZM12.017 12.711H9.953C7.91 12.711 5.868 12.711 3.825 12.711C3 12.711 2.484 13.081 2.462 13.788C2.416 15.275 2.408 16.766 2.455 18.253C2.45947 18.4267 2.50854 18.5963 2.59749 18.7455C2.68645 18.8948 2.81229 19.0187 2.96293 19.1052C3.11358 19.1918 3.28395 19.2382 3.45769 19.2399C3.63143 19.2416 3.80268 19.1986 3.955 19.115C4.14741 19.0078 4.30541 18.8482 4.41058 18.6547C4.51574 18.4612 4.56375 18.2417 4.549 18.022C4.5552 17.7484 4.61549 17.4787 4.72638 17.2285C4.83728 16.9783 4.9966 16.7526 5.19515 16.5642C5.3937 16.3759 5.62756 16.2287 5.88326 16.1312C6.13895 16.0336 6.41143 15.9877 6.68497 15.9959C6.95851 16.0042 7.22772 16.0665 7.47707 16.1792C7.72643 16.292 7.951 16.453 8.13784 16.653C8.32469 16.8529 8.47012 17.0879 8.56574 17.3443C8.66136 17.6007 8.70529 17.8735 8.695 18.147C8.705 19.12 8.695 20.094 8.707 21.068C8.6968 21.207 8.71516 21.3466 8.76095 21.4782C8.80675 21.6098 8.879 21.7307 8.97327 21.8333C9.06754 21.936 9.18182 22.0182 9.30908 22.0751C9.43634 22.1319 9.57388 22.162 9.71324 22.1637C9.85259 22.1653 9.9908 22.1384 10.1194 22.0846C10.2479 22.0308 10.3641 21.9513 10.4608 21.8509C10.5574 21.7505 10.6325 21.6313 10.6814 21.5008C10.7303 21.3703 10.7519 21.2312 10.745 21.092C10.763 20.577 10.753 20.061 10.754 19.546C10.754 19.046 10.739 18.553 10.754 18.057C10.7658 17.5836 10.9612 17.1333 11.299 16.8014C11.6368 16.4694 12.0904 16.2819 12.5639 16.2784C13.0375 16.2749 13.4938 16.4557 13.8365 16.7826C14.1791 17.1095 14.3812 17.5568 14.4 18.03C14.455 18.788 14.747 19.168 15.3 19.205C15.874 19.243 16.226 18.867 16.341 18.093C16.347 18.055 16.35 18.017 16.356 17.98C16.4285 17.5919 16.6333 17.241 16.9354 16.9869C17.2375 16.7327 17.6183 16.5911 18.013 16.586C18.4083 16.5791 18.7933 16.7128 19.0991 16.9634C19.405 17.214 19.6119 17.565 19.683 17.954C19.7258 18.3133 19.7435 18.6752 19.736 19.037C19.756 19.717 20.088 20.119 20.646 20.13C21.22 20.141 21.578 19.72 21.581 19.008C21.5863 17.4233 21.5863 15.839 21.581 14.255C21.581 13.117 21.164 12.711 20.021 12.71C17.3563 12.7093 14.6877 12.7097 12.015 12.711H12.017ZM22.217 27.411C22.0993 27.1521 21.8995 26.9392 21.6486 26.8054C21.3976 26.6716 21.1095 26.6244 20.829 26.671C14.9543 26.671 9.07967 26.671 3.205 26.671C2.93327 26.6744 2.66485 26.7311 2.415 26.838C2.17496 26.9563 1.9857 27.1573 1.882 27.404L22.217 27.411ZM17.338 7.37799V11.814H18.901V7.37799H17.338ZM5.971 7.38899V11.826H7.547V7.38899H5.971ZM13.271 7.39599H11.624C11.624 8.80499 11.617 10.173 11.637 11.541C11.6559 11.6113 11.6923 11.6758 11.7428 11.7282C11.7934 11.7807 11.8564 11.8195 11.926 11.841C12.355 11.876 12.788 11.856 13.237 11.856C13.253 11.627 13.273 11.478 13.273 11.329C13.276 10.039 13.275 8.74599 13.275 7.39599H13.271ZM6.771 1.90199C5.881 2.68199 5.271 4.28499 6.142 4.51799C6.355 4.21799 6.512 3.76199 6.736 3.72699C7.342 3.62699 7.098 4.27299 7.249 4.58399C8.096 4.08399 7.879 2.97099 6.778 1.90199H6.771ZM18.126 1.88099C17.034 2.92199 16.742 4.45899 17.481 4.52299L18.106 3.69299L18.74 4.49299C19.447 4.17099 19.266 3.12599 18.133 1.88099H18.126ZM12.443 1.90599C11.325 2.92099 11.088 4.18099 11.813 4.50599L12.436 3.68399L13.087 4.51199C13.938 4.22899 13.304 2.68499 12.447 1.90599H12.443Z"
|
|
|
fill="#00B9B7"
|
|
|
stroke="#00B9B7"
|
|
|
strokeWidth="0.2"
|
|
|
/>
|
|
|
</svg>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const renderLocationIcon = () => {
|
|
|
return (
|
|
|
<svg width="20" height="30" viewBox="0 0 20 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path
|
|
|
d="M9.66899 0.148004C11.9476 0.148298 14.1514 0.960881 15.8848 2.43975C17.6183 3.91862 18.7678 5.96689 19.127 8.21697C19.3404 9.86835 19.076 11.5464 18.365 13.0521C17.3663 15.3307 16.1212 17.4933 14.652 19.501C13.237 21.474 11.735 23.386 10.261 25.318C10.2033 25.4308 10.1158 25.5255 10.008 25.592C9.90014 25.6584 9.77612 25.6941 9.64946 25.6949C9.52279 25.6957 9.39829 25.6618 9.28959 25.5967C9.1809 25.5317 9.09215 25.438 9.033 25.326C6.43024 22.2683 4.12009 18.9733 2.13298 15.4841C1.53469 14.3808 1.00894 13.2397 0.559001 12.068C0.159563 11.0171 -0.0083814 9.89235 0.0666918 8.77056C0.141765 7.64878 0.458024 6.5564 0.993938 5.56805C1.67343 4.11537 2.71252 2.86017 4.01274 1.92132C5.31295 0.982471 6.83131 0.391058 8.42399 0.203058C8.63983 0.172163 8.85712 0.152388 9.07499 0.143976C9.27199 0.142976 9.47099 0.148004 9.66899 0.148004ZM9.63395 23.957C9.71895 23.857 9.76898 23.813 9.80998 23.757C11.02 22.144 12.2599 20.5509 13.4309 18.9109C14.8084 17.0324 15.9975 15.0227 16.981 12.9109C17.6695 11.5695 17.9586 10.0589 17.814 8.55804C17.5669 6.82634 16.7758 5.21798 15.5552 3.96502C14.3346 2.71206 12.7475 1.87927 11.0229 1.58697C9.29822 1.29467 7.52532 1.55789 5.96 2.33868C4.39469 3.11946 3.11793 4.3774 2.31401 5.93096C1.83282 6.76225 1.53499 7.68691 1.44047 8.64276C1.34596 9.5986 1.45697 10.5635 1.76603 11.473C2.18112 12.6048 2.67772 13.705 3.25199 14.7649C4.7301 17.3876 6.41406 19.8889 8.288 22.2451C8.721 22.8141 9.17103 23.371 9.63603 23.96L9.63395 23.957Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
<path
|
|
|
d="M9.969 29.575C7.58968 29.6284 5.21823 29.2828 2.95301 28.5529C2.22831 28.3141 1.55332 27.945 0.961069 27.4639C0.685165 27.277 0.458836 27.0258 0.301767 26.7319C0.144697 26.4379 0.0615246 26.1103 0.0594572 25.777C0.0573898 25.4438 0.136515 25.115 0.289926 24.8191C0.443337 24.5233 0.666509 24.2692 0.940072 24.0789C1.83837 23.3758 2.88136 22.8806 3.99403 22.629C4.36403 22.524 4.74508 22.4509 5.12208 22.3699C5.21154 22.3409 5.30599 22.3308 5.39955 22.3404C5.4931 22.3499 5.58366 22.3789 5.66541 22.4253C5.74717 22.4718 5.81834 22.5349 5.8744 22.6104C5.93046 22.6859 5.97014 22.7722 5.99098 22.8639C6.00691 22.9561 6.00431 23.0504 5.98316 23.1415C5.96202 23.2326 5.92283 23.3185 5.86793 23.3942C5.81303 23.4699 5.74347 23.5338 5.66346 23.5822C5.58345 23.6306 5.49452 23.6625 5.40199 23.6759C4.63999 23.8829 3.86699 24.069 3.13099 24.347C2.64519 24.5395 2.19142 24.8045 1.78504 25.133C1.26304 25.544 1.28508 25.9779 1.79908 26.4119C2.52293 26.9682 3.35928 27.36 4.25001 27.56C6.25505 28.092 8.32984 28.3133 10.402 28.216C12.2972 28.2101 14.1777 27.882 15.963 27.2459C16.4782 27.0466 16.9662 26.7829 17.415 26.461C18.042 26.01 18.025 25.5319 17.415 25.0469C16.6085 24.4697 15.6907 24.0666 14.72 23.863C14.453 23.791 14.179 23.7439 13.91 23.6769C13.8223 23.6617 13.7385 23.629 13.6638 23.5805C13.5891 23.532 13.5251 23.4689 13.4755 23.3949C13.4258 23.321 13.3917 23.2378 13.3751 23.1503C13.3586 23.0628 13.3599 22.9729 13.379 22.8859C13.3934 22.8002 13.4254 22.7183 13.4729 22.6456C13.5204 22.5728 13.5824 22.5106 13.655 22.4629C13.7277 22.4152 13.8095 22.3831 13.8952 22.3685C13.9808 22.3538 14.0687 22.3571 14.1531 22.378C15.487 22.5791 16.7667 23.0467 17.916 23.753C18.4972 24.0842 18.9355 24.6184 19.147 25.253C19.2423 25.5912 19.2439 25.9489 19.1516 26.288C19.0593 26.6271 18.8766 26.9346 18.6231 27.1779C18.0952 27.7153 17.4553 28.1298 16.749 28.3919C15.2727 28.9722 13.7171 29.3262 12.135 29.4419C11.312 29.5159 10.479 29.543 9.969 29.575Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
<path
|
|
|
d="M9.74695 12.8121C8.96881 12.7982 8.21228 12.5536 7.57324 12.1094C6.9342 11.6652 6.44148 11.0414 6.15735 10.3168C5.87322 9.59228 5.81056 8.79967 5.97729 8.03948C6.14403 7.27929 6.53258 6.58568 7.09387 6.04656C7.65516 5.50744 8.36383 5.14714 9.13013 5.01116C9.89642 4.87518 10.6858 4.96968 11.3983 5.28277C12.1108 5.59585 12.7145 6.11341 13.1326 6.76983C13.5507 7.42624 13.7644 8.19196 13.7469 8.97002C13.7166 10.0068 13.2805 10.9903 12.5325 11.7088C11.7844 12.4273 10.7841 12.8235 9.74695 12.8121ZM12.395 8.88506C12.4002 8.3647 12.2505 7.85457 11.9652 7.41936C11.6799 6.98416 11.2717 6.64353 10.7925 6.44073C10.3132 6.23792 9.7846 6.182 9.27356 6.2802C8.76252 6.37841 8.29218 6.62624 7.92224 6.99224C7.5523 7.35823 7.29947 7.82591 7.1958 8.33587C7.09212 8.84583 7.1423 9.37511 7.33996 9.8565C7.53763 10.3379 7.87378 10.7496 8.30591 11.0396C8.73803 11.3296 9.24658 11.4846 9.76697 11.485C10.4601 11.4882 11.1262 11.2163 11.6189 10.7288C12.1116 10.2413 12.3908 9.57818 12.395 8.88506Z"
|
|
|
fill="#00B9B7"
|
|
|
/>
|
|
|
</svg>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="sunE-form-container login-form-container register_create_account register_step">
|
|
|
<div className="sunE-custom-form responsive_small_screen_margin_login register-form-agency">
|
|
|
{alert?.message &&
|
|
|
alert?.screen === userConstants.SCREEN_REGISTER && (
|
|
|
<Alert alert={alert} onComplete={() => history.push('/login')}/>
|
|
|
)}
|
|
|
<form
|
|
|
className="sunE-login-app"
|
|
|
onSubmit={handleSubmit}
|
|
|
noValidate={true}
|
|
|
autoComplete="off"
|
|
|
>
|
|
|
<div className="d-flex register-content-form">
|
|
|
<div className="register-side">
|
|
|
<InputText
|
|
|
value={email}
|
|
|
setValue={changeEmail}
|
|
|
type="text"
|
|
|
name="email"
|
|
|
placeholder="Nhập email xác thực tài khoản"
|
|
|
required={true}
|
|
|
renderLabelIcon={renderEmailIcon}
|
|
|
errorText={emailError}
|
|
|
setErrorText={setEmailError}
|
|
|
onBlur={() => {
|
|
|
onBlurField("email");
|
|
|
}}
|
|
|
autoFocus = {true}
|
|
|
></InputText>
|
|
|
<InputText
|
|
|
className="field_item"
|
|
|
value={phone}
|
|
|
setValue={changePhone}
|
|
|
type="text"
|
|
|
name="phone"
|
|
|
placeholder={`Nhập số điện thoại`}
|
|
|
required={true}
|
|
|
renderLabelIcon={renderPhoneIcon}
|
|
|
errorText={phoneWarning}
|
|
|
setErrorText={setPhoneWarning}
|
|
|
onBlur={() => {
|
|
|
onBlurField("phone");
|
|
|
}}
|
|
|
|
|
|
></InputText>
|
|
|
<InputText
|
|
|
value={password}
|
|
|
setValue={changePassword}
|
|
|
type="password"
|
|
|
name="password"
|
|
|
placeholder="Nhập mật khẩu (6 ký tự trở lên)"
|
|
|
required={true}
|
|
|
renderLabelIcon={renderPasswordIcon}
|
|
|
errorText={pwError}
|
|
|
setErrorText={setPwError}
|
|
|
onBlur={() => {
|
|
|
onBlurField("password");
|
|
|
}}
|
|
|
></InputText>
|
|
|
<InputText
|
|
|
value={rePassword}
|
|
|
setValue={changeRePassword}
|
|
|
type="password"
|
|
|
name="password"
|
|
|
placeholder="Nhập lại mật khẩu"
|
|
|
required={true}
|
|
|
renderLabelIcon={renderPasswordIcon}
|
|
|
errorText={rePwError}
|
|
|
setErrorText={setRePwError}
|
|
|
onBlur={() => {
|
|
|
onBlurField("rePassword");
|
|
|
}}
|
|
|
></InputText>
|
|
|
</div>
|
|
|
<div className="register-side">
|
|
|
<InputText
|
|
|
className="field_item"
|
|
|
value={fullname}
|
|
|
setValue={setFullname}
|
|
|
type="text"
|
|
|
name="name"
|
|
|
placeholder="Họ tên"
|
|
|
required={true}
|
|
|
renderLabelIcon={renderNameIcon}
|
|
|
removeWarningOnType={true}
|
|
|
errorText={nameWarning}
|
|
|
setErrorText={setNameWarning}
|
|
|
onBlur={() => {
|
|
|
onBlurField("fullname");
|
|
|
}}
|
|
|
autoFocus={true}
|
|
|
></InputText>
|
|
|
<div className="flex-m field_item">
|
|
|
<InputDate
|
|
|
className="field_birthday"
|
|
|
value={birthday}
|
|
|
setValue={changeBirthday}
|
|
|
name="birthday"
|
|
|
renderLabelIcon={renderBirthdayIcon}
|
|
|
errorText={birthdayWarning}
|
|
|
setErrorText={setBirthdayWarning}
|
|
|
|
|
|
placeholder={"Ngày sinh"}
|
|
|
maxDate={new Date()}
|
|
|
></InputDate>
|
|
|
<div
|
|
|
className={"flex-m gr-gender " + (gender === "" ? "err" : "")}
|
|
|
>
|
|
|
<div
|
|
|
className={
|
|
|
"register_update_info_content_gender gender_male flex-1"
|
|
|
}
|
|
|
onClick={() => changeGender("male")}
|
|
|
>
|
|
|
<div className="content">
|
|
|
{gender === "male" ? <img
|
|
|
src="/assets/images/auth/img_gen_male_active.png"
|
|
|
alt={"ico_male"}
|
|
|
className="male_active image-gender"
|
|
|
/> :
|
|
|
<img
|
|
|
src="/assets/images/auth/img_gen_male_disabled.png"
|
|
|
alt={"ico_male_2"}
|
|
|
className="male image-gender"
|
|
|
/>}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
className={
|
|
|
"register_update_info_content_gender gender_female flex-1"
|
|
|
}
|
|
|
onClick={() => changeGender("female")}
|
|
|
>
|
|
|
<div className="content">
|
|
|
{gender === "female" ?
|
|
|
<img
|
|
|
src="/assets/images/auth/img_gen_female_active.png"
|
|
|
alt={"ico_female_2"}
|
|
|
className="female_active image-gender"
|
|
|
/>
|
|
|
:
|
|
|
<img
|
|
|
src="/assets/images/auth/img_gen_female_disabled.png"
|
|
|
alt={"ico_female"}
|
|
|
className="female image-gender"
|
|
|
/>
|
|
|
}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<InputText
|
|
|
className="field_item"
|
|
|
value={address}
|
|
|
setValue={setAddress}
|
|
|
type="text"
|
|
|
name="name"
|
|
|
placeholder="Địa chỉ"
|
|
|
removeWarningOnType={true}
|
|
|
errorText={addressWarning}
|
|
|
setErrorText={setAddressWarning}
|
|
|
renderLabelIcon={renderLocationIcon}
|
|
|
autoFocus={true}
|
|
|
onBlur={() => {
|
|
|
onBlurField("address");
|
|
|
}}
|
|
|
></InputText>
|
|
|
{/* <div>
|
|
|
<p style={{fontWeight: 600}}>Vai trò</p>
|
|
|
<div className="d-flex" style={{gap: '16px', marginTop: '8px'}}>
|
|
|
<div className="radio-role">
|
|
|
<input className="radio-btn-role" type="radio" defaultChecked id={roleRegister.agents} name="role" value={roleRegister.agents} onChange={handleChooseRole}/>
|
|
|
<label for={roleRegister.agents}>Đại lý</label>
|
|
|
</div>
|
|
|
<div className="radio-role">
|
|
|
<input className="radio-btn-role" type="radio" id={roleRegister.general} name="role" value={roleRegister.general} onChange={handleChooseRole}/>
|
|
|
<label for={roleRegister.general}>Tổng đại lý</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> */}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="button_submit">
|
|
|
<button
|
|
|
className={
|
|
|
"btn-line-blue" + (!validateParam() ? " btn-disable" : "")
|
|
|
}
|
|
|
type="submit"
|
|
|
|
|
|
disabled={!validateParam()}
|
|
|
>
|
|
|
Đăng ký ngay
|
|
|
</button>
|
|
|
</div>
|
|
|
<p className="login_text text-center" onClick={handleBack}>
|
|
|
Đã có tài khoản
|
|
|
</p>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default CreateAccount;
|
|
|
|
