From df553db969d4bfd1c0aea9fc8b027917cb1726df Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Oct 2021 22:16:04 +0200
Subject: [PATCH] feat: move password update settings to separate component

---
 src/views/user/Settings.vue                | 65 +-----------------
 src/views/user/settings/General.vue        |  2 +-
 src/views/user/settings/PasswordUpdate.vue | 76 ++++++++++++++++++++++
 3 files changed, 78 insertions(+), 65 deletions(-)
 create mode 100644 src/views/user/settings/PasswordUpdate.vue

diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index bf145fa9c..978ccd6f4 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -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)
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index 63e50db44..d1941527f 100644
--- a/src/views/user/settings/General.vue
+++ b/src/views/user/settings/General.vue
@@ -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">
diff --git a/src/views/user/settings/PasswordUpdate.vue b/src/views/user/settings/PasswordUpdate.vue
new file mode 100644
index 000000000..2c8bb1817
--- /dev/null
+++ b/src/views/user/settings/PasswordUpdate.vue
@@ -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>