forked from kaverti/website
318 lines
8.7 KiB
Vue
318 lines
8.7 KiB
Vue
<style>
|
|
h1 {
|
|
font-size: 32px ;
|
|
}
|
|
h2 {
|
|
font-size: 24px ;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class='route_container'>
|
|
<confirm-modal
|
|
v-model='showConfirmModal'
|
|
@confirm='deleteAccount'
|
|
color='red'
|
|
text='Delete it!'
|
|
>
|
|
Are you sure you want to delete your account? <br> Make sure its the correct account, not even support can recover it!
|
|
<br>
|
|
<fancy-input
|
|
placeholder='Current password'
|
|
v-model='deleteAcc.password'
|
|
:error='deleteAcc.errors["current password"]'
|
|
type='password'
|
|
></fancy-input>
|
|
</confirm-modal>
|
|
|
|
<h1>Account settings</h1>
|
|
<br>
|
|
<div>
|
|
<h2>Change your password</h2>
|
|
<p class='p--condensed'>
|
|
For security, enter your current password
|
|
</p>
|
|
<div>
|
|
<fancy-input
|
|
placeholder='Current password'
|
|
v-model='password.current'
|
|
:error='password.errors["current password"]'
|
|
type='password'
|
|
></fancy-input>
|
|
</div>
|
|
<div>
|
|
<fancy-input
|
|
placeholder='New password'
|
|
v-model='password.new'
|
|
:error='password.errors["new password"]'
|
|
type='password'
|
|
></fancy-input>
|
|
</div>
|
|
<b-button
|
|
class='button is-success'
|
|
@click='savePassword'
|
|
:loading='password.loading'
|
|
>Change password</b-button>
|
|
</div>
|
|
<div>
|
|
<br>
|
|
<h2>Change your email address</h2>
|
|
<p>Your email is currently: {{$store.state.email}}</p>
|
|
<p v-if="$store.state.emailVerified">Your email is verified!</p>
|
|
<p v-if="!$store.state.emailVerified">Your email is not verified, you may lose some functionality in the future with an unverified email address, if you entered your email wrong, you can change it here, or resend it.</p>
|
|
<b-button @click='verifyEmailResend' :loading='email.loading' v-if="!$store.state.emailVerified">Resend Verification Email</b-button>
|
|
<p v-if="$store.state.emailVerified == null">Connecting...</p>
|
|
<p v-if="$store.state.emailVerified == undefined">Connecting...</p>
|
|
<div>
|
|
<fancy-input
|
|
placeholder='New email'
|
|
v-model='email.new'
|
|
:error='email.errors["new email"]'
|
|
type='email'
|
|
></fancy-input>
|
|
</div>
|
|
<div>
|
|
<fancy-input
|
|
placeholder='Current password'
|
|
v-model='email.currentPassword'
|
|
:error='email.errors["email current password"]'
|
|
type='password'
|
|
></fancy-input>
|
|
</div>
|
|
<b-button
|
|
class='button is-success'
|
|
@click='saveEmail'
|
|
:loading='email.loadingChange'
|
|
>Change email address</b-button>
|
|
</div>
|
|
<div style="display: none;"> <!-- remove style attribute once you finish making 2FA functionality -->
|
|
<br>
|
|
<h2>Enable 2 Factor Authentication <trpl-para>(Highly Recommended)</trpl-para></h2>
|
|
<p class='p--condensed'>
|
|
For security, enter your current password
|
|
</p>
|
|
<p>
|
|
2FA is currently unavailable.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<br>
|
|
<h2>Dangerous Options!</h2>
|
|
<h3>Delete your account</h3>
|
|
<p>
|
|
Once this is done, your account <strong>cannot</strong> be restored <br/>
|
|
Your current posts however will be retained, and will show up as the [deleted] user.
|
|
</p>
|
|
<b-button
|
|
class='button is-danger'
|
|
:loading='deleteAccountLoading'
|
|
@click='showConfirmModal = true'
|
|
>Delete my account</b-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FancyInput from '../FancyInput'
|
|
import ConfirmModal from '../ConfirmModal'
|
|
|
|
import AjaxErrorHandler from '../../assets/js/errorHandler'
|
|
import logger from '../../assets/js/logger'
|
|
|
|
export default {
|
|
name: 'settingsAccount',
|
|
components: {
|
|
FancyInput,
|
|
ConfirmModal
|
|
},
|
|
data () {
|
|
return {
|
|
password: {
|
|
loading: false,
|
|
|
|
current: '',
|
|
new: '',
|
|
|
|
errors: {
|
|
'new password': '',
|
|
'current password': ''
|
|
}
|
|
},
|
|
email: {
|
|
loading: false,
|
|
loadingChange: false,
|
|
|
|
currentPassword: '',
|
|
new: '',
|
|
|
|
errors: {
|
|
'new password': '',
|
|
'email current password': ''
|
|
}
|
|
},
|
|
deleteAcc: {
|
|
loading: false,
|
|
|
|
password: '',
|
|
|
|
errors: {
|
|
'current password': ''
|
|
}
|
|
},
|
|
|
|
deleteAccountLoading: false,
|
|
showConfirmModal: false
|
|
}
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
savePassword() {
|
|
this.password.errors['current password'] = ''
|
|
this.password.errors['new password'] = ''
|
|
|
|
if (!this.password.current.length) {
|
|
this.password.errors['current password'] = 'Cannot be blank'
|
|
return
|
|
}
|
|
if (!this.password.new.length) {
|
|
this.password.errors['new password'] = 'Cannot be blank'
|
|
return
|
|
}
|
|
|
|
this.password.loading = true
|
|
|
|
this.axios
|
|
.put('/api/v1/user/' + this.$store.state.username, {
|
|
currentPassword: this.password.current,
|
|
newPassword: this.password.new
|
|
})
|
|
.then(() => {
|
|
this.password.loading = false
|
|
this.email.loading = false
|
|
|
|
this.password.current = ''
|
|
this.password.new = ''
|
|
})
|
|
.catch(e => {
|
|
this.password.loading = false
|
|
this.email.loading = false
|
|
|
|
console.log(e)
|
|
|
|
AjaxErrorHandler(this.$store)(e, error => {
|
|
if (error.path === 'hash') {
|
|
this.password.errors['new password'] = error.message
|
|
}
|
|
})
|
|
})
|
|
},
|
|
saveEmail() {
|
|
this.email.errors['email current password'] = ''
|
|
this.email.errors['new email'] = ''
|
|
|
|
if (!this.email.currentPassword.length) {
|
|
this.email.errors['email current password'] = 'Cannot be blank'
|
|
return
|
|
}
|
|
if (!this.email.new.length) {
|
|
this.email.errors['new email'] = 'Cannot be blank'
|
|
return
|
|
}
|
|
|
|
this.email.loadingChange = true
|
|
|
|
this.axios
|
|
.put('/api/v1/user/' + this.$store.state.username, {
|
|
emailCurrentPassword: this.email.currentPassword,
|
|
newEmail: this.email.new
|
|
})
|
|
.then(() => {
|
|
this.email.currentPassword = ''
|
|
this.email.newEmail = ''
|
|
this.axios
|
|
.post('/api/v1/users/email-send')
|
|
.then(() => {
|
|
this.email.loadingChange = false
|
|
AjaxErrorHandler("Success, your email has been changed, and a verification email has been sent to your new email: " + this.$store.state.email)
|
|
})
|
|
.catch(e => {
|
|
this.email.loadingChange = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
this.axios.get('/api/v1/userinfo')
|
|
.then(res => {
|
|
this.$store.commit('setUsername', res.data.username)
|
|
this.$store.commit('setEmail', res.data.email)
|
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
|
this.$store.commit('setAdmin', res.data.admin)
|
|
})
|
|
})
|
|
.catch(e => {
|
|
this.email.loadingChange = false
|
|
|
|
console.log(e)
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
.catch(e => {
|
|
this.showConn(e)
|
|
})
|
|
},
|
|
|
|
deleteAccount() {
|
|
this.deleteAccountLoading = true
|
|
this.axios
|
|
.put('/api/v1/users/delete', {
|
|
password: this.deleteAcc.password
|
|
})
|
|
.then(() => {
|
|
this.deleteAccountLoading = false
|
|
|
|
this.$store.commit('setUsername', null)
|
|
this.$router.push('/')
|
|
})
|
|
.catch(e => {
|
|
this.deleteAccountLoading = false
|
|
console.log(e)
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
verifyEmailResend() {
|
|
this.email.loading = true
|
|
|
|
this.axios
|
|
.post('/api/v1/users/email-send')
|
|
.then(() => {
|
|
this.email.loading = false
|
|
})
|
|
.catch(e => {
|
|
this.email.loading = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$store.dispatch('setTitle', 'Account Settings')
|
|
this.axios.get('/api/v1/userinfo')
|
|
.then(res => {
|
|
this.$store.commit('setUsername', res.data.username)
|
|
this.$store.commit('setEmail', res.data.email)
|
|
this.$store.commit('setEmailVerified', res.data.emailVerified)
|
|
this.$store.commit('setAdmin', res.data.admin)
|
|
})
|
|
.catch(e => {
|
|
this.showConn(e)
|
|
})
|
|
logger('settingsAccount')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
@import '../../assets/scss/variables.scss';
|
|
|
|
@media (max-width: $breakpoint--tablet) {
|
|
.h1 {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|