|
|
|
@ -17,28 +17,6 @@ import { accountApi } from '../../../modules/account/register/apis/accountApi'
|
|
|
|
|
import { updatePwAction } from '../../../modules/account/find/actions/findAction'; |
|
|
|
|
|
|
|
|
|
export const AccountFindPassword = props => { |
|
|
|
|
// const validationSchema = yup.object().shape({
|
|
|
|
|
// newPw: yup
|
|
|
|
|
// .string()
|
|
|
|
|
// .required('비밀번호를 입력주세요.')
|
|
|
|
|
// .matches(
|
|
|
|
|
// /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/,
|
|
|
|
|
// '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'
|
|
|
|
|
// ),
|
|
|
|
|
// newPwCk: yup
|
|
|
|
|
// .string()
|
|
|
|
|
// .required('비밀번호 확인을 입력해 주세요.')
|
|
|
|
|
// .oneOf([yup.ref('userPswd'), null], '비밀번호가 일치하지 않습니다.')
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
// const { register, getValues, setValue, errors, handleSubmit } = useForm({
|
|
|
|
|
// defaultValues: {
|
|
|
|
|
// newPw: '',
|
|
|
|
|
// newPwCk: '',
|
|
|
|
|
// },
|
|
|
|
|
// resolver: yupResolver(validationSchema)
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const [activeTab, setActiveTab] = useState('2') |
|
|
|
|
|
|
|
|
@ -46,6 +24,7 @@ export const AccountFindPassword = props => {
|
|
|
|
|
const toggle = tab => setActiveTab(tab) |
|
|
|
|
//modal
|
|
|
|
|
const [confirmModal, setConfirmModal] = useState(false) |
|
|
|
|
const [saveModal, setSaveModal] = useState(false) |
|
|
|
|
const [modal, setModal] = useState({ |
|
|
|
|
isOpen: false, |
|
|
|
|
title: '', |
|
|
|
@ -200,60 +179,83 @@ export const AccountFindPassword = props => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handlerUpdatePw = async() => { |
|
|
|
|
if(inputNewPw !== inputNewPwCk) { |
|
|
|
|
if(!inputNewPw || !inputNewPwCk) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '비밀번호 변경', |
|
|
|
|
desc: '비밀번호가 일치하지 않습니다.', |
|
|
|
|
desc: '빈칸을 채워주세요.', |
|
|
|
|
color: 'modal-danger' |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(!inputNewPw || !inputNewPwCk) { |
|
|
|
|
const reg = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/; |
|
|
|
|
if(!reg.test(inputNewPw) || !reg.test(inputNewPwCk)) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '비밀번호 변경', |
|
|
|
|
desc: '빈칸을 채워주세요.', |
|
|
|
|
desc: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.', |
|
|
|
|
color: 'modal-danger' |
|
|
|
|
}) |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if((inputNewPw === inputNewPwCk) && inputNewPw && inputNewPwCk) { |
|
|
|
|
dispatch(updatePwAction.request({userId: inputId, hpno: inputHpno, newPw: inputNewPw})); |
|
|
|
|
|
|
|
|
|
if(inputNewPw !== inputNewPwCk) { |
|
|
|
|
setModal({ |
|
|
|
|
isOpen: true, |
|
|
|
|
title: '비밀번호 변경', |
|
|
|
|
desc: '변경이 완료되었습니다. 다시 로그인 해주세요.', |
|
|
|
|
color: 'modal-primary' |
|
|
|
|
}) |
|
|
|
|
desc: '비밀번호가 일치하지 않습니다.', |
|
|
|
|
color: 'modal-danger' |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if((inputNewPw === inputNewPwCk) && inputNewPw && inputNewPwCk) { |
|
|
|
|
dispatch(updatePwAction.request({userId: inputId, hpno: inputHpno, newPw: inputNewPw})); |
|
|
|
|
setSaveModal(!saveModal); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let id = ''; |
|
|
|
|
let hpno = ''; |
|
|
|
|
let crtfyhp = ''; |
|
|
|
|
let newpw = ''; |
|
|
|
|
let newpwck = ''; |
|
|
|
|
const handlerChange = (e) => { |
|
|
|
|
const {name, value} = e.target; |
|
|
|
|
|
|
|
|
|
if(name == 'userId') { |
|
|
|
|
setInputId(value); |
|
|
|
|
id = value; |
|
|
|
|
setInputId(id) |
|
|
|
|
|
|
|
|
|
} else if(name == 'hpno') { |
|
|
|
|
setInputHpno(value); |
|
|
|
|
const regex = /^[0-9]{0,11}$/; |
|
|
|
|
if(regex.test(value)) { |
|
|
|
|
hpno = value; |
|
|
|
|
setInputHpno(hpno) |
|
|
|
|
} |
|
|
|
|
} else if(name == 'crtfyhpNo') { |
|
|
|
|
setInputCrtfy(value); |
|
|
|
|
const regex = /^[0-9]{0,6}$/; |
|
|
|
|
if(regex.test(value)) { |
|
|
|
|
crtfyhp = value; |
|
|
|
|
setInputCrtfy(crtfyhp) |
|
|
|
|
} |
|
|
|
|
} else if(name == 'newPw') { |
|
|
|
|
setInputNewPw(value); |
|
|
|
|
newpw = value; |
|
|
|
|
setInputNewPw(newpw); |
|
|
|
|
// }
|
|
|
|
|
} else if(name == 'newPwCk') { |
|
|
|
|
setInputNewPwCk(value); |
|
|
|
|
newpwck = value; |
|
|
|
|
setInputNewPwCk(newpwck); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handlerClose = () => { |
|
|
|
|
setModal({ ...modal, isOpen: !modal.isOpen }); |
|
|
|
|
setConfirmModal({ ...confirmModal, isOpen: !confirmModal.isOpen}); |
|
|
|
|
props.handlerClose(); |
|
|
|
|
} |
|
|
|
|
// const handlerClose = () => {
|
|
|
|
|
// setModal({ ...modal, isOpen: !modal.isOpen });
|
|
|
|
|
// setConfirmModal({ ...confirmModal, isOpen: !confirmModal.isOpen});
|
|
|
|
|
// props.handlerClose();
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
return( |
|
|
|
|
<> |
|
|
|
@ -309,6 +311,7 @@ export const AccountFindPassword = props => {
|
|
|
|
|
id='crtfyhpNo' |
|
|
|
|
name='crtfyhpNo' |
|
|
|
|
placeholder='인증번호 입력' |
|
|
|
|
value={inputCrtfy} |
|
|
|
|
onChange={handlerChange} |
|
|
|
|
{...sendCount > 0 ?
|
|
|
|
|
{} |
|
|
|
@ -326,7 +329,7 @@ export const AccountFindPassword = props => {
|
|
|
|
|
color='primary' |
|
|
|
|
type='button' |
|
|
|
|
onClick={handlerConfirm} |
|
|
|
|
{...sendCount > 0 ?
|
|
|
|
|
{...isRunning ?
|
|
|
|
|
{} |
|
|
|
|
: |
|
|
|
|
{disabled: true} |
|
|
|
@ -337,6 +340,7 @@ export const AccountFindPassword = props => {
|
|
|
|
|
</FormGroup> |
|
|
|
|
<FormGroup> |
|
|
|
|
<div className='full-btn-2n vertically-centered-modal'> |
|
|
|
|
{/* <div className='full-btn-2n vertically-centered-confirmModal'> */} |
|
|
|
|
<Button |
|
|
|
|
color='secondary' |
|
|
|
|
type='button' |
|
|
|
@ -355,7 +359,6 @@ export const AccountFindPassword = props => {
|
|
|
|
|
} |
|
|
|
|
>확인</Button> |
|
|
|
|
|
|
|
|
|
{/* <Form onSubmit={handleSubmit(onSubmit)}> */} |
|
|
|
|
<Modal isOpen={confirmModal} toggle={() => setConfirmModal(!confirmModal)} className='modal-dialog-centered user-search-modal'> |
|
|
|
|
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}>비밀번호 확인</ModalHeader> |
|
|
|
|
<ModalBody> |
|
|
|
@ -374,13 +377,7 @@ export const AccountFindPassword = props => {
|
|
|
|
|
placeholder='새로운 비밀번호' |
|
|
|
|
value={inputNewPw} |
|
|
|
|
onChange={handlerChange} |
|
|
|
|
// className={classnames({
|
|
|
|
|
// 'is-invalid': errors.newPw
|
|
|
|
|
// })}
|
|
|
|
|
/> |
|
|
|
|
{/* {errors && errors.newPw && ( |
|
|
|
|
<FormFeedback>{errors.newPw.message}</FormFeedback> |
|
|
|
|
)} */} |
|
|
|
|
</InputGroup> |
|
|
|
|
</FormGroup> |
|
|
|
|
<FormGroup className='form-label-group position-relative has-icon-left mb-0'> |
|
|
|
@ -397,13 +394,7 @@ export const AccountFindPassword = props => {
|
|
|
|
|
placeholder='새로운 비밀번호 확인' |
|
|
|
|
value={inputNewPwCk} |
|
|
|
|
onChange={handlerChange} |
|
|
|
|
// className={classnames({
|
|
|
|
|
// 'is-invalid': errors.newPwCk
|
|
|
|
|
// })}
|
|
|
|
|
/> |
|
|
|
|
{/* {errors && errors.newPwCk && ( |
|
|
|
|
<FormFeedback>{errors.newPwCk.message}</FormFeedback> |
|
|
|
|
)} */} |
|
|
|
|
</InputGroup> |
|
|
|
|
</FormGroup> |
|
|
|
|
</ModalBody> |
|
|
|
@ -413,9 +404,30 @@ export const AccountFindPassword = props => {
|
|
|
|
|
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={props.handlerClose}> |
|
|
|
|
로그인 |
|
|
|
|
</Button>{' '} |
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
{/* </Form> */} |
|
|
|
|
</div> |
|
|
|
|
</FormGroup> |
|
|
|
|
|
|
|
|
@ -433,22 +445,12 @@ export const AccountFindPassword = props => {
|
|
|
|
|
</ModalHeader> |
|
|
|
|
<ModalBody>{modal.desc}</ModalBody> |
|
|
|
|
<ModalFooter> |
|
|
|
|
{ |
|
|
|
|
udResult?.data.code === 0 ? |
|
|
|
|
<Button |
|
|
|
|
color='danger' |
|
|
|
|
onClick={handlerClose} |
|
|
|
|
> |
|
|
|
|
로그인 |
|
|
|
|
</Button> |
|
|
|
|
: |
|
|
|
|
<Button |
|
|
|
|
color='danger' |
|
|
|
|
onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })} |
|
|
|
|
> |
|
|
|
|
확인 |
|
|
|
|
</Button> |
|
|
|
|
} |
|
|
|
|
</ModalFooter> |
|
|
|
|
</Modal> |
|
|
|
|
</div> |
|
|
|
|