diff --git a/client/src/App.vue b/client/src/App.vue index 5bb9986..f6e335e 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -13,6 +13,37 @@ +
+
+
+ Authentication Required +
+
+ + {{ $store.getters.getUsername }} +
+ +
+
+
Password
+
+ +
+
+
+
One Time Password
+
+ +
+
+
+ + Submit
+
+ +
+
+ @@ -31,14 +62,18 @@ import axios from 'axios' export default { components: { 'global-site-menu': require('@/components/GlobalSiteMenu.vue').default, - 'global-notification':require('@/components/GlobalNotificationComponent.vue').default + 'global-notification':require('@/components/GlobalNotificationComponent.vue').default, }, data: function(){ return { showFakeSite:false, //Incorrect domain detection redirectSeconds: 15, fetchingInProgress: false, //Prevent start getting token while fetch is in progress - blockUntilNextRequest: false //If token was just renewed, don't fetch more until next request + blockUntilNextRequest: false, //If token was just renewed, don't fetch more until next request + + requireAuth: false, + password: '', + otp: '', } }, @@ -81,6 +116,16 @@ export default { return response }, (error) => { + + //Catch all authorization errors, log user out if we encounter one + if(error.response && error.response.status == 401){ + + this.$router.push('/') + this.$store.commit('destroyLoginToken') + this.$bus.$emit('notification', 'Error: You have been logged out.') + + } + return Promise.reject(error) } ) @@ -127,7 +172,7 @@ export default { mounted: function(){ const isDev = process.env['NODE_ENV'] == 'development' - if(window.location.hostname.toLowerCase() != "www.solidscribe.com" && !isDev){ + if(window.location.hostname.toLowerCase().replace('www.','') != "solidscribe.com" && !isDev){ this.showFakeSite = true setInterval(() => { this.redirectSeconds-- @@ -162,16 +207,23 @@ export default { } }, methods: { - destroyLoginToken() { - this.$store.commit('destroyLoginToken') - }, loginGateway() { if(!this.loggedIn){ console.log('This user is not logged in') this.$router.push({'path':'/login'}) return } - } + }, + logout() { + + this.$router.push('/') + axios.post('/api/user/logout') + + setTimeout(() => { + this.$store.commit('destroyLoginToken') + this.$bus.$emit('notification', 'Logged Out') + }, 200) + }, } } \ No newline at end of file diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css index 5e7d2b6..f2ca033 100644 --- a/client/src/assets/semantic-helper.css +++ b/client/src/assets/semantic-helper.css @@ -39,6 +39,10 @@ html { /*scrollbar-width: none;*/ + width: 100%; + height:100%; + padding: 0; + margin: 0; } a:hover { text-decoration: underline; @@ -47,6 +51,15 @@ div.ui.basic.segment.no-fluf-segment { margin-top: 0px; } +.page-container { + /*width: 100%;*/ + display: block; + margin: 0; + padding: 0.5rem; + box-sizing: border-box; + overflow: hidden; +} + /* Night mode modifiers */ /*Make images sepia in night mode */ @@ -268,7 +281,7 @@ i.green.icon.icon.icon.icon { /*height: calc(100% - 69px);*/ min-height: 500px; - background-color: rgba(255,200,0,0.0); + background-color: var(--small_element_bg_color); /*margin-bottom: 15px;*/ box-sizing: border-box; @@ -282,6 +295,10 @@ i.green.icon.icon.icon.icon { scrollbar-width: none; scrollbar-color: transparent transparent; caret-color: var(--main-accent); + + margin-left: auto; + margin-right: auto; + max-width: 1100px; } .squire-box::selection, .squire-box::-moz-selection { @@ -469,7 +486,7 @@ i.green.icon.icon.icon.icon { @media only screen and (max-width: 740px) { .squire-box { - min-height: calc(100vh - 120px); + min-height: calc(100vh - 122px); } .ui.button.shrinking { @@ -549,6 +566,27 @@ i.green.icon.icon.icon.icon { animation: fade-in-fwd 0.8s both; } +/* div that comes up, blocking interaction annd requiring authentication */ +.auth-block { + background-color: rgba(0,0,0,0.9); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100vh; + width: 100%; + z-index: 200; +} +.auth-block > div { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-50%, -40%); + width: 300px; +} + + /** * ---------------------------------------- * animation fade-in-fwd diff --git a/client/src/components/ColorPicker.vue b/client/src/components/ColorPicker.vue index 1c68e1c..c6aef64 100644 --- a/client/src/components/ColorPicker.vue +++ b/client/src/components/ColorPicker.vue @@ -16,7 +16,7 @@

Note Color

-
{ - - - let mod = (i % 10)+1 //1 - 10 - let lines = [3, 5, 8, 9, 10] - // if(lines.includes(mod)){ + if(i < 20 || i > 69){ reduced.push(color) - // } + } }) - reduced.push("#000") - return reduced }, clearStyles(){ @@ -114,12 +108,17 @@ //Automatically select note text color + //If you are using hex colors, use this // Convert hex color to RGB - http://gist.github.com/983661 - let color = +("0x" + inColor.slice(1).replace(inColor.length < 5 && /./g, '$&$&')); + // let color = +("0x" + inColor.slice(1).replace(inColor.length < 5 && /./g, '$&$&')); + // let r = color >> 16; + // let g = color >> 8 & 255; + // let b = color & 255; - let r = color >> 16; - let g = color >> 8 & 255; - let b = color & 255; + const set = inColor.match(/\d+/g) + const r = parseInt(set[0]) + const g = parseInt(set[1]) + const b = parseInt(set[2]) //Convert RGB to HSP const hsp = Math.sqrt( 0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b) ); diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue index 3b689fb..6b6fb76 100644 --- a/client/src/components/GlobalSiteMenu.vue +++ b/client/src/components/GlobalSiteMenu.vue @@ -83,6 +83,7 @@ /*padding: 5px 1rem 5px;*/ display: flex; justify-content: space-around; + width: 100vw; } .place-holder { width: 100%; @@ -277,20 +278,18 @@
-
- - Terms +
+ + Settings
- - {{ usernameDisplay }} - +
+ Log Out +
- -
{{ version }}
@@ -348,24 +347,18 @@ //Map logged in from state return this.$store.getters.getLoggedIn }, - usernameDisplay() { - - //Remove Emails from username, limit length to 16 chars - let name = this.$store.getters.getUsername - let splitName = name.split('@') - if(splitName.length > 1){ - name = splitName.shift() - this.userIcon = false - } - - if(name.length > 16){ - this.userIcon = false - } - - return this.ucWords(name.substring(0, 16)) - }, }, methods: { + logout() { + + this.$router.push('/') + axios.post('/api/user/logout') + + setTimeout(() => { + this.$store.commit('destroyLoginToken') + this.$bus.$emit('notification', 'Logged Out') + }, 200) + }, newQuickNote(){ axios.post('/api/quick-note/get') diff --git a/client/src/components/LogoComponent.vue b/client/src/components/LogoComponent.vue index dd7f068..86f302d 100644 --- a/client/src/components/LogoComponent.vue +++ b/client/src/components/LogoComponent.vue @@ -73,8 +73,10 @@ \ No newline at end of file diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue index 3fc89e0..713624b 100644 --- a/client/src/components/NoteInputPanel.vue +++ b/client/src/components/NoteInputPanel.vue @@ -133,10 +133,11 @@
-
+
-
+
@@ -154,12 +155,17 @@ v-on:keydown="titleResize" @keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()" rows="1" - :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}" + :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText'] }" v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input"> -
+
@@ -1248,14 +1254,20 @@ .stealth-input { width: 100%; padding: 10px 15px 5px; - background-color: rgba(255,255,255,0.1); + background-color: var(--small_element_bg_color ); border: none; font-size: 1.7em; color: var(--text_color); + caret-color: var(--main-accent); resize: none; overflow: hidden; - margin: 0; + /*margin: 0;*/ outline: none; + display: block; + + margin-left: auto; + margin-right: auto; + max-width: 1100px; } diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue index 4db13fc..7560f57 100644 --- a/client/src/components/NoteTitleDisplayCard.vue +++ b/client/src/components/NoteTitleDisplayCard.vue @@ -25,6 +25,12 @@ class="small-text" v-html="note.subtext"> + + + +
@@ -410,6 +416,7 @@ background-color: var(--small_element_bg_color); /*The subtle shadow*/ /*box-shadow: 0px 1px 2px 1px rgba(210, 211, 211, 0.46);*/ + box-shadow: 2px 2px 6px 0 rgba(0,0,0,.15); transition: box-shadow ease 0.5s, transform linear 0.1s; margin: 5px; /*padding: 0.7em 1em;*/ @@ -562,7 +569,7 @@ @media only screen and (max-width: 700px) { .note-title-display-card { width: calc(100% + 10px); - margin: 0px -5px 10px -5px; + /*margin: 0px -5px 10px -5px;*/ } } @media only screen and (min-width: 700px) and (max-width: 900px) { diff --git a/client/src/components/TextColorTooltipComponent.vue b/client/src/components/TextColorTooltipComponent.vue index 5d3cfdf..2d34d00 100644 --- a/client/src/components/TextColorTooltipComponent.vue +++ b/client/src/components/TextColorTooltipComponent.vue @@ -1,6 +1,6 @@