Show a shorter login form (only enc password) if already logged in.

This is extremely useful for iOS devices where a PWA's session storage
is deleted every time it's minimised, and it's also useful for people
having multiple tabs open.

src/LoginGate.tsx

@@ -4,9 +4,10 @@ import Container from './widgets/Container';
 import ExternalLink from './widgets/ExternalLink';
 import SyncGate from './SyncGate';
 import LoginForm from './components/LoginForm';
+import EncryptionLoginForm from './components/EncryptionLoginForm';
 
 import { store, CredentialsType } from './store';
-import { fetchCredentials } from './store/actions';
+import { fetchCredentials, deriveKey } from './store/actions';
 
 import * as C from './constants';
 
@@ -18,6 +19,7 @@ class LoginGate extends React.Component {
   constructor(props: any) {
     super(props);
     this.onFormSubmit = this.onFormSubmit.bind(this);
+    this.onEncryptionFormSubmit = this.onEncryptionFormSubmit.bind(this);
   }
 
   onFormSubmit(username: string, password: string, encryptionPassword: string, serviceApiUrl?: string) {
@@ -25,6 +27,10 @@ class LoginGate extends React.Component {
     store.dispatch(fetchCredentials(username, password, encryptionPassword, serviceApiUrl));
   }
 
+  onEncryptionFormSubmit(encryptionPassword: string) {
+    store.dispatch(deriveKey(this.props.credentials.value!.credentials.email, encryptionPassword));
+  }
+
   render() {
     if (this.props.credentials.value === null) {
       const style = {
@@ -55,6 +61,19 @@ class LoginGate extends React.Component {
           </ul>
         </Container>
       );
+    } else if (this.props.credentials.value.encryptionKey === null) {
+      return (
+        <Container style={{maxWidth: 400}}>
+          <h2>Encryption Password</h2>
+          <p>
+            You are logged in as <strong>{this.props.credentials.value.credentials.email}</strong>.
+            Please enter your encryption password to continue, or log out from the side menu.
+          </p>
+          <EncryptionLoginForm
+            onSubmit={this.onEncryptionFormSubmit}
+          />
+        </Container>
+      );
     }
 
     return (

src/SideMenu/index.tsx

@@ -57,7 +57,7 @@ class SideMenu extends React.PureComponent {
 
     let loggedInItems;
     if (this.props.etesync) {
-      const journals = (this.props.journals && this.props.journals.value) && (
+      const journals = (this.props.etesync.encryptionKey && this.props.journals && this.props.journals.value) && (
         <React.Fragment>
           <ListDivider />
           <ListSubheader>Journals</ListSubheader>

src/components/EncryptionLoginForm.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
+import TextField from 'material-ui/TextField';
+
+interface FormErrors {
+  errorEncryptionPassword?: string;
+}
+
+class EncryptionLoginForm extends React.PureComponent {
+  state: {
+    errors: FormErrors,
+    encryptionPassword: string;
+  };
+
+  props: {
+    onSubmit: (encryptionPassword: string) => void;
+    loading?: boolean;
+    error?: Error;
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      errors: {},
+      encryptionPassword: '',
+    };
+    this.generateEncryption = this.generateEncryption.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  handleInputChange(event: React.ChangeEvent<any>) {
+    const name = event.target.name;
+    const value = event.target.value;
+    this.setState({
+      [name]: value
+    });
+  }
+
+  generateEncryption(e: any) {
+    e.preventDefault();
+
+    const encryptionPassword = this.state.encryptionPassword;
+
+    let errors: FormErrors = {};
+    const fieldRequired = 'This field is required!';
+    if (!encryptionPassword) {
+      errors.errorEncryptionPassword = fieldRequired;
+    }
+
+    if (Object.keys(errors).length) {
+      this.setState({errors: errors});
+      return;
+    } else {
+      this.setState({errors: {}});
+    }
+
+    this.props.onSubmit(encryptionPassword);
+  }
+
+  render() {
+    const styles = {
+      form: {
+      },
+      submit: {
+        marginTop: 40,
+        textAlign: 'right',
+      },
+    };
+
+    return (
+      <React.Fragment>
+        {(this.props.error) && (<div>Error! {this.props.error.message}</div>)}
+        <form style={styles.form} onSubmit={this.generateEncryption}>
+          <TextField
+            type="password"
+            errorText={this.state.errors.errorEncryptionPassword}
+            floatingLabelText="Encryption Password"
+            name="encryptionPassword"
+            value={this.state.encryptionPassword}
+            onChange={this.handleInputChange}
+          />
+
+          <div style={styles.submit}>
+            <RaisedButton
+              type="submit"
+              label={this.props.loading ? 'Loading…' : 'Log In'}
+              secondary={true}
+              disabled={this.props.loading}
+            />
+          </div>
+        </form>
+      </React.Fragment>
+    );
+  }
+}
+
+export default EncryptionLoginForm;