* Added new token system to add more security to logins

* Added simple tag editing from note page

client/src/components/NoteInputPanel.vue

@@ -164,13 +164,21 @@
 
 				<!-- Squire Box -->
 				<div id="squire-id" class="squire-box" ref="squirebox" placeholder="Note Text"></div>
-
-				<!-- <div v-if="caretShow" class="artificial-caret" :style="{ 'top':caretTop+'px', 'left':caretLeft+'px' }"></div> -->
 				
 			</div>
 
 		</div>
 
+		<!-- little tags on the side -->
+		<div class="note-mini-tag-area" v-if="allTags.length > 0" :class="{ 'slide-out-right':(sizeDown == true) }">
+			<span v-for="tag in allTags" class="subtle-tag active-mini-tag" v-if="isTagOnNote(tag.id)" v-on:click="removeTag(tag.id)">
+				{{ tag.text }}
+			</span>
+			<span v-else class="subtle-tag" v-on:click="addTag(tag.text)">
+				{{ tag.text }}
+			</span>
+		</div>
+
 		<!-- color picker -->
 		<color-tooltip 
 			v-if="colorpicker" 
@@ -334,6 +342,10 @@
                 //Used to restore caret position
                 lastRange: null,
                 startOffset: 0,
+
+                //Tag Display
+                allTags: [],
+                noteTags: [],
 			}
 		},
 		watch: {
@@ -449,6 +461,77 @@
 
 				}, totalTime + 40)
 			},
+			removeTag(tagId){
+
+				this.allTags = []
+				let entryId = 0
+
+				//Find fucking note tag for removal
+				this.noteTags.forEach(noteTag => {
+					if(noteTag['tagId'] == tagId){
+						entryId = noteTag['entryId']
+					}
+				})
+
+				let postData = {
+					'tagId':entryId,
+					'noteId':this.noteid
+				}
+
+				axios.post('/api/tag/removefromnote', postData)
+				.then(response => {
+					this.fetchNoteTags()
+				})
+				.catch(error => { this.$bus.$emit('notification', 'Failed to Remove Tag') })
+			},
+			addTag(tagText){
+
+				this.allTags = []
+
+				let postData = {
+					'tagText':tagText,
+					'noteId':this.noteid
+				}
+
+				axios.post('/api/tag/addtonote', postData)
+				.then(response => {
+					this.fetchNoteTags()
+				})
+				.catch(error => { this.$bus.$emit('notification', 'Failed to Add Tag') })
+			},
+			fetchNoteTags(){
+				axios.post('/api/tag/get', {'noteId': this.noteid})
+				.then(({data}) => {
+					this.allTags = data.allTags
+					this.noteTags = data.noteTagIds
+
+					//Stick used tags at top.
+					if(this.noteTags.length > 0){
+
+						let frontTags = []
+
+						for (var i = this.allTags.length - 1; i >= 0; i--) {
+							this.noteTags.forEach(noteTag => {
+								if(this.allTags[i]['id'] == noteTag['tagId']){
+									frontTags.push(this.allTags[i])
+									this.allTags.splice(i,1)
+								}
+							})
+						}
+
+						this.allTags.unshift(...frontTags)
+					}
+				})
+			},
+			isTagOnNote(id){
+				for (let i = 0; i < this.noteTags.length; i++) {
+					const current = this.noteTags[i]
+					if(current && current['tagId'] == id){
+						return true
+					}
+				}
+				return false
+			},
 			initSquire(){
 				
 				//Set up squire and load note text
@@ -460,6 +543,9 @@
 					this.editor.moveCursorToEnd()
 					this.caretShow = true
 					this.moveArtificialCaret()
+
+
+					this.fetchNoteTags() //Don't load tags on mobile
 				}
 				
 
@@ -474,9 +560,6 @@
 					this.lastRange = e.range
 					this.startOffset = parseInt(e.range.startOffset)
 					return
-
-					// const rect = e.range.getBoundingClientRect()
-					// this.moveArtificialCaret(rect)
 				})
 
 				//Change button states on editor when element is active
@@ -995,26 +1078,53 @@
 		margin: 45px 0 45px 0;
 		position: relative;
 	}
-	.artificial-caret {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 21px;
-		width: 1.5px;
-		margin: 0 0;
-		/*opacity: 0.3;*/
-		background-color: rgb(33, 186, 69);
-		animation: blinker 1.1s ease-in-out infinite;
-	}
-/*	.artificial-caret:after {
-		content: '';
-		width: 3px;
-		height: 3px;
-		margin: 0 0 0 -1px;
-		display: block;
-		background-color: rgb(33, 186, 69);
 
-	}*/
+		.note-mini-tag-area {
+			position: fixed;
+			width: 100px;
+			left: calc(15% - 100px);
+			top: 46px;
+			bottom: 0;
+			height: 500px;
+			z-index: 1000;
+			overflow-y: scroll;
+			scrollbar-width: none;
+			scrollbar-color: transparent transparent;
+		}
+		.subtle-tag {
+			display: inline-block;
+			width: 100%;
+			padding: 2px 1px 2px 4px;
+			margin: 0 0 2px;
+			border: 1px solid transparent;
+			border-right: none;
+			border-top-left-radius: 4px;
+			border-bottom-left-radius: 4px;
+			color: var(--text_color);
+			background-color: transparent;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			transition: color ease 0.3s, background ease 0.3s;
+			font-size: 12px;
+			cursor: pointer;
+			opacity: 0;
+		}
+		.note-mini-tag-area:hover .subtle-tag {
+			opacity: 1;
+		} 
+		.note-mini-tag-area:hover .subtle-tag:not(.active-mini-tag) {
+			border-right: none;
+			color: var(--text_color);
+			background-color: var(--body_bg_color);
+			opacity: 1;
+		}
+		.active-mini-tag {
+			opacity: 0.6;
+			background-color: #16ab39;
+			color: white;
+		}
+
 
 	@keyframes blinker {
 		50% {