rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 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
Download Patch File Download Diff File Expand all files Collapse all files

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>
</>