1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import React from "react";
import InputPanel, { InputPanelError } from "../common/input/InputPanel";
const RegisterPage: React.FC = () => {
const [username, setUsername] = React.useState<string>("");
const [password, setPassword] = React.useState<string>("");
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 className="container">
<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, 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}
/>
</div>
);
};
export default RegisterPage;
|
