4 files changed, 148 insertions, 1 deletions
diff --git a/FrontEnd/src/pages/login/index.css b/FrontEnd/src/pages/login/index.css
index d78b3587..ef97359c 100644
--- a/FrontEnd/src/pages/login/index.css
+++ b/FrontEnd/src/pages/login/index.css
@@ -7,4 +7,8 @@
 .login-page-welcome {
   text-align: center;
   font-size: 2em;
+}
+
+.login-page-error {
+  color: var(--cru-danger-color);
 }
 \ No newline at end of file
diff --git a/FrontEnd/src/pages/login/index.tsx b/FrontEnd/src/pages/login/index.tsx
index 9aee455f..a09e32c3 100644
--- a/FrontEnd/src/pages/login/index.tsx
+++ b/FrontEnd/src/pages/login/index.tsx
@@ -111,7 +111,7 @@ export default function LoginPage() {
       <div className="login-page-container">
         <div className="login-page-welcome">{c("welcome")}</div>
         <InputGroup {...inputGroupProps} />
-        {error ? <p className="cru-color-danger">{c(error)}</p> : null}
+        {error ? <p className="login-page-error">{c(error)}</p> : null}
         <div className="login-page-button-row">
           <LoadingButton
             loading={process}
diff --git a/FrontEnd/src/pages/register/index.css b/FrontEnd/src/pages/register/index.css
new file mode 100644
index 00000000..c0078b28
--- /dev/null
+++ b/FrontEnd/src/pages/register/index.css
@@ -0,0 +1,5 @@
+.register-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/FrontEnd/src/pages/register/index.tsx b/FrontEnd/src/pages/register/index.tsx
new file mode 100644
index 00000000..bc474adb
--- /dev/null
+++ b/FrontEnd/src/pages/register/index.tsx
@@ -0,0 +1,138 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { HttpBadRequestError } from "@/http/common";
+import { getHttpTokenClient } from "@/http/token";
+import { userService, useUser } from "@/services/user";
+
+import { LoadingButton } from "@/views/common/button";
+import {
+  useInputs,
+  InputErrorDict,
+  InputGroup,
+} from "@/views/common/input/InputGroup";
+
+import "./index.css";
+
+export default function RegisterPage() {
+  const navigate = useNavigate();
+
+  const { t } = useTranslation();
+
+  const user = useUser();
+
+  const { hasErrorAndDirty, confirm, setAllDisabled, inputGroupProps } =
+    useInputs({
+      init: {
+        scheme: {
+          inputs: [
+            {
+              key: "username",
+              type: "text",
+              label: "register.username",
+            },
+            {
+              key: "password",
+              type: "text",
+              label: "register.password",
+              password: true,
+            },
+            {
+              key: "confirmPassword",
+              type: "text",
+              label: "register.confirmPassword",
+              password: true,
+            },
+            {
+              key: "registerCode",
+
+              type: "text",
+              label: "register.registerCode",
+            },
+          ],
+          validator: ({
+            username,
+            password,
+            confirmPassword,
+            registerCode,
+          }) => {
+            const result: InputErrorDict = {};
+            if (username === "") {
+              result["username"] = "register.error.usernameEmpty";
+            }
+            if (password === "") {
+              result["password"] = "register.error.passwordEmpty";
+            }
+            if (confirmPassword !== password) {
+              result["confirmPassword"] = "register.error.confirmPasswordWrong";
+            }
+            if (registerCode === "") {
+              result["registerCode"] = "register.error.registerCodeEmpty";
+            }
+            return result;
+          },
+        },
+        dataInit: {},
+      },
+    });
+
+  const [process, setProcess] = useState<boolean>(false);
+  const [resultError, setResultError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (user != null) {
+      navigate("/");
+    }
+  }, [navigate, user]);
+
+  return (
+    <div className="container register-page">
+      <InputGroup {...inputGroupProps} />
+      {resultError && <div className="cru-color-danger">{t(resultError)}</div>}
+      <LoadingButton
+        text="register.register"
+        loading={process}
+        disabled={hasErrorAndDirty}
+        onClick={() => {
+          const confirmResult = confirm();
+          if (confirmResult.type === "ok") {
+            const { username, password, registerCode } = confirmResult.values;
+            setProcess(true);
+            setAllDisabled(true);
+            void getHttpTokenClient()
+              .register({
+                username: username as string,
+                password: password as string,
+                registerCode: registerCode as string,
+              })
+              .then(
+                () => {
+                  void userService
+                    .login(
+                      {
+                        username: username as string,
+                        password: password as string,
+                      },
+                      true,
+                    )
+                    .then(() => {
+                      navigate("/");
+                    });
+                },
+                (error) => {
+                  if (error instanceof HttpBadRequestError) {
+                    setResultError("register.error.registerCodeInvalid");
+                  } else {
+                    setResultError("error.network");
+                  }
+                  setProcess(false);
+                  setAllDisabled(false);
+                },
+              );
+          }
+        }}
+      />
+    </div>
+  );
+}