From b46c397989df15149803cc1607448dd83c8781a7 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 28 Apr 2022 23:03:56 +0800
Subject: ...

---
 FrontEnd/src/locales/en/translation.json       |  6 +++
 FrontEnd/src/locales/zh/translation.json       |  6 +++
 FrontEnd/src/views/common/input/InputPanel.tsx |  6 ++-
 FrontEnd/src/views/register/index.tsx          | 70 +++++++++++---------------
 4 files changed, 46 insertions(+), 42 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/locales/en/translation.json b/FrontEnd/src/locales/en/translation.json
index 548dcfe1..d325a9c9 100644
--- a/FrontEnd/src/locales/en/translation.json
+++ b/FrontEnd/src/locales/en/translation.json
@@ -24,6 +24,12 @@
     "register": "Only Registered Users",
     "public": "Public To Everyone"
   },
+  "register": {
+    "username": "Username",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "regsiterCode": "Register Code"
+  },
   "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..f6f1b0f2 100644
--- a/FrontEnd/src/locales/zh/translation.json
+++ b/FrontEnd/src/locales/zh/translation.json
@@ -17,6 +17,12 @@
     "register": "仅注册用户可见",
     "public": "对所有人公开"
   },
+  "register": {
+    "username": "用户名",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "regsiterCode": "注册码"
+  },
   "connectionState": {
     "Connected": "已连接",
     "Connecting": "正在连接",
diff --git a/FrontEnd/src/views/common/input/InputPanel.tsx b/FrontEnd/src/views/common/input/InputPanel.tsx
index 1270cc53..704330eb 100644
--- a/FrontEnd/src/views/common/input/InputPanel.tsx
+++ b/FrontEnd/src/views/common/input/InputPanel.tsx
@@ -72,7 +72,9 @@ 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 interface InputPanelProps<InputList extends readonly Input[]> {
   scheme: InputList;
@@ -81,7 +83,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..9108b789 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,37 @@ const RegisterPage: React.FC = () => {
   const [confirmPassword, setConfirmPassword] = React.useState<string>("");
   const [registerCode, setRegisterCode] = React.useState<string>("");
 
+  const [error, setError] = React.useState<InputPanelError>();
+
   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) => {
+          setUsername(values[0]);
+          setPassword(values[1]);
+          setConfirmPassword(values[2]);
+          setRegisterCode(values[3]);
+        }}
+        error={error}
+      />
     </div>
   );
 };
-- 
cgit v1.2.3