From a540514f87cfeacb1d675cef6c811b8bbbcc082a Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sat, 8 Aug 2020 10:00:02 +0300
Subject: [PATCH] Login: make it visible that it's loading.

---
 src/LoginGate.tsx            |  5 +++++
 src/components/LoginForm.tsx | 10 ++++++++++
 src/store/actions.ts         |  7 +++++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/LoginGate.tsx b/src/LoginGate.tsx
index 167681a..a646fac 100644
--- a/src/LoginGate.tsx
+++ b/src/LoginGate.tsx
@@ -22,16 +22,20 @@ import LoadingIndicator from "./widgets/LoadingIndicator";
 export default function LoginGate() {
   const credentials = useCredentials();
   const dispatch = useDispatch();
+  const [loading, setLoading] = React.useState(false);
   const [fetchError, setFetchError] = React.useState<Error>();
 
   async function onFormSubmit(username: string, password: string, serviceApiUrl?: string) {
     try {
+      setLoading(true);
       setFetchError(undefined);
       const ret = login(username, password, serviceApiUrl);
       await ret.payload;
       dispatch(ret);
     } catch (e) {
       setFetchError(e);
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -56,6 +60,7 @@ export default function LoginGate() {
         <h2>Please Log In</h2>
         <LoginForm
           onSubmit={onFormSubmit}
+          loading={loading}
           error={fetchError}
         />
         <hr style={style.divider} />
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index d9db674..3ee5b34 100644
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -11,6 +11,7 @@ import Switch from "@material-ui/core/Switch";
 import ExternalLink from "../widgets/ExternalLink";
 
 import * as C from "../constants";
+import LoadingIndicator from "../widgets/LoadingIndicator";
 
 interface FormErrors {
   errorEmail?: string;
@@ -128,6 +129,15 @@ class LoginForm extends React.PureComponent {
       );
     }
 
+    if (this.props.loading) {
+      return (
+        <div style={{ textAlign: "center" }}>
+          <LoadingIndicator />
+          <p>Deriving encryption data...</p>
+        </div>
+      );
+    }
+
     return (
       <React.Fragment>
         {(this.props.error) && (<div>Error! {this.props.error.message}</div>)}
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 2ad00cc..65b600d 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -6,6 +6,7 @@ import { createAction as origCreateAction, ActionMeta } from "redux-actions";
 import * as Etebase from "etebase";
 
 import { SettingsType } from "./";
+import { startTask } from "../helpers";
 
 type FunctionAny = (...args: any[]) => any;
 
@@ -34,8 +35,10 @@ export const logout = createAction(
 export const login = createAction(
   "LOGIN",
   async (username: string, password: string, server: string | undefined) => {
-    const etebase = await Etebase.Account.login(username, password, server);
-    return etebase.save();
+    return startTask((async () => {
+      const etebase = await Etebase.Account.login(username, password, server);
+      return etebase.save();
+    }));
   }
 );