-
Notifications
You must be signed in to change notification settings - Fork 0
/
ForgotPasswordForm.jsx
155 lines (139 loc) · 4.41 KB
/
ForgotPasswordForm.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import React, { useEffect, useState } from "react";
import { Col, Container } from "react-bootstrap";
import { post } from "../axios";
import ForgotPasswordSendEmailForm from "../Form/ForgotPasswordSendEmailForm";
import ForgotPasswordSendVerifyCodeForm from "../Form/ForgotPasswordSendVerifyCodeForm";
import PageTitleHeading from "../../components/PageTitleHeading";
import { useNavigate } from "react-router-dom";
const SUCCESS_MESSAGES = {
SEND_OTP_MAIL: "信件發送成功",
VERIFY_CODE: "驗證成功",
GENERAL: "請求成功",
};
// 提取常數
const ERROR_MESSAGES = {
FREQUENT_REQUEST: "請求過於頻繁,請1分鐘後再試",
GENERAL_ERROR: "請求發生錯誤,請稍後再試",
};
export default function ForgotPasswordForm() {
const navigate = useNavigate();
const user = JSON.parse(
localStorage?.getItem("user") || sessionStorage?.getItem("user")
);
const [usrInfo, setUsrInfo] = useState({
userSendOTPAccount: "",
userSendOTPMail: "",
});
const [verifyCode, setVerifyCode] = useState("");
// 設定忘記密碼頁面狀態
const [forgotPasswordState, setForgotPasswordState] = useState(0);
// 此為倒數計時器,用於驗證碼發送後的倒數計時防止重複發送
const [counter, setCounter] = useState(0);
useEffect(() => {
if (counter > 0) {
setTimeout(() => setCounter(counter - 1), 1000);
}
}, [counter]);
// useEffect(() => {
// if (forgotPasswordState === 1) {
// setCounter(0);
// }
// }, [forgotPasswordState]);
// 設定初始信箱值
const [initUserValues, setInitUserValues] = useState({
userSendOTPAccount: "",
userSendOTPMail: user?.client_email ? user.client_email : "",
});
// 向後端請求發送驗證發送信件
const postOTPMail = async (userToRewrite) => {
try {
const response = await post(`visitor/findAccount`, userToRewrite);
} catch (error) {
const errorMessage = error.response.data.error;
let alertMessage = ERROR_MESSAGES.GENERAL_ERROR;
console.log(error);
switch (errorMessage) {
case "信件發送失敗":
case "請求過於頻繁,請1分鐘後再試":
alertMessage = errorMessage;
break;
default:
break;
}
alert(alertMessage);
}
};
const postVerifyCode = async (userToRewrite) => {
try {
const response = await post(`visitor/rewritePassword`, userToRewrite);
navigate("/rewritePasswordPage", {
replace: true,
state: { verifyCode: verifyCode, user: initUserValues },
});
} catch (error) {
const errorMessage = error.response.data.error;
let alertMessage = ERROR_MESSAGES.GENERAL_ERROR;
console.log(error);
switch (errorMessage) {
case "驗證碼錯誤":
case "驗證碼錯誤次數過多,請重新發送驗證碼":
case "驗證碼已過期,請重新發送驗證碼":
case "驗證碼請求逾時,請重新發送驗證碼":
alertMessage = errorMessage;
break;
default:
break;
}
alert(alertMessage);
}
};
const handleEmailSubmit = (values) => {
const userToRewrite = {
userIdentity: values.userSendOTPAccount,
mail: values.userSendOTPMail,
};
// setInitUserValues to update email and account
setInitUserValues(values);
postOTPMail(userToRewrite);
setForgotPasswordState(1);
};
const handleVerifyCodeSubmit = () => {
const userToRewrite = {
userIdentity: initUserValues.userSendOTPAccount,
clientVerificationCode: verifyCode,
};
postVerifyCode(userToRewrite);
};
const stateChangePage = () => {
switch (forgotPasswordState) {
case 0:
return (
<ForgotPasswordSendEmailForm
initialValues={initUserValues}
onSubmit={handleEmailSubmit}
/>
);
case 1:
return (
<ForgotPasswordSendVerifyCodeForm
email={initUserValues.userSendOTPMail}
verifyCode={verifyCode}
setVerifyCode={setVerifyCode}
resendOTPMail={postOTPMail}
onSubmit={handleVerifyCodeSubmit}
setForgotPasswordState={setForgotPasswordState}
/>
);
default:
break;
}
};
return (
<Container>
<Col>
<PageTitleHeading text="忘記密碼" styleOptions={6} />
</Col>
{stateChangePage()}
</Container>
);
}