From 0734a0c5a8a21adc57beaca293ea2c5a883b76d9 Mon Sep 17 00:00:00 2001 From: junh_eee Date: Tue, 6 Sep 2022 16:05:37 +0900 Subject: [PATCH] =?UTF-8?q?=EC=95=84=EC=9D=B4=EB=94=94=EC=B0=BE=EA=B8=B0,?= =?UTF-8?q?=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=B0=BE=EA=B8=B0=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/find/AccountFindPassword.js | 138 +++++++++--------- .../account/find/AccountFindUserId.js | 84 ++++++----- 2 files changed, 111 insertions(+), 111 deletions(-) diff --git a/src/components/account/find/AccountFindPassword.js b/src/components/account/find/AccountFindPassword.js index 19fd03a..09a73c4 100644 --- a/src/components/account/find/AccountFindPassword.js +++ b/src/components/account/find/AccountFindPassword.js @@ -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 => {
+ {/*
*/} - {/*
*/} setConfirmModal(!confirmModal)} className='modal-dialog-centered user-search-modal'> setConfirmModal(!confirmModal)}>비밀번호 확인 @@ -374,13 +377,7 @@ export const AccountFindPassword = props => { placeholder='새로운 비밀번호' value={inputNewPw} onChange={handlerChange} - // className={classnames({ - // 'is-invalid': errors.newPw - // })} /> - {/* {errors && errors.newPw && ( - {errors.newPw.message} - )} */} @@ -397,13 +394,7 @@ export const AccountFindPassword = props => { placeholder='새로운 비밀번호 확인' value={inputNewPwCk} onChange={handlerChange} - // className={classnames({ - // 'is-invalid': errors.newPwCk - // })} /> - {/* {errors && errors.newPwCk && ( - {errors.newPwCk.message} - )} */} @@ -413,9 +404,30 @@ export const AccountFindPassword = props => { type='button' onClick={handlerUpdatePw} >저장 + +
+ setSaveModal(!saveModal)} + modalClassName='modal-primary' + className='modal-dialog-centered' + > + setSaveModal(!saveModal)}> + 비밀번호 변경 + + + 변경이 완료되었습니다. 다시 로그인 해주세요. + + + {' '} + + +
+ - {/*
*/}
@@ -433,22 +445,12 @@ export const AccountFindPassword = props => { {modal.desc} - { - udResult?.data.code === 0 ? - - : - }
diff --git a/src/components/account/find/AccountFindUserId.js b/src/components/account/find/AccountFindUserId.js index 27e8d62..78214e1 100644 --- a/src/components/account/find/AccountFindUserId.js +++ b/src/components/account/find/AccountFindUserId.js @@ -1,7 +1,7 @@ import * as yup from 'yup'; import classnames from 'classnames'; import { yupResolver } from '@hookform/resolvers/yup'; -import { useState, useEffect } from 'react' +import { useState, useEffect, useMemo } from 'react' import { useForm } from 'react-hook-form'; import { useDispatch, useSelector } from 'react-redux'; @@ -15,20 +15,6 @@ import { accountApi } from '../../../modules/account/register/apis/accountApi'; import { findAPI } from '../../../modules/account/find/apis/findApi'; export const AccountFindUserId = props => { - // const validationSchema = yup.object().shape({ - // memberName: yup - // .string() - // .required('이름을 입력해 주세요.'), - // hpno: yup.string().required('휴대폰번호를 입력해 주세요.') - // }) - - // const { register, getValues, setValue, errors, handleSubmit } = useForm({ - // defaultValues: { - // memberName: '', - // hpno: '', - // }, - // resolver: yupResolver(validationSchema) - // }) const dispatch = useDispatch(); const [activeTab, setActiveTab] = useState('2') @@ -187,15 +173,30 @@ export const AccountFindUserId = props => { } } - const handlerChange = (e) => { + let memberName = ''; + let hpno = ''; + let crtfyhp = ''; + const handlerChange = e => { const {name, value} = e.target; if(name == 'memberName') { - setInputName(value); + const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]{0,10}$/; + if(regex.test(value)) { + memberName = value; + setInputName(memberName) + } } 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) + } } } @@ -223,13 +224,7 @@ export const AccountFindUserId = props => { placeholder='이름' value={inputName} onChange={handlerChange} - // className={classnames({ - // 'is-invalid': errors.memberName - // })} /> - {/* {errors && errors.memberName && ( - {errors.memberName.message} - )} */} @@ -237,7 +232,6 @@ export const AccountFindUserId = props => { - {/* */} @@ -248,13 +242,7 @@ export const AccountFindUserId = props => { placeholder='01012345678' value={inputHpno} onChange={handlerChange} - // className={classnames({ - // 'is-invalid': errors.hpno - // })} /> - {/* {errors && errors.hpno && ( - {errors.hpno.message} - )} */} - setConfirmModal(!confirmModal)} className='modal-dialog-centered user-search-modal'> - setConfirmModal(!confirmModal)}>아이디 확인 - - 회원님의 아이디는
{userId?.data.userId} 입니다. - {/* 회원님의 아이디는
{result?.data.userId} 입니다. */} - - - {' '} - + + setConfirmModal(!confirmModal)} + modalClassName='modal-primary' + className='modal-dialog-centered' + > + setConfirmModal(!confirmModal)}> + 아이디 확인 + + + 회원님의 아이디는
{userId?.data.userId} 입니다. + {/* 회원님의 아이디는
{result?.data.userId} 입니다. */} + + + {' '} + +