diff options
| -rw-r--r-- | FrontEnd/src/locales/en/translation.json | 8 | ||||
| -rw-r--r-- | FrontEnd/src/locales/zh/translation.json | 8 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/input/InputPanel.tsx | 8 | ||||
| -rw-r--r-- | FrontEnd/src/views/register/index.tsx | 26 |
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} /> |