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

비밀번호찾기 코드 정렬

feature/auth
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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 256
      src/components/account/find/AccountFindPassword.js

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

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

Write Preview
Loading…
Cancel
Save