1 files changed, 54 insertions, 40 deletions
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>
   );
 };