2 files changed, 96 insertions, 20 deletions
diff --git a/FrontEnd/src/views/register/index.css b/FrontEnd/src/views/register/index.css
new file mode 100644
index 00000000..c0078b28
--- /dev/null
+++ b/FrontEnd/src/views/register/index.css
@@ -0,0 +1,5 @@
+.register-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/FrontEnd/src/views/register/index.tsx b/FrontEnd/src/views/register/index.tsx
index a051cfaf..d8530fcf 100644
--- a/FrontEnd/src/views/register/index.tsx
+++ b/FrontEnd/src/views/register/index.tsx
@@ -1,7 +1,41 @@
 import React from "react";
-import InputPanel, { InputPanelError } from "../common/input/InputPanel";
+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 "../common/button";
+import InputPanel, {
+  hasError,
+  InputPanelError,
+} from "../common/input/InputPanel";
+
+import "./index.css";
+
+const validate = (values: string[], dirties: boolean[]): InputPanelError => {
+  const e: InputPanelError = {};
+  if (dirties[0] && values[0].length === 0) {
+    e[0] = "register.error.usernameEmpty";
+  }
+  if (dirties[1] && values[1].length === 0) {
+    e[1] = "register.error.passwordEmpty";
+  }
+  if (dirties[2] && values[2] !== values[1]) {
+    e[2] = "register.error.confirmPasswordWrong";
+  }
+  if (dirties[3] && values[3].length === 0) {
+    e[3] = "register.error.registerCodeEmpty";
+  }
+  return e;
+};
 
 const RegisterPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  const { t } = useTranslation();
+
   const [username, setUsername] = React.useState<string>("");
   const [password, setPassword] = React.useState<string>("");
   const [confirmPassword, setConfirmPassword] = React.useState<string>("");
@@ -9,27 +43,21 @@ const RegisterPage: React.FC = () => {
 
   const [dirty, setDirty] = React.useState<boolean[]>(new Array(4).fill(false));
 
-  const [error, setError] = React.useState<InputPanelError>();
+  const [process, setProcess] = React.useState<boolean>(false);
 
-  const validate = (): InputPanelError => {
-    const e: InputPanelError = {};
-    if (dirty[0] && username.length === 0) {
-      e[0] = "register.error.usernameEmpty";
-    }
-    if (dirty[1] && password.length === 0) {
-      e[1] = "register.error.passwordEmpty";
-    }
-    if (dirty[2] && confirmPassword !== password) {
-      e[2] = "register.error.confirmPasswordWrong";
-    }
-    if (dirty[3] && registerCode.length === 0) {
-      e[3] = "register.error.registerCodeEmpty";
+  const [inputError, setInputError] = React.useState<InputPanelError>();
+  const [resultError, setResultError] = React.useState<string | null>(null);
+
+  const user = useUser();
+
+  React.useEffect(() => {
+    if (user != null) {
+      navigate("/");
     }
-    return e;
-  };
+  });
 
   return (
-    <div className="container">
+    <div className="container register-page">
       <InputPanel
         scheme={[
           {
@@ -58,9 +86,52 @@ const RegisterPage: React.FC = () => {
           newDirty[index] = true;
           setDirty(newDirty);
 
-          setError(validate());
+          setInputError(validate(values, newDirty));
+        }}
+        error={inputError}
+        disable={process}
+      />
+      {resultError && <div className="cru-color-danger">{t(resultError)}</div>}
+      <LoadingButton
+        text="register.register"
+        loading={process}
+        disabled={hasError(inputError)}
+        onClick={() => {
+          const newDirty = dirty.slice().fill(true);
+          setDirty(newDirty);
+          const e = validate(
+            [username, password, confirmPassword, registerCode],
+            newDirty
+          );
+          if (hasError(e)) {
+            setInputError(e);
+          } else {
+            setProcess(true);
+            void getHttpTokenClient()
+              .register({
+                username,
+                password,
+                registerCode,
+              })
+              .then(
+                () => {
+                  void userService
+                    .login({ username, password }, true)
+                    .then(() => {
+                      navigate("/");
+                    });
+                },
+                (error) => {
+                  if (error instanceof HttpBadRequestError) {
+                    setResultError("register.error.registerCodeInvalid");
+                  } else {
+                    setResultError("error.network");
+                  }
+                  setProcess(false);
+                }
+              );
+          }
         }}
-        error={error}
       />
     </div>
   );