Login: show a nice error when pointing to a bad Etebase server.

src/LoginGate.tsx

@@ -12,11 +12,14 @@ import LoginForm from "./components/LoginForm";
 
 import { login } from "./store/actions";
 
+import * as Etebase from "etebase";
+
 import * as C from "./constants";
 
 import SignedPagesBadge from "./images/signed-pages-badge.svg";
 import { useCredentials } from "./credentials";
 import LoadingIndicator from "./widgets/LoadingIndicator";
+import { startTask } from "./helpers";
 
 
 export default function LoginGate() {
@@ -29,11 +32,17 @@ export default function LoginGate() {
     try {
       setLoading(true);
       setFetchError(undefined);
-      const ret = login(username, password, serviceApiUrl);
-      await ret.payload;
-      dispatch(ret);
+      const etebase = await startTask((async () => {
+        return await Etebase.Account.login(username, password, serviceApiUrl);
+      }));
+      dispatch(login(etebase));
     } catch (e) {
-      setFetchError(e);
+      console.log(e);
+      if ((e instanceof Etebase.HTTPError) && (e.status === 404)) {
+        setFetchError(new Error("Etebase server not found: are you sure the server URL is correct?"));
+      } else {
+        setFetchError(e);
+      }
     } finally {
       setLoading(false);
     }

src/store/actions.ts

@@ -6,7 +6,6 @@ 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;
 
@@ -28,17 +27,15 @@ export const resetKey = createAction(
 export const logout = createAction(
   "LOGOUT",
   async (etebase: Etebase.Account) => {
-    await etebase.logout();
+    // We don't wait on purpose, because we would like to logout and clear local data anyway
+    etebase.logout();
   }
 );
 
 export const login = createAction(
   "LOGIN",
-  async (username: string, password: string, server: string | undefined) => {
-    return startTask((async () => {
-      const etebase = await Etebase.Account.login(username, password, server);
-      return etebase.save();
-    }));
+  async (etebase: Etebase.Account) => {
+    return etebase.save();
   }
 );