feat: add Register.

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "6",
     "sweetalert2": "^11.4.20"
   },
   "devDependencies": {

src/components/App.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { useEffect, useReducer, useState } from "react";
 import config from "../config/server";
-import style from "../styles/App.module.scss";
 import Button from "./Button";
 import Input from "./Input";
+import Container from "./Container";
+import { Link } from "react-router-dom";
 
 import Swal from "sweetalert2";
 import "sweetalert2/src/sweetalert2.scss";
@@ -71,9 +72,7 @@ const App: React.FC = () => {
       return;
     }
     if (
-      !userData.email.match(
-        /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
-      )
+      !userData.email.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)
     ) {
       Swal.fire(
         "请输入正确的邮箱",
@@ -96,7 +95,6 @@ const App: React.FC = () => {
     setDisabled();
     let xhr = new XMLHttpRequest();
     xhr.open("POST", `${config.server.baseUrl}/account/log`, false);
-   // xhr.setRequestHeader("content-type", "application/json");
     xhr.send(
       JSON.stringify({ email: userData.email, pass: userData.password })
     );
@@ -106,25 +104,23 @@ const App: React.FC = () => {
   };
 
   return (
-    <div className={style.loginContainer}>
-      <main className={style.login}>
-        <div className={style.loginForm}>
-          <h1>Login</h1>
-          {fields.map((field, index) => (
-            <Input
-              onChange={(e) => handleFormInput(e, field)}
-              value={userData[field.objName as UserDataField]}
-              type={field.type}
-              placeholder={field.name}
-              key={index}
-            />
-          ))}
-          <Button disabled={disabled} onClick={login}>
-            Login
-          </Button>
-        </div>
-      </main>
-    </div>
+    <Container>
+      <h1>Login</h1>
+      {fields.map((field, index) => (
+        <Input
+          onChange={(e) => handleFormInput(e, field)}
+          value={userData[field.objName as UserDataField]}
+          type={field.type}
+          placeholder={field.name}
+          key={index}
+        />
+      ))}
+      <Button disabled={disabled} onClick={login}>
+        Login
+      </Button>
+      <hr style={{margin: "1.2rem"}} />
+      <p style={{fontSize: "15px"}}>没有账号？<Link to={"/reg"}>注册一个！</Link></p>
+    </Container>
   );
 };
 

src/components/Container.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import style from "../styles/App.module.scss";
+
+const Container: React.FC<{children: React.ReactNode}> = (props) => {
+    const children = props.children
+    return (
+      <div className={style.loginContainer}>
+        <main className={style.login}>
+          <div className={style.loginForm}>{children}</div>
+        </main>
+      </div>
+    );
+}
+
+export default Container

src/main.tsx

@@ -1,10 +1,17 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './components/App'
-import './styles/index.scss'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Reg from "./routes/Reg"
+import App from "./components/App";
+import "./styles/index.scss";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <BrowserRouter>
+    <React.StrictMode>
+    <Routes>
+      <Route path="/" element={<App />} />
+      <Route path="reg" element={<Reg />} />
+    </Routes>
+    </React.StrictMode>
+  </BrowserRouter>
+);

src/routes/Reg.tsx

@@ -0,0 +1,87 @@
+import Container from "../components/Container";
+import Input from "../components/Input";
+import Button from "../components/Button";
+import { useEffect, useState } from "react";
+import config from "../config/server";
+import Swal from "sweetalert2";
+import "sweetalert2/src/sweetalert2.scss";
+
+export default function () {
+  let [userName, setUserName] = useState(""),
+    [email, setEmail] = useState(""),
+    [password, setPassword] = useState(""),
+    [verifyNumber, setVn] = useState("");
+
+  useEffect(() => {
+    document.title = "Register - EHWorld";
+  }, []);
+
+  return (
+    <Container>
+      <h1>Register</h1>
+      <Input
+        onChange={(e) => setUserName(e.target.value)}
+        value={userName}
+        type={"text"}
+        placeholder={"用户名"}
+      />
+      <Input
+        onChange={(e) => setEmail(e.target.value)}
+        value={email}
+        type={"text"}
+        placeholder={"邮箱"}
+      />
+      <Input
+        onChange={(e) => setPassword(e.target.value)}
+        value={password}
+        type={"password"}
+        placeholder={"密码"}
+      />
+      <Input
+        onChange={(e) => setVn(e.target.value)}
+        value={verifyNumber}
+        type={"text"}
+        placeholder={"验证码"}
+      />
+      <Button
+        style={{ marginRight: "30px" }}
+        onClick={() => {
+          if (!email.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)) {
+            Swal.fire(
+              "请输入正确的邮箱",
+              "检测到您输入的邮箱不是正确邮箱格式，请重新输入后再试",
+              "error"
+            );
+            return;
+          }
+          fetch(`${config.server.baseUrl}/account/getvn?email=${email}`)
+          .catch(
+            () => Swal.fire("发送失败", "请检查您的网络连接", "error")
+          );
+          Swal.fire("Good job!", "发送成功，请检查邮箱", "success");
+        }}
+      >
+        发送验证码
+      </Button>
+      <Button
+        onClick={() => {
+          fetch(`${config.server.baseUrl}/account/reg`, {
+            method: "POST",
+            body: JSON.stringify({
+              username: userName,
+              pass: password,
+              email: email,
+              vernumber: verifyNumber,
+            }),
+          })
+            .then((res) => res.text())
+            .then((res) => {
+              Swal.fire("Good job!", res, "success");
+            });
+        }}
+      >
+        注册
+      </Button>
+    </Container>
+  );
+}

src/styles/App.module.scss

@@ -9,7 +9,7 @@
   text-align: center;
   justify-content: center;
   background-color: $background;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 .login {

src/styles/Input.module.scss

@@ -6,7 +6,6 @@
   padding: 10px;
   outline: transparent;
   transition: 0.3s;
-  transform: scale(1);
   background-color: $white;
   display: block;
   margin: 20px 0px 20px 0px;

src/styles/index.scss

@@ -15,4 +15,9 @@ code {
 * {
   box-sizing: border-box;
   user-select: none;
+}
+
+a {
+  text-decoration: none;
+  color: rgb(198, 228, 255);
 }

yarn.lock

@@ -201,6 +201,13 @@
     "@babel/plugin-syntax-jsx" "^7.18.6"
     "@babel/types" "^7.18.6"
 
+"@babel/runtime@^7.7.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
+  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
@@ -611,6 +618,13 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+history@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 immutable@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@@ -726,6 +740,21 @@ react-refresh@^0.13.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"
   integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
 
+react-router-dom@6:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
+[email protected]:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 react@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -740,6 +769,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 resolve@^1.22.0:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"