diff --git a/src/LoginPage.jsx b/src/LoginPage.jsx index 53a566f..fe62fc1 100644 --- a/src/LoginPage.jsx +++ b/src/LoginPage.jsx @@ -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,59 +59,63 @@ export function LoginPage({ onLogin }) {
- -

Login

-
- - setHomeServer(e.target.value)} - placeholder="Homeserver" - label="Homeserver" - autoCorrect="off" - autoCapitalize="none" - /> - - - - - - - - {error && ( + {loading ? ( +
Loading...
+ ) : ( + +

Login

+ - {error.message} + setHomeServer(e.target.value)} + placeholder="Homeserver" + label="Homeserver" + autoCorrect="off" + autoCapitalize="none" + /> - )} - - - - - - New?{" "} - - Create account - - -
+ + + + + + + {error && ( + + {error.message} + + )} + + + + + + New?{" "} + + Create account + + +
+ )}
diff --git a/src/RegisterPage.jsx b/src/RegisterPage.jsx index 1802b0e..dbb6eb6 100644 --- a/src/RegisterPage.jsx +++ b/src/RegisterPage.jsx @@ -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,48 +58,52 @@ export function RegisterPage({ onRegister }) {
- -

Register

-
- - - - - - - {error && ( + {loading ? ( +
Loading...
+ ) : ( + +

Register

+ - {error.message} + - )} - - - - - - Already have an account?{" "} - - Sign in here - - -
+ + + + {error && ( + + {error.message} + + )} + + + + + + Already have an account?{" "} + + Sign in here + + +
+ )}