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 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 }) {
</Header>
<Content>
<Center>
<Modal>
<h2>Login</h2>
<form onSubmit={onSubmitLoginForm}>
<FieldRow>
<InputField
type="text"
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 && (
{loading ? (
<div>Loading...</div>
) : (
<Modal>
<h2>Login</h2>
<form onSubmit={onSubmitLoginForm}>
<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 rightAlign>
<Button type="submit">Login</Button>
</FieldRow>
</form>
<Info>
New?{" "}
<Link
to={{
pathname: "/register",
state: location.state,
}}
>
Create account
</Link>
</Info>
</Modal>
<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>
<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>
</Content>
</>

91
src/RegisterPage.jsx
View file

@ -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 }) {
</Header>
<Content>
<Center>
<Modal>
<h2>Register</h2>
<form onSubmit={onSubmitRegisterForm}>
<FieldRow>
<InputField
type="text"
ref={registerUsernameRef}
placeholder="Username"
label="Username"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow>
<FieldRow>
<InputField
type="password"
ref={registerPasswordRef}
placeholder="Password"
label="Password"
/>
</FieldRow>
{error && (
{loading ? (
<div>Loading...</div>
) : (
<Modal>
<h2>Register</h2>
<form onSubmit={onSubmitRegisterForm}>
<FieldRow>
<ErrorMessage>{error.message}</ErrorMessage>
<InputField
type="text"
ref={registerUsernameRef}
placeholder="Username"
label="Username"
autoCorrect="off"
autoCapitalize="none"
/>
</FieldRow>
)}
<FieldRow rightAlign>
<Button type="submit">Register</Button>
</FieldRow>
</form>
<Info>
Already have an account?{" "}
<Link
to={{
pathname: "/login",
state: location.state,
}}
>
Sign in here
</Link>
</Info>
</Modal>
<FieldRow>
<InputField
type="password"
ref={registerPasswordRef}
placeholder="Password"
label="Password"
/>
</FieldRow>
{error && (
<FieldRow>
<ErrorMessage>{error.message}</ErrorMessage>
</FieldRow>
)}
<FieldRow rightAlign>
<Button type="submit">Register</Button>
</FieldRow>
</form>
<Info>
Already have an account?{" "}
<Link
to={{
pathname: "/login",
state: location.state,
}}
>
Sign in here
</Link>
</Info>
</Modal>
)}
</Center>
</Content>
</>