From 442086f31b2aacce39752a4f659b7aad56d88b47 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 17 Nov 2021 15:12:54 -0800
Subject: [PATCH] Add loading state for login/register pages

---
 src/LoginPage.jsx    | 114 +++++++++++++++++++++++--------------------
 src/RegisterPage.jsx |  91 ++++++++++++++++++----------------
 2 files changed, 112 insertions(+), 93 deletions(-)

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 }) {
       </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>
     </>
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 }) {
       </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>
     </>