비밀번호 변경(미완성)

2 years ago · 6877a53807
7 changed files with 197 additions and 107 deletions
--- a/src/components/account/mypage/AccountMypagePwForm.js
+++ b/src/components/account/mypage/AccountMypagePwForm.js
@ -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;
--- a/src/containers/account/mypage/AccountMypageContainer.js
+++ b/src/containers/account/mypage/AccountMypageContainer.js
@ -52,7 +52,6 @@ const AccountMypageContainer = () => {
  const [formModal, setFormModal] = useState(false);
  const { userPage } = useSelector(state => state.UserPageState);
  const { user } = useSelector(state => state.authState);
-  const { userPwPage } = useSelector(state => state.UserPwState);

  const [userInfo, setUserInfo] = useState();

@ -383,7 +382,7 @@ const AccountMypageContainer = () => {
      ) : (
        <></>
      )}
-      {activeTab == 2 ? <AccountMypagePwForm user={user} /> : <></>}
+      {activeTab == 2 ? <AccountMypagePwForm /> : <></>}
      <div className='vertically-centered-modal'>
        <Modal
          isOpen={modal.isOpen}
--- a/src/modules/account/login/actions/authAction.ts
+++ b/src/modules/account/login/actions/authAction.ts
@ -1,6 +1,14 @@
 import { AxiosError } from 'axios';
 import { ActionType, createAsyncAction } from 'typesafe-actions';
-import { TokenAccount, UserAccount,UserPw, UserData, UserPageData,UpdateData } from '../models/authModel';
+import {
+  TokenAccount,
+  UserAccount,
+  UserPw,
+  UserData,
+  UserPageData,
+  UpdateData,
+  UserPwCheck
+} from '../models/authModel';

 const USERS_LOGIN_REQUEST = 'auth/USERS_LOGIN_REQUEST';
 const USERS_LOGIN_SUCCESS = 'auth/USERS_LOGIN_SUCCESS';
@ -32,6 +40,11 @@ const USERS_DELETE_REQUEST = 'auth/USERS_DELETE_REQUEST';
 const USERS_DELETE_SUCCESS = 'auth/USERS_DELETE_SUCCESS';
 const USERS_DELETE_FAILURE = 'auth/USERS_DELETE_FAILURE';

+//mypage pwcheck
+const USERS_PWCheck_REQUEST = 'auth/USERS_PWCheck_REQUEST';
+const USERS_PWCheck_SUCCESS = 'auth/USERS_PWCheck_SUCCESS';
+const USERS_PWCheck_FAILURE = 'auth/USERS_PWCheck_FAILURE';
+
 export const login = createAsyncAction(
  USERS_LOGIN_REQUEST,
  USERS_LOGIN_SUCCESS,
@ -80,6 +93,12 @@ export const pwUpdateAction = createAsyncAction(
  USERS_PWUPDATE_FAILURE
 )<UserPw, UserPw, AxiosError>();

+export const pwCheckAction = createAsyncAction(
+  USERS_PWCheck_REQUEST,
+  USERS_PWCheck_SUCCESS,
+  USERS_PWCheck_FAILURE
+)<string, UserPwCheck, AxiosError>();
+
 const actions = {
  login,
  check,
@ -87,7 +106,8 @@ const actions = {
  refresh,
  userPageAction,
  pwUpdateAction,
-  userDeleteAction
+  userDeleteAction,
+  pwCheckAction
 };

 export type AuthAction = ActionType<typeof actions>;
--- a/src/modules/account/login/apis/authApi.ts
+++ b/src/modules/account/login/apis/authApi.ts
@ -32,6 +32,9 @@ export const authAPI = {
    const res = await axios.put('api/acnt/cstmr/profile/update', data);
    return res;
  },
+  pwcheck: async (userPswd: string) => {
+    return await axios.post('api/acnt/cstmr/profile/pwcheck', { userPswd });
+  },
  pwupdate: async (data: UserPw) => {
    return await axios.post('api/acnt/cstmr/profile/pswdupdate', data);
  },
--- a/src/modules/account/login/models/authModel.ts
+++ b/src/modules/account/login/models/authModel.ts
@ -59,7 +59,6 @@ export interface UserData {
  authNm: string;
 }

-
 export interface UserPageState {
  userPage: UserPageData | undefined;
 }
@ -77,22 +76,26 @@ export interface UpdateData {
  email: string;
  updateUserId: string;
  cstmrSno: string;
-  updateDt:string;
+  updateDt: string;
 }

-export interface UserPw{
-  cstmrSno:string;
-  userPswd:string;
-  newPswd:string;
-  newPswdConfirm:string;
+export interface UserPw {
+  cstmrSno: string;
+  userPswd: string;
+  newPswd: string;
+  newPswdConfirm: string;
+}
+export interface UserPwCheck {
+  result: string;
 }
+
 export interface UserPwState {
  userPwPage: UserPw | undefined;
 }
 export const initResponseUserPwPageData = {
  userPwPage: undefined
-}
+};

 export const initResponseUserPageData = {
  userPage: undefined
-}
+};
--- a/src/modules/account/login/reducers/authReducer.ts
+++ b/src/modules/account/login/reducers/authReducer.ts
@ -12,10 +12,20 @@ import {
  logout,
  refresh,
  pwUpdateAction,
-  userDeleteAction
+  userDeleteAction,
+  pwCheckAction
 } from '../actions/authAction';

-import { UserPageState, UserPageData, initResponseUserPageData,UserPwState,UserData,UserPw,initResponseUserPwPageData,} from '../models/authModel';
+import {
+  UserPageState,
+  UserPageData,
+  initResponseUserPageData,
+  UserPwState,
+  UserData,
+  UserPw,
+  initResponseUserPwPageData,
+  UserPwCheck
+} from '../models/authModel';

 export interface AuthState {
  pageLoading: boolean;
@ -24,7 +34,7 @@ export interface AuthState {
  message: string;
  user?: UserData;
  UserPw?: UserPw;
-
+  UserPwCheck?: UserPwCheck;
 }

 // reducers
@ -34,10 +44,10 @@ const initialState: AuthState = {
  isRefresh: false,
  user: undefined,
  message: '',
-  UserPw:undefined,
+  UserPw: undefined,
+  UserPwCheck: undefined
 };

-
 export const authReducer = createReducer<AuthState, AuthAction>(initialState)
  .handleAction(login.success, (state, action) =>
    produce(state, draft => {
@ -86,20 +96,27 @@ export const authReducer = createReducer<AuthState, AuthAction>(initialState)
      draft.isLogin = false;
      draft.user = undefined;
    })
-  );
-  export const mypageReducer = createReducer<UserPageState, AuthAction>(initResponseUserPageData).handleAction(userPageAction.success, (state, action) =>
-    produce(state, draft => {
-      const data: UserPageData = action.payload;
-
-      draft.userPage = data;
-    })
  )
-  export const userPwReducer = createReducer<UserPwState, AuthAction>(initResponseUserPwPageData).handleAction(pwUpdateAction.success, (state, action) =>
+  .handleAction(pwCheckAction.success, (state, action) =>
    produce(state, draft => {
-      const data: UserPw = action.payload;
-
-      draft.userPwPage = data;
+      const data: UserPwCheck = action.payload;
+      draft.UserPwCheck = data;
    })
-  )
+  );
+export const mypageReducer = createReducer<UserPageState, AuthAction>(
+  initResponseUserPageData
+).handleAction(userPageAction.success, (state, action) =>
+  produce(state, draft => {
+    const data: UserPageData = action.payload;
+    draft.userPage = data;
+  })
+);
+export const userPwReducer = createReducer<UserPwState, AuthAction>(
+  initResponseUserPwPageData
+).handleAction(pwUpdateAction.success, (state, action) =>
+  produce(state, draft => {
+    const data: UserPw = action.payload;

- 
+    draft.userPwPage = data;
+  })
+);
--- a/src/modules/account/login/sagas/authSaga.ts
+++ b/src/modules/account/login/sagas/authSaga.ts
@ -208,6 +208,44 @@ function* userUpdateSaga(
    );
  }
 }
+function* userPwCheckSaga(
+  action: ActionType<typeof Actions.pwCheckAction.request>
+) {
+  const controlId = action.payload;
+  try {
+    const { data } = yield call(authAPI.pwcheck, controlId);
+    yield put(Actions.pwCheckAction.success(data));
+    if (data.errorCode === '-1') {
+      yield put(
+        MessageActions.IS_ERROR({
+          errorCode: ERROR_MESSAGE.code,
+          errorMessage: '기존 비밀번호가 일치하지 않습니다.',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    } else {
+      yield put(
+        MessageActions.IS_MESSAGE({
+          messageCode: SAVE_MESSAGE.code,
+          message: SAVE_MESSAGE.message,
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+  } catch (error) {
+    yield put(
+      MessageActions.IS_ERROR({
+        errorCode: ERROR_MESSAGE.code,
+        errorMessage: '처리 중 에러입니다.',
+        isHistoryBack: false,
+        isRefresh: false
+      })
+    );
+  }
+}
+
 function* userPwSaga(
  action: ActionType<typeof Actions.pwUpdateAction.request>
 ) {
@ -246,6 +284,7 @@ function* userPwSaga(
    );
  }
 }
+
 // function* updateSaga(action: ActionType<typeof Actions.userupdateAction.request>) {
 //   try {
 //     const detail = action.payload;
@ -298,4 +337,5 @@ export function* authSaga() {
  yield takeEvery(Actions.pwUpdateAction.request, userPwSaga);
  yield takeEvery(Actions.userupdateAction.request, userUpdateSaga);
  yield takeEvery(Actions.userDeleteAction.request, userDeletePageSaga);
+  yield takeEvery(Actions.pwCheckAction.request, userPwCheckSaga);
 }