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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Trans } from "react-i18next";
import { useUser, userService } from "~src/services/user";
import { useC } from "~src/components/common";
import LoadingButton from "~src/components/button/LoadingButton";
import { InputGroup, useInputs } from "~src/components/input/InputGroup";
import Page from "~src/components/Page";
import "./index.css";
export default function LoginPage() {
const c = useC();
const user = useUser();
const navigate = useNavigate();
const [process, setProcess] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const { hasErrorAndDirty, confirm, setAllDisabled, inputGroupProps } =
useInputs({
init: {
scheme: {
inputs: [
{
key: "username",
type: "text",
label: "user.username",
},
{
key: "password",
type: "text",
label: "user.password",
password: true,
},
{
key: "rememberMe",
type: "bool",
label: "user.rememberMe",
},
],
validator: ({ username, password }, errors) => {
if (username === "") {
errors["username"] = "login.emptyUsername";
}
if (password === "") {
errors["password"] = "login.emptyPassword";
}
},
},
dataInit: {},
},
});
useEffect(() => {
if (user != null) {
const id = setTimeout(() => navigate("/"), 3000);
return () => {
clearTimeout(id);
};
}
}, [navigate, user]);
if (user != null) {
return <p>{c("login.alreadyLogin")}</p>;
}
const submit = (): void => {
const confirmResult = confirm();
if (confirmResult.type === "ok") {
const { username, password, rememberMe } = confirmResult.values;
setAllDisabled(true);
setProcess(true);
userService
.login(
{
username: username as string,
password: password as string,
},
rememberMe as boolean,
)
.then(
() => {
if (history.length === 0) {
navigate("/");
} else {
navigate(-1);
}
},
(e: Error) => {
setProcess(false);
setAllDisabled(false);
setError(e.message);
},
);
}
};
return (
<Page className="login-page">
<div className="login-page-container">
<div className="login-page-welcome">{c("welcome")}</div>
<InputGroup {...inputGroupProps} />
{error ? <p className="login-page-error">{c(error)}</p> : null}
<div className="login-page-button-row">
<LoadingButton
loading={process}
onClick={(e) => {
submit();
e.preventDefault();
}}
disabled={hasErrorAndDirty}
>
{c("user.login")}
</LoadingButton>
</div>
<Trans i18nKey="login.noAccount">
0<Link to="/register">1</Link>2
</Trans>
</div>
</Page>
);
}
|
