Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

* Adjusted theme colors to add more contrast on white theme while making black more OLED friendly

Browse Source 
* Links now get an underline on hover
* Cleaned up CSS variable names, added another theme color for more control
* Cleaned up unused CSS, removed scrollbars popping up, tons of other little UI tweaks
* Renamed shared notes to inbox
* Tweaked form display, seperated login and create accouts
* Put login/sign up form on home page
* Created more legitimate marketing for home page
* Tons up updates to note page and note input panel
* Better support for two users editing a note
* MUCH better diff handling, web sockets restore notes with unsaved diffs
* Moved all squire text modifier functions into a mixin class
* It now says saving when closing a note
* Lots of cleanup and better handiling of events on mount and destroy
* Scroll behavior modified to load notes when closer to bottom of page
* Pretty decent shared notes and sharable link support
* Updated help text
* Search now includes tag suggestions and attachment suggestions
* Cleaned up scratch pad a ton, allow for users to create new scratch pads
* Created a 404 Page and a Shared note page
* So many other small improvements. Oh my god, what is wrong with me, not doing commits!?
This commit is contained in:
Max G
2020-06-07 20:57:35 +00:00
parent 09cccf1983
commit d349fb8328
31 changed files with 1605 additions and 1095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
client/src/components/LoginFormComponent.vue
View File

@@ -1,11 +1,12 @@
<template>
<div v-on:keyup.enter="submit()">
<div v-on:keyup.enter="login()">
<!-- thicc form display -->
<div v-if="!thin" class="ui large form">
<div class="field">
<div class="ui input">
<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail address" autofocus>
<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail">
</div>
</div>
<div class="field">
@@ -13,27 +14,48 @@
<input v-model="password" type="password" name="password" placeholder="Password">
</div>
</div>
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="submit" class="ui massive compact fluid green submit button">Sign Up / Login</div>
</div>
<div v-if="thin" class="ui small form">
<div class="fields">
<div class="six wide field">
<div class="ui input">
<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail address" autofocus>
</div>
<div class="sixteen wide field">
<div class="ui fluid buttons">
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="login()" class="ui green button">
<i class="power icon"></i>
Login
</div>
<div class="six wide field">
<div class="ui input">
<input v-model="password" type="password" name="password" placeholder="Password">
</div>
</div>
<div class="four wide field">
<div :class="{ 'disabled':(username.length == 0 || password.length == 0)}" v-on:click="submit" class="ui fluid green submit button">Sign Up / Login</div>
<div class="or"></div>
<div v-on:click="register()" class="ui button">
<i class="plug icon"></i>
Sign Up
</div>
</div>
</div>
</div>
<!-- Thin form display -->
<div v-if="thin" class="ui small form">
<div class="fields">
<div class="four wide field">
<div class="ui input">
<input ref="nameForm" v-model="username" type="text" name="email" placeholder="Username or E-mail">
</div>
</div>
<div class="four wide field">
<div class="ui input">
<input v-model="password" type="password" name="password" placeholder="Password">
</div>
</div>
<div class="four wide field">
<div v-on:click="register()" class="ui fluid green button">
<i class="plug icon"></i>
Sign Up
</div>
</div>
<div class="four wide field">
<div v-on:click="login()" class="ui fluid button">
<i class="power icon"></i>
Login
</div>
</div>
</div>
</div>
@@ -65,43 +87,64 @@
}
},
methods: {
submit(){
finalizeLogin(data){
//Both fields are required
if(this.username <= 0){
return false
}
if(this.password <= 0){
return false
//Destroy local data if there is an error
if(data == false){
this.$store.commit('destroyLoginToken')
return
}
let vm = this
//Login user if we have a valid token
if(data && data.token && data.token.length > 0){
const token = data.token
const username = this.username
let data = {
username: this.username,
password: this.password
this.$store.commit('setLoginToken', {token, username})
//Setup socket io after user logs in
this.$io.emit('user_connect', token)
//Redirect user to notes section after login
this.$router.push('/notes')
}
},
register(){
if( this.username.length == 0 || this.password.length == 0 ){
this.$bus.$emit('notification', 'Username and Password Required')
return
}
axios.post('/api/user/login', data)
.then(response => {
if(response.data.success){
const token = response.data.token
const username = response.data.username
const masterKey = response.data.masterKey
axios.post('/api/user/register', {'username': this.username, 'password': this.password})
.then(({data}) => {
this.$store.commit('setLoginToken', {token, username, masterKey})
//Setup socket io after user logs in
this.$io.emit('user_connect', token)
//Redirect user to notes section after login
this.$router.push('/notes')
} else {
// this.password = ''
this.$bus.$emit('notification', 'Incorrect Username or Password')
vm.$store.commit('destroyLoginToken')
if(data == false){
this.$bus.$emit('notification', 'Username already in use')
}
this.finalizeLogin(data)
})
.catch(error => {
this.$bus.$emit('notification', 'Username already in use')
})
},
login(){
if( this.username.length == 0 || this.password.length == 0 ){
this.$bus.$emit('notification', 'Username and Password Required')
return
}
axios.post('/api/user/login', {'username': this.username, 'password': this.password})
.then(({data}) => {
if(data == false){
this.$bus.$emit('notification', 'Incorrect Username or Password')
}
this.finalizeLogin(data)
})
.catch(error => {
this.$bus.$emit('notification', 'Incorrect Username or Password')