diff --git a/src/App.js b/src/App.js index 96d1a32..43fa5be 100644 --- a/src/App.js +++ b/src/App.js @@ -41,7 +41,7 @@ function App() { component={ForgotPasswordPage} /> diff --git a/src/_components/Alert/success.js b/src/_components/Alert/success.js index 29be68c..7ebff7f 100644 --- a/src/_components/Alert/success.js +++ b/src/_components/Alert/success.js @@ -5,12 +5,12 @@ import { useDispatch } from 'react-redux'; function AlertSuccess(props) { const dispatch = useDispatch(); - let autoClose = setTimeout(() => { - close(); - }, 2000); + // let autoClose = setTimeout(() => { + // close(); + // }, 2000); function close() { - clearTimeout(autoClose); + // clearTimeout(autoClose); props.onComplete(); dispatch(alertActions.clear()); diff --git a/src/_components/Header/HeaderMain/index.js b/src/_components/Header/HeaderMain/index.js index 6bc47be..eb513dc 100644 --- a/src/_components/Header/HeaderMain/index.js +++ b/src/_components/Header/HeaderMain/index.js @@ -2,11 +2,15 @@ import { Link } from "react-router-dom"; import './HeaderMain.style.scss' import { useState } from "react"; import {history} from '../../../_helpers/history' +import { apiCaller } from "../../../_helpers"; export default function HeaderMain() { const [isHoverLogout, setIsHoverLogout] = useState(false) - const handleLogout = () => { - history.replace('/login') + const handleLogout = async () => { + await apiCaller('/logout', "POST", {}) + window.location.href = "/login"; + localStorage.removeItem("authentication"); + localStorage.removeItem("access_token"); } return ( diff --git a/src/_constants/register.js b/src/_constants/register.js index 5eed3e1..8d8a943 100644 --- a/src/_constants/register.js +++ b/src/_constants/register.js @@ -1,4 +1,10 @@ export const STEP_REGISTER = { CREATE_ACCOUNT: 'CREATE_ACCOUNT', CREATE_INFORMATION: 'CREATE_INFORMATION', +} + + +export const roleRegister = { + agents: 'agents', + general: 'general', } \ No newline at end of file diff --git a/src/_containers/RegisterPage/CreateAccount/index.js b/src/_containers/RegisterPage/CreateAccount/index.js index da101ac..b290676 100644 --- a/src/_containers/RegisterPage/CreateAccount/index.js +++ b/src/_containers/RegisterPage/CreateAccount/index.js @@ -1,15 +1,34 @@ 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 { stepAuthConstants } from "../../../_constants/auth"; 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 { userConstants } from "../../../_constants"; +import { alertActions } from "../../../_actions"; 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 [birthdayWarning, setBirthdayWarning] = useState(""); const [password, setPassword] = useState(""); const [rePassword, setRePassword] = useState(""); const [emailError, setEmailError] = useState(""); @@ -18,61 +37,32 @@ const CreateAccount = () => { const [cacheEmailPass, setCacheEmailPass] = useState([]); const [cacheEmailFail, setCacheEmailFail] = useState([]); const [disabledBtn, setDisabledBtn] = useState(false); - + const [message, setMessage] = useState(""); + async function handleSubmit(e) { e.preventDefault(); - if (!!email && password.length >= 6 && password === rePassword) { - if (cacheEmailPass.includes(email)) { - nextStep(); - return; - } else if (cacheEmailFail.includes(email)) { - setDisabledBtn(true); - setEmailError( - "Email đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" - ); - return; - } else { - await apiCaller("/api_register/check_email", "POST", { - email, - }) - .then((res) => { - if (res.status) { - setCacheEmailPass([...cacheEmailPass, email]); - nextStep(); - setEmailError(""); - setPwError(""); - setRePwError(""); - } - }) - .catch((e) => { - setCacheEmailFail([...cacheEmailFail, email]); - if (e === "Email đã tồn tại trên hệ thống.") { - setDisabledBtn(true); - setEmailError( - "Email đã tồn tại trên hệ thống. Vui lòng quay lại đăng nhập!" - ); - } else { - setEmailError(e); - } - return; - }); + const url = '/register' + const dataSubmit = { + agents_code, + password, + address, + birthday, + email, + fullname, + gender, + phone, + role + } + try { + const res = await apiCaller(url, "POST", dataSubmit) + if (res.status) { + dispatch(alertActions.success({ 'message': res?.msg, 'screen': userConstants.SCREEN_REGISTER })); } - return; + } catch (err) { + dispatch(alertActions.error({ 'message': err, 'screen': userConstants.SCREEN_REGISTER, isShowPopup: true })); } - // checkEmail(); - checkPw(); - checkRePw(); } - const nextStep = () => { - }; - - 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"); @@ -127,6 +117,21 @@ const CreateAccount = () => { 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": { @@ -141,7 +146,7 @@ const CreateAccount = () => { } return; } - case "phoneNumber": { + 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"); @@ -161,6 +166,10 @@ const CreateAccount = () => { } }; + const handleChooseRole = (e) => { + setRole(e.target.value) + } + const handleBack = () => { history.push('/login') } @@ -171,6 +180,8 @@ const CreateAccount = () => { password.length >= 6 && rePassword === password && password.trim() !== "" && + !!fullname.trim() && + !!gender && !disabledBtn ) { if (emailError) { @@ -226,16 +237,63 @@ const CreateAccount = () => { ); }; + const renderNameIcon = () => { + return ( + + + + ); + }; + + const renderBirthdayIcon = () => { + return ( + + + + ); +}; + + const renderLocationIcon = () => { + return ( + + + + + + ); +}; + return (
+ {alert?.message && + alert?.screen === userConstants.SCREEN_REGISTER && ( + history.push('/login')}/> + )}
-
+
{ onBlur={() => { onBlurField("phone"); }} - errorAbsolute={true} + > { >
- { - onBlurField("email"); - }} - autoFocus = {true} + renderLabelIcon={renderNameIcon} + removeWarningOnType={true} + errorText={nameWarning} + setErrorText={setNameWarning} + + onBlur={() => + fullname.trim() === "" + ? setFullname("") + : setFullname(fullname.trim()) + } + autoFocus={true} > +
+ +
+
changeGender("male")} + > +
+ {gender === "male" ? {"ico_male"} : + {"ico_male_2"}} +
+
+
changeGender("female")} + > +
+ {gender === "female" ? + {"ico_female_2"} + : + {"ico_female"} + } +
+
+
+
{ - onBlurField("phone"); - }} - errorAbsolute={true} - > - { - onBlurField("password"); - }} - > - { - onBlurField("rePassword"); - }} + renderLabelIcon={renderLocationIcon} + autoFocus={true} > + {/*
+

Vai trò

+
+
+ +   +
+  
+   +   +  
+
+
*/}
@@ -364,15 +466,16 @@ const CreateAccount = () => { className={ "btn-line-blue" + (!validateParam() ? " btn-disable" : "") } + type="submit" + + disabled={!validateParam()} > Đăng ký ngay
-
-

- Đăng nhập -

-
+

+ Đã có tài khoản +

diff --git a/src/_containers/RegisterPage/CreateAccount/index.scss b/src/_containers/RegisterPage/CreateAccount/index.scss index 9fee53c..35813dd 100644 --- a/src/_containers/RegisterPage/CreateAccount/index.scss +++ b/src/_containers/RegisterPage/CreateAccount/index.scss @@ -1,4 +1,12 @@ +@import "/src/_styles/mixin"; + .register_step { + + + @include screen_mobile { + padding-top: 0; + } + .title_register { margin-bottom: 18px; @@ -47,6 +55,19 @@ margin: 0 auto; margin-top: 50px; + @include screen_mobile { + max-width: unset; + } + + .register-content-form { + gap: 32px; + + @include screen_mobile { + flex-direction: column; + gap: 0; + } + } + .title { font-size: 32px; text-transform: uppercase; @@ -59,8 +80,54 @@ margin: 24px 0; } + .login_text { + font-size: 18px; + color: #00b9b7; + font-weight: 600 + } } .register-side { flex: 1; + + .gender_female, + .gender_male { + margin-left: 16px; + } + + .image-gender { + width: 64px; + height: 64px; + + @include screen_mobile { + width: 44px; + height: 44px; + } + } + + .radio-role { + display: flex; + align-items: center; + } + + .radio-btn-role { + width: 20px; + height: 20px; + margin: 0; + margin-right: 6px; + } + + input[type=radio] { + appearance: none; + border-radius: 50%; + background-clip: content-box; + border: 1px solid #000; + background-color: #fff; + } + + input[type="radio"]:checked { + background-color: #00b9b7; + padding: 2px; + border: 2px solid #00b9b7; + } } \ No newline at end of file diff --git a/src/_containers/RegisterPage/index.js b/src/_containers/RegisterPage/index.js index a9c94c8..a3968c9 100644 --- a/src/_containers/RegisterPage/index.js +++ b/src/_containers/RegisterPage/index.js @@ -10,7 +10,7 @@ export default function RegisterPage() {
-
+

Đăng ký đại lý