✨ feat:

注册添加密码

src/api/index.ts

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

src/components/EmailForm.tsx

@@ -21,6 +21,8 @@ function EmailForm() {
   const [email, setEmail] = useState("");
   const [authCode, setAuthCode] = useState("");
   const [shareCode, setShareCode] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [remainingTime, setRemainingTime] = useState(0);
   const { Lang } = useUserStore();
   const SilderVertifyRef = useRef<SilderVertify_handleType>(null);
@@ -75,7 +77,7 @@ function EmailForm() {
                       // start(60 * 1000);
                     },
                   });
-                  if (res.data.code == 1014) {
+                  if (res.data.code == 1021 || res.data.code == 1015) {
                     SilderVertifyRef.current?._init();
                     return;
                   }
@@ -122,6 +124,7 @@ function EmailForm() {
           authCode: authCode,
           shareCode: shareCode || formRef.current?.getFieldValue("shareCode"),
           userName: "",
+          password: Md5.hashStr(password),
         },
         config
       );
@@ -167,11 +170,14 @@ function EmailForm() {
           type="submit"
           color="primary"
           size="large"
-          onClick={handleSignUp}
+          // onClick={handleSignUp}
         >
           {t("register")}
         </Button>
       }
+      onFinish={() => {
+        handleSignUp();
+      }}
     >
       <Form.Item
         name="account"
@@ -185,6 +191,60 @@ function EmailForm() {
           onChange={(text) => setEmail(text)}
         />
       </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
         name="authCode"
         rules={[

src/components/PhoneForm.tsx

@@ -1,7 +1,13 @@
+/*
+ * @LastEditors: John
+ * @Date: 2024-06-06 21:23:46
+ * @LastEditTime: 2024-06-13 16:31:54
+ * @Author: John
+ */
 /*
  * @LastEditors: John
  * @Date: 2024-06-03 18:43:16
- * @LastEditTime: 2024-06-06 18:59:13
+ * @LastEditTime: 2024-06-13 15:56:56
  * @Author: John
  */
 import { useState, useEffect, useRef } from "react";
@@ -49,6 +55,8 @@ function PhoneForm() {
   const [authCode, setAuthCode] = useState("");
   const [shareCode, setShareCode] = useState("");
   const [remainingTime, setRemainingTime] = useState(0);
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const SilderVertifyRef = useRef<SilderVertify_handleType>(null);
 
   const gotoSelectCountry = () => {
@@ -105,7 +113,7 @@ function PhoneForm() {
                       // start(60 * 1000);
                     },
                   });
-                  if (res.data.code == 1014) {
+                  if (res.data.code == 1021 || res.data.code == 1015) {
                     SilderVertifyRef.current?._init();
                     return;
                   }
@@ -151,6 +159,7 @@ function PhoneForm() {
           authCode: authCode,
           shareCode: shareCode || formRef.current?.getFieldValue("shareCode"),
           userName: "",
+          password: Md5.hashStr(password),
         },
         config
       );
@@ -195,11 +204,14 @@ function PhoneForm() {
           type="submit"
           color="primary"
           size="large"
-          onClick={handleSignUp}
+          // onClick={handleSignUp}
         >
           {t("register")}
         </Button>
       }
+      onFinish={() => {
+        handleSignUp();
+      }}
     >
       <Form.Item
         name="account"
@@ -226,6 +238,58 @@ function PhoneForm() {
           />
         </div>
       </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
         name="authCode"
         rules={[

src/i18n/cn/translation.json

@@ -22,5 +22,9 @@
   "Send failure": "發送失敗",
   "Invalid phone number": "無效手機號碼",
   "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": "密碼不一致"
 }

src/i18n/en/translation.json

@@ -22,5 +22,9 @@
   "Send failure": "Send failure",
   "Invalid phone number": "Invalid phone number",
   "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"
 }

src/pages/SignIn.tsx

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