Skip to content

Commit 12cd7c0

Browse files
author
Ju
committed
Feat. authenticationNumber gnims-project#78 이메일 인증 기능,CSS완성
1 parent 3e96328 commit 12cd7c0

File tree

3 files changed

+284
-7
lines changed

3 files changed

+284
-7
lines changed

‎src/components/mypage/ChangePassword.jsx

+276
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
import React, { useEffect, useRef, useState } from "react";
2+
import Label from "../layout/Label";
3+
import LoginSignupInputBox from "../layout/input/LoginSignupInputBox";
4+
import IsModal from "../modal/Modal";
5+
import { useNavigate } from "react-router";
6+
import { UserApi } from "../../api/UserApi";
7+
8+
const ChangePassword = () => {
9+
const navigator = useNavigate();
10+
const passwordRef = useRef();
11+
const passwordCheckRef = useRef();
12+
13+
const email = sessionStorage.getItem("changePasswordEmail");
14+
const userId = sessionStorage.getItem("userId");
15+
16+
const [style, setStyle] = useState({
17+
bgColorPassword: "bg-inputBox",
18+
shadowPassword: "",
19+
bgColorPasswordCheck: "bg-inputBox",
20+
shadowPasswordCheck: "",
21+
});
22+
const [regulation, SetRegulation] = useState({
23+
passwordError: "",
24+
passwordCheckError: "",
25+
});
26+
const [isOpen, setOpen] = useState(false);
27+
const [ModalStr, setModalStr] = useState({
28+
modalTitle: "",
29+
modalMessage: "",
30+
});
31+
const [isLoding, setIsLoding] = useState(false);
32+
const [InputCheck, setInputCheck] = useState({ input: false, modal: false });
33+
const [dobleChcek, setDoubleCheck] = useState(false);
34+
35+
const passwordRegulationExp = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/;
36+
37+
const onModalOpen = () => {
38+
setOpen({ isOpen: true });
39+
};
40+
const onMoalClose = () => {
41+
setOpen({ isOpen: false });
42+
if (InputCheck.modal && userId) {
43+
navigator("/main");
44+
} else if (InputCheck.modal && email) {
45+
navigator("/login");
46+
} else if (!InputCheck.input && !InputCheck.modal) {
47+
navigator("/login/auth/InputEmail");
48+
}
49+
};
50+
51+
const onPassword = (event) => {
52+
const { id } = event.target;
53+
const passwordCurrent = passwordRef.current;
54+
const passwordCurrentCheck = passwordCheckRef.current;
55+
56+
if (id === "password") {
57+
console.log("event");
58+
setStyle(() => ({
59+
...style,
60+
bgColorPassword: "bg-inputBoxFocus",
61+
shadowPassword: "drop-shadow-inputBoxShadow",
62+
}));
63+
if (passwordCurrent.value.trim() === "") {
64+
setStyle(() => ({
65+
...style,
66+
bgColorPassword: "bg-inputBox",
67+
shadowPassword: "",
68+
}));
69+
}
70+
if (passwordRegulationExp.test(passwordCurrent.value)) {
71+
SetRegulation(() => ({
72+
...regulation,
73+
passwordError: "",
74+
}));
75+
} else {
76+
SetRegulation(() => ({
77+
...regulation,
78+
passwordError: "최소 8 자리에서 영대소문자와 숫자를 포함시켜주세요.",
79+
}));
80+
81+
passwordCurrent.focus();
82+
return;
83+
}
84+
if (passwordCurrentCheck.value === passwordCurrent.value) {
85+
setDoubleCheck(() => true);
86+
SetRegulation(() => ({
87+
...regulation,
88+
passwordError: "",
89+
}));
90+
} else {
91+
SetRegulation(() => ({
92+
...regulation,
93+
passwordError: "비밀번호와 일치하는지 확인해주세요.",
94+
}));
95+
setDoubleCheck(() => false);
96+
passwordCurrent.focus();
97+
return;
98+
}
99+
} else {
100+
setStyle(() => ({
101+
...style,
102+
bgColorPasswordCheck: "bg-inputBoxFocus",
103+
shadowPasswordCheck: "drop-shadow-inputBoxShadow",
104+
}));
105+
if (passwordCurrentCheck.value.trim() === "") {
106+
setStyle(() => ({
107+
...style,
108+
bgColorPasswordCheck: "bg-inputBox",
109+
shadowPasswordCheck: "",
110+
}));
111+
}
112+
if (passwordCurrentCheck.value === passwordCurrent.value) {
113+
setDoubleCheck(() => true);
114+
SetRegulation(() => ({
115+
passwordError: "",
116+
passwordCheckError: "",
117+
}));
118+
} else {
119+
SetRegulation(() => ({
120+
...regulation,
121+
passwordCheckError: "비밀번호와 일치하는지 확인해주세요.",
122+
}));
123+
setDoubleCheck(() => false);
124+
passwordCurrentCheck.focus();
125+
return;
126+
}
127+
}
128+
};
129+
const onSubmitPasswordChange = (event) => {
130+
event.preventDefault();
131+
132+
const passwordCurrent = passwordRef.current;
133+
const passwordCurrentCheck = passwordCheckRef.current;
134+
135+
if (passwordCurrent.value.trim() === "") {
136+
SetRegulation(() => ({
137+
...regulation,
138+
passwordError: "비밀번호를 입력해주세요",
139+
}));
140+
passwordCurrent.focus();
141+
return;
142+
} else {
143+
SetRegulation(() => ({
144+
...regulation,
145+
passwordError: "",
146+
}));
147+
}
148+
if (passwordCurrentCheck.value.trim() === "") {
149+
SetRegulation(() => ({
150+
...regulation,
151+
passwordCheckError: "비밀번확인란에 입력해주세요.",
152+
}));
153+
passwordCurrentCheck.focus();
154+
return;
155+
} else {
156+
SetRegulation(() => ({
157+
...regulation,
158+
passwordCheckError: "",
159+
}));
160+
}
161+
162+
if (dobleChcek) {
163+
onCangePassWordAxios({
164+
email: email,
165+
password: passwordCurrent.value,
166+
});
167+
} else {
168+
SetRegulation(() => ({
169+
...regulation,
170+
passwordCheckError: "비밀번호가 일치하지 않습니다.",
171+
}));
172+
passwordCurrentCheck.focus();
173+
return;
174+
}
175+
};
176+
177+
const onCangePassWordAxios = async (payload) => {
178+
try {
179+
setIsLoding(() => true);
180+
onModalOpen();
181+
const data = await UserApi.passwordChange(payload);
182+
setIsLoding(() => false);
183+
console.log(data);
184+
if (data.status === 200) {
185+
sessionStorage.removeItem("changePasswordEmail");
186+
setInputCheck(() => ({ ...InputCheck, modal: true }));
187+
setModalStr(() => ({
188+
...ModalStr,
189+
modalTitle: "비밀번호 변경을 성공했어요",
190+
modalMessage: "새로운 비밀번호로 변경이 되었습니다. ",
191+
}));
192+
}
193+
} catch (error) {
194+
const { data } = error.response;
195+
setIsLoding(() => false);
196+
if (data.status === 400) {
197+
setInputCheck(() => ({ input: false, modal: false }));
198+
setModalStr(() => ({
199+
...ModalStr,
200+
modalTitle: "비밀번호변경 실패",
201+
modalMessage:
202+
"인증번호가 유효하지 않습니다. \n 다시 인증요청을 재시도 해주세요.",
203+
}));
204+
}
205+
}
206+
};
207+
208+
useEffect(() => {
209+
const changePasswordEmail = sessionStorage.getItem("changePasswordEmail");
210+
if (!changePasswordEmail) {
211+
navigator("/login/auth/InputEmail");
212+
}
213+
}, []);
214+
215+
return (
216+
<div className="container ">
217+
<div className=" grid grid-flow-row ml-[20px] mr-[20px] mt-[55px]">
218+
<div className="mb-[4px]">
219+
<Label>새 비밀번호를 입력해주세요</Label>
220+
</div>
221+
<form className="w-full">
222+
<div className="flex flex-col gap-[12px]">
223+
<div>
224+
<LoginSignupInputBox
225+
id="password"
226+
type="password"
227+
placeholder="8~16자리 영문 대소문자,숫자 조합"
228+
onChange={onPassword}
229+
bgColor={style.bgColorPassword}
230+
shadow={style.shadowPassword}
231+
ref={passwordRef}
232+
/>
233+
</div>
234+
<div className="flex items-center h-[20px]">
235+
<p className=" w-full font-[500] text-[16px] text-[#DE0D0D] flex items-center">
236+
{regulation.passwordError}
237+
</p>
238+
</div>
239+
<div>
240+
<LoginSignupInputBox
241+
id="passwordCheck"
242+
type="password"
243+
placeholder="새 비밀번호 확인"
244+
onChange={onPassword}
245+
bgColor={style.bgColorPasswordCheck}
246+
shadow={style.shadowPasswordCheck}
247+
ref={passwordCheckRef}
248+
/>
249+
</div>
250+
<div className="flex items-center h-[20px]">
251+
<p className=" w-full font-[500] text-[16px] text-[#DE0D0D] flex items-center">
252+
{regulation.passwordCheckError}
253+
</p>
254+
</div>
255+
</div>
256+
<div>
257+
<button
258+
className="mt-[65px] w-full bg-[#002C51] h-[40px] rounded-[4px] font-[600] text-[#fff]"
259+
onClick={onSubmitPasswordChange}
260+
>
261+
확인
262+
</button>
263+
</div>
264+
</form>
265+
<IsModal
266+
isModalOpen={isOpen.isOpen}
267+
onMoalClose={onMoalClose}
268+
message={{ ModalStr }}
269+
isLoding={isLoding}
270+
/>
271+
</div>
272+
</div>
273+
);
274+
};
275+
276+
export default ChangePassword;

‎src/components/mypage/PasswordChange.jsx

-7
This file was deleted.

‎src/page/ChangePasswordPage.jsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import ChangePassword from "../components/mypage/ChangePassword";
3+
4+
const ChangePasswordPage = () => {
5+
return <ChangePassword />;
6+
};
7+
8+
export default ChangePasswordPage;

0 commit comments

Comments
 (0)