From 67b218329ba74665c3fec2cc0636c95874f4752d Mon Sep 17 00:00:00 2001 From: Max G Date: Sun, 10 May 2020 21:15:59 +0000 Subject: [PATCH] * Delete Crunch Menu Component * Disabled Quick Note * Note crunches over when menu is open * Added a cool loader * Remomoved locked notes * Added full note encryption * Added encrypted search index * Added encrypted shared notes * Made search bar have a clear and search button * Tags only loade when clicking on the tags menu * Tweaked home page to be a little more sane * built out some gigantic test cases * simplified a lot of things to make entire app easier to maintain --- client/src/components/CrunchMenu.vue | 43 -- client/src/components/GlobalSiteMenu.vue | 6 +- .../src/components/LoadingIconComponent.vue | 67 +++ client/src/components/NoteInputPanel.vue | 277 ++++-------- client/src/components/SearchInput.vue | 36 +- .../src/components/SideSlideMenuComponent.vue | 2 +- client/src/components/TagDisplayComponent.vue | 76 +++- client/src/pages/HelpPage.vue | 2 +- client/src/pages/HomePage.vue | 39 +- client/src/pages/NotesPage.vue | 98 ++--- server/index.js | 11 +- server/models/Note.js | 396 ++++++++++-------- server/models/ShareNote.js | 142 ++++--- server/models/Tag.js | 20 +- server/models/User.js | 170 +++++++- server/routes/noteController.js | 15 +- 16 files changed, 797 insertions(+), 603 deletions(-) delete mode 100644 client/src/components/CrunchMenu.vue create mode 100644 client/src/components/LoadingIconComponent.vue diff --git a/client/src/components/CrunchMenu.vue b/client/src/components/CrunchMenu.vue deleted file mode 100644 index b83c5b0..0000000 --- a/client/src/components/CrunchMenu.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - \ No newline at end of file diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue index 9dcf79c..9c15d45 100644 --- a/client/src/components/GlobalSiteMenu.vue +++ b/client/src/components/GlobalSiteMenu.vue @@ -199,11 +199,11 @@ -
+
@@ -257,7 +257,7 @@ }, data: function(){ return { - version: '1.0.5', + version: '2.1.0', username: '', collapsed: false, mobile: false, diff --git a/client/src/components/LoadingIconComponent.vue b/client/src/components/LoadingIconComponent.vue new file mode 100644 index 0000000..7a2f558 --- /dev/null +++ b/client/src/components/LoadingIconComponent.vue @@ -0,0 +1,67 @@ + + + + \ No newline at end of file diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue index 6f61905..58af068 100644 --- a/client/src/components/NoteInputPanel.vue +++ b/client/src/components/NoteInputPanel.vue @@ -2,9 +2,9 @@
@@ -100,6 +100,8 @@
+ + {{ statusText }}
@@ -110,19 +112,20 @@
-
- - -
-
- Decrypting Note & - {{loadingMessage}} -
-
+
+ + +
+
+ +
+
+ + - -
- - -
-
-

- - - - This note is encrypted and requires a password to be opened. - - - - - To many unlock attempts. Note is locked for 5 minutes. - -

- -
-
- Hint: {{ passwordHint }} -
-
- -
-
-
- Unlock Note -
-
- Unlock Note -
-
-
- -
-
- + +
@@ -287,11 +253,13 @@ 'share-note-component': () => import('@/components/ShareNoteComponent.vue'), 'color-tooltip':require('@/components/TextColorTooltipComponent.vue').default, - 'nm-button':require('@/components/NoteMenuButtonComponent.vue').default + 'nm-button':require('@/components/NoteMenuButtonComponent.vue').default, + 'loading-icon':require('@/components/LoadingIconComponent.vue').default, }, data(){ return { loading: true, + forceShowLoading: true, loadingMessage: 'Loading Note', currentNoteId: 0, modified: false, @@ -315,13 +283,8 @@ styleObject: { 'noteText':null,'noteBackground':null, 'noteIcon':null, 'iconColor':null }, //Style object. Determines colors and badges sizeDown: false, //Used to animate close state - - colorPickerLocation: null, - - fullFocusEditor: true, //Initialized editor instance //Settings vars - showAllSettings: true, lastVisibilityState: null, //All the squire settings @@ -329,23 +292,12 @@ // pastFocusedNode: null, usersOnNote: 0, + sideMenuOpen: false, tags: false, colors: false, images: false, options: false, colorpicker: false, - - //Encryption options - passwordHint: '', - password: '', //Field Variables, only for form - passwordConfirm: '', //Only a form variable - hashedPass: '', //sha-256 password hash, sends to server for decryption - isEncrypted: false, - isDecrypted: false, - passwordprotect: false, - decryptAttempts: 0, - lockedOut: false, - autoLockTimeout: null, } }, watch: { @@ -372,9 +324,9 @@ } //Reset all note menus on URL change + this.sideMenuOpen = false this.colors = false this.tags = false - this.passwordprotect = false this.options = false this.images = false @@ -382,7 +334,7 @@ if(newVal.openMenu){ //Only modify menu boolean if its defined if(typeof this[newVal.openMenu] == 'boolean'){ - + this.sideMenuOpen = true this[newVal.openMenu] = true } } @@ -399,22 +351,23 @@ }, beforeDestroy(){ - this.password = '' - this.passwordConfirm = '' - this.hashedPass = '' - clearTimeout(this.autoLockTimeout) - // this.$io.emit('leave_room', this.rawTextId) this.$bus.$off('new_file_upload') document.removeEventListener('visibilitychange', this.checkForUpdatedNote) - this.editor.destroy() + if(this.editor){ + this.editor.destroy() + } }, mounted: function() { + setTimeout(()=>{ + this.forceShowLoading = false + }, 500) + document.addEventListener('visibilitychange', this.checkForUpdatedNote) this.$nextTick(() => { @@ -429,6 +382,9 @@ this.editor = new Squire( this.$refs.squirebox, {blockTag: 'p' }) this.setText(this.noteText) + this.lastNoteHash = this.hashString(this.getText()) + console.log('hash on load', this.lastNoteHash) + //focus on open, not on mobile, thats annoying if(!this.$store.getters.getIsUserOnMobile){ // this.editor.focus() @@ -826,12 +782,12 @@ //Component is activated with NoteId in place, lookup text with associated ID if(this.$store.getters.getLoggedIn){ - axios.post('/api/note/get', { 'noteId': this.noteid, 'password':this.hashedPass }) + axios.post('/api/note/get', { 'noteId': this.noteid }) .then(response => { //Block notes you don't have access to from opening if(response.data === false){ - this.$bus.$emit('notification', 'Invalid Note') + this.$bus.$emit('notification', 'Error opening Note') this.close(true) return } @@ -840,7 +796,6 @@ this.currentNoteId = this.noteid this.rawTextId = response.data.rawTextId this.shareUsername = response.data.shareUsername - this.passwordHint = response.data.password_hint this.created = response.data.created this.updated = response.data.updated @@ -852,7 +807,6 @@ this.noteText = response.data.text this.diffNoteText = response.data.text - this.lastNoteHash = this.hashString(response.data.text) //Set up note colors if(response.data.color){ this.styleObject = JSON.parse(response.data.color) @@ -866,29 +820,12 @@ this.loading = false - this.isDecrypted = response.data.decrypted - this.isEncrypted = response.data.encrypted == 1 - this.decryptAttempts = response.data.decrypt_attempts_count - this.lockedOut = response.data.lockedOut - - - //If password is required, display a prompt and focus on it - if(this.password.length == 0 && this.isEncrypted && !this.isDecrypted){ - this.$nextTick(() => { - if(this.$refs.decryptNotePrompt){ - // this.editor.moveCursorToEnd() - this.$refs.decryptNotePrompt.focus() - } - }) - } - this.$nextTick(() => { + //Adjust note title size after load this.titleResize() - this.setupWebSockets() this.initSquire() - this.startAutolockTimer() }) }) @@ -1064,7 +1001,7 @@ }, onKeyup(){ - this.statusText = 'Save' + this.statusText = '' this.diffText() @@ -1088,23 +1025,16 @@ // return resolve(true) - - //Encrypted notes that are not decrypted should not be saved - if(this.isEncrypted && !this.isDecrypted){ - return resolve(true) - } - //Don't save note if its hash doesn't change const currentNoteText = this.getText() - if( this.lastNoteHash == this.hashString( currentNoteText )){ + const currentHash = this.hashString( currentNoteText ) + if( this.lastNoteHash == currentHash){ this.statusText = 'Saved' return resolve(true) } //If user accidentally clears note, it won't delete it if(currentNoteText == ''){ - this.statusText = 'Empty' - console.log('Prevented from saving empty note.') return resolve(true) } @@ -1115,10 +1045,11 @@ 'color': JSON.stringify(this.styleObject), //Save little json color object 'pinned': this.pinned, 'archived': this.archived, - 'password': this.hashedPass, - 'hint': this.passwordHint, + 'hash': currentHash, } + console.log('Save Hash', currentHash) + this.statusText = 'Saving' axios.post('/api/note/update', postData).then( response => { this.statusText = 'Saved' @@ -1126,8 +1057,8 @@ this.modified = true //Update last saved note hash - this.lastNoteHash = this.hashString( currentNoteText ) - this.startAutolockTimer() + // this.lastNoteHash = this.hashString( currentNoteText ) + this.lastNoteHash = currentHash return resolve(true) }) .catch(error => { this.$bus.$emit('notification', 'Failed to Save Note') }) @@ -1135,7 +1066,9 @@ }, checkForUpdatedNote(){ - // return + //Ignore visibility changes, handle this with socket IO + //Just keep it always up to date if user is on note + return //If user leaves page then returns to page, reload the first batch if(this.lastVisibilityState == 'hidden' && document.visibilityState == 'visible'){ @@ -1169,18 +1102,15 @@ //Track visibility state this.lastVisibilityState = document.visibilityState }, - hashString(text){ + hashString(inText){ - text = this.noteTitle + text + let text = this.noteTitle + inText - var hash = 0; + let hash = 0; if (text == null || text.length == 0) { return hash; } - //Simplified for speed - // return text.length - for (let i = 0; i < text.length; i++) { let char = text.charCodeAt(i); hash = ((hash<<5)-hash)+char; @@ -1217,6 +1147,11 @@ }, setupWebSockets(){ + this.$io.on('new_note_text_saved', ({noteId, hash}) => { + console.log('Current hash', this.lastNoteHash) + console.log('Incoming Hash', hash) + }) + return //Tell server to push this note into a room @@ -1231,62 +1166,6 @@ this.patchText(incomingDiffData) }) }, - decryptNote(){ - - const hashed = crypto.createHash('sha256').update(this.password).digest().toString('base64') - //Remove plaintext password - this.hashedPass = hashed - this.password = '' - this.passwordConfirm = '' - - this.loadNote() - }, - lockNote(){ - this.save().then(results => { - this.isDecrypted = false - this.password = '' - this.hashedPass = '' - this.passwordprotect = false - this.setText('') - }) - }, - enableEncryption(){ - - if(this.noteText == ''){ - this.noteText = 'Text Typed here is encrypted.' - } - - const hashed = crypto.createHash('sha256').update(this.password).digest().toString('base64') - //Remove plaintext password - this.hashedPass = hashed - - this.lastNoteHash = 0 - this.password = '' - this.passwordConfirm = '' - this.passwordprotect = false - - this.save() - .then(results => { - this.$bus.$emit('notification', 'Password Protection Enabled') - this.loadNote() - }) - }, - disableEncryption(){ - - this.lastNoteHash = 0 - this.isEncrypted = false - this.password = '' - this.passwordConfirm = '' - this.hashedPass = '' - this.passwordprotect = false - - //Reload Note - this.save() - .then(results => { - this.loadNote() - this.$bus.$emit('notification', 'Password Protection Removed') - }) - }, titleResize(){ //Resize the title field let element = this.$refs.titleTextarea @@ -1295,15 +1174,6 @@ element.style.height = 'auto'; element.style.height = (element.scrollHeight + padding) +'px'; }, - startAutolockTimer(){ - //Start autolock timer on encrypted notes that are encrypted and in a decrypted state - if(this.isEncrypted && this.isDecrypted){ - clearTimeout(this.autoLockTimeout) - this.autoLockTimeout = setTimeout(() => { - this.lockNote() - }, (60 * 1000 * 20) ) //Autolock after 20 min - } - }, } } @@ -1343,6 +1213,7 @@ background-color: var(--background_color); border: 1px solid var(--menu-accent);; margin: 45px 0 45px 0; + position: relative; } /* @@ -1438,18 +1309,18 @@ } .loading-note { position: absolute; - top: 20%; - left: 20%; - right: 20%; - bottom: 20%; - background: transparent; - color: #5e6268;; - font-size: 1.3em; + top: 0; + width: 100%; + height: 100%; + min-height: 300px; + background: var(--background_color); + /*opacity: 0.;*/ + z-index: 1; } .loading-text { margin: 0; position: absolute; - top: 50%; + top: 200px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); @@ -1464,6 +1335,10 @@ left: 15%; right: 15%; } + .side-menu-open { + left: calc(50% + 10px) !important; + right: calc(0% + 10px) !important; + } @media only screen and (max-width: 740px) { .input-container-wrapper { left: 0; @@ -1580,6 +1455,24 @@ right: 150%; } } + + /* Fade out transition animation */ + .fade-enter { + /*opacity: 0;*/ + } + + .fade-enter-active { + /*transition: opacity 0.7s;*/ + } + + .fade-leave { + /* opacity: 0; */ + } + + .fade-leave-active { + transition: opacity 0.7s; + opacity: 0; + } /* animations END */ \ No newline at end of file diff --git a/client/src/components/SearchInput.vue b/client/src/components/SearchInput.vue index 8d38f32..b7ad0fe 100644 --- a/client/src/components/SearchInput.vue +++ b/client/src/components/SearchInput.vue @@ -6,6 +6,12 @@ right: 0; padding: 10px; } + .floating-button { + position: absolute; + right: 0; + top: 4px; + z-index: 2; + }