From b769e740b1e08222dec0e4394f4be1098030e121 Mon Sep 17 00:00:00 2001
From: lk <kelis@Gmail.com>
Date: Thu, 12 Sep 2024 17:38:39 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=20=20=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/use/login/index.tsx       | 25 ++++++++++++----
 src/pages/use/password/retrieve.tsx | 30 +++++++++++++++----
 src/pages/use/register/index.tsx    | 59 ++++++++++++++++++++++++++-----------
 src/pages/use/useTools.tsx          | 12 ++++++++
 src/service/system.ts               |  6 ++++
 src/store/system/user.ts            | 17 +++++++++--
 vite.config.ts                      |  2 +-
 7 files changed, 119 insertions(+), 32 deletions(-)
 create mode 100644 src/pages/use/useTools.tsx

diff --git a/src/pages/use/login/index.tsx b/src/pages/use/login/index.tsx
index 3ea50e5..a17945d 100644
--- a/src/pages/use/login/index.tsx
+++ b/src/pages/use/login/index.tsx
@@ -35,7 +35,7 @@ const Login = memo(() => {
     const email = emailform.getFieldValue("email");
     setCountdown(10);
     setIsButtonDisabled(true);
-    emailCodeMutate({ email });
+    emailCodeMutate({ is_register: false, email });
   };
   const emailhandleSubmit = (values: any) => {
     emailLoginMutate(values);
@@ -114,14 +114,19 @@ const Login = memo(() => {
                 height: "400px",
               }}
             >
-              <Tabs defaultActiveKey="1">
+              <Tabs defaultActiveKey="1" style={{ marginTop: "50px" }}>
                 <TabPane tab="邮箱密码登录" key="1">
                   <Form form={upform} onFinish={uphandleSubmit}>
                     <Form.Item name="username" rules={[{ required: true, message: "请输入邮箱" }]}>
                       <Input size="large" placeholder="请输入邮箱" prefix={<UserOutlined />} />
                     </Form.Item>
                     <Form.Item name="password" rules={[{ required: true, message: "请输入登录密码" }]}>
-                      <Input.Password size="large" placeholder="请输入登录密码" prefix={<LockOutlined />} />
+                      <Input.Password
+                        size="large"
+                        placeholder="请输入登录密码"
+                        prefix={<LockOutlined />}
+                        autoComplete="off"
+                      />
                     </Form.Item>
                     {/*<Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>*/}
                     {/*  <Input.Password size="large" placeholder="验证码" prefix={<LockOutlined />} />*/}
@@ -146,7 +151,12 @@ const Login = memo(() => {
                       />
                     </Form.Item>
                     <Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
-                      <Input.Password size="large" placeholder="请输入验证码" prefix={<LockOutlined />} />
+                      <Input.Password
+                        size="large"
+                        placeholder="请输入验证码"
+                        prefix={<LockOutlined />}
+                        autoComplete="off"
+                      />
                     </Form.Item>
                     <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                       登录
@@ -168,7 +178,12 @@ const Login = memo(() => {
                       />
                     </Form.Item>
                     <Form.Item name="code" rules={[{ required: true, message: "请输入飞机验证码" }]}>
-                      <Input.Password size="large" placeholder="请输入飞机验证码" prefix={<LockOutlined />} />
+                      <Input.Password
+                        size="large"
+                        placeholder="请输入飞机验证码"
+                        prefix={<LockOutlined />}
+                        autoComplete="off"
+                      />
                     </Form.Item>
                     <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                       登录
diff --git a/src/pages/use/password/retrieve.tsx b/src/pages/use/password/retrieve.tsx
index 96def37..7a6a32a 100644
--- a/src/pages/use/password/retrieve.tsx
+++ b/src/pages/use/password/retrieve.tsx
@@ -4,6 +4,7 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useAtomValue } from "jotai";
 import React, { memo, useEffect, useState } from "react";
 import { emailCodeAtom } from "@/store/system/user.ts";
+import {passwordRules} from "@/pages/use/useTools.tsx";
 const { Title, Text, Link } = Typography;
 
 const PwdRetrieve = memo(() => {
@@ -85,13 +86,32 @@ const PwdRetrieve = memo(() => {
                   />
                 </Form.Item>
                 <Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
-                  <Input size="large" placeholder="请输入验证码" prefix={<SecurityScanOutlined />} />
+                  <Input size="large" placeholder="请输入验证码" prefix={<SecurityScanOutlined />} autoComplete="off" />
                 </Form.Item>
-                <Form.Item name="password" rules={[{ required: true, message: "请输入新密码" }]}>
-                  <Input.Password size="large" placeholder="请输入新密码" prefix={<LockOutlined />} />
+                <Form.Item name="password" rules={passwordRules}>
+                  <Input.Password
+                    size="large"
+                    placeholder="请输入新密码"
+                    prefix={<LockOutlined />}
+                    autoComplete="off"
+                  />
                 </Form.Item>
-                <Form.Item name="confirmPassword" rules={[{ required: true, message: "请确认新密码" }]}>
-                  <Input.Password size="large" placeholder="请确认新密码" prefix={<LockOutlined />} />
+                <Form.Item
+                  name="confirmPassword"
+                  dependencies={["password"]}
+                  rules={[
+                    { required: true, message: "请确认密码" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        if (!value || getFieldValue("password") === value) {
+                          return Promise.resolve();
+                        }
+                        return Promise.reject(new Error("两次输入的密码不一致"));
+                      },
+                    }),
+                  ]}
+                >
+                  <Input.Password size="large" placeholder="请确认密码" prefix={<LockOutlined />} autoComplete="off" />
                 </Form.Item>
                 <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                   找回密码
diff --git a/src/pages/use/register/index.tsx b/src/pages/use/register/index.tsx
index 916e08f..7535355 100644
--- a/src/pages/use/register/index.tsx
+++ b/src/pages/use/register/index.tsx
@@ -1,32 +1,41 @@
 import { Layout, Input, Button, Typography, Row, Col, Form } from "antd";
 import { LockOutlined, MailOutlined, SecurityScanOutlined } from "@ant-design/icons";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import React, { memo, useEffect, useState } from "react";
-import { emailCodeAtom } from "@/store/system/user.ts";
+import { emailCodeAtom, emailRegisterAtom } from "@/store/system/user.ts";
+import { passwordRules } from "@/pages/use/useTools";
 const { Title, Text, Link } = Typography;
 
 const Register = memo(() => {
   const navigate = useNavigate();
   const [registerForm] = Form.useForm();
-  const { mutate: emailCodeMutate } = useAtomValue(emailCodeAtom);
-
-  const handleRegisterSubmit = (values: any) => {
-    console.log(values);
-    // 调用注册API
-  };
-
-  const handleGetCode = () => {
+  const { mutate: emailRegisterMutate } = useAtomValue(emailRegisterAtom);
+  const { mutateAsync: emailCodeMutate, data: emailData } = useAtomValue(emailCodeAtom);
+  //const [{ mutate: emailCodeMutate, data: emailData }] = useAtom(emailCodeAtom);
+  //const [, mutate: emailCodeMutate] = useAtom(emailCodeAtom);
+  const getEmailCode = () => {
     const email = registerForm.getFieldValue("email");
     setCountdown(10);
     setIsButtonDisabled(true);
-    emailCodeMutate({ email });
+    const data = emailCodeMutate({ is_register: true, email });
+    console.log(data);
+  };
+  const emailRegisterSubmit = (values: any) => {
+    emailRegisterMutate({ email: values.email, password: values.password, code: values.code });
   };
 
   const [countdown, setCountdown] = useState<number>(0);
   const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
 
   useEffect(() => {
+    if ((emailData as any)?.countdown === -1) {
+      setCountdown(0);
+      setIsButtonDisabled(false);
+    }
+  }, [emailData]);
+
+  useEffect(() => {
     let timer: number;
     if (countdown > 0) {
       timer = setTimeout(() => setCountdown(countdown - 1), 1000);
@@ -71,27 +80,41 @@ const Register = memo(() => {
                 height: "500px",
               }}
             >
-              <Form form={registerForm} onFinish={handleRegisterSubmit} style={{ marginTop: "50px" }}>
+              <Form form={registerForm} onFinish={emailRegisterSubmit} style={{ marginTop: "50px" }}>
                 <Form.Item name="email" rules={[{ required: true, message: "请输入邮箱" }]}>
                   <Input
                     size="large"
                     placeholder="请输入邮箱"
                     prefix={<MailOutlined />}
                     addonAfter={
-                      <Button onClick={handleGetCode} disabled={isButtonDisabled}>
+                      <Button onClick={getEmailCode} disabled={isButtonDisabled}>
                         {isButtonDisabled ? `${countdown}秒后重试` : "获得验证码"}
                       </Button>
                     }
                   />
                 </Form.Item>
                 <Form.Item name="code" rules={[{ required: true, message: "请输入验证码" }]}>
-                  <Input size="large" placeholder="请输入验证码" prefix={<SecurityScanOutlined />} />
+                  <Input size="large" placeholder="请输入验证码" prefix={<SecurityScanOutlined />} autoComplete="off" />
                 </Form.Item>
-                <Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
-                  <Input.Password size="large" placeholder="请输入密码" prefix={<LockOutlined />} />
+                <Form.Item name="password" rules={passwordRules}>
+                  <Input.Password size="large" placeholder="请输入密码" prefix={<LockOutlined />} autoComplete="off" />
                 </Form.Item>
-                <Form.Item name="confirmPassword" rules={[{ required: true, message: "请确认密码" }]}>
-                  <Input.Password size="large" placeholder="请确认密码" prefix={<LockOutlined />} />
+                <Form.Item
+                  name="confirmPassword"
+                  dependencies={["password"]}
+                  rules={[
+                    { required: true, message: "请确认密码" },
+                    ({ getFieldValue }) => ({
+                      validator(_, value) {
+                        if (!value || getFieldValue("password") === value) {
+                          return Promise.resolve();
+                        }
+                        return Promise.reject(new Error("两次输入的密码不一致"));
+                      },
+                    }),
+                  ]}
+                >
+                  <Input.Password size="large" placeholder="请确认密码" prefix={<LockOutlined />} autoComplete="off" />
                 </Form.Item>
                 <Button type="primary" htmlType="submit" style={{ width: "100%" }}>
                   注册
diff --git a/src/pages/use/useTools.tsx b/src/pages/use/useTools.tsx
new file mode 100644
index 0000000..a75a04a
--- /dev/null
+++ b/src/pages/use/useTools.tsx
@@ -0,0 +1,12 @@
+export const passwordRules = [
+  { required: true, message: "请输入密码" },
+  {
+    pattern: /^(?=.*[a-z])(?=.*[A-Z])|(?=.*[a-z])(?=.*\d)|(?=.*[a-z])(?=.*[!@#$%^&*])|(?=.*[A-Z])(?=.*\d)|(?=.*[A-Z])(?=.*[!@#$%^&*])|(?=.*\d)(?=.*[!@#$%^&*])/,
+    message: "密码必须包含至少两种字符类型：英文大写、英文小写、数字、符号",
+  },
+  {
+    min: 6,
+    max: 20,
+    message: "密码长度必须在6到20位之间",
+  },
+];
\ No newline at end of file
diff --git a/src/service/system.ts b/src/service/system.ts
index 514e2f6..a6b4373 100644
--- a/src/service/system.ts
+++ b/src/service/system.ts
@@ -23,6 +23,10 @@ const systemServ = {
   emailLogin: (data: any) => {
     return request.post<System.LoginResponse>("/sys/login/email", data);
   },
+  emailRegister: (data: any) => {
+    return request.post<System.LoginResponse>("/sys/email/reg", data);
+  },
+
 
   telegramCode: (data: any) => {
     return request.post<System.LoginResponse>("/sys/telegram", data);
@@ -32,6 +36,8 @@ const systemServ = {
     return request.post<System.LoginResponse>("/sys/login/telegram", data);
   },
 
+
+
   logout: () => {
     //
   },
diff --git a/src/store/system/user.ts b/src/store/system/user.ts
index f0dad0a..1726cfa 100644
--- a/src/store/system/user.ts
+++ b/src/store/system/user.ts
@@ -53,9 +53,9 @@ export const emailCodeAtom = atomWithMutation<any, any>((get) => ({
     return await systemServ.emailCode(params);
   },
   onSuccess: (res) => {
-    //message.success(t("login.success"));
-    // console.log('login success', res)
-    //get(userMenuDataAtom).refetch().then();
+    if(res.data.countdown===-1){
+      message.error(res.message);
+    }
     return res.data;
   },
   retry: false,
@@ -72,6 +72,17 @@ export const emailLoginAtom = atomWithMutation<any, any>((get) => ({
   },
   retry: false,
 }));
+export const emailRegisterAtom = atomWithMutation<any, any>((get) => ({
+  mutationKey: ["emailRegister"],
+  mutationFn: async (params) => {
+    return await systemServ.emailRegister(params);
+  },
+  onSuccess: (res) => {
+    // console.log('login success', res)
+    return res.data;
+  },
+  retry: false,
+}));
 
 export const telegramCodeAtom = atomWithMutation<any, any>((get) => ({
   mutationKey: ["telegramCode"],
diff --git a/vite.config.ts b/vite.config.ts
index d5b5925..d23ff6e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,7 +14,7 @@ const proxyMap = {
   //'/api/v1/certold': 'http://192.168.31.41:8000',
   "/api/v1/cert": "http://127.0.0.1:8000",
   //'/api/v1/cert': 'http://192.168.31.41:8000',
-  //"/api/v1/sys": "http://192.168.31.41:8686/",
+  "/api/v1/sys": "http://192.168.31.41:8686/",
 } as Record<any, string>;
 
 const proxyConfig = Object.keys(proxyMap).reduce(