pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

비밀번호찾기 코드 정렬

pull/2/head
junh_eee(이준희) 2 years ago
parent
96775e8bc0
commit
2311d2e857
1 changed files with 137 additions and 133 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. 234
      src/components/account/find/AccountFindPassword.js

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

@ -1,39 +1,45 @@
import * as yup from 'yup'; import { useState, useEffect } from 'react';
import classnames from 'classnames'; import { useSelector, useDispatch } from 'react-redux';
import { useState, useEffect } from 'react' import {
import { useParams, Link } from 'react-router-dom' InputGroup,
import { useSelector, useDispatch } from 'react-redux' InputGroupAddon,
import { useForm } from 'react-hook-form'; InputGroupText,
import { yupResolver } from '@hookform/resolvers/yup'; Col,
TabPane,
import { Form, InputGroup, InputGroupAddon, InputGroupText, Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Input, Label, Button, FormGroup,
Modal, ModalHeader, ModalBody, ModalFooter, FormFeedback } from 'reactstrap' Input,
import { User, Info, CreditCard, Lock, Check, X } from 'react-feather' Button,
Modal,
import loginImg from '../../../assets/images/login01.png'; ModalHeader,
ModalBody,
ModalFooter
} from 'reactstrap';
import { User, Lock } from 'react-feather';
import '../../../assets/css/custom.css'; import '../../../assets/css/custom.css';
import { findAPI } from '../../../modules/account/find/apis/findApi' import { findAPI } from '../../../modules/account/find/apis/findApi';
import { accountApi } from '../../../modules/account/register/apis/accountApi' 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 dispatch = useDispatch(); const dispatch = useDispatch();
const [activeTab, setActiveTab] = useState('2') const [activeTab, setActiveTab] = useState('2');
// ** Function to toggle tabs // ** Function to toggle tabs
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 [saveModal, setSaveModal] = useState(false);
const [modal, setModal] = useState({ const [modal, setModal] = useState({
isOpen: false, isOpen: false,
title: '', title: '',
desc: '', desc: '',
color: '' color: ''
}) });
//state값 //state값
const { idResult, userId, pwResult, udResult } = useSelector(state => state.findState); const { idResult, userId, pwResult, udResult } = useSelector(
state => state.findState
);
//param으로 넘기기 위한 값 //param으로 넘기기 위한 값
const [inputId, setInputId] = useState(''); const [inputId, setInputId] = useState('');
@ -51,72 +57,73 @@ export const AccountFindPassword = props => {
const [isCrtfy, setIsCrtfy] = useState(false); const [isCrtfy, setIsCrtfy] = useState(false);
useEffect(() => { useEffect(() => {
if(isRunning) clearInterval(timer); if (isRunning) clearInterval(timer);
return () => { clearInterval(timer); } return () => {
clearInterval(timer);
};
}, []); }, []);
const handlerSend = async() => { const handlerSend = async () => {
if(!inputId) { if (!inputId) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '아이디를 입력해 주세요.', desc: '아이디를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(!inputHpno) { if (!inputHpno) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '휴대폰 번호를 입력해 주세요.', desc: '휴대폰 번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(sendCount >= 3) { if (sendCount >= 3) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '인증번호가 발송은 3회까지만 가능합니다.', desc: '인증번호가 발송은 3회까지만 가능합니다.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(inputHpno.length < 11) { if (inputHpno.length < 11) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '올바른 번호를 입력해 주세요.', desc: '올바른 번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
const res = await findAPI.sendForPw({userId: inputId, hpno: inputHpno}); const res = await findAPI.sendForPw({ userId: inputId, hpno: inputHpno });
if(res?.data.code === -1) { if (res?.data.code === -1) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.', desc: '가입되지 않은 회원정보입니다. 다시 확인해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
} else if(res?.data.code === 0) { } else if (res?.data.code === 0) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '인증번호가 발송되었습니다.', desc: '인증번호가 발송되었습니다.',
color: 'modal-primary' color: 'modal-primary'
}) });
timeStart(); timeStart();
} }
} };
const timeStart = () => { const timeStart = () => {
if(isRunning) { if (isRunning) {
clearInterval(timer); clearInterval(timer);
} }
@ -125,7 +132,7 @@ export const AccountFindPassword = props => {
setSendCount(sendCount + 1); setSendCount(sendCount + 1);
timerStart(180); timerStart(180);
} };
const timerStart = count => { const timerStart = count => {
let minutes, seconds; let minutes, seconds;
@ -150,7 +157,7 @@ export const AccountFindPassword = props => {
title: '인증번호 만료', title: '인증번호 만료',
desc: '인증번호가 만료되었습니다.', desc: '인증번호가 만료되었습니다.',
color: 'modal-danger' color: 'modal-danger'
}) });
} }
}, 1000); }, 1000);
@ -158,42 +165,42 @@ export const AccountFindPassword = props => {
return () => { return () => {
clearInterval(timer); clearInterval(timer);
} };
} };
const handlerConfirm = async() => { const handlerConfirm = async () => {
if(!inputId) { if (!inputId) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '아이디를 입력해 주세요.', desc: '아이디를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(!inputHpno) { if (!inputHpno) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 발송', title: '인증번호 발송',
desc: '휴대폰 번호를 입력해 주세요.', desc: '휴대폰 번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(!inputCrtfy) { if (!inputCrtfy) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 인증', title: '인증번호 인증',
desc: '인증번호를 입력해 주세요.', desc: '인증번호를 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy); const res = await accountApi.crtfyhpConfirm(inputHpno, inputCrtfy);
if(!res.data.result) { if (!res.data.result) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '인증번호 인증', title: '인증번호 인증',
@ -211,31 +218,32 @@ export const AccountFindPassword = props => {
setIsCrtfy(true); setIsCrtfy(true);
setIsRunning(false); setIsRunning(false);
} }
} };
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;
} }
const reg = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/; const reg =
if(!reg.test(inputNewPw) || !reg.test(inputNewPwCk)) { /^(?=.*[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: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.', desc: '8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.',
color: 'modal-danger' color: 'modal-danger'
}) });
return; return;
} }
if(inputNewPw !== inputNewPwCk) { if (inputNewPw !== inputNewPwCk) {
setModal({ setModal({
isOpen: true, isOpen: true,
title: '비밀번호 변경', title: '비밀번호 변경',
@ -245,51 +253,55 @@ export const AccountFindPassword = props => {
return; return;
} }
if (inputNewPw === inputNewPwCk && inputNewPw && inputNewPwCk) {
if((inputNewPw === inputNewPwCk) && inputNewPw && inputNewPwCk) { dispatch(
dispatch(updatePwAction.request({userId: inputId, hpno: inputHpno, newPw: inputNewPw})); updatePwAction.request({
userId: inputId,
hpno: inputHpno,
newPw: inputNewPw
})
);
setSaveModal(!saveModal); setSaveModal(!saveModal);
} }
} };
let id = ''; let id = '';
let hpno = ''; let hpno = '';
let crtfyhp = ''; let crtfyhp = '';
let newpw = ''; let newpw = '';
let newpwck = ''; let newpwck = '';
const handlerChange = (e) => { const handlerChange = e => {
const {name, value} = e.target; const { name, value } = e.target;
if(name == 'userId') { if (name == 'userId') {
id = value; id = value;
setInputId(id) setInputId(id);
} else if (name == 'hpno') {
} else if(name == 'hpno') {
const regex = /^[0-9]{0,11}$/; const regex = /^[0-9]{0,11}$/;
if(regex.test(value)) { if (regex.test(value)) {
hpno = value; hpno = value;
setInputHpno(hpno) setInputHpno(hpno);
} }
} else if(name == 'crtfyhpNo') { } else if (name == 'crtfyhpNo') {
const regex = /^[0-9]{0,6}$/; const regex = /^[0-9]{0,6}$/;
if(regex.test(value)) { if (regex.test(value)) {
crtfyhp = value; crtfyhp = value;
setInputCrtfy(crtfyhp) setInputCrtfy(crtfyhp);
} }
} else if(name == 'newPw') { } else if (name == 'newPw') {
const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/; const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
if(regex.test(value)) { if (regex.test(value)) {
newpw = value; newpw = value;
setInputNewPw(newpw); setInputNewPw(newpw);
} }
} else if(name == 'newPwCk') { } else if (name == 'newPwCk') {
const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/; const regex = /^[A-Za-z0-9@$!%*#?&]{0,20}$/;
if(regex.test(value)) { if (regex.test(value)) {
newpwck = value; newpwck = value;
setInputNewPwCk(newpwck); setInputNewPwCk(newpwck);
} }
} }
} };
// const handlerClose = () => { // const handlerClose = () => {
// setModal({ ...modal, isOpen: !modal.isOpen }); // setModal({ ...modal, isOpen: !modal.isOpen });
@ -297,7 +309,7 @@ export const AccountFindPassword = props => {
// props.handlerClose(); // props.handlerClose();
// } // }
return( return (
<> <>
<TabPane tabId='2'> <TabPane tabId='2'>
<FormGroup className='form-label-group position-relative has-icon-left'> <FormGroup className='form-label-group position-relative has-icon-left'>
@ -335,11 +347,9 @@ export const AccountFindPassword = props => {
/> />
</Col> </Col>
<Col md='3' xs='12'> <Col md='3' xs='12'>
<Button <Button color='primary' type='button' onClick={handlerSend}>
color='primary' 인증번호 발송
type='button' </Button>
onClick={handlerSend}
>인증번호 발송</Button>
</Col> </Col>
</div> </div>
</FormGroup> </FormGroup>
@ -353,11 +363,7 @@ export const AccountFindPassword = props => {
placeholder='인증번호 입력' placeholder='인증번호 입력'
value={inputCrtfy} value={inputCrtfy}
onChange={handlerChange} onChange={handlerChange}
{...sendCount > 0 ? {...(sendCount > 0 ? {} : { disabled: true })}
{}
:
{disabled: true}
}
/> />
{/* <span className='time'>남은시간 : 3:00</span> */} {/* <span className='time'>남은시간 : 3:00</span> */}
<span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}> <span className={!isRunning || isCrtfy ? 'time d-none' : 'time'}>
@ -369,12 +375,10 @@ export const AccountFindPassword = props => {
color='primary' color='primary'
type='button' type='button'
onClick={handlerConfirm} onClick={handlerConfirm}
{...isRunning ? {...(isRunning ? {} : { disabled: true })}
{} >
: 인증번호 확인
{disabled: true} </Button>
}
>인증번호 확인</Button>
</Col> </Col>
</div> </div>
</FormGroup> </FormGroup>
@ -392,17 +396,21 @@ export const AccountFindPassword = props => {
color='primary' color='primary'
type='button' type='button'
onClick={() => setConfirmModal(!confirmModal)} onClick={() => setConfirmModal(!confirmModal)}
{...isCrtfy ? {...(isCrtfy ? {} : { disabled: true })}
{} >
: 확인
{disabled: true} </Button>
}
>확인</Button>
<Modal isOpen={confirmModal} toggle={() => setConfirmModal(!confirmModal)} className='modal-dialog-centered user-search-modal'> <Modal
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}>비밀번호 확인</ModalHeader> isOpen={confirmModal}
toggle={() => setConfirmModal(!confirmModal)}
className='modal-dialog-centered user-search-modal'
>
<ModalHeader toggle={() => setConfirmModal(!confirmModal)}>
비밀번호 확인
</ModalHeader>
<ModalBody> <ModalBody>
<span class="etc-txt">새로운 비밀번호로 변경해 주세요.</span> <span class='etc-txt'>새로운 비밀번호로 변경해 주세요.</span>
<FormGroup className='form-label-group position-relative has-icon-left'> <FormGroup className='form-label-group position-relative has-icon-left'>
<InputGroup> <InputGroup>
<InputGroupAddon addonType='prepend'> <InputGroupAddon addonType='prepend'>
@ -439,11 +447,9 @@ export const AccountFindPassword = props => {
</FormGroup> </FormGroup>
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button <Button color='primary' type='button' onClick={handlerUpdatePw}>
color='primary' 저장
type='button' </Button>
onClick={handlerUpdatePw}
>저장</Button>
<div className='vertically-centered-modal'> <div className='vertically-centered-modal'>
<Modal <Modal
@ -465,7 +471,6 @@ export const AccountFindPassword = props => {
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</div> </div>
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</div> </div>
@ -494,8 +499,7 @@ export const AccountFindPassword = props => {
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</div> </div>
</TabPane> </TabPane>
</> </>
) );
} };

Write Preview
Loading…
Cancel
Save