xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add loading state for login/register pages

Browse source
This commit is contained in:
Robert Long 2021-11-17 15:12:54 -08:00
parent 56ba87f25d
commit 442086f31b
2 changed files with 112 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
src/LoginPage.jsx
View file

@ -28,11 +28,14 @@ export function LoginPage({ onLogin }) {
const passwordRef = useRef(); const passwordRef = useRef();
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
const [loading, setLoading] = useState(false);
const [error, setError] = useState(); const [error, setError] = useState();
const onSubmitLoginForm = useCallback( const onSubmitLoginForm = useCallback(
(e) => { (e) => {
e.preventDefault(); e.preventDefault();
setLoading(true);
onLogin(homeserver, usernameRef.current.value, passwordRef.current.value) onLogin(homeserver, usernameRef.current.value, passwordRef.current.value)
.then(() => { .then(() => {
if (location.state && location.state.from) { if (location.state && location.state.from) {
@ -41,7 +44,10 @@ export function LoginPage({ onLogin }) {
history.replace("/"); history.replace("/");
} }
}) })
.catch(setError); .catch((error) => {
setError(error);
setLoading(false);
});
}, },
[onLogin, location, history, homeserver] [onLogin, location, history, homeserver]
); );
@ -53,59 +59,63 @@ export function LoginPage({ onLogin }) {
</Header> </Header>
<Content> <Content>
<Center> <Center>
<Modal> {loading ? (
<h2>Login</h2> <div>Loading...</div>
<form onSubmit={onSubmitLoginForm}> ) : (
<FieldRow> <Modal>
<InputField <h2>Login</h2>
type="text" <form onSubmit={onSubmitLoginForm}>
value={homeserver}
onChange={(e) => setHomeServer(e.target.value)}
placeholder="Homeserver"
label="Homeserver"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow>
<FieldRow>
<InputField
type="text"
ref={usernameRef}
placeholder="Username"
label="Username"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow>
<FieldRow>
<InputField
type="password"
ref={passwordRef}
placeholder="Password"
label="Password"
/>
</FieldRow>
{error && (
<FieldRow> <FieldRow>
<ErrorMessage>{error.message}</ErrorMessage> <InputField
type="text"
value={homeserver}
onChange={(e) => setHomeServer(e.target.value)}
placeholder="Homeserver"
label="Homeserver"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow> </FieldRow>
)} <FieldRow>
<FieldRow rightAlign> <InputField
<Button type="submit">Login</Button> type="text"
</FieldRow> ref={usernameRef}
</form> placeholder="Username"
<Info> label="Username"
New?{" "} autoCorrect="off"
<Link autoCapitalize="none"
to={{ />
pathname: "/register", </FieldRow>
state: location.state, <FieldRow>
}} <InputField
> type="password"
Create account ref={passwordRef}
</Link> placeholder="Password"
</Info> label="Password"
</Modal> />
</FieldRow>
{error && (
<FieldRow>
<ErrorMessage>{error.message}</ErrorMessage>
</FieldRow>
)}
<FieldRow rightAlign>
<Button type="submit">Login</Button>
</FieldRow>
</form>
<Info>
New?{" "}
<Link
to={{
pathname: "/register",
state: location.state,
}}
>
Create account
</Link>
</Info>
</Modal>
)}
</Center> </Center>
</Content> </Content>
</> </>

91
src/RegisterPage.jsx
View file

@ -25,11 +25,13 @@ export function RegisterPage({ onRegister }) {
const registerPasswordRef = useRef(); const registerPasswordRef = useRef();
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
const [loading, setLoading] = useState(false);
const [error, setError] = useState(); const [error, setError] = useState();
const onSubmitRegisterForm = useCallback( const onSubmitRegisterForm = useCallback(
(e) => { (e) => {
e.preventDefault(); e.preventDefault();
setLoading(true);
onRegister( onRegister(
registerUsernameRef.current.value, registerUsernameRef.current.value,
registerPasswordRef.current.value registerPasswordRef.current.value
@ -41,7 +43,10 @@ export function RegisterPage({ onRegister }) {
history.replace("/"); history.replace("/");
} }
}) })
.catch(setError); .catch((error) => {
setError(error);
setLoading(false);
});
}, },
[onRegister, location, history] [onRegister, location, history]
); );
@ -53,48 +58,52 @@ export function RegisterPage({ onRegister }) {
</Header> </Header>
<Content> <Content>
<Center> <Center>
<Modal> {loading ? (
<h2>Register</h2> <div>Loading...</div>
<form onSubmit={onSubmitRegisterForm}> ) : (
<FieldRow> <Modal>
<InputField <h2>Register</h2>
type="text" <form onSubmit={onSubmitRegisterForm}>
ref={registerUsernameRef}
placeholder="Username"
label="Username"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow>
<FieldRow>
<InputField
type="password"
ref={registerPasswordRef}
placeholder="Password"
label="Password"
/>
</FieldRow>
{error && (
<FieldRow> <FieldRow>
<ErrorMessage>{error.message}</ErrorMessage> <InputField
type="text"
ref={registerUsernameRef}
placeholder="Username"
label="Username"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow> </FieldRow>
)} <FieldRow>
<FieldRow rightAlign> <InputField
<Button type="submit">Register</Button> type="password"
</FieldRow> ref={registerPasswordRef}
</form> placeholder="Password"
<Info> label="Password"
Already have an account?{" "} />
<Link </FieldRow>
to={{ {error && (
pathname: "/login", <FieldRow>
state: location.state, <ErrorMessage>{error.message}</ErrorMessage>
}} </FieldRow>
> )}
Sign in here <FieldRow rightAlign>
</Link> <Button type="submit">Register</Button>
</Info> </FieldRow>
</Modal> </form>
<Info>
Already have an account?{" "}
<Link
to={{
pathname: "/login",
state: location.state,
}}
>
Sign in here
</Link>
</Info>
</Modal>
)}
</Center> </Center>
</Content> </Content>
</> </>