|
|
|
@ -1,50 +1,94 @@
|
|
|
|
|
// ** React Imports
|
|
|
|
|
import { useState, useEffect } from 'react' |
|
|
|
|
|
|
|
|
|
import { yupResolver } from '@hookform/resolvers/yup'; |
|
|
|
|
import * as yup from 'yup'; |
|
|
|
|
import { useForm } from 'react-hook-form'; |
|
|
|
|
import { useSelector, useDispatch } from 'react-redux' |
|
|
|
|
import { |
|
|
|
|
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, |
|
|
|
|
Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup,FormFeedback, Form, Input, Label, Button, |
|
|
|
|
Modal, ModalHeader, ModalBody, ModalFooter |
|
|
|
|
} from 'reactstrap' |
|
|
|
|
|
|
|
|
|
// ** Styles
|
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
|
import classnames from 'classnames'; |
|
|
|
|
import { pwUpdateAction } from '../../../modules/account/login/actions/authAction'; |
|
|
|
|
|
|
|
|
|
const SignupSchema = yup.object().shape({ |
|
|
|
|
userPswd: yup |
|
|
|
|
.string() |
|
|
|
|
.required('비밀번호를 입력주세요.'), |
|
|
|
|
newPswd: yup |
|
|
|
|
.string() |
|
|
|
|
.required('비밀번호를 입력주세요.') |
|
|
|
|
.matches( |
|
|
|
|
/^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/, |
|
|
|
|
'8자 이상, 20자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'), |
|
|
|
|
pswdCheck: yup |
|
|
|
|
.string() |
|
|
|
|
.required('비밀번호 확인을 입력해 주세요.') |
|
|
|
|
.oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.') |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const AccountMypagePwForm = ({ userInfo, formModal }) => { |
|
|
|
|
const AccountMypagePwForm = ({user}) => { |
|
|
|
|
|
|
|
|
|
const { register,errors,handleSubmit } = useForm({ |
|
|
|
|
defaultValues: { |
|
|
|
|
cstmrSno: user.cstmrSno, |
|
|
|
|
userPswd: '', |
|
|
|
|
newPswd: '', |
|
|
|
|
newPswdConfirm: '' |
|
|
|
|
}, |
|
|
|
|
resolver: yupResolver(SignupSchema) |
|
|
|
|
}); |
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const onSubmit = data => { |
|
|
|
|
console.log("sdds",data); |
|
|
|
|
dispatch(pwUpdateAction.request(data)); |
|
|
|
|
} |
|
|
|
|
// const res = await pwAPI.register({
|
|
|
|
|
// data: data,
|
|
|
|
|
// agreeTerms: agreeTerms
|
|
|
|
|
// });
|
|
|
|
|
return ( |
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)}> |
|
|
|
|
<TabPane tabId='2'> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Form> |
|
|
|
|
<Label for='userPswd'>기존 비밀번호</Label> |
|
|
|
|
<Input type='password' id='userPswd' size='sm' autocomplete='off' placeholder='' /> |
|
|
|
|
</Form> |
|
|
|
|
<Input type='password' innerRef={register} id='userPswd'name="userPswd" size='sm'autocomplete='off' placeholder=''className={classnames({'is-invalid': errors.userPswd})}/> |
|
|
|
|
{errors && errors.userPswd && ( |
|
|
|
|
<FormFeedback>{errors.userPswd.message} </FormFeedback> |
|
|
|
|
)} |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Form> |
|
|
|
|
<Label for='newPswd'>새로운 비밀번호</Label> |
|
|
|
|
<Input type='password' id='newPswd' size='sm' autocomplete='off' placeholder='' /> |
|
|
|
|
</Form> |
|
|
|
|
<Input type='password' id='newPswd' innerRef={register} name="newPswd"size='sm' autocomplete='off' placeholder='' className={classnames({'is-invalid': errors.newPswd})}/> |
|
|
|
|
{errors && errors.newPswd && ( |
|
|
|
|
<FormFeedback>{errors.newPswd.message} </FormFeedback> |
|
|
|
|
)} |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Form> |
|
|
|
|
<Label for='pswdCheck'>새로운 비밀번호 확인</Label> |
|
|
|
|
<Input type='password' id='pswdCheck' size='sm' autocomplete='off' placeholder='' /> |
|
|
|
|
</Form> |
|
|
|
|
<Label for='newPswdConfirm'>새로운 비밀번호 확인</Label> |
|
|
|
|
<Input type='password' id='newPswdConfirm'innerRef={register} name="pswdCheck"size='sm' autocomplete='off' placeholder='' className={classnames({'is-invalid': errors.newPswdConfirm})} /> |
|
|
|
|
{errors && errors.newPswdConfirm && ( |
|
|
|
|
<FormFeedback>{errors.newPswdConfirm.message} </FormFeedback> |
|
|
|
|
)} |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple className='mr-1' color='primary' size='sm'>저장</Button.Ripple> |
|
|
|
|
<Button.Ripple className='mr-1' color='primary' type="submit" size='sm'>저장</Button.Ripple> |
|
|
|
|
<Button.Ripple color='danger' size='sm'>취소</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</TabPane> |
|
|
|
|
</form> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
export default AccountMypagePwForm; |
|
|
|
|