diff --git a/src/components/account/mypage/AccountMypagePwForm.js b/src/components/account/mypage/AccountMypagePwForm.js index 1681860..2df6428 100644 --- 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 ( - -
- -
- - - - - - {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 e33c6e3..712a13c 100644 --- 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 ? : <>} + {activeTab == 2 ? : <>}
(); +export const pwCheckAction = createAsyncAction( + USERS_PWCheck_REQUEST, + USERS_PWCheck_SUCCESS, + USERS_PWCheck_FAILURE +)(); + const actions = { login, check, @@ -87,7 +106,8 @@ const actions = { refresh, userPageAction, pwUpdateAction, - userDeleteAction + userDeleteAction, + pwCheckAction }; export type AuthAction = ActionType; diff --git a/src/modules/account/login/apis/authApi.ts b/src/modules/account/login/apis/authApi.ts index 7cd7ff7..810f665 100644 --- 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); }, diff --git a/src/modules/account/login/models/authModel.ts b/src/modules/account/login/models/authModel.ts index d0da920..5f354c1 100644 --- 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 -} +}; diff --git a/src/modules/account/login/reducers/authReducer.ts b/src/modules/account/login/reducers/authReducer.ts index 2b8b7da..4f368a3 100644 --- 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(initialState) .handleAction(login.success, (state, action) => produce(state, draft => { @@ -86,20 +96,27 @@ export const authReducer = createReducer(initialState) draft.isLogin = false; draft.user = undefined; }) - ); - export const mypageReducer = createReducer(initResponseUserPageData).handleAction(userPageAction.success, (state, action) => - produce(state, draft => { - const data: UserPageData = action.payload; - - draft.userPage = data; - }) ) - export const userPwReducer = createReducer(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( + initResponseUserPageData +).handleAction(userPageAction.success, (state, action) => + produce(state, draft => { + const data: UserPageData = action.payload; + draft.userPage = data; + }) +); +export const userPwReducer = createReducer( + initResponseUserPwPageData +).handleAction(pwUpdateAction.success, (state, action) => + produce(state, draft => { + const data: UserPw = action.payload; - \ No newline at end of file + draft.userPwPage = data; + }) +); diff --git a/src/modules/account/login/sagas/authSaga.ts b/src/modules/account/login/sagas/authSaga.ts index 401ba2e..64610ff 100644 --- 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 +) { + 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 ) { @@ -246,6 +284,7 @@ function* userPwSaga( ); } } + // function* updateSaga(action: ActionType) { // 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); }