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

2 years ago · 6a73c15d5e
4 changed files with 72 additions and 51 deletions
--- a/src/components/account/mypage/AccountMypagePwForm.js
+++ b/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
-//         .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 = (props) => {
-    // const { UserPwCheck } = useSelector(state => state.authState)
+
+const AccountMypagePwForm = ({ activeTab }) => {
+    const { result } = useSelector(state => state.UserPageState)
    const [userPswd, setuserPswd] = useState('');
-    // console.log("UserPwCheck>>", UserPwCheck);
-    // const { register, errors, handleSubmit } = useForm({
-    //     defaultValues: {
-    //         cstmrSno: user.cstmrSno,
-    //         userPswd: '',
-    //         newPswd: '',
-    //         newPswdConfirm: ''
-    //     },
-    //     resolver: yupResolver(SignupSchema)
-
-    // });
+    const [inputs, setInputs] = useState({
+        newPswd: '',
+        newPswdConfirm: ''
+    });
+    const { newPswd, newPswdConfirm } = inputs;
+
+    const [resultOk, setresultOk] = useState(true);
+    const [btnOk, setbtnOk] = useState(false);
+    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>
-                                    <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>
+            <ErrorModal modal={modal} setModal={setModal} />
        </Card >
    )
 }
+
 export default AccountMypagePwForm;

--- a/src/containers/account/mypage/AccountMypageContainer.js
+++ b/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}
--- a/src/modules/account/login/models/authModel.ts
+++ b/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;
 }
--- a/src/modules/account/login/sagas/authSaga.ts
+++ b/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
        })