From 58982bb786c6776c937e2360bd9bcd561d6dc54f Mon Sep 17 00:00:00 2001 From: sanguu Date: Fri, 2 Sep 2022 15:53:33 +0900 Subject: [PATCH] =?UTF-8?q?mypage(=EC=9E=91=EC=97=85=EC=A4=91)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../account/mypage/AccountMypageForm.js | 4 +- .../account/mypage/AccountMypagePwForm.js | 74 +++++++++++++++---- .../account/mypage/AccountMypageContainer.js | 18 ++++- .../account/login/actions/authAction.ts | 13 +++- src/modules/account/login/apis/authApi.ts | 9 ++- src/modules/account/login/models/authModel.ts | 2 - .../account/login/reducers/authReducer.ts | 4 +- src/modules/account/login/sagas/authSaga.ts | 43 +++++++++++ 8 files changed, 140 insertions(+), 27 deletions(-) diff --git a/src/components/account/mypage/AccountMypageForm.js b/src/components/account/mypage/AccountMypageForm.js index f636c34c..03036f4e 100644 --- a/src/components/account/mypage/AccountMypageForm.js +++ b/src/components/account/mypage/AccountMypageForm.js @@ -12,7 +12,7 @@ import '../../../assets/css/custom.css'; //import {UserPageState,UserPageData,initResponseUserPageData} from '../../../../modules/account/login/models/authModel'; //const [detailData, setDetailData] = useState(userPage.UserPageData); -const AccountMypageForm = ({ userInfo, handler, formModal}) => { +const AccountMypageForm = ({ userInfo, handler, formModal,handlerUpdate}) => { return ( @@ -143,7 +143,7 @@ const AccountMypageForm = ({ userInfo, handler, formModal}) => { }
- 저장 + 저장 취소
diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js index accb0b93..18379ab7 100644 --- a/src/components/account/mypage/AccountMypagePwForm.js +++ b/src/components/account/mypage/AccountMypagePwForm.js @@ -1,50 +1,94 @@ // ** 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 { - Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup, Form, Input, Label, Button, + Card, CardBody, Row, Col, Nav, NavItem, NavLink, TabContent, TabPane, Alert, FormGroup,FormFeedback, Form, Input, Label, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap' - // ** Styles import '../../../assets/css/custom.css'; +import classnames from 'classnames'; +import { pwUpdateAction } from '../../../modules/account/login/actions/authAction'; + + 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자 미만 영문자/숫자/특수문자(@$!%*#?&) 조합하여 입력해주세요.'), + pswdCheck: yup + .string() + .required('비밀번호 확인을 입력해 주세요.') + .oneOf([yup.ref('newPswd'), null], '비밀번호가 일치하지 않습니다.') +}); -const AccountMypagePwForm = ({ userInfo, formModal }) => { +const AccountMypagePwForm = ({user}) => { + + const { register,errors,handleSubmit } = useForm({ + defaultValues: { + cstmrSno: user.cstmrSno, + userPswd: '', + newPswd: '', + newPswdConfirm: '' + }, + resolver: yupResolver(SignupSchema) + }); + const dispatch = useDispatch(); + const onSubmit = data => { + console.log("sdds",data); + dispatch(pwUpdateAction.request(data)); + } +// const res = await pwAPI.register({ +// data: data, +// agreeTerms: agreeTerms +// }); return ( +
- - - + + {errors && errors.userPswd && ( + {errors.userPswd.message} + )} -
- -
+ + {errors && errors.newPswd && ( + {errors.newPswd.message} + )} -
- - -
+ + + {errors && errors.newPswdConfirm && ( + {errors.newPswdConfirm.message} + )}
- 저장 + 저장 취소
+ ) } export default AccountMypagePwForm; diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js index 009fb867..ab4c7566 100644 --- a/src/containers/account/mypage/AccountMypageContainer.js +++ b/src/containers/account/mypage/AccountMypageContainer.js @@ -13,7 +13,7 @@ import { import AccountMypagePwForm from '../../../components/account/mypage/AccountMypagePwForm'; import AccountMypageForm from '../../../components/account/mypage/AccountMypageForm'; -import { userPageAction } from '../../../modules/account/login/actions/authAction'; +import { userPageAction, userupdateAction } from '../../../modules/account/login/actions/authAction'; // ** Function to toggle tabs const AccountMypageContainer = () => { @@ -35,14 +35,21 @@ const AccountMypageContainer = () => { useEffect(() => { if (user) { + console.log(">>>",user); dispatch(userPageAction.request(user.cstmrSno)); } }, []); - + const handler = () => { setFormModal(!formModal) } + //업데이트 + const handlerUpdate = () => { + dispatch(userupdateAction.request(user)); + }; + + return (
@@ -66,12 +73,17 @@ const AccountMypageContainer = () => { toggle={toggle} handler={handler} formModal={formModal} + handlerUpdate={handlerUpdate} /> : <> } {activeTab == 2 ? - + : <> } diff --git a/src/modules/account/login/actions/authAction.ts b/src/modules/account/login/actions/authAction.ts index ca330e99..d84bcf06 100644 --- a/src/modules/account/login/actions/authAction.ts +++ b/src/modules/account/login/actions/authAction.ts @@ -24,6 +24,10 @@ const USERS_UPDATE_REQUEST = 'auth/USERS_UPDATE_REQUEST'; const USERS_UPDATE_SUCCESS = 'auth/USERS_UPDATE_SUCCESS'; const USERS_UPDATE_FAILURE = 'auth/USERS_UPDATE_FAILURE'; +const USERS_PWUPDATE_REQUEST = 'auth/USERS_PWUPDATE_REQUEST'; +const USERS_PWUPDATE_SUCCESS = 'auth/USERS_PWUPDATE_SUCCESS'; +const USERS_PWUPDATE_FAILURE = 'auth/USERS_PWUPDATE_FAILURE'; + export const login = createAsyncAction( USERS_LOGIN_REQUEST, USERS_LOGIN_SUCCESS, @@ -48,7 +52,7 @@ export const refresh = createAsyncAction( USERS_LOGOUT_FAILURE )(); -export const USER_UPDATE = createAsyncAction( +export const userupdateAction = createAsyncAction( USERS_UPDATE_REQUEST, USERS_UPDATE_SUCCESS, USERS_UPDATE_FAILURE @@ -60,12 +64,19 @@ export const userPageAction = createAsyncAction( USERS_USERPAGE_FAILURE )(); +export const pwUpdateAction = createAsyncAction( + USERS_PWUPDATE_REQUEST, + USERS_PWUPDATE_SUCCESS, + USERS_PWUPDATE_FAILURE +)(); + const actions = { login, check, logout, refresh, userPageAction, + pwUpdateAction }; export type AuthAction = ActionType; diff --git a/src/modules/account/login/apis/authApi.ts b/src/modules/account/login/apis/authApi.ts index e85b2231..f9e7e0cb 100644 --- a/src/modules/account/login/apis/authApi.ts +++ b/src/modules/account/login/apis/authApi.ts @@ -23,8 +23,11 @@ export const authAPI = { return await axios.get(`api/acnt/cstmr/profile/${id}`); }, updateUser: async (data: UserPageData) => { - const res = await axios.put('api/acnt/cstmr/update', data); return res; - } -}; + }, + pwupdate: async (data: UserPageData) => { + return await axios.post('api/acnt/cstmr/register', data); + }, + +} diff --git a/src/modules/account/login/models/authModel.ts b/src/modules/account/login/models/authModel.ts index d54969cf..bbe2908c 100644 --- a/src/modules/account/login/models/authModel.ts +++ b/src/modules/account/login/models/authModel.ts @@ -69,8 +69,6 @@ export interface UserPageData { email: string; hpno: string; userId: string; - updateuserId:string; - updateDt:string; } export const initResponseUserPageData = { diff --git a/src/modules/account/login/reducers/authReducer.ts b/src/modules/account/login/reducers/authReducer.ts index c43d8549..e35cd28a 100644 --- a/src/modules/account/login/reducers/authReducer.ts +++ b/src/modules/account/login/reducers/authReducer.ts @@ -85,4 +85,6 @@ export const authReducer = createReducer(initialState) draft.userPage = data; }) - ) \ No newline at end of file + ) + + \ No newline at end of file diff --git a/src/modules/account/login/sagas/authSaga.ts b/src/modules/account/login/sagas/authSaga.ts index 4fd66247..1b58fde3 100644 --- a/src/modules/account/login/sagas/authSaga.ts +++ b/src/modules/account/login/sagas/authSaga.ts @@ -139,6 +139,49 @@ function* userPageSaga( } } +// function* updateSaga(action: ActionType) { +// try { +// const detail = action.payload; +// const res = yield call(Apis.dronAPI.update, detail); + +// const { data } = res; + +// if (data.result) { +// yield put( +// MessageActions.IS_MESSAGE({ +// messageCode: SAVE_MESSAGE.code, +// message: SAVE_MESSAGE.message, +// isHistoryBack: true, +// isRefresh: false +// }) +// ); +// } else { +// if (data.errorCode === 'DT002') { +// yield put( +// MessageActions.IS_ERROR({ +// errorCode: DUPLATE_MESSAGE.code, +// errorMessage: '제작번호 ' + DUPLATE_MESSAGE.message, +// isHistoryBack: false, +// isRefresh: false +// }) +// ); +// } else { +// throw Error; +// } +// } +// } catch (error) { +// yield put( +// MessageActions.IS_ERROR({ +// errorCode: ERROR_MESSAGE.code, +// errorMessage: ERROR_MESSAGE.message, +// isHistoryBack: false, +// isRefresh: false +// }) +// ); +// // yield put(Actions.GROUP_UPDATE.failure(error)); +// } +// } + export function* authSaga() { yield takeEvery(Actions.login.request, userLoginSaga); yield takeEvery(Actions.check.request, checkAuthencationSaga);