vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: move password update settings to separate component

This commit is contained in:
kolaente 2021-10-21 22:16:04 +02:00
parent 39330e0b8d
commit df553db969
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/user/Settings.vue
View File

@ -1,59 +1,10 @@
<template>
<div
:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }"
:class="{ 'is-loading': emailUpdateService.loading || totpService.loading }"
class="loader-container is-max-width-desktop">
<!-- General -->
<!-- Avatar -->
<avatar-settings/>
<!-- Password update -->
<card :title="$t('user.settings.newPasswordTitle')">
<form @submit.prevent="updatePassword()">
<div class="field">
<label class="label" for="newPassword">{{ $t('user.settings.newPassword') }}</label>
<div class="control">
<input
@keyup.enter="updatePassword"
class="input"
id="newPassword"
:placeholder="$t('user.auth.passwordPlaceholder')"
type="password"
v-model="passwordUpdate.newPassword"/>
</div>
</div>
<div class="field">
<label class="label" for="newPasswordConfirm">{{ $t('user.settings.newPasswordConfirm') }}</label>
<div class="control">
<input
@keyup.enter="updatePassword"
class="input"
id="newPasswordConfirm"
:placeholder="$t('user.auth.passwordPlaceholder')"
type="password"
v-model="passwordConfirm"/>
</div>
</div>
<div class="field">
<label class="label" for="currentPassword">{{ $t('user.settings.currentPassword') }}</label>
<div class="control">
<input
@keyup.enter="updatePassword"
class="input"
id="currentPassword"
:placeholder="$t('user.settings.currentPasswordPlaceholder')"
type="password"
v-model="passwordUpdate.oldPassword"/>
</div>
</div>
</form>
<x-button
:loading="passwordUpdateService.loading"
@click="updatePassword()"
class="is-fullwidth mt-4">
{{ $t('misc.save') }}
</x-button>
</card>
<!-- Update E-Mail -->
<card :title="$t('user.settings.updateEmailTitle')">
@ -195,8 +146,6 @@
</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'
@ -214,9 +163,6 @@ export default {
name: 'Settings',
data() {
return {
passwordUpdateService: new PasswordUpdateService(),
passwordUpdate: new PasswordUpdateModel(),
passwordConfirm: '',
emailUpdateService: new EmailUpdateService(),
emailUpdate: new EmailUpdateModel(),
@ -265,15 +211,6 @@ export default {
methods: {
copy,
async updatePassword() {
if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
this.$message.error({message: this.$t('user.settings.passwordsDontMatch')})
return
}
await this.passwordUpdateService.update(this.passwordUpdate)
this.$message.success({message: this.$t('user.settings.passwordUpdateSuccess')})
},
async updateEmail() {
await this.emailUpdateService.update(this.emailUpdate)

2
src/views/user/settings/General.vue
View File

@ -1,5 +1,5 @@
<template>
<card :title="$t('user.settings.general.title')" class="general-settings">
<card :title="$t('user.settings.general.title')" class="general-settings" :loading="userSettingsService.loading">
<div class="field">
<label class="label" for="newName">{{ $t('user.settings.general.name') }}</label>
<div class="control">

76
src/views/user/settings/PasswordUpdate.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<card :title="$t('user.settings.newPasswordTitle')" :loading="passwordUpdateService.loading">
<form @submit.prevent="updatePassword">
<div class="field">
<label class="label" for="newPassword">{{ $t('user.settings.newPassword') }}</label>
<div class="control">
<input
@keyup.enter="updatePassword"
class="input"
id="newPassword"
:placeholder="$t('user.auth.passwordPlaceholder')"
type="password"
v-model="passwordUpdate.newPassword"/>
</div>
</div>
<div class="field">
<label class="label" for="newPasswordConfirm">{{ $t('user.settings.newPasswordConfirm') }}</label>
<div class="control">
<input
@keyup.enter="updatePassword"
class="input"
id="newPasswordConfirm"
:placeholder="$t('user.auth.passwordPlaceholder')"
type="password"
v-model="passwordConfirm"/>
</div>
</div>
<div class="field">
<label class="label" for="currentPassword">{{ $t('user.settings.currentPassword') }}</label>
<div class="control">
<input
@keyup.enter="updatePassword"
class="input"
id="currentPassword"
:placeholder="$t('user.settings.currentPasswordPlaceholder')"
type="password"
v-model="passwordUpdate.oldPassword"/>
</div>
</div>
</form>
<x-button
:loading="passwordUpdateService.loading"
@click="updatePassword"
class="is-fullwidth mt-4">
{{ $t('misc.save') }}
</x-button>
</card>
</template>
<script>
import PasswordUpdateService from '../../../services/passwordUpdateService'
import PasswordUpdateModel from '../../../models/passwordUpdate'
export default {
name: 'user-settings-password-update',
data() {
return {
passwordUpdateService: new PasswordUpdateService(),
passwordUpdate: new PasswordUpdateModel(),
passwordConfirm: '',
}
},
methods: {
async updatePassword() {
if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
this.$message.error({message: this.$t('user.settings.passwordsDontMatch')})
return
}
await this.passwordUpdateService.update(this.passwordUpdate)
this.$message.success({message: this.$t('user.settings.passwordUpdateSuccess')})
},
},
}
</script>