Split fetching credentials and key derivation.

src/LoginGate.tsx

@@ -7,7 +7,7 @@ import LoginForm from './components/LoginForm';
 import EncryptionLoginForm from './components/EncryptionLoginForm';
 
 import { store, CredentialsType } from './store';
-import { fetchCredentials, deriveKey } from './store/actions';
+import { login, deriveKey } from './store/actions';
 
 import * as C from './constants';
 
@@ -24,7 +24,7 @@ class LoginGate extends React.Component {
 
   onFormSubmit(username: string, password: string, encryptionPassword: string, serviceApiUrl?: string) {
     serviceApiUrl = serviceApiUrl ? serviceApiUrl : C.serviceApiBase;
-    store.dispatch(fetchCredentials(username, password, encryptionPassword, serviceApiUrl));
+    store.dispatch(login(username, password, encryptionPassword, serviceApiUrl));
   }
 
   onEncryptionFormSubmit(encryptionPassword: string) {

src/store/actions.ts

@@ -5,19 +5,17 @@ import * as EteSync from '../api/EteSync';
 import { CredentialsData, EntriesType } from './';
 
 export const { fetchCredentials, logout } = createActions({
-  FETCH_CREDENTIALS: (username: string, password: string, encryptionPassword: string, server: string) => {
+  FETCH_CREDENTIALS: (username: string, password: string, server: string) => {
     const authenticator = new EteSync.Authenticator(server);
 
     return new Promise((resolve, reject) => {
       authenticator.getAuthToken(username, password).then(
         (authToken) => {
           const creds = new EteSync.Credentials(username, authToken);
-          const derived = EteSync.deriveKey(username, encryptionPassword);
 
           const context = {
             serviceApiUrl: server,
             credentials: creds,
-            encryptionKey: derived,
           };
 
           resolve(context);
@@ -31,13 +29,20 @@ export const { fetchCredentials, logout } = createActions({
   LOGOUT: () => undefined,
 });
 
-// FIXME: This is duplicating behaviour from the fetchCredentials above
 export const { deriveKey } = createActions({
   DERIVE_KEY: (username: string, encryptionPassword: string) => {
     return EteSync.deriveKey(username, encryptionPassword);
   },
 });
 
+export const login = (username: string, password: string, encryptionPassword: string, server: string) => {
+  return (dispatch: any) => {
+    dispatch(fetchCredentials(username, password, server)).then(() =>
+      dispatch(deriveKey(username, encryptionPassword))
+    );
+  };
+};
+
 export const { fetchJournals } = createActions({
   FETCH_JOURNALS: (etesync: CredentialsData) => {
     const creds = etesync.credentials;

src/store/reducers.ts

@@ -80,16 +80,6 @@ function fetchTypeIdentityReducer(
 
 const encryptionKeyReducer = handleActions(
   {
-    [actions.fetchCredentials.toString()]: (
-      state: {key: string | null}, action: any) => {
-      if (action.error) {
-        return {key: null};
-      } else if (action.payload === undefined) {
-        return {key: null};
-      } else {
-        return {key: action.payload.encryptionKey};
-      }
-    },
     [actions.deriveKey.toString()]: (state: {key: string | null}, action: any) => (
       {key: action.payload}
     ),