...

1 files changed, 25 insertions, 1 deletions

diff --git a/FrontEnd/src/views/register/index.tsx b/FrontEnd/src/views/register/index.tsx
index 9108b789..a08dca09 100644
--- a/FrontEnd/src/views/register/index.tsx
+++ b/FrontEnd/src/views/register/index.tsx
@@ -7,8 +7,27 @@ 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>
       <InputPanel
@@ -30,11 +49,16 @@ const RegisterPage: React.FC = () => {
           { type: "text", label: "register.registerCode" },
         ]}
         values={[username, password, confirmPassword, registerCode]}
-        onChange={(values) => {
+        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}
       />