* Added theme colors to form fields
* Added some basic table styles for inserting some shitty tables * Made popup notification styles look better and work better on mobile * Quick note now opens a note and not some weird page * Menu collapses when page is small, behaves like mobile menu * Added terms and conditions to help and login forms * Added password change functionality * Better styles for shared page * Added some tests for changing password
This commit is contained in:
Max G
File diff suppressed because one or more lines are too long
@@ -8,6 +8,23 @@
|
||||
Settings
|
||||
</h2>
|
||||
|
||||
<div class="ui segment">
|
||||
<h3>Change Password</h3>
|
||||
<p>Create a new scratch pad. Old scratch pad will turn into a normal note.</p>
|
||||
<div class="ui compact basic button shrinking" v-if="!showNewNoteConfirm" v-on:click="showNewNoteConfirm = true">
|
||||
<i class="sync alternate reload icon"></i>
|
||||
New Scratch Pad
|
||||
</div>
|
||||
<div v-if="showNewNoteConfirm" class="ui compact basic button shrinking" v-on:click="showNewNoteConfirm = false">
|
||||
<i class="close icon"></i>
|
||||
Cancel
|
||||
</div>
|
||||
<div v-if="showNewNoteConfirm" class="ui compact basic button shrinking" v-on:click="newQuickNote()">
|
||||
<i class="green thumbs up icon"></i>
|
||||
Confirm
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accent Color -->
|
||||
<div class="ui segment">
|
||||
<div class="ui grid">
|
||||
@@ -65,20 +82,20 @@
|
||||
<div class="five wide column">
|
||||
<label>Current Password</label>
|
||||
<div class="ui fluid input">
|
||||
<input type="text" placeholder="Current Password">
|
||||
<input v-model="change1" type="password" placeholder="Current Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="five wide column">
|
||||
<label>New Password</label>
|
||||
<div class="ui fluid input">
|
||||
<input type="text" placeholder="New Password">
|
||||
<input v-model="change2" type="password" placeholder="New Password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="six wide column">
|
||||
<label>Rereat New Password</label>
|
||||
<div class="ui fluid action input">
|
||||
<input type="text" placeholder="Repeat Password">
|
||||
<div class="ui green button">
|
||||
<input v-model="change3" type="password" placeholder="Repeat Password">
|
||||
<div v-on:click="passwordChange()" class="ui button" :class="{'green':(change1.length > 0 && change2 == change3)}">
|
||||
Change it!
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,7 +115,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="eight wide column">
|
||||
<div class="ui button">
|
||||
<div class="ui button" v-on:click="revokeAllSessions()">
|
||||
Log Out all other browsers
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,6 +140,7 @@
|
||||
password: '',
|
||||
qrCode: '',
|
||||
verificationToken: '',
|
||||
showNewNoteConfirm: false,
|
||||
|
||||
themeColors: [
|
||||
'#21BA45', //Green
|
||||
@@ -137,10 +155,26 @@
|
||||
'#fbbd08', //Yellow
|
||||
'#767676', //Grey
|
||||
'#303030', //Black-almost
|
||||
]
|
||||
],
|
||||
|
||||
change1: '',
|
||||
change2: '',
|
||||
change3: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
newQuickNote(){
|
||||
|
||||
this.showNewNoteConfirm = true
|
||||
|
||||
axios.post('/api/quick-note/new')
|
||||
.then( ({data}) => {
|
||||
this.showNewNoteConfirm = false
|
||||
this.$store.dispatch('fetchAndUpdateUserTotals')
|
||||
this.$bus.$emit('notification', 'New Scratch Pad Created')
|
||||
})
|
||||
|
||||
},
|
||||
logout() {
|
||||
this.$store.commit('destroyLoginToken')
|
||||
this.$router.push('/')
|
||||
@@ -176,6 +210,47 @@
|
||||
//It failed
|
||||
}
|
||||
})
|
||||
},
|
||||
passwordChange(){
|
||||
|
||||
if(this.change1 == '' || this.change2 == '' || this.change3 == ''){
|
||||
this.$bus.$emit('notification', 'All Password Fields Required')
|
||||
return
|
||||
}
|
||||
|
||||
if(this.change1 == this.change2){
|
||||
this.$bus.$emit('notification', 'Old password matches new password')
|
||||
return
|
||||
}
|
||||
|
||||
if(this.change2 != this.change3){
|
||||
this.$bus.$emit('notification', 'New Passwords do not match')
|
||||
return
|
||||
}
|
||||
|
||||
const postData = {
|
||||
'currentPass':this.change1,
|
||||
'newPass':this.change3
|
||||
}
|
||||
|
||||
axios.post('/api/user/changepassword', postData)
|
||||
.then(({data}) => {
|
||||
if(data){
|
||||
this.$bus.$emit('notification', 'Success: Password Changed')
|
||||
this.change1 = ''
|
||||
this.change2 = ''
|
||||
this.change3 = ''
|
||||
} else {
|
||||
this.$bus.$emit('notification', 'Failed to change password')
|
||||
this.change1 = ''
|
||||
}
|
||||
})
|
||||
},
|
||||
revokeAllSessions(){
|
||||
axios.post('/api/user/revokesessions')
|
||||
.then(({data}) => {
|
||||
this.$bus.$emit('notification', 'All other active sessions revoked.')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,38 +4,55 @@
|
||||
<div class="sixteen wide column"></div>
|
||||
|
||||
<div class="sixteen wide column" v-if="text.length > 0 || title.length > 0">
|
||||
<div class="ui text container squire-box" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
|
||||
<div class="ui text container">
|
||||
|
||||
<h1 v-if="title">{{title}}</h1>
|
||||
<div class="ui segment" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
|
||||
|
||||
<div v-if="text" v-html="text"></div>
|
||||
<h1 v-if="title">{{title}}</h1>
|
||||
|
||||
<div v-if="text" v-html="text" class="squire-box"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sixteen wide column" v-if="!$store.getters.getLoggedIn">
|
||||
<div class="ui text container">
|
||||
<h2 class="ui header">
|
||||
<img class="small-logo" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
|
||||
<div class="content">
|
||||
Solid Scribe is an easy, free, secure Note App
|
||||
<div class="sub header">
|
||||
Encrypted notes, only readable by you. Unless you share them.
|
||||
|
||||
<div class="ui segment">
|
||||
|
||||
<div class="ui grid">
|
||||
<div class="three wide middle aligned center aligned column">
|
||||
<img class="small-logo" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
|
||||
</div>
|
||||
<div class="thirteen wide column">
|
||||
<!-- header -->
|
||||
<h2 class="ui header">
|
||||
<div class="content">
|
||||
Solid Scribe is an easy, free, secure Note App
|
||||
<div class="sub header">
|
||||
Encrypted notes, only readable by you. Unless you share them.
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<!-- buttons -->
|
||||
<div class="ui grid">
|
||||
<div class="eight wide center aligned column">
|
||||
<router-link class="ui compact green button" to="/login">
|
||||
<i class="plug icon"></i>Sign Up
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="eight wide center aligned column">
|
||||
<router-link class="ui compact green button" to="/">
|
||||
<i class="comment outline icon"></i>
|
||||
Learn More
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<div class="ui grid">
|
||||
<div class="eight wide center aligned column">
|
||||
<router-link class="ui compact green button" to="/login">
|
||||
<i class="plug icon"></i>Sign Up
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="eight wide center aligned column">
|
||||
<router-link class="ui compact green button" to="/">
|
||||
<i class="comment outline icon"></i>
|
||||
Learn More
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,7 +116,7 @@
|
||||
|
||||
<style type="text/css" scoped>
|
||||
.small-logo {
|
||||
width: 30px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user