feat:

注册添加密码
This commit is contained in:
john 2024-06-13 16:34:18 +08:00
parent b093323170
commit c2e89373b6
6 changed files with 146 additions and 10 deletions

View File

@ -43,6 +43,7 @@ export const signUp = <T>(
district?: string; // 二级区域:具体的区域 district?: string; // 二级区域:具体的区域
shareCode: string; // invitation code shareCode: string; // invitation code
userName: string; // 用户名称 userName: string; // 用户名称
password?: string;
}, },
config: AxiosRequestConfig config: AxiosRequestConfig
) => ) =>

View File

@ -21,6 +21,8 @@ function EmailForm() {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [authCode, setAuthCode] = useState(""); const [authCode, setAuthCode] = useState("");
const [shareCode, setShareCode] = useState(""); const [shareCode, setShareCode] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [remainingTime, setRemainingTime] = useState(0); const [remainingTime, setRemainingTime] = useState(0);
const { Lang } = useUserStore(); const { Lang } = useUserStore();
const SilderVertifyRef = useRef<SilderVertify_handleType>(null); const SilderVertifyRef = useRef<SilderVertify_handleType>(null);
@ -75,7 +77,7 @@ function EmailForm() {
// start(60 * 1000); // start(60 * 1000);
}, },
}); });
if (res.data.code == 1014) { if (res.data.code == 1021 || res.data.code == 1015) {
SilderVertifyRef.current?._init(); SilderVertifyRef.current?._init();
return; return;
} }
@ -122,6 +124,7 @@ function EmailForm() {
authCode: authCode, authCode: authCode,
shareCode: shareCode || formRef.current?.getFieldValue("shareCode"), shareCode: shareCode || formRef.current?.getFieldValue("shareCode"),
userName: "", userName: "",
password: Md5.hashStr(password),
}, },
config config
); );
@ -167,11 +170,14 @@ function EmailForm() {
type="submit" type="submit"
color="primary" color="primary"
size="large" size="large"
onClick={handleSignUp} // onClick={handleSignUp}
> >
{t("register")} {t("register")}
</Button> </Button>
} }
onFinish={() => {
handleSignUp();
}}
> >
<Form.Item <Form.Item
name="account" name="account"
@ -185,6 +191,60 @@ function EmailForm() {
onChange={(text) => setEmail(text)} onChange={(text) => setEmail(text)}
/> />
</Form.Item> </Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: t("Please enter password"),
},
{
validator: (_, v: string) => {
if (v && (v.length < 6 || v.length > 30)) {
return Promise.reject(
new Error(
t(
"Please ensure your password length is between 6 and 30 characters."
)
)
);
}
return Promise.resolve();
},
},
]}
>
<Input
type="password"
placeholder={t("Please enter password")}
value={password}
onChange={(v) => setPassword(v)}
/>
</Form.Item>
<Form.Item
name="confirmPassword"
rules={[
{
required: true,
message: t("Please enter confirm password"),
},
{
validator: (_, v: string) => {
if (v != password) {
return Promise.reject(new Error(t("Passwords do not match")));
}
return Promise.resolve();
},
},
]}
>
<Input
type="password"
placeholder={t("Please enter confirm password")}
value={confirmPassword}
onChange={(v) => setConfirmPassword(v)}
/>
</Form.Item>
<Form.Item <Form.Item
name="authCode" name="authCode"
rules={[ rules={[

View File

@ -1,7 +1,13 @@
/*
* @LastEditors: John
* @Date: 2024-06-06 21:23:46
* @LastEditTime: 2024-06-13 16:31:54
* @Author: John
*/
/* /*
* @LastEditors: John * @LastEditors: John
* @Date: 2024-06-03 18:43:16 * @Date: 2024-06-03 18:43:16
* @LastEditTime: 2024-06-06 18:59:13 * @LastEditTime: 2024-06-13 15:56:56
* @Author: John * @Author: John
*/ */
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
@ -49,6 +55,8 @@ function PhoneForm() {
const [authCode, setAuthCode] = useState(""); const [authCode, setAuthCode] = useState("");
const [shareCode, setShareCode] = useState(""); const [shareCode, setShareCode] = useState("");
const [remainingTime, setRemainingTime] = useState(0); const [remainingTime, setRemainingTime] = useState(0);
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const SilderVertifyRef = useRef<SilderVertify_handleType>(null); const SilderVertifyRef = useRef<SilderVertify_handleType>(null);
const gotoSelectCountry = () => { const gotoSelectCountry = () => {
@ -105,7 +113,7 @@ function PhoneForm() {
// start(60 * 1000); // start(60 * 1000);
}, },
}); });
if (res.data.code == 1014) { if (res.data.code == 1021 || res.data.code == 1015) {
SilderVertifyRef.current?._init(); SilderVertifyRef.current?._init();
return; return;
} }
@ -151,6 +159,7 @@ function PhoneForm() {
authCode: authCode, authCode: authCode,
shareCode: shareCode || formRef.current?.getFieldValue("shareCode"), shareCode: shareCode || formRef.current?.getFieldValue("shareCode"),
userName: "", userName: "",
password: Md5.hashStr(password),
}, },
config config
); );
@ -195,11 +204,14 @@ function PhoneForm() {
type="submit" type="submit"
color="primary" color="primary"
size="large" size="large"
onClick={handleSignUp} // onClick={handleSignUp}
> >
{t("register")} {t("register")}
</Button> </Button>
} }
onFinish={() => {
handleSignUp();
}}
> >
<Form.Item <Form.Item
name="account" name="account"
@ -226,6 +238,58 @@ function PhoneForm() {
/> />
</div> </div>
</Form.Item> </Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: t("Please enter password"),
},
{
validator: (_, v: string) => {
if (v && (v.length < 6 || v.length > 30)) {
return Promise.reject(
new Error(
t("password length is between 6 and 30 characters.")
)
);
}
return Promise.resolve();
},
},
]}
>
<Input
type="password"
placeholder={t("Please enter password")}
value={password}
onChange={(v) => setPassword(v)}
/>
</Form.Item>
<Form.Item
name="confirmPassword"
rules={[
{
required: true,
message: t("Please enter confirm password"),
},
{
validator: (_, v: string) => {
if (v != password) {
return Promise.reject(new Error(t("Passwords do not match")));
}
return Promise.resolve();
},
},
]}
>
<Input
type="password"
placeholder={t("Please enter confirm password")}
value={confirmPassword}
onChange={(v) => setConfirmPassword(v)}
/>
</Form.Item>
<Form.Item <Form.Item
name="authCode" name="authCode"
rules={[ rules={[

View File

@ -22,5 +22,9 @@
"Send failure": "發送失敗", "Send failure": "發送失敗",
"Invalid phone number": "無效手機號碼", "Invalid phone number": "無效手機號碼",
"Invalid email": "無效電子郵件", "Invalid email": "無效電子郵件",
"Complete security verification": "完成安全驗證" "Complete security verification": "完成安全驗證",
"Please enter password": "請輸入密碼",
"Please enter confirm password": "確認密碼",
"password length is between 6 and 30 characters.": "請確保您的密碼長度在6位到30位之間",
"Passwords do not match": "密碼不一致"
} }

View File

@ -22,5 +22,9 @@
"Send failure": "Send failure", "Send failure": "Send failure",
"Invalid phone number": "Invalid phone number", "Invalid phone number": "Invalid phone number",
"Invalid email": "Invalid email", "Invalid email": "Invalid email",
"Complete security verification": "Complete security verification" "Complete security verification": "Complete security verification",
"Please enter password": "Please enter password",
"Please enter confirm password": "Please enter confirm password",
"password length is between 6 and 30 characters.": "password length is between 6 and 30 characters.",
"Passwords do not match": "Passwords do not match"
} }

View File

@ -2,12 +2,15 @@ import { useState, useEffect } from "react";
import { useTranslation, getI18n } from "react-i18next"; import { useTranslation, getI18n } from "react-i18next";
import phoneIconSelect from "../assets/iconfont/phone_Select.svg"; import phoneIconSelect from "../assets/iconfont/phone_Select.svg";
import phoneIcon from "../assets/iconfont/phone.svg"; import phoneIcon from "../assets/iconfont/phone.svg";
import emailIconSelect from "../assets/iconfont/email_Select.svg";
import emailIcon from "../assets/iconfont/email.svg";
import Logo from "../assets/img/logo.png"; import Logo from "../assets/img/logo.png";
import "./SignIn.scss"; import "./SignIn.scss";
import PhoneForm from "../components/PhoneForm"; import PhoneForm from "../components/PhoneForm";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import useUserStore from "../store/user.ts"; import useUserStore from "../store/user.ts";
import { Popover } from "antd-mobile"; import { Popover } from "antd-mobile";
import EmailForm from "../components/EmailForm.tsx";
function SignIn() { function SignIn() {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
@ -100,13 +103,13 @@ function SignIn() {
<img src={Logo} alt="" /> <img src={Logo} alt="" />
</div> </div>
<div className="tabs"> <div className="tabs">
{/* <div <div
className={`tabs-button ${selectIndex === 0 && "selected"}`} className={`tabs-button ${selectIndex === 0 && "selected"}`}
onClick={handleTabs(0)} onClick={handleTabs(0)}
> >
<img src={selectIndex === 0 ? emailIconSelect : emailIcon} alt="" /> <img src={selectIndex === 0 ? emailIconSelect : emailIcon} alt="" />
<span>{t("E-mail")}</span> <span>{t("E-mail")}</span>
</div> */} </div>
<div <div
className={`tabs-button ${selectIndex === 1 && "selected"}`} className={`tabs-button ${selectIndex === 1 && "selected"}`}
onClick={handleTabs(1)} onClick={handleTabs(1)}
@ -115,7 +118,7 @@ function SignIn() {
<span>{t("phone")}</span> <span>{t("phone")}</span>
</div> </div>
</div> </div>
{/* {selectIndex === 0 && <EmailForm></EmailForm>} */} {selectIndex === 0 && <EmailForm></EmailForm>}
{selectIndex === 1 && <PhoneForm></PhoneForm>} {selectIndex === 1 && <PhoneForm></PhoneForm>}
<div className="to-download"> <div className="to-download">
<p style={{ color: "#999999" }}> <p style={{ color: "#999999" }}>