4 files changed, 90 insertions, 42 deletions

diff --git a/FrontEnd/src/locales/en/translation.json b/FrontEnd/src/locales/en/translation.json
index 548dcfe1..f0c37f64 100644
--- a/FrontEnd/src/locales/en/translation.json
+++ b/FrontEnd/src/locales/en/translation.json
@@ -24,6 +24,18 @@
     "register": "Only Registered Users",
     "public": "Public To Everyone"
   },
+  "register": {
+    "username": "Username",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "regsiterCode": "Register Code",
+    "error": {
+      "usernameEmpty": "Username can't be empty.",
+      "passwordEmpty": "Password can't be emtpy.",
+      "confirmPasswordWrong": "Password does not match.",
+      "registerCodeEmpty": "Register code can't be empty."
+    }
+  },
   "serviceWorker": {
     "availableOffline": "Timeline is now cached in your computer and you can use it offline. 🎉🎉🎉",
     "upgradePrompt": "App is getting a new version!",
diff --git a/FrontEnd/src/locales/zh/translation.json b/FrontEnd/src/locales/zh/translation.json
index 58a9b2e6..cee92206 100644
--- a/FrontEnd/src/locales/zh/translation.json
+++ b/FrontEnd/src/locales/zh/translation.json
@@ -17,6 +17,18 @@
     "register": "仅注册用户可见",
     "public": "对所有人公开"
   },
+  "register": {
+    "username": "用户名",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "regsiterCode": "注册码",
+    "error": {
+      "usernameEmpty": "用户名不能为空。",
+      "passwordEmpty": "密码不能为空。",
+      "confirmPasswordWrong": "密码不匹配。",
+      "registerCodeEmpty": "注册码不能为空。"
+    }
+  },
   "connectionState": {
     "Connected": "已连接",
     "Connecting": "正在连接",
diff --git a/FrontEnd/src/views/common/input/InputPanel.tsx b/FrontEnd/src/views/common/input/InputPanel.tsx
index 1270cc53..3ac0cb04 100644
--- a/FrontEnd/src/views/common/input/InputPanel.tsx
+++ b/FrontEnd/src/views/common/input/InputPanel.tsx
@@ -72,7 +72,17 @@ type MapInputListToValueTypeList<Tuple extends readonly Input[]> = {
   [Index in keyof Tuple]: MapInputToValueType<Tuple[Index]>;
 } & { length: Tuple["length"] };
 
-export type OperationInputError = (I18nText | null | undefined)[];
+export type InputPanelError = {
+  [index: number]: I18nText | null | undefined;
+};
+
+export function hasError(e: InputPanelError | null | undefined): boolean {
+  if (e == null) return false;
+  for (const key in e) {
+    if (e[key] != null) return true;
+  }
+  return false;
+}
 
 export interface InputPanelProps<InputList extends readonly Input[]> {
   scheme: InputList;
@@ -81,7 +91,7 @@ export interface InputPanelProps<InputList extends readonly Input[]> {
     values: MapInputListToValueTypeList<InputList>,
     index: number
   ) => void;
-  error?: OperationInputError;
+  error?: InputPanelError;
   disable?: boolean;
 }
 
diff --git a/FrontEnd/src/views/register/index.tsx b/FrontEnd/src/views/register/index.tsx
index da59ef94..a08dca09 100644
--- a/FrontEnd/src/views/register/index.tsx
+++ b/FrontEnd/src/views/register/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import InputPanel, { InputPanelError } from "../common/input/InputPanel";
 
 const RegisterPage: React.FC = () => {
   const [username, setUsername] = React.useState<string>("");
@@ -6,48 +7,61 @@ const RegisterPage: React.FC = () => {
   const [confirmPassword, setConfirmPassword] = React.useState<string>("");
   const [registerCode, setRegisterCode] = React.useState<string>("");
 
+  const [dirty, setDirty] = React.useState<boolean[]>(new Array(4).fill(false));
+
+  const [error, setError] = React.useState<InputPanelError>();
+
+  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";
+    }
+    return e;
+  };
+
   return (
     <div>
-      <div>
-        <label>Username</label>
-        <input
-          type="text"
-          value={username}
-          onChange={(e) => {
-            setUsername(e.target.value);
-          }}
-        />
-      </div>
-      <div>
-        <label>Password</label>
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => {
-            setPassword(e.target.value);
-          }}
-        />
-      </div>
-      <div>
-        <label>Confirm Password</label>
-        <input
-          type="password"
-          value={confirmPassword}
-          onChange={(e) => {
-            setConfirmPassword(e.target.value);
-          }}
-        />
-      </div>
-      <div>
-        <label>Register Code</label>
-        <input
-          type="text"
-          value={registerCode}
-          onChange={(e) => {
-            setRegisterCode(e.target.value);
-          }}
-        />
-      </div>
+      <InputPanel
+        scheme={[
+          {
+            type: "text",
+            label: "register.username",
+          },
+          {
+            type: "text",
+            label: "register.password",
+            password: true,
+          },
+          {
+            type: "text",
+            label: "register.confirmPassword",
+            password: true,
+          },
+          { type: "text", label: "register.registerCode" },
+        ]}
+        values={[username, password, confirmPassword, registerCode]}
+        onChange={(values, index) => {
+          setUsername(values[0]);
+          setPassword(values[1]);
+          setConfirmPassword(values[2]);
+          setRegisterCode(values[3]);
+          const newDirty = dirty.slice();
+          newDirty[index] = true;
+          setDirty(newDirty);
+
+          setError(validate());
+        }}
+        error={error}
+      />
     </div>
   );
 };