...

4 files changed, 47 insertions, 3 deletions

diff --git a/FrontEnd/src/locales/en/translation.json b/FrontEnd/src/locales/en/translation.json
index d325a9c9..f0c37f64 100644
--- a/FrontEnd/src/locales/en/translation.json
+++ b/FrontEnd/src/locales/en/translation.json
@@ -28,7 +28,13 @@
     "username": "Username",
     "password": "Password",
     "confirmPassword": "Confirm Password",
-    "regsiterCode": "Register Code"
+    "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. 🎉🎉🎉",
diff --git a/FrontEnd/src/locales/zh/translation.json b/FrontEnd/src/locales/zh/translation.json
index f6f1b0f2..cee92206 100644
--- a/FrontEnd/src/locales/zh/translation.json
+++ b/FrontEnd/src/locales/zh/translation.json
@@ -21,7 +21,13 @@
     "username": "用户名",
     "password": "密码",
     "confirmPassword": "确认密码",
-    "regsiterCode": "注册码"
+    "regsiterCode": "注册码",
+    "error": {
+      "usernameEmpty": "用户名不能为空。",
+      "passwordEmpty": "密码不能为空。",
+      "confirmPasswordWrong": "密码不匹配。",
+      "registerCodeEmpty": "注册码不能为空。"
+    }
   },
   "connectionState": {
     "Connected": "已连接",
diff --git a/FrontEnd/src/views/common/input/InputPanel.tsx b/FrontEnd/src/views/common/input/InputPanel.tsx
index 704330eb..3ac0cb04 100644
--- a/FrontEnd/src/views/common/input/InputPanel.tsx
+++ b/FrontEnd/src/views/common/input/InputPanel.tsx
@@ -76,6 +76,14 @@ 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;
   values: MapInputListToValueTypeList<InputList>;
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}
       />