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/views/common/input/InputPanel.tsx |  6 ++-
 FrontEnd/src/views/register/index.tsx          | 70 +++++++++++---------------
 2 files changed, 34 insertions(+), 42 deletions(-)

(limited to 'FrontEnd/src/views')

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