Add loading state for login/register pages
This commit is contained in:
parent
56ba87f25d
commit
442086f31b
2 changed files with 112 additions and 93 deletions
|
@ -28,11 +28,14 @@ export function LoginPage({ onLogin }) {
|
|||
const passwordRef = useRef();
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState();
|
||||
|
||||
const onSubmitLoginForm = useCallback(
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
onLogin(homeserver, usernameRef.current.value, passwordRef.current.value)
|
||||
.then(() => {
|
||||
if (location.state && location.state.from) {
|
||||
|
@ -41,7 +44,10 @@ export function LoginPage({ onLogin }) {
|
|||
history.replace("/");
|
||||
}
|
||||
})
|
||||
.catch(setError);
|
||||
.catch((error) => {
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
},
|
||||
[onLogin, location, history, homeserver]
|
||||
);
|
||||
|
@ -53,6 +59,9 @@ export function LoginPage({ onLogin }) {
|
|||
</Header>
|
||||
<Content>
|
||||
<Center>
|
||||
{loading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<Modal>
|
||||
<h2>Login</h2>
|
||||
<form onSubmit={onSubmitLoginForm}>
|
||||
|
@ -106,6 +115,7 @@ export function LoginPage({ onLogin }) {
|
|||
</Link>
|
||||
</Info>
|
||||
</Modal>
|
||||
)}
|
||||
</Center>
|
||||
</Content>
|
||||
</>
|
||||
|
|
|
@ -25,11 +25,13 @@ export function RegisterPage({ onRegister }) {
|
|||
const registerPasswordRef = useRef();
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState();
|
||||
|
||||
const onSubmitRegisterForm = useCallback(
|
||||
(e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
onRegister(
|
||||
registerUsernameRef.current.value,
|
||||
registerPasswordRef.current.value
|
||||
|
@ -41,7 +43,10 @@ export function RegisterPage({ onRegister }) {
|
|||
history.replace("/");
|
||||
}
|
||||
})
|
||||
.catch(setError);
|
||||
.catch((error) => {
|
||||
setError(error);
|
||||
setLoading(false);
|
||||
});
|
||||
},
|
||||
[onRegister, location, history]
|
||||
);
|
||||
|
@ -53,6 +58,9 @@ export function RegisterPage({ onRegister }) {
|
|||
</Header>
|
||||
<Content>
|
||||
<Center>
|
||||
{loading ? (
|
||||
<div>Loading...</div>
|
||||
) : (
|
||||
<Modal>
|
||||
<h2>Register</h2>
|
||||
<form onSubmit={onSubmitRegisterForm}>
|
||||
|
@ -95,6 +103,7 @@ export function RegisterPage({ onRegister }) {
|
|||
</Link>
|
||||
</Info>
|
||||
</Modal>
|
||||
)}
|
||||
</Center>
|
||||
</Content>
|
||||
</>
|
||||
|
|
Loading…
Reference in a new issue