비밀번호 변경(미완성)

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({
+// const SignupSchema = yup.object().shape({
-    userPswd: yup
+//     userPswd: yup
-        .string()
+//         .string()
-        .required('비밀번호를 입력해 주세요.'),
+//         .required('비밀번호를 입력해 주세요.'),
-    newPswd: yup
+//     newPswd: yup
-        .string()
+//         .string()
-        .required('비밀번호를 입력해 주세요.')
+//         .required('비밀번호를 입력해 주세요.')
-        .matches(
+//         .matches(
-            /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/,
+//             /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/,
-            '8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.'),
+//             '8 자 이상, 20 자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해 주세요.'),
-    newPswdConfirm: yup
+//     newPswdConfirm: yup
-        .string()
+//         .string()
-        .required('비밀번호 확인을 입력해 주세요.')
+//         .required('비밀번호 확인을 입력해 주세요.')
-        .oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.')
+//         .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 pwok() {
-    function handleUseHitory(){
+        //   dispatch(pwUpdateAction.request(data));
-      history.push('/');
+        dispatch(pwCheckAction.request(userPswd));
     }
+
     return (
         <Card>
-          <CardBody className='card-body-tab-cont'>
+            <CardBody className='card-body-tab-cont'>
-        <form onSubmit={handleSubmit(onSubmit)}>
+
-            <TabPane tabId='2'>
+                <TabPane tabId='2'>
-                <div className='search-info-box'>
+                    <div className='search-info-box'>
-                    <Row>
+                        <Row>
-                        <Col className='list-input' md='3' sm='12'>
+                            <Col className='list-input' md='3' sm='12'>
-                            <FormGroup>
+                                <FormGroup>
-                                <Label for='userPswd'>기존 비밀번호</Label>
+                                    <Label for='userPswd'>기존 비밀번호</Label>
-                                <Input type='password' innerRef={register} id='userPswd' name="userPswd" bsSize='sm' autoComplete='off' placeholder='' className={classnames({ 'is-invalid': errors.userPswd })} />
+                                    <Input type='password' id='userPswd' onChange={onChange} value={userPswd} name="userPswd" bsSize='sm' autoComplete='off' placeholder='' />
-                                {errors && errors.userPswd && (
+
-                                    <FormFeedback>{errors.userPswd.message} </FormFeedback>
+                                </FormGroup>
-                                )}
+                            </Col>
-                            </FormGroup>
+                            <div className='d-flex align-items-center'>
-                        </Col>
+                                <Button.Ripple className='mr-1' color='primary' onClick={pwok} size='sm'>확인</Button.Ripple>
-                        <Col className='list-input' md='3' sm='12'>
+                            </div>
-                            <FormGroup>
+                            <Col className='list-input' md='3' sm='12'>
-                                <Label for='newPswd'>새로운 비밀번호</Label>
+                                <FormGroup>
-                                <Input type='password' id='newPswd' innerRef={register} name="newPswd" bsSize='sm' autoComplete='off' placeholder='' className={classnames({ 'is-invalid': errors.newPswd })} />
+                                    <Label for='newPswd'>새로운 비밀번호</Label>
-                                {errors && errors.newPswd && (
+                                    <Input type='password' id='newPswd' name="newPswd" bsSize='sm' autoComplete='off' placeholder='' />
-                                    <FormFeedback>{errors.newPswd.message} </FormFeedback>
+                                </FormGroup>
-                                )}
+                            </Col>
-                            </FormGroup>
+                            <Col className='list-input' md='3' sm='12'>
-                        </Col>
+                                <FormGroup>
-                        <Col className='list-input' md='3' sm='12'>
+                                    <Label for='newPswdConfirm'>새로운 비밀번호 확인</Label>
-                            <FormGroup>
+                                    <Input type='password' id='newPswdConfirm' name="newPswdConfirm" bsSize='sm' autoComplete='off' placeholder='' />
-                                <Label for='newPswdConfirm'>새로운 비밀번호 확인</Label>
+
-                                <Input type='password' id='newPswdConfirm' innerRef={register} name="newPswdConfirm" bsSize='sm' autoComplete='off' placeholder='' className={classnames({ 'is-invalid': errors.newPswdConfirm })} />
+                                </FormGroup>
-                                {errors && errors.newPswdConfirm && (
+                            </Col>
-                                    <FormFeedback>{errors.newPswdConfirm.message} </FormFeedback>
+                        </Row>
-                                )}
+                    </div>
-                            </FormGroup>
+                    <div className='d-flex align-items-center'>
-                        </Col>
+                        <Button.Ripple className='mr-1' color='primary' onClick={pwSubmit} size='sm'>저장</Button.Ripple>
-                    </Row>
+                        <Button.Ripple color='danger' size='sm' onClick={handleUseHitory}>취소</Button.Ripple>
-                </div>
+                    </div>
-                <div className='d-flex align-items-center'>
+                </TabPane>
-                    <Button.Ripple className='mr-1' color='primary' type="submit" size='sm'>저장</Button.Ripple>
+            </CardBody>
-                    <Button.Ripple color='danger' size='sm'onClick={handleUseHitory}>취소</Button.Ripple>
+        </Card>
-                </div>
-            </TabPane>
-        </form>
-    </CardBody>
-    </Card>
     )
 }
 export default AccountMypagePwForm;

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}

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>;

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);
   },

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{
+export interface UserPw {
-  cstmrSno:string;
+  cstmrSno: string;
-  userPswd:string;
+  userPswd: string;
-  newPswd:string;
+  newPswd: string;
-  newPswdConfirm:string;
+  newPswdConfirm: string;
+}
+export interface UserPwCheck {
+  result: string;
 }
+
 export interface UserPwState {
   userPwPage: UserPw | undefined;
 }
 export const initResponseUserPwPageData = {
   userPwPage: undefined
-}
+};
 
 export const initResponseUserPageData = {
   userPage: undefined
-}
+};

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;
+      const data: UserPwCheck = action.payload;
-
+      draft.UserPwCheck = data;
-      draft.userPwPage = 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;
+  })
+);

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);
 }