|
|
|
@ -1,7 +1,5 @@
|
|
|
|
|
// ** 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 { |
|
|
|
@ -11,91 +9,101 @@ import {
|
|
|
|
|
// ** Styles
|
|
|
|
|
import '../../../assets/css/custom.css'; |
|
|
|
|
import classnames from 'classnames'; |
|
|
|
|
import { pwUpdateAction } from '../../../modules/account/login/actions/authAction'; |
|
|
|
|
import { pwUpdateAction, pwCheckAction } from '../../../modules/account/login/actions/authAction'; |
|
|
|
|
import { useHistory } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
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 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.'), |
|
|
|
|
newPswdConfirm: yup |
|
|
|
|
.string() |
|
|
|
|
.required('비밀번호 확인을 입력해 주세요.') |
|
|
|
|
.oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.') |
|
|
|
|
}); |
|
|
|
|
// 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 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.'),
|
|
|
|
|
// newPswdConfirm: yup
|
|
|
|
|
// .string()
|
|
|
|
|
// .required('비밀번호 확인을 입력해 주세요.')
|
|
|
|
|
// .oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.')
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
const AccountMypagePwForm = ({ user }) => { |
|
|
|
|
const AccountMypagePwForm = (props) => { |
|
|
|
|
// const { UserPwCheck } = useSelector(state => state.authState)
|
|
|
|
|
const [userPswd, setuserPswd] = useState(''); |
|
|
|
|
// console.log("UserPwCheck>>", UserPwCheck);
|
|
|
|
|
// const { register, errors, handleSubmit } = useForm({
|
|
|
|
|
// defaultValues: {
|
|
|
|
|
// cstmrSno: user.cstmrSno,
|
|
|
|
|
// userPswd: '',
|
|
|
|
|
// newPswd: '',
|
|
|
|
|
// newPswdConfirm: ''
|
|
|
|
|
// },
|
|
|
|
|
// resolver: yupResolver(SignupSchema)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { register, errors, handleSubmit } = useForm({ |
|
|
|
|
defaultValues: { |
|
|
|
|
cstmrSno: user.cstmrSno, |
|
|
|
|
userPswd: '', |
|
|
|
|
newPswd: '', |
|
|
|
|
newPswdConfirm: '' |
|
|
|
|
}, |
|
|
|
|
resolver: yupResolver(SignupSchema) |
|
|
|
|
}); |
|
|
|
|
// });
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
|
const onSubmit = data => { |
|
|
|
|
|
|
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
const onChange = (e) => { |
|
|
|
|
setuserPswd(e.target.value); |
|
|
|
|
//console.log(setuserPswd);
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function handleUseHitory() { |
|
|
|
|
history.push('/'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function pwSubmit() { |
|
|
|
|
dispatch(pwUpdateAction.request(data)); |
|
|
|
|
} |
|
|
|
|
const history = useHistory(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleUseHitory(){ |
|
|
|
|
history.push('/'); |
|
|
|
|
function pwok() { |
|
|
|
|
// dispatch(pwUpdateAction.request(data));
|
|
|
|
|
dispatch(pwCheckAction.request(userPswd)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Card> |
|
|
|
|
<CardBody className='card-body-tab-cont'> |
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)}> |
|
|
|
|
<TabPane tabId='2'> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='userPswd'>기존 비밀번호</Label> |
|
|
|
|
<Input type='password' innerRef={register} id='userPswd' name="userPswd" bsSize='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> |
|
|
|
|
<Label for='newPswd'>새로운 비밀번호</Label> |
|
|
|
|
<Input type='password' id='newPswd' innerRef={register} name="newPswd" bsSize='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> |
|
|
|
|
<Label for='newPswdConfirm'>새로운 비밀번호 확인</Label> |
|
|
|
|
<Input type='password' id='newPswdConfirm' innerRef={register} name="newPswdConfirm" bsSize='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' type="submit" size='sm'>저장</Button.Ripple> |
|
|
|
|
<Button.Ripple color='danger' size='sm'onClick={handleUseHitory}>취소</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</TabPane> |
|
|
|
|
</form> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
<CardBody className='card-body-tab-cont'> |
|
|
|
|
|
|
|
|
|
<TabPane tabId='2'> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='userPswd'>기존 비밀번호</Label> |
|
|
|
|
<Input type='password' id='userPswd' onChange={onChange} value={userPswd} name="userPswd" bsSize='sm' autoComplete='off' placeholder='' /> |
|
|
|
|
|
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple className='mr-1' color='primary' onClick={pwok} size='sm'>확인</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='newPswd'>새로운 비밀번호</Label> |
|
|
|
|
<Input type='password' id='newPswd' name="newPswd" bsSize='sm' autoComplete='off' placeholder='' /> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='3' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='newPswdConfirm'>새로운 비밀번호 확인</Label> |
|
|
|
|
<Input type='password' id='newPswdConfirm' name="newPswdConfirm" bsSize='sm' autoComplete='off' placeholder='' /> |
|
|
|
|
|
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple className='mr-1' color='primary' onClick={pwSubmit} size='sm'>저장</Button.Ripple> |
|
|
|
|
<Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</TabPane> |
|
|
|
|
</CardBody> |
|
|
|
|
</Card> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
export default AccountMypagePwForm; |
|
|
|
|