From ef65eee227646f071fc27d1b7be5255bfe12331d Mon Sep 17 00:00:00 2001 From: Kang Dongheon Date: Sun, 21 Jul 2024 18:39:18 +0900 Subject: [PATCH] fixed login and password --- src/app/(main)/account/page.js | 11 +- src/app/(main)/settings/page.js | 180 +++++++++++------- .../account-profile-details.js | 6 +- .../clubRegistration/account-profile.js | 4 +- src/components/common/callout.js | 43 +++++ 5 files changed, 165 insertions(+), 79 deletions(-) create mode 100644 src/components/common/callout.js diff --git a/src/app/(main)/account/page.js b/src/app/(main)/account/page.js index 21e2381..ecccce9 100644 --- a/src/app/(main)/account/page.js +++ b/src/app/(main)/account/page.js @@ -16,7 +16,6 @@ import { useRecoilState } from 'recoil'; import { UserState } from '@/utils/recoil/atoms'; const Account = () => { - const [user, setUser] = useRecoilState(UserState); const [clubData, setClubData] = useState(null); useEffect(() => { @@ -24,11 +23,11 @@ const Account = () => { .get(`/club/my`) .then((res) => { setClubData(res.data); - window.localStorage.setItem( - 'presidentContact', - res.data.presidentContact - ); - window.localStorage.setItem('presidentName', res.data.presidentName); + // window.localStorage.setItem( + // 'presidentContact', + // res.data.presidentContact + // ); + // window.localStorage.setItem('presidentName', res.data.presidentName); }) .catch((err) => { console.log(err); diff --git a/src/app/(main)/settings/page.js b/src/app/(main)/settings/page.js index 215d710..f165f96 100644 --- a/src/app/(main)/settings/page.js +++ b/src/app/(main)/settings/page.js @@ -17,7 +17,10 @@ import { DialogTitle, DialogActions, DialogContentText, + CircularProgress, + Backdrop, } from '@mui/material'; +import Callout from '@/components/common/callout'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; import styled from '@emotion/styled'; @@ -25,6 +28,10 @@ import CloseIcon from '@mui/icons-material/Close'; import axiosInterceptorInstance from '../../../../axios/axiosInterceptorInstance'; import { error } from '@/utils/theme/colors'; +import { useRecoilState } from 'recoil'; +import { UserState } from '@/utils/recoil/atoms'; +import { useUserLogoutApi } from '@/hooks/use-user'; + const BootstrapDialog = styled(Dialog)(({ theme }) => ({ '& .MuiDialogContent-root': { padding: theme.spacing(2), @@ -39,8 +46,14 @@ const Settings = () => { const [showPassword2, setShowPassword2] = useState(false); const [showPasswordConfirm, setShowPasswordConfirm] = useState(false); const [userId, setUserId] = useState(''); + const [backdropState, setBackdropState] = useState(false); + + const [user, setUser] = useRecoilState(UserState); const [passwordMatchError, setPasswordMatchError] = useState(false); + const [passwordBtnState, setPasswordBtnState] = useState(true); + + const [logout] = useUserLogoutApi(); const [inputValue, setInputValue] = useState({ presidentName: '', @@ -50,14 +63,19 @@ const Settings = () => { }); useEffect(() => { + user.role !== 'ROLE_USER' + ? null + : axiosInterceptorInstance.get(`/club/my`).then((res) => { + setInputValue({ + presidentName: res.data.presidentName, + presidentContact: res.data.presidentContact, + password1: '', + password2: '', + passwordConfirm: '', + }); + }); + setUserId(window.localStorage.getItem('userid')); - setInputValue({ - presidentName: window.localStorage.getItem('presidentName'), - presidentContact: window.localStorage.getItem('presidentContact'), - password1: '', - password2: '', - passwordConfirm: '', - }); }, []); const handleClickShowPassword1 = () => setShowPassword1((show) => !show); @@ -65,20 +83,6 @@ const Settings = () => { const handleClickShowPasswordConfirm = () => setShowPasswordConfirm((show) => !show); - const handleMouseDownPassword1 = (event) => { - event.preventDefault(); - }; - - const handleMouseDownPassword2 = (event) => { - event.preventDefault(); - // match with password 1 - }; - - const handleMouseDownPasswordConfirm = (event) => { - event.preventDefault(); - // match with password 1 - }; - const handleInputChange = (e) => { const { name, value } = e.target; @@ -93,9 +97,22 @@ const Settings = () => { } return false; }); + + setPasswordBtnState(() => { + if ( + value === inputValue.password1 && + value !== '' && + inputValue.password1 !== '' && + inputValue.password2 !== '' + ) { + return false; + } + return true; + }); }; const passwordChangeSubmit = () => { + setBackdropState(true); axiosInterceptorInstance .post( `/user/${userId}?password=${inputValue.password1}&name=${inputValue.presidentName}&contact=${inputValue.presidentContact}` @@ -106,9 +123,12 @@ const Settings = () => { password1: '', password2: '', })); + + logout(); }) .catch((error) => { alert(error); + setBackdropState(false); }); }; @@ -159,6 +179,12 @@ const Settings = () => { py: 8, }} > + theme.zIndex.drawer + 1 }} + open={backdropState} + > + + { {showPasswordConfirm ? ( @@ -234,64 +259,78 @@ const Settings = () => {
설정 페이지
+ + 유저네임, 전화번호 변경, 비밀번호 변경 후 자동으로 로그아웃 + 됩니다. +
+ 비밀번호 변경 버튼은 비밀번호가 일치할 때만 활성화됩니다. +
{/* Change password */} - + {user.role !== 'ROLE_USER' ? ( + + 관리자 계정은 인적사항 데이터가 존재하지 않습니다 + + ) : (
- - 유저네임 변경 - - -
+
+ + 유저네임 변경 + + +
-
- + + 전화번호 변경 + + +
+ + +
- - - + )} { {showPassword1 ? ( @@ -358,7 +396,6 @@ const Settings = () => { {showPassword2 ? ( @@ -389,6 +426,7 @@ const Settings = () => { marginBottom: '30px', }} onClick={passwordChangeSubmit} + disabled={passwordBtnState} > 비밀번호 변경 diff --git a/src/components/clubRegistration/account-profile-details.js b/src/components/clubRegistration/account-profile-details.js index 38dfc9c..761e17e 100644 --- a/src/components/clubRegistration/account-profile-details.js +++ b/src/components/clubRegistration/account-profile-details.js @@ -57,7 +57,11 @@ export const AccountProfileDetails = () => { return (
- + diff --git a/src/components/clubRegistration/account-profile.js b/src/components/clubRegistration/account-profile.js index 32c549b..4372ac8 100644 --- a/src/components/clubRegistration/account-profile.js +++ b/src/components/clubRegistration/account-profile.js @@ -57,7 +57,9 @@ export const AccountProfile = ({ clubId }) => { }; return ( - + + +

{emoji}

+

{title}

+ + {children} + + ); +} + +const CalloutContainer = styled.div` + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; + padding: 1.2rem; + background-color: #262626; + border-radius: 10px; +`; + +const TitleContainer = styled.div` + display: flex; + margin-bottom: 1rem; + gap: 1rem; + padding: 0; + & h2 { + margin: 0; + font-size: 1.5rem; + font-weight: bold; + color: #fff; + } +`; + +const BodyContainer = styled.div` + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: 100%; +`;