Cleanup code & make sure it has a common code style
This commit is contained in:
kolaente
parent
4a8b15e7be
commit
a8a7f70a3c
GPG key ID:
F40E70337AB24C9B
132 changed files with 6821 additions and 6595 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="loader-container is-max-width-desktop"
|
||||
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
|
||||
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }"
|
||||
class="loader-container is-max-width-desktop">
|
||||
<!-- Password update -->
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
|
|
@ -16,43 +16,43 @@
|
|||
<label class="label" for="newPassword">New Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
id="newPassword"
|
||||
placeholder="The new password..."
|
||||
v-model="passwordUpdate.newPassword"
|
||||
@keyup.enter="updatePassword"/>
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="newPassword"
|
||||
placeholder="The new password..."
|
||||
type="password"
|
||||
v-model="passwordUpdate.newPassword"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="newPasswordConfirm">New Password Confirmation</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
id="newPasswordConfirm"
|
||||
placeholder="Confirm your new password..."
|
||||
v-model="passwordConfirm"
|
||||
@keyup.enter="updatePassword"/>
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="newPasswordConfirm"
|
||||
placeholder="Confirm your new password..."
|
||||
type="password"
|
||||
v-model="passwordConfirm"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Current Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
v-model="passwordUpdate.oldPassword"
|
||||
@keyup.enter="updatePassword"/>
|
||||
@keyup.enter="updatePassword"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-model="passwordUpdate.oldPassword"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="bigbuttons">
|
||||
<button @click="updatePassword()" class="button is-primary is-fullwidth"
|
||||
:class="{ 'is-loading': passwordUpdateService.loading}">
|
||||
<button :class="{ 'is-loading': passwordUpdateService.loading}" @click="updatePassword()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -74,31 +74,31 @@
|
|||
<label class="label" for="newEmail">New Email Address</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="email"
|
||||
id="newEmail"
|
||||
placeholder="The new email address..."
|
||||
v-model="emailUpdate.newEmail"
|
||||
@keyup.enter="updateEmail"/>
|
||||
@keyup.enter="updateEmail"
|
||||
class="input"
|
||||
id="newEmail"
|
||||
placeholder="The new email address..."
|
||||
type="email"
|
||||
v-model="emailUpdate.newEmail"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Current Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
v-model="emailUpdate.password"
|
||||
@keyup.enter="updateEmail"/>
|
||||
@keyup.enter="updateEmail"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-model="emailUpdate.password"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="bigbuttons">
|
||||
<button @click="updateEmail()" class="button is-primary is-fullwidth"
|
||||
:class="{ 'is-loading': emailUpdateService.loading}">
|
||||
<button :class="{ 'is-loading': emailUpdateService.loading}" @click="updateEmail()"
|
||||
class="button is-primary is-fullwidth">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -118,10 +118,10 @@
|
|||
</header>
|
||||
<div class="card-content">
|
||||
<a
|
||||
class="button is-primary"
|
||||
v-if="!totpEnrolled && totp.secret === ''"
|
||||
@click="totpEnroll()"
|
||||
:class="{ 'is-loading': totpService.loading }">
|
||||
:class="{ 'is-loading': totpService.loading }"
|
||||
@click="totpEnroll()"
|
||||
class="button is-primary"
|
||||
v-if="!totpEnrolled && totp.secret === ''">
|
||||
Enroll
|
||||
</a>
|
||||
<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
|
||||
|
|
@ -138,38 +138,38 @@
|
|||
<label class="label" for="totpConfirmPasscode">Passcode</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
id="totpConfirmPasscode"
|
||||
placeholder="A code generated by your totp application"
|
||||
v-model="totpConfirmPasscode"
|
||||
@keyup.enter="totpConfirm()"/>
|
||||
@keyup.enter="totpConfirm()"
|
||||
class="input"
|
||||
id="totpConfirmPasscode"
|
||||
placeholder="A code generated by your totp application"
|
||||
type="text"
|
||||
v-model="totpConfirmPasscode"/>
|
||||
</div>
|
||||
</div>
|
||||
<a class="button is-primary" @click="totpConfirm()">Confirm</a>
|
||||
<a @click="totpConfirm()" class="button is-primary">Confirm</a>
|
||||
</div>
|
||||
<div class="content" v-else-if="totp.secret !== '' && totp.enabled">
|
||||
<p>
|
||||
You've sucessfully set up two factor authentication!
|
||||
</p>
|
||||
<p v-if="!totpDisableForm">
|
||||
<a class="button is-danger" @click="totpDisableForm = true">Disable</a>
|
||||
<a @click="totpDisableForm = true" class="button is-danger">Disable</a>
|
||||
</p>
|
||||
<div v-if="totpDisableForm">
|
||||
<div class="field">
|
||||
<label class="label" for="currentPassword">Please Enter Your Password</label>
|
||||
<div class="control">
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
v-model="totpDisablePassword"
|
||||
@keyup.enter="totpDisable"
|
||||
v-focus/>
|
||||
@keyup.enter="totpDisable"
|
||||
class="input"
|
||||
id="currentPassword"
|
||||
placeholder="Your current password"
|
||||
type="password"
|
||||
v-focus
|
||||
v-model="totpDisablePassword"/>
|
||||
</div>
|
||||
</div>
|
||||
<a class="button is-danger" @click="totpDisable()">Disable two factor authentication</a>
|
||||
<a @click="totpDisable()" class="button is-danger">Disable two factor authentication</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,9 +182,9 @@
|
|||
</header>
|
||||
<div class="card-content">
|
||||
<router-link
|
||||
class="button is-primary is-right noshadow is-outlined"
|
||||
:to="{name: 'migrate.start'}"
|
||||
v-if="migratorsEnabled"
|
||||
:to="{name: 'migrate.start'}"
|
||||
class="button is-primary is-right noshadow is-outlined"
|
||||
v-if="migratorsEnabled"
|
||||
>
|
||||
Import your data into Vikunja
|
||||
</router-link>
|
||||
|
|
@ -194,131 +194,131 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import PasswordUpdateModel from '../../models/passwordUpdate'
|
||||
import PasswordUpdateService from '../../services/passwordUpdateService'
|
||||
import EmailUpdateService from '../../services/emailUpdate'
|
||||
import EmailUpdateModel from '../../models/emailUpdate'
|
||||
import TotpModel from '../../models/totp'
|
||||
import TotpService from '../../services/totp'
|
||||
import PasswordUpdateModel from '../../models/passwordUpdate'
|
||||
import PasswordUpdateService from '../../services/passwordUpdateService'
|
||||
import EmailUpdateService from '../../services/emailUpdate'
|
||||
import EmailUpdateModel from '../../models/emailUpdate'
|
||||
import TotpModel from '../../models/totp'
|
||||
import TotpService from '../../services/totp'
|
||||
|
||||
import {mapState} from 'vuex'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
import AvatarSettings from '../../components/user/avatar-settings'
|
||||
import AvatarSettings from '../../components/user/avatar-settings'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
data() {
|
||||
return {
|
||||
passwordUpdateService: PasswordUpdateService,
|
||||
passwordUpdate: PasswordUpdateModel,
|
||||
passwordConfirm: '',
|
||||
export default {
|
||||
name: 'Settings',
|
||||
data() {
|
||||
return {
|
||||
passwordUpdateService: PasswordUpdateService,
|
||||
passwordUpdate: PasswordUpdateModel,
|
||||
passwordConfirm: '',
|
||||
|
||||
emailUpdateService: EmailUpdateService,
|
||||
emailUpdate: EmailUpdateModel,
|
||||
emailUpdateService: EmailUpdateService,
|
||||
emailUpdate: EmailUpdateModel,
|
||||
|
||||
totpService: TotpService,
|
||||
totp: TotpModel,
|
||||
totpQR: '',
|
||||
totpEnrolled: false,
|
||||
totpConfirmPasscode: '',
|
||||
totpDisableForm: false,
|
||||
totpDisablePassword: '',
|
||||
totpService: TotpService,
|
||||
totp: TotpModel,
|
||||
totpQR: '',
|
||||
totpEnrolled: false,
|
||||
totpConfirmPasscode: '',
|
||||
totpDisableForm: false,
|
||||
totpDisablePassword: '',
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AvatarSettings,
|
||||
},
|
||||
created() {
|
||||
this.passwordUpdateService = new PasswordUpdateService()
|
||||
this.passwordUpdate = new PasswordUpdateModel()
|
||||
|
||||
this.emailUpdateService = new EmailUpdateService()
|
||||
this.emailUpdate = new EmailUpdateModel()
|
||||
|
||||
this.totpService = new TotpService()
|
||||
this.totp = new TotpModel()
|
||||
|
||||
this.totpStatus()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Settings')
|
||||
},
|
||||
computed: mapState({
|
||||
totpEnabled: state => state.config.totpEnabled,
|
||||
migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
|
||||
}),
|
||||
methods: {
|
||||
updatePassword() {
|
||||
if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
|
||||
this.error({message: 'The new password and its confirmation don\'t match.'}, this)
|
||||
return
|
||||
}
|
||||
|
||||
this.passwordUpdateService.update(this.passwordUpdate)
|
||||
.then(() => {
|
||||
this.success({message: 'The password was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
components: {
|
||||
AvatarSettings,
|
||||
updateEmail() {
|
||||
this.emailUpdateService.update(this.emailUpdate)
|
||||
.then(() => {
|
||||
this.success({message: 'Your email address was successfully updated. We\'ve sent you a link to confirm it.'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
created() {
|
||||
this.passwordUpdateService = new PasswordUpdateService()
|
||||
this.passwordUpdate = new PasswordUpdateModel()
|
||||
|
||||
this.emailUpdateService = new EmailUpdateService()
|
||||
this.emailUpdate = new EmailUpdateModel()
|
||||
|
||||
this.totpService = new TotpService()
|
||||
this.totp = new TotpModel()
|
||||
|
||||
this.totpStatus()
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle('Settings')
|
||||
},
|
||||
computed: mapState({
|
||||
totpEnabled: state => state.config.totpEnabled,
|
||||
migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
|
||||
}),
|
||||
methods: {
|
||||
updatePassword() {
|
||||
if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
|
||||
this.error({message: 'The new password and its confirmation don\'t match.'}, this)
|
||||
return
|
||||
}
|
||||
|
||||
this.passwordUpdateService.update(this.passwordUpdate)
|
||||
.then(() => {
|
||||
this.success({message: 'The password was successfully updated.'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
updateEmail() {
|
||||
this.emailUpdateService.update(this.emailUpdate)
|
||||
.then(() => {
|
||||
this.success({message: 'Your email address was successfully updated. We\'ve sent you a link to confirm it.'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
totpStatus() {
|
||||
if (!this.totpEnabled) {
|
||||
return
|
||||
}
|
||||
this.totpService.get()
|
||||
.then(r => {
|
||||
this.$set(this, 'totp', r)
|
||||
this.totpSetQrCode()
|
||||
})
|
||||
.catch(e => {
|
||||
// Error code 1016 means totp is not enabled, we don't need an error in that case.
|
||||
if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
|
||||
this.totpEnrolled = false
|
||||
return
|
||||
}
|
||||
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
totpSetQrCode() {
|
||||
this.totpService.qrcode()
|
||||
.then(qr => {
|
||||
const urlCreator = window.URL || window.webkitURL
|
||||
this.totpQR = urlCreator.createObjectURL(qr)
|
||||
})
|
||||
},
|
||||
totpEnroll() {
|
||||
this.totpService.enroll()
|
||||
.then(r => {
|
||||
this.totpEnrolled = true
|
||||
this.$set(this, 'totp', r)
|
||||
this.totpSetQrCode()
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
totpConfirm() {
|
||||
this.totpService.enable({passcode: this.totpConfirmPasscode})
|
||||
.then(() => {
|
||||
this.$set(this.totp, 'enabled', true)
|
||||
this.success({message: 'You\'ve successfully confirmed your totp setup and can use it from now on!'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
totpDisable() {
|
||||
this.totpService.disable({password: this.totpDisablePassword})
|
||||
.then(() => {
|
||||
totpStatus() {
|
||||
if (!this.totpEnabled) {
|
||||
return
|
||||
}
|
||||
this.totpService.get()
|
||||
.then(r => {
|
||||
this.$set(this, 'totp', r)
|
||||
this.totpSetQrCode()
|
||||
})
|
||||
.catch(e => {
|
||||
// Error code 1016 means totp is not enabled, we don't need an error in that case.
|
||||
if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
|
||||
this.totpEnrolled = false
|
||||
this.$set(this, 'totp', new TotpModel())
|
||||
this.success({message: 'Two factor authentication was sucessfully disabled.'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
return
|
||||
}
|
||||
|
||||
this.error(e, this)
|
||||
})
|
||||
},
|
||||
}
|
||||
totpSetQrCode() {
|
||||
this.totpService.qrcode()
|
||||
.then(qr => {
|
||||
const urlCreator = window.URL || window.webkitURL
|
||||
this.totpQR = urlCreator.createObjectURL(qr)
|
||||
})
|
||||
},
|
||||
totpEnroll() {
|
||||
this.totpService.enroll()
|
||||
.then(r => {
|
||||
this.totpEnrolled = true
|
||||
this.$set(this, 'totp', r)
|
||||
this.totpSetQrCode()
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
totpConfirm() {
|
||||
this.totpService.enable({passcode: this.totpConfirmPasscode})
|
||||
.then(() => {
|
||||
this.$set(this.totp, 'enabled', true)
|
||||
this.success({message: 'You\'ve successfully confirmed your totp setup and can use it from now on!'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
totpDisable() {
|
||||
this.totpService.disable({password: this.totpDisablePassword})
|
||||
.then(() => {
|
||||
this.totpEnrolled = false
|
||||
this.$set(this, 'totp', new TotpModel())
|
||||
this.success({message: 'Two factor authentication was sucessfully disabled.'}, this)
|
||||
})
|
||||
.catch(e => this.error(e, this))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Reference in a new issue