비밀번호 변경(확인 버튼 작업)

src/components/account/mypage/AccountMypagePwForm.js

@@ -1,6 +1,5 @@
 // ** React Imports
 import { useState, useEffect } from 'react'
-import { useForm } from 'react-hook-form';
 import { useSelector, useDispatch } from 'react-redux'
 import {
     Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, FormFeedback, Form, Input, Label, Button,
@@ -8,40 +7,43 @@ import {
 } from 'reactstrap'
 // ** Styles
 import '../../../assets/css/custom.css';
-import classnames from 'classnames';
 import { pwUpdateAction, pwCheckAction } from '../../../modules/account/login/actions/authAction';
 import { useHistory } from 'react-router-dom';
+import { ErrorModal } from '../../modal/ErrorModal';
 
-// const SignupSchema = yup.object().shape({
+
-//     userPswd: yup
+const AccountMypagePwForm = ({ activeTab }) => {
-//         .string()
+    const { result } = useSelector(state => state.UserPageState)
-//         .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 = (props) => {
-    // const { UserPwCheck } = useSelector(state => state.authState)
     const [userPswd, setuserPswd] = useState('');
-    // console.log("UserPwCheck>>", UserPwCheck);
+    const [inputs, setInputs] = useState({
-    // const { register, errors, handleSubmit } = useForm({
+        newPswd: '',
-    //     defaultValues: {
+        newPswdConfirm: ''
-    //         cstmrSno: user.cstmrSno,
+    });
-    //         userPswd: '',
+    const { newPswd, newPswdConfirm } = inputs;
-    //         newPswd: '',
+
-    //         newPswdConfirm: ''
+    const [resultOk, setresultOk] = useState(true);
-    //     },
+    const [btnOk, setbtnOk] = useState(false);
-    //     resolver: yupResolver(SignupSchema)
+    const [modal, setModal] = useState({
-
+        isOpen: false,
-    // });
+        title: '',
+        desc: ''
+    });
+
+    useEffect(() => {
+        if (result) {
+            if (result.errorCode) {
+                setresultOk(true)
+            } else
+                setresultOk(false)
+            setbtnOk(true)
+        }
+    }, [result])
+
+    useEffect(() => {
+        setresultOk(true)
+    }, [activeTab])
+
+
     const dispatch = useDispatch();
 
     const history = useHistory();
@@ -50,61 +52,84 @@ const AccountMypagePwForm = (props) => {
         setuserPswd(e.target.value);
         //console.log(setuserPswd);
     };
+    const onChanges = (e) => {
+        const { value, name } = e.target;
+        setInputs({
+            ...inputs,
+            [name]: value
+        });
+    };
 
     function handleUseHitory() {
         history.push('/');
     }
 
-
     function pwSubmit() {
-        dispatch(pwUpdateAction.request(data));
+        const reg_pw =
+            /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/;
+        if (!reg_pw.test(inputs.newPswd && inputs.newPswdConfirm)) {
+            setModal({
+                isOpen: true,
+                title: '필수값 입력 오류',
+                desc: '8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.',
+            });
+        }
+        else if (inputs.newPswd != inputs.newPswdConfirm) {
+            setModal({
+                isOpen: true,
+                title: '필수값 입력 오류',
+                desc: '비밀번호가 일치하지 않습니다.',
+            });
+        }
+        else {
+            dispatch(pwUpdateAction.request(inputs));
+        }
     }
 
     function pwok() {
-        //   dispatch(pwUpdateAction.request(data));
         dispatch(pwCheckAction.request(userPswd));
     }
 
     return (
         <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='' />
+                                    <Input type='password' readOnly={btnOk} 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'>
+
+                            <Col className='list-input' md='3' sm='12' style={{ display: resultOk ? 'none' : 'inline' }} >
                                 <FormGroup>
-                                    <Label for='newPswd'>새로운 비밀번호</Label>
+                                    <Label for='newPswd' >새로운 비밀번호</Label>
-                                    <Input type='password' id='newPswd' name="newPswd" bsSize='sm' autoComplete='off' placeholder='' />
+                                    <Input type='password' id='newPswd' onChange={onChanges} value={newPswd} name="newPswd" bsSize='sm' autoComplete='off' placeholder='' />
                                 </FormGroup>
                             </Col>
-                            <Col className='list-input' md='3' sm='12'>
+                            <Col className='list-input' md='3' sm='12' style={{ display: resultOk ? 'none' : 'inline' }}>
                                 <FormGroup>
                                     <Label for='newPswdConfirm'>새로운 비밀번호 확인</Label>
-                                    <Input type='password' id='newPswdConfirm' name="newPswdConfirm" bsSize='sm' autoComplete='off' placeholder='' />
+                                    <Input type='password' id='newPswdConfirm' onChange={onChanges} value={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 className='mr-1' color='primary' onClick={pwSubmit} disabled={resultOk} size='sm'>저장</Button.Ripple>
                         <Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple>
                     </div>
                 </TabPane>
             </CardBody>
-        </Card>
+            <ErrorModal modal={modal} setModal={setModal} />
+        </Card >
     )
 }
+
 export default AccountMypagePwForm;
 

src/containers/account/mypage/AccountMypageContainer.js

@@ -48,7 +48,6 @@ const AccountMypageContainer = () => {
   // { id } = useParams();
 
   const toggle = tab => {
-    console.log(tab);
     return setActiveTab(tab);
   };
   const [formModal, setFormModal] = useState(false);
@@ -82,7 +81,6 @@ const AccountMypageContainer = () => {
     desc: '',
     color: ''
   });
-
   const timerStart = count => {
     let minutes, seconds;
 
@@ -384,7 +382,7 @@ const AccountMypageContainer = () => {
       ) : (
         <></>
       )}
-      {activeTab == 2 ? <AccountMypagePwForm /> : <></>}
+      {activeTab == 2 ? <AccountMypagePwForm activeTab={activeTab} /> : <></>}
       <div className='vertically-centered-modal'>
         <Modal
           isOpen={modal.isOpen}

src/modules/account/login/models/authModel.ts

@@ -81,8 +81,6 @@ export interface UpdateData {
 }
 
 export interface UserPw {
-  cstmrSno: string;
-  userPswd: string;
   newPswd: string;
   newPswdConfirm: string;
 }

src/modules/account/login/sagas/authSaga.ts

@@ -228,7 +228,7 @@ function* userPwCheckSaga(
       yield put(
         MessageActions.IS_MESSAGE({
           messageCode: SAVE_MESSAGE.code,
-          message: SAVE_MESSAGE.message,
+          message: '확인이 완료되었습니다.',
           isHistoryBack: false,
           isRefresh: false
         })