implement note locking

apps/mobile/App.js

@@ -106,7 +106,7 @@ const App = () => {
     // Currently orientation is locked on tablet.
     /* DDS.checkOrientation();
     setTimeout(() => {
-      alert('here');
+     
       forceUpdate();
     }, 1000); */
   };

apps/mobile/html/Web.bundle/site/index.html

@@ -1258,7 +1258,7 @@
           value: real_val
         }
         window.ReactNativeWebView.postMessage(JSON.stringify(titleMessage));
-        ///alert(real_val);
+   
       }, false);
 
 

apps/mobile/html/Web.bundle/site/index1.html

@@ -1014,7 +1014,7 @@
 
     window.ReactNativeWebView.postMessage(JSON.stringify(titleMessage)); 
 
-    ///alert(real_val);
+ 
 }, false);
 
 

apps/mobile/src/components/ActionSheetComponent/index.js

@@ -30,6 +30,9 @@ import {moveNoteEvent} from '../DialogManager';
 import Share from 'react-native-share';
 import {timeConverter, ToastEvent, hexToRGBA} from '../../utils/utils';
 import NavigationService from '../../services/NavigationService';
+import {eSendEvent} from '../../services/eventManager';
+import {eOpenVaultDialog} from '../../services/events';
+import {openVault} from '../VaultDialog';
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
 
@@ -202,7 +205,7 @@ export const ActionSheetComponent = ({
       icon: 'share-variant',
       func: () => {
         if (note.locked) {
-          close('unlock_share');
+          openVault(item, false, true, false, false, true);
         } else {
           close();
           let m = `${note.title}\n \n ${note.content.text}`;
@@ -333,7 +336,33 @@ export const ActionSheetComponent = ({
       icon: 'shield',
       func: () => {
         if (!note.id) return;
-        note.locked ? close('unlock') : close('lock');
+
+        if (note.locked) {
+          close();
+          openVault(note, true, false, true, false, false);
+
+          return;
+        } else {
+          db.vault
+            .add(note.id)
+            .then(() => {
+              close();
+            })
+            .catch(async e => {
+              switch (e.message) {
+                case db.vault.ERRORS.noVault:
+                  close();
+                  openVault(note, false);
+                  break;
+                case db.vault.ERRORS.vaultLocked:
+                  openVault(note, true, true);
+
+                  break;
+                case db.vault.ERRORS.wrongPassword:
+                  break;
+              }
+            });
+        }
       },
       close: true,
       check: true,

apps/mobile/src/components/DialogManager/index.js

@@ -192,8 +192,6 @@ export class DialogManager extends Component {
         action: 0,
         icon: '',
       },
-      isPerm: false,
-      shareAfterUnlock: false,
     };
   }
 
@@ -261,9 +259,6 @@ export class DialogManager extends Component {
 
     eSubscribeEvent(eOpenLoginDialog, this.showLoginDialog);
     eSubscribeEvent(eCloseLoginDialog, this.hideLoginDialog);
-
-    eSubscribeEvent(eOpenVaultDialog, this._showVaultDialog);
-    eSubscribeEvent(eCloseVaultDialog, this._hideVaultDialog);
   }
 
   componentWillUnmount() {
@@ -286,9 +281,6 @@ export class DialogManager extends Component {
 
     eUnSubscribeEvent(eOpenLoginDialog, this.showLoginDialog);
     eUnSubscribeEvent(eCloseLoginDialog, this.hideLoginDialog);
-
-    eUnSubscribeEvent(eOpenVaultDialog, this._showVaultDialog);
-    eUnSubscribeEvent(eCloseVaultDialog, this._hideVaultDialog);
   }
 
   showLoginDialog = () => {
@@ -296,7 +288,6 @@ export class DialogManager extends Component {
   };
 
   hideLoginDialog = () => {
-    alert('here');
     this.loginDialog.close();
   };
 
@@ -339,18 +330,6 @@ export class DialogManager extends Component {
     this.simpleDialog.hide();
   };
 
-  _showVaultDialog = data => {
-    if (data && data.i) {
-      this.setState({
-        item: data.i,
-      });
-    }
-    this.vaultDialogRef.open();
-  };
-  _hideVaultDialog = item => {
-    this.vaultDialogRef.close();
-  };
-
   onActionSheetHide = () => {
     if (this.show) {
       switch (this.show) {
@@ -364,8 +343,15 @@ export class DialogManager extends Component {
         }
         case 'lock': {
           this._showVaultDialog();
+
           break;
         }
+        case 'novault': {
+          this.setState({
+            vaultExists: false,
+          });
+          this._showVaultDialog();
+        }
         case 'unlock': {
           this.setState({
             isPerm: true,
@@ -400,15 +386,7 @@ export class DialogManager extends Component {
 
   render() {
     let {colors} = this.props;
-    let {
+    let {actionSheetData, item, simpleDialog} = this.state;
-      actionSheetData,
-      item,
-      simpleDialog,
-      isPerm,
-      vaultDialog,
-      unlock,
-      shareAfterUnlock,
-    } = this.state;
     return (
       <>
         <ActionSheet
@@ -473,21 +451,7 @@ export class DialogManager extends Component {
           template={simpleDialog}
         />
 
-        <VaultDialog
+        <VaultDialog colors={colors} />
-          ref={ref => (this.vaultDialogRef = ref)}
-          colors={colors}
-          note={item}
-          perm={isPerm}
-          reset={() => {
-            this.setState({
-              isPerm: false,
-              shareAfterUnlock: false,
-            });
-          }}
-          shareAfterUnlock={shareAfterUnlock}
-          openedToUnlock={false}
-          visible={vaultDialog}
-        />
 
         <MoveNoteDialog
           ref={ref => (this.moveNoteDialog = ref)}

apps/mobile/src/components/NoteItem/index.js

@@ -13,6 +13,7 @@ import {
   TEMPLATE_TRASH,
 } from '../DialogManager';
 import {openEditorAnimation} from '../../utils/animations';
+import {openVault} from '../VaultDialog';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -120,7 +121,8 @@ export default class NoteItem extends React.Component {
               this.props.onLongPress();
               return;
             } else if (item.locked) {
-              eSendEvent(eOpenVaultDialog, {unlock: true, i: item});
+              openVault(item, false, true, false, true, false);
+
               return;
             }
             if (DDS.isTab) {

apps/mobile/src/components/VaultDialog/index.js

@@ -1,80 +1,242 @@
 import React, {Component, createRef} from 'react';
-import {View, Text, TouchableOpacity, Modal} from 'react-native';
+import {View, Text, TouchableOpacity, Modal, ToastAndroid} from 'react-native';
 import {SIZE, ph, pv, opacity, WEIGHT} from '../../common/common';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {TextInput} from 'react-native-gesture-handler';
 import {db, DDS} from '../../../App';
 import {getElevation, ToastEvent} from '../../utils/utils';
-import NavigationService from '../../services/NavigationService';
 
 import {updateEvent} from '../DialogManager';
 import Share from 'react-native-share';
-import {eSendEvent} from '../../services/eventManager';
+import {
-import {eOnLoadNote} from '../../services/events';
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+} from '../../services/eventManager';
+import {
+  eOnLoadNote,
+  eOpenVaultDialog,
+  eCloseVaultDialog,
+} from '../../services/events';
 import {openEditorAnimation} from '../../utils/animations';
 import {ACTIONS} from '../../provider/actions';
+
 const passInputRef = createRef();
+const confirmPassRef = createRef();
+
+export const openVault = (
+  item,
+  novault = false,
+  locked = false,
+  permanant = false,
+  editor = false,
+  share = false,
+) => {
+  eSendEvent(eOpenVaultDialog, {
+    item,
+    novault,
+    locked,
+    permanant,
+    editor,
+    share,
+  });
+};
+
 export class VaultDialog extends Component {
   constructor(props) {
     super(props);
     this.state = {
       visible: false,
+      wrongPassword: false,
+      note: {},
+      vault: false,
+      locked: true,
+      permanant: false,
+      goToEditor: false,
+      share: false,
+      passwordsDontMatch: false,
     };
     this.password = null;
   }
 
-  open = () => {
+  componentDidMount() {
+    eSubscribeEvent(eOpenVaultDialog, this.open);
+    eSubscribeEvent(eCloseVaultDialog, this.close);
+  }
+
+  componentWillUnmount() {
+    eUnSubscribeEvent(eOpenVaultDialog, this.open);
+    eUnSubscribeEvent(eCloseVaultDialog, this.close);
+  }
+
+  open = ({
+    item,
+    novault,
+    locked,
+    permanant = false,
+    goToEditor = false,
+    share = false,
+  }) => {
+    console.log(item);
     this.setState({
       visible: true,
+      note: item,
+      novault: novault,
+      locked,
+      permanant,
+      goToEditor,
+      share,
     });
   };
-  close = (share = false, item = null) => {
+
-    if (share && item) {
+  close = () => {
-      let m = `${item.title}\n \n ${item.content.text}`;
+    updateEvent({type: ACTIONS.NOTES});
+
+    this.setState({
+      visible: false,
+      note: {},
+      locked: false,
+      permanant: false,
+      goToEditor: false,
+      share: false,
+      novault: false,
+    });
+  };
+
+  onPress = async () => {
+    if (!this.state.novault) {
+      if (this.password.length < 3) {
+        ToastAndroid.show('Password too short', 300);
+        return;
+      }
+      if (
+        this.password &&
+        this.password.trim() !== 0 &&
+        this.state.passwordsDontMatch
+      ) {
+        ToastAndroid.show('Passwords do not match', 300);
+        return;
+      } else {
+        this._createVault();
+      }
+    } else if (this.state.locked) {
+      if (!this.password || this.password.trim() === 0) {
+        ToastAndroid.show('Please enter a valid password', 300);
+        return;
+      } else {
+        db.vault
+          .unlock(this.password)
+          .then(async () => {
+            if (this.state.note.locked) {
+              await this._unlockNote();
+            } else {
+              await this._lockNote();
+            }
+          })
+          .catch(e => {
+            this._takeErrorAction(e);
+          });
+      }
+    }
+  };
+
+  async _lockNote() {
+    if (!this.password || this.password.trim() === 0) {
+      ToastAndroid.show('Please enter a valid password', 300);
+      return;
+    } else {
+      db.vault.add(this.state.note.id).then(e => {
+        this.close();
+      });
+    }
+  }
+
+  async _unlockNote() {
+    if (!this.password || this.password.trim() === 0) {
+      ToastAndroid.show('Please enter a valid password', 300);
+      return;
+    } else {
+      if (this.state.permanant) {
+        this._permanantUnlock();
+      } else {
+        await this._openNote();
+      }
+    }
+  }
+
+  async _openNote() {
+    let note = await db.vault.open(this.state.note.id, this.password);
+    if (this.state.goToEditor) {
+      this._openInEditor(note);
+    } else if (this.state.share) {
+      this._shareNote(note);
+    }
+  }
+
+  async _createVault() {
+    await db.vault.create(this.password);
+    if (this.state.note && this.state.note.id && !this.state.note.locked) {
+      await db.vault.add(this.state.note.id);
+      this.close();
+      ToastEvent.show('Note added to vault', 'success');
+    }
+  }
+
+  _permanantUnlock() {
+    db.vault
+      .remove(this.state.note.id, this.password)
+      .then(() => {
+        this.close();
+      })
+      .catch(e => {
+        this._takeErrorAction(e);
+      });
+  }
+
+  _openInEditor(note) {
+    eSendEvent(eOnLoadNote, note);
+    if (!DDS.isTab) {
+      openEditorAnimation();
+    }
+    ToastEvent.show('Note unlocked', 'success');
+    this.close();
+  }
+
+  _shareNote(note) {
+    let m = `${note.title}\n \n ${note.content.text}`;
     Share.open({
       title: 'Share note to',
       failOnCancel: false,
       message: m,
     });
+    this.close();
   }
 
-    updateEvent({type: ACTIONS.NOTES});
+  _takeErrorAction(e) {
-
+    if (e.message === db.vault.ERRORS.wrongPassword) {
+      ToastAndroid.show('Password is incorrect', 300);
       this.setState({
-      visible: false,
+        wrongPassword: true,
       });
-    this.props.reset();
-  };
-
-  onPress = async () => {
-    if (this.props.note.locked) {
-      let n = db.notes.note(this.props.note.id).data;
-
-      let item;
-
-      try {
-        item = await db.notes.note(n.id).unlock(this.password, this.props.perm);
-      } catch (error) {
-        ToastEvent.show('Password incorrect, unable to unlock note');
       return;
-      }
-
-      if (!this.props.perm) {
-        eSendEvent(eOnLoadNote, item);
-        if (!DDS.isTab) {
-          openEditorAnimation();
-        }
-      }
-      this.close(this.props.shareAfterUnlock, item);
     } else {
-      await db.notes.note(this.props.note.id).lock('password');
+      console.log('ERROR', e.message);
-      this.close(false, this.props.note);
+    }
   }
-  };
 
   render() {
-    const {hasPassword, note, colors} = this.props;
+    const {colors} = this.props;
-    const {visible} = this.state;
+    const {
+      note,
+      visible,
+      wrongPassword,
+      passwordsDontMatch,
+      novault,
+      locked,
+      permanant,
+      goToEditor,
+      share,
+    } = this.state;
 
     return (
       <Modal
@@ -118,7 +280,11 @@ export class VaultDialog extends Component {
                   marginLeft: 5,
                   fontSize: SIZE.md,
                 }}>
-                {note.locked ? 'Unlock Note' : 'Lock Note'}
+                {!novault
+                  ? 'Create vault'
+                  : note.locked
+                  ? 'Unlock Note'
+                  : 'Lock Note'}
               </Text>
             </View>
 
@@ -128,23 +294,29 @@ export class VaultDialog extends Component {
                 fontFamily: WEIGHT.regular,
                 textAlign: 'center',
                 fontSize: SIZE.sm - 1,
+                flexWrap: 'wrap',
+                maxWidth: '90%',
+                alignSelf: 'center',
                 marginTop: 10,
-                //marginBottom: hidden ? 20 : 0,
               }}>
-              {hasPassword
+              {!novault
-                ? 'Set password for all your locked notes.'
+                ? 'Set a password to create vault'
+                : permanant
+                ? 'Enter password to remove note from vault.'
                 : note.locked
                 ? 'Enter vault password to unlock note.'
                 : 'Do you want to lock this note?'}
             </Text>
 
-            {note.locked ? (
+            {note.locked || locked || permanant ? (
               <TextInput
                 ref={passInputRef}
                 style={{
                   padding: pv - 5,
                   borderWidth: 1.5,
-                  borderColor: colors.nav,
+                  borderColor: this.state.wrongPassword
+                    ? colors.errorText
+                    : colors.nav,
                   paddingHorizontal: ph,
                   borderRadius: 5,
                   marginTop: 10,
@@ -160,55 +332,60 @@ export class VaultDialog extends Component {
               />
             ) : null}
 
-            {!hasPassword ? null : (
+            {!novault ? (
               <View>
                 <TextInput
+                  ref={passInputRef}
                   style={{
                     padding: pv - 5,
                     borderWidth: 1.5,
-                    borderColor: colors.nav,
+                    borderColor: passwordsDontMatch
+                      ? colors.errorText
+                      : colors.nav,
                     paddingHorizontal: ph,
                     borderRadius: 5,
                     fontSize: SIZE.sm,
                     fontFamily: WEIGHT.regular,
                   }}
-                  onChangeText={value => {}}
+                  onChangeText={value => {
+                    this.password = value;
+                  }}
+                  secureTextEntry
                   placeholder="Password"
                   placeholderTextColor={colors.icon}
                 />
 
                 <TextInput
+                  ref={confirmPassRef}
                   style={{
                     padding: pv - 5,
                     borderWidth: 1.5,
-                    borderColor: colors.nav,
+                    borderColor: passwordsDontMatch
+                      ? colors.errorText
+                      : colors.nav,
                     paddingHorizontal: ph,
                     borderRadius: 5,
                     fontSize: SIZE.sm,
                     fontFamily: WEIGHT.regular,
                     marginTop: 10,
                   }}
-                  onChangeText={value => {}}
+                  secureTextEntry
+                  onChangeText={value => {
+                    if (value !== this.password) {
+                      this.setState({
+                        passwordsDontMatch: true,
+                      });
+                    } else {
+                      this.setState({
+                        passwordsDontMatch: false,
+                      });
+                    }
+                  }}
                   placeholder="Confirm password"
                   placeholderTextColor={colors.icon}
                 />
-                <TextInput
-                  style={{
-                    padding: pv - 5,
-                    borderWidth: 1.5,
-                    borderColor: colors.nav,
-                    paddingHorizontal: ph,
-                    borderRadius: 5,
-                    fontSize: SIZE.sm,
-                    fontFamily: WEIGHT.regular,
-                    marginTop: 10,
-                  }}
-                  onChangeText={value => {}}
-                  placeholder="Hint"
-                  placeholderTextColor={colors.icon}
-                />
               </View>
-            )}
+            ) : null}
 
             <View
               style={{
@@ -220,6 +397,7 @@ export class VaultDialog extends Component {
               <TouchableOpacity
                 activeOpacity={opacity}
                 onPress={this.onPress}
+                secureTextEntry
                 style={{
                   paddingVertical: pv,
                   paddingHorizontal: ph,

apps/mobile/src/provider/reducer.js

@@ -37,7 +37,6 @@ export const reducer = (state, action) => {
       };
     }
     case ACTIONS.SETTINGS: {
-      console.log('here', action.settings);
       return {
         ...state,
         settings: {...action.settings},

apps/mobile/src/views/Folders/index.js

@@ -39,7 +39,6 @@ export const Folders = ({navigation}) => {
   let isFocused = useIsFocused();
 
   const handleBackPress = () => {
-    alert('here');
     return true;
   };
 

apps/mobile/src/views/Login/index.js

@@ -47,7 +47,6 @@ export const Login = ({navigation}) => {
   }, []);
 
   const handleBackPress = () => {
-    alert('here');
     return true;
   };