junh_eee(이준희)
7 months ago
4 changed files with 296 additions and 360 deletions
@ -1,13 +1,250 @@
|
||||
import { AccountFindPassword } from "../../../components/account/find/AccountFindPassword" |
||||
import { useDispatch } from '@src/redux/store'; |
||||
import { AccountFindPassword } from '../../../components/account/find/AccountFindPassword'; |
||||
import { useState } from 'react'; |
||||
import { MODAL_BODY, MODAL_CRTFYHP, MODAL_HEADER } from '@src/configs/msgConst'; |
||||
import { |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter, |
||||
Button, |
||||
FormGroup, |
||||
InputGroup, |
||||
InputGroupAddon, |
||||
InputGroupText, |
||||
Input |
||||
} from '@component/ui'; |
||||
import { Lock } from 'react-feather'; |
||||
import { confirmCrtfyhp } from '@src/redux/features/account/register/registerThunk'; |
||||
import { |
||||
isConfirmCrtfyhp, |
||||
isSendCrtfyhp |
||||
} from '@src/redux/features/comn/crtfyhp/crtfyhpSlice'; |
||||
|
||||
export const AccountFindPasswordContainer = props => { |
||||
export const AccountFindPasswordContainer = ({ |
||||
handlerClose, |
||||
handlerOpenModal |
||||
}) => { |
||||
const dispatch = useDispatch(); |
||||
|
||||
return( |
||||
//modal
|
||||
const [confirmModal, setConfirmModal] = useState(false); |
||||
// 비밀번호 변경 모달
|
||||
const [saveModal, setSaveModal] = useState(false); |
||||
|
||||
//param으로 넘기기 위한 값
|
||||
const [inputCrtfy, setInputCrtfy] = useState(''); |
||||
const [inputNewPw, setInputNewPw] = useState(''); |
||||
const [inputNewPwCk, setInputNewPwCk] = useState(''); |
||||
const [rq, setRq] = useState({ |
||||
userId: '', |
||||
hpno: '' |
||||
}); |
||||
|
||||
const handlerValidCheck = () => { |
||||
if (!rq.userId) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, '아이디를' + MODAL_BODY.valid); |
||||
return; |
||||
} |
||||
}; |
||||
|
||||
const handlerConfirm = async () => { |
||||
if (!rq.userId) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, '아이디를' + MODAL_BODY.valid); |
||||
return; |
||||
} |
||||
|
||||
if (!rq.hpno) { |
||||
handlerOpenModal( |
||||
MODAL_HEADER.crtfyhp, |
||||
'휴대폰 번호를' + MODAL_BODY.valid |
||||
); |
||||
return; |
||||
} |
||||
|
||||
if (!inputCrtfy) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.valid); |
||||
return; |
||||
} |
||||
|
||||
const { payload: data } = await dispatch( |
||||
confirmCrtfyhp({ hpno: rq.hpno, crtfyNo: inputCrtfy }) |
||||
); |
||||
|
||||
if (!data.result) { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.failed); |
||||
return; |
||||
} else { |
||||
handlerOpenModal(MODAL_HEADER.crtfyhp, MODAL_CRTFYHP.confirm); |
||||
dispatch(isSendCrtfyhp(false)); |
||||
dispatch(isConfirmCrtfyhp(true)); |
||||
} |
||||
}; |
||||
|
||||
const handlerUpdatePw = async () => { |
||||
const modalHeader = '비밀번호 변경'; |
||||
if (!inputNewPw || !inputNewPwCk) { |
||||
handlerOpenModal(modalHeader, '비밀번호를' + MODAL_BODY.valid); |
||||
return; |
||||
} |
||||
|
||||
const reg = |
||||
/^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/; |
||||
if (!reg.test(inputNewPw) || !reg.test(inputNewPwCk)) { |
||||
handlerOpenModal( |
||||
modalHeader, |
||||
'8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.' |
||||
); |
||||
return; |
||||
} |
||||
|
||||
if (inputNewPw !== inputNewPwCk) { |
||||
handlerOpenModal(modalHeader, '비밀번호가 일치하지 않습니다.'); |
||||
return; |
||||
} |
||||
|
||||
if (inputNewPw === inputNewPwCk && inputNewPw && inputNewPwCk) { |
||||
const param = { |
||||
userId: rq.userId, |
||||
hpno: rq.hpno, |
||||
newPw: inputNewPw |
||||
}; |
||||
dispatch(updateUserPw(param)); |
||||
setSaveModal(!saveModal); |
||||
} |
||||
}; |
||||
|
||||
let id = ''; |
||||
let hpno = ''; |
||||
let crtfyhp = ''; |
||||
let newpw = ''; |
||||
let newpwck = ''; |
||||
const handlerChange = e => { |
||||
const { name, value } = e.target; |
||||
|
||||
if (name == 'userId') { |
||||
id = value; |
||||
setRq(prev => ({ |
||||
...prev, |
||||
userId: id |
||||
})); |
||||
} else if (name == 'hpno') { |
||||
const regex = /^[0-9]{0,11}$/; |
||||
if (regex.test(value)) { |
||||
hpno = value; |
||||
setRq(prev => ({ |
||||
...prev, |
||||
hpno: hpno |
||||
})); |
||||
} |
||||
} else if (name == 'crtfyhpNo') { |
||||
const regex = /^[0-9]{0,6}$/; |
||||
if (regex.test(value)) { |
||||
crtfyhp = value; |
||||
setInputCrtfy(crtfyhp); |
||||
} |
||||
} else if (name == 'newPw') { |
||||
const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/; |
||||
if (regex.test(value)) { |
||||
newpw = value; |
||||
setInputNewPw(newpw); |
||||
} |
||||
} else if (name == 'newPwCk') { |
||||
const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/; |
||||
if (regex.test(value)) { |
||||
newpwck = value; |
||||
setInputNewPwCk(newpwck); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
const handlerModal = () => { |
||||
setConfirmModal(!confirmModal); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<AccountFindPassword |
||||
handlerClose={props.handlerClose} |
||||
rq={rq} |
||||
inputCrtfy={inputCrtfy} |
||||
handlerModal={handlerModal} |
||||
handlerClose={handlerClose} |
||||
handlerChange={handlerChange} |
||||
handlerConfirm={handlerConfirm} |
||||
handlerValidCheck={handlerValidCheck} |
||||
/> |
||||
<Modal |
||||
isOpen={confirmModal} |
||||
toggle={() => setConfirmModal(!confirmModal)} |
||||
className='modal-dialog-centered user-search-modal' |
||||
> |
||||
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}> |
||||
비밀번호 확인 |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
<span className='etc-txt'>새로운 비밀번호로 변경해 주세요.</span> |
||||
<FormGroup className='form-label-group position-relative has-icon-left'> |
||||
<InputGroup> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<Lock size={14} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input |
||||
type='password' |
||||
id='newPw' |
||||
name='newPw' |
||||
placeholder='새로운 비밀번호' |
||||
value={inputNewPw} |
||||
onChange={handlerChange} |
||||
/> |
||||
</InputGroup> |
||||
</FormGroup> |
||||
<FormGroup className='form-label-group position-relative has-icon-left mb-0'> |
||||
<InputGroup> |
||||
<InputGroupAddon addonType='prepend'> |
||||
<InputGroupText> |
||||
<Lock size={14} /> |
||||
</InputGroupText> |
||||
</InputGroupAddon> |
||||
<Input |
||||
type='password' |
||||
id='newPwCk' |
||||
name='newPwCk' |
||||
placeholder='새로운 비밀번호 확인' |
||||
value={inputNewPwCk} |
||||
onChange={handlerChange} |
||||
/> |
||||
</InputGroup> |
||||
</FormGroup> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' type='button' onClick={handlerUpdatePw}> |
||||
저장 |
||||
</Button> |
||||
|
||||
<div className='vertically-centered-modal'> |
||||
<Modal |
||||
isOpen={saveModal} |
||||
toggle={() => setSaveModal(!saveModal)} |
||||
modalClassName='modal-primary' |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader toggle={() => setSaveModal(!saveModal)}> |
||||
비밀번호 변경 |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
변경이 완료되었습니다. 다시 로그인해 주세요. |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' onClick={handlerClose}> |
||||
로그인 |
||||
</Button>{' '} |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</> |
||||
) |
||||
} |
||||
); |
||||
}; |
||||
|
||||
Loading…
Reference in new issue