Journal members: implement giving access

src/Journals/JournalMemberAddDialog.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+
+import TextField from '@material-ui/core/TextField';
+
+import LoadingIndicator from '../widgets/LoadingIndicator';
+import ConfirmationDialog from '../widgets/ConfirmationDialog';
+import PrettyFingerprint from '../widgets/PrettyFingerprint';
+
+import * as EteSync from '../api/EteSync';
+import { CredentialsData } from '../store';
+
+import { handleInputChange } from '../helpers';
+
+interface PropsType {
+  etesync: CredentialsData;
+  info: EteSync.CollectionInfo;
+  onOk: (user: string, publicKey: string) => void;
+  onClose: () => void;
+}
+
+class JournalMemberAddDialog extends React.PureComponent<PropsType> {
+  public state = {
+    addUser: '',
+    publicKey: '',
+    userChosen: false,
+    error: undefined as Error | undefined,
+  };
+
+  private handleInputChange: any;
+
+  constructor(props: PropsType) {
+    super(props);
+
+    this.handleInputChange = handleInputChange(this);
+    this.onAddRequest = this.onAddRequest.bind(this);
+    this.onOk = this.onOk.bind(this);
+  }
+
+  public render() {
+    const { onClose } = this.props;
+    const { addUser, userChosen, publicKey, error } = this.state;
+
+    if (error) {
+      return (
+        <>
+          <ConfirmationDialog
+            title="Error adding member"
+            labelOk="OK"
+            open
+            onOk={onClose}
+            onCancel={onClose}
+          >
+            User ({addUser}) not found, or has journal sharing disabled.
+          </ConfirmationDialog>
+        </>
+      );
+    }
+
+    if (publicKey) {
+      return (
+        <>
+          <ConfirmationDialog
+            title="Verify security fingerprint"
+            labelOk="OK"
+            open
+            onOk={this.onOk}
+            onCancel={onClose}
+          >
+            <p>
+              Verify {addUser}'s security fingerprint to ensure the encryption is secure.
+            </p>
+            <div style={{ textAlign: 'center' }}>
+              <PrettyFingerprint publicKey={publicKey} />
+            </div>
+          </ConfirmationDialog>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <ConfirmationDialog
+            title="Add member"
+            labelOk="OK"
+            open={!userChosen}
+            onOk={this.onAddRequest}
+            onCancel={onClose}
+          >
+            { userChosen ?
+              <LoadingIndicator />
+              :
+              <TextField
+                name="addUser"
+                type="email"
+                placeholder="User email"
+                style={{ width: '100%' }}
+                value={addUser}
+                onChange={this.handleInputChange}
+              />
+            }
+          </ConfirmationDialog>
+        </>
+      );
+    }
+  }
+
+  private onAddRequest(user: string) {
+    this.setState({
+      userChosen: true,
+    });
+
+    const { etesync } = this.props;
+    const { addUser } = this.state;
+
+    const creds = etesync.credentials;
+    const apiBase = etesync.serviceApiUrl;
+    const userInfoManager = new EteSync.UserInfoManager(creds, apiBase);
+    userInfoManager.fetch(addUser).then((userInfo) => {
+      this.setState({
+        publicKey: userInfo.publicKey,
+      });
+    }).catch((error) => {
+      this.setState({error});
+    });
+  }
+
+  private onOk() {
+    const { addUser, publicKey } = this.state;
+    this.props.onOk(addUser, publicKey);
+  }
+}
+
+export default JournalMemberAddDialog;

src/Journals/JournalMembers.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react';
+import * as sjcl from 'sjcl';
 
 import { List, ListItem } from '../widgets/List';
 
 import { Theme, withTheme } from '@material-ui/core/styles';
+import IconMemberAdd from '@material-ui/icons/PersonAdd';
 
 import AppBarOverride from '../widgets/AppBarOverride';
 import Container from '../widgets/Container';
 import LoadingIndicator from '../widgets/LoadingIndicator';
 import ConfirmationDialog from '../widgets/ConfirmationDialog';
 
+import JournalMemberAddDialog from './JournalMemberAddDialog';
+
 import * as EteSync from '../api/EteSync';
-import { CredentialsData } from '../store';
+import { CredentialsData, UserInfoData } from '../store';
+
+import { SyncInfoJournal } from '../SyncGate';
 
 interface PropsType {
   etesync: CredentialsData;
-  info: EteSync.CollectionInfo;
+  syncJournal: SyncInfoJournal;
+  userInfo: UserInfoData;
 }
 
 interface PropsTypeInner extends PropsType {
@@ -25,6 +32,7 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
   public state = {
     members: null as EteSync.JournalMemberJson[] | null,
     revokeUser: null as string | null,
+    addMemberOpen: false,
   };
 
   constructor(props: PropsTypeInner) {
@@ -32,30 +40,38 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
 
     this.onRevokeRequest = this.onRevokeRequest.bind(this);
     this.onRevokeDo = this.onRevokeDo.bind(this);
+    this.onMemberAdd = this.onMemberAdd.bind(this);
   }
 
   public render() {
-    const { info } = this.props;
-    const { members, revokeUser } = this.state;
+    const { syncJournal } = this.props;
+    const { members, revokeUser, addMemberOpen } = this.state;
+
+    const info = syncJournal.collection;
 
     return (
       <>
         <AppBarOverride title={`${info.displayName} - Members`} />
         <Container style={{maxWidth: '30rem'}}>
           { members ?
-              (members.length > 0 ?
-                <List>
-                  { members.map((member) => (
+              <List>
+                <ListItem rightIcon={<IconMemberAdd />} onClick={() => this.setState({ addMemberOpen: true })}>
+                  Add member
+                </ListItem>
+                {(members.length > 0 ?
+                  members.map((member) => (
                     <ListItem key={member.user} onClick={() => this.onRevokeRequest(member.user)}>
                       {member.user}
                     </ListItem>
-                  ))}
+                  ))
+                :
+                  <ListItem>
+                    No members
+                  </ListItem>
+                )}
               </List>
-              :
-              <div>No members</div>
-              )
             :
-            <LoadingIndicator />
+              <LoadingIndicator />
           }
         </Container>
         <ConfirmationDialog
@@ -68,6 +84,15 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
           Would you like to revoke {revokeUser}'s access?<br />
           Please be advised that a malicious user would potentially be able to retain access to encryption keys. Please refer to the FAQ for more information.
         </ConfirmationDialog>
+
+        { addMemberOpen &&
+          <JournalMemberAddDialog
+            etesync={this.props.etesync}
+            info={info}
+            onOk={this.onMemberAdd}
+            onClose={() => this.setState({ addMemberOpen: false })}
+          />
+        }
       </>
     );
   }
@@ -77,7 +102,8 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
   }
 
   private fetchMembers() {
-    const { etesync, info } = this.props;
+    const { etesync, syncJournal } = this.props;
+    const info = syncJournal.collection;
 
     const creds = etesync.credentials;
     const apiBase = etesync.serviceApiUrl;
@@ -96,8 +122,9 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
   }
 
   private onRevokeDo() {
-    const { etesync, info } = this.props;
+    const { etesync, syncJournal } = this.props;
     const { revokeUser } = this.state;
+    const info = syncJournal.collection;
 
     const creds = etesync.credentials;
     const apiBase = etesync.serviceApiUrl;
@@ -109,6 +136,35 @@ class JournalMembers extends React.PureComponent<PropsTypeInner> {
       revokeUser: null,
     });
   }
+
+  private onMemberAdd(user: string, publicKey: string) {
+    const { etesync, syncJournal, userInfo } = this.props;
+    const journal = syncJournal.journal;
+    const derived = this.props.etesync.encryptionKey;
+
+    const keyPair = userInfo.getKeyPair(new EteSync.CryptoManager(derived, 'userInfo', userInfo.version));
+    let cryptoManager: EteSync.CryptoManager;
+    if (journal.key) {
+      const asymmetricCryptoManager = new EteSync.AsymmetricCryptoManager(keyPair);
+      const derivedJournalKey = asymmetricCryptoManager.decryptBytes(journal.key);
+      cryptoManager = EteSync.CryptoManager.fromDerivedKey(derivedJournalKey, journal.version);
+    } else {
+      cryptoManager = new EteSync.CryptoManager(derived, journal.uid, journal.version);
+    }
+
+    const pubkeyBytes = sjcl.codec.bytes.fromBits(sjcl.codec.base64.toBits(publicKey));
+    const encryptedKey = sjcl.codec.base64.fromBits(sjcl.codec.bytes.toBits(cryptoManager.getEncryptedKey(keyPair, pubkeyBytes)));
+
+    const creds = etesync.credentials;
+    const apiBase = etesync.serviceApiUrl;
+    const journalMembersManager = new EteSync.JournalMembersManager(creds, apiBase, journal.uid);
+    journalMembersManager.create({ user, key: encryptedKey }).then(() => {
+      this.fetchMembers();
+    });
+    this.setState({
+      addMemberOpen: false,
+    });
+  }
 }
 
 export default withTheme()(JournalMembers);

src/Journals/index.tsx

@@ -92,7 +92,8 @@ class Journals extends React.PureComponent {
                   render={() => (
                     <JournalMembers
                       etesync={this.props.etesync}
-                      info={collectionInfo}
+                      syncJournal={syncJournal}
+                      userInfo={this.props.userInfo}
                     />
                   )}
                 />