feat: move user settings to multiple components #889
|
@ -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)
|
||||
|
|
|
@ -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
76
src/views/user/settings/PasswordUpdate.vue
Normal 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>
|
Reference in New Issue
Block a user