pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

아이디찾기, 비밀번호 찾기 에러 수정

pull/2/head
junh_eee 2 years ago
parent
ea99b9fae9
commit
0734a0c5a8
2 changed files with 111 additions and 111 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      src/components/account/find/AccountFindPassword.js
  2. 84
      src/components/account/find/AccountFindUserId.js

138
src/components/account/find/AccountFindPassword.js
Unescape View File

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

84
src/components/account/find/AccountFindUserId.js
Unescape View File

@ -1,7 +1,7 @@
import * as yup from 'yup'; import * as yup from 'yup';
import classnames from 'classnames'; import classnames from 'classnames';
import { yupResolver } from '@hookform/resolvers/yup'; import { yupResolver } from '@hookform/resolvers/yup';
import { useState, useEffect } from 'react' import { useState, useEffect, useMemo } from 'react'
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux'; 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'; import { findAPI } from '../../../modules/account/find/apis/findApi';
export const AccountFindUserId = props => { 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 dispatch = useDispatch();
const [activeTab, setActiveTab] = useState('2') 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; const {name, value} = e.target;
if(name == 'memberName') { if(name == 'memberName') {
setInputName(value); const regex = /^[ㄱ-ㅎ|ㅏ-ㅣ|가-힣|a-z]{0,10}$/;
if(regex.test(value)) {
memberName = value;
setInputName(memberName)
}
} else if(name == 'hpno') { } else if(name == 'hpno') {
setInputHpno(value); const regex = /^[0-9]{0,11}$/;
if(regex.test(value)) {
hpno = value;
setInputHpno(hpno)
}
} else if(name == 'crtfyhpNo') { } 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='이름' placeholder='이름'
value={inputName} value={inputName}
onChange={handlerChange} onChange={handlerChange}
// className={classnames({
// 'is-invalid': errors.memberName
// })}
/> />
{/* {errors && errors.memberName && (
<FormFeedback>{errors.memberName.message}</FormFeedback>
)} */}
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
@ -237,7 +232,6 @@ export const AccountFindUserId = props => {
<Col md='3' xs='12'> <Col md='3' xs='12'>
<Input type='select' id='cntryCd' name='cntryCd' placeholder='+(국가번호)'> <Input type='select' id='cntryCd' name='cntryCd' placeholder='+(국가번호)'>
<option>+82</option> <option>+82</option>
{/* <option>21111</option> */}
</Input> </Input>
</Col> </Col>
<Col md='6' xs='12'> <Col md='6' xs='12'>
@ -248,13 +242,7 @@ export const AccountFindUserId = props => {
placeholder='01012345678' placeholder='01012345678'
value={inputHpno} value={inputHpno}
onChange={handlerChange} onChange={handlerChange}
// className={classnames({
// 'is-invalid': errors.hpno
// })}
/> />
{/* {errors && errors.hpno && (
<FormFeedback>{errors.hpno.message}</FormFeedback>
)} */}
</Col> </Col>
<Col md='3' xs='12'> <Col md='3' xs='12'>
<Button <Button
@ -274,6 +262,7 @@ export const AccountFindUserId = props => {
id='crtfyhpNo' id='crtfyhpNo'
name='crtfyhpNo' name='crtfyhpNo'
placeholder='인증번호 입력' placeholder='인증번호 입력'
value={inputCrtfy}
onChange={handlerChange} onChange={handlerChange}
{...sendCount > 0 ? {...sendCount > 0 ?
{} {}
@ -318,18 +307,27 @@ export const AccountFindUserId = props => {
{disabled: true} {disabled: true}
} }
>확인</Button> >확인</Button>
<Modal isOpen={confirmModal} toggle={() => setConfirmModal(!confirmModal)} className='modal-dialog-centered user-search-modal'>
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}>아이디 확인</ModalHeader> <Modal
<ModalBody> isOpen={confirmModal}
회원님의 아이디는<br/><span className='user-search-id'>{userId?.data.userId}</span> 입니다. toggle={() => setConfirmModal(!confirmModal)}
{/* 회원님의 아이디는<br/><span className='user-search-id'>{result?.data.userId}</span> 입니다. */} modalClassName='modal-primary'
</ModalBody> className='modal-dialog-centered'
<ModalFooter> >
<Button color='primary' onClick={props.handlerClose}> <ModalHeader toggle={() => setConfirmModal(!confirmModal)}>
로그인 아이디 확인
</Button>{' '} </ModalHeader>
</ModalFooter> <ModalBody>
회원님의 아이디는<br/><span className='user-search-id'>{userId?.data.userId}</span> 입니다.
{/* 회원님의 아이디는<br/><span className='user-search-id'>{result?.data.userId}</span> 입니다. */}
</ModalBody>
<ModalFooter>
<Button color='primary' onClick={props.handlerClose}>
로그인
</Button>{' '}
</ModalFooter>
</Modal> </Modal>
</div> </div>
</FormGroup> </FormGroup>

Write Preview
Loading…
Cancel
Save