chore(settings): remove dead legacy code

apps/settings/css/settings.scss

@@ -291,61 +291,6 @@ table.nostyle {
 	}
 }
 
-#security-password {
-	#passwordform {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
-		gap: 1rem;
-		.input-control {
-			display: flex;
-			flex-wrap: wrap;
-			flex-direction: column;
-			label {
-				margin-bottom: 0.5rem;
-			}
-		}
-
-		#pass1, .personal-show-container {
-			flex-shrink: 1;
-			width: 300px;
-			min-width: 150px;
-		}
-
-		// Extremely fragile code, to be replaced by PasswordField component soon
-		.personal-show-container {
-			#pass2 {
-				position: relative;
-				top: 0.5rem;
-			}
-			.personal-show-label {
-				top: 34px !important;
-				margin-inline-end: 0;
-				margin-top: 0 !important;
-				inset-inline-end: 3px;
-			}
-		}
-
-		#pass2 {
-			width: 100%;
-		}
-
-		.password-state {
-			display: inline-block;
-		}
-
-		.strengthify-wrapper {
-			position: absolute;
-			inset-inline-start: 0;
-			width: 100%;
-			border-radius: 0 0 2px 2px;
-			margin-top: 5px;
-			overflow: hidden;
-			height: 3px;
-		}
-	}
-}
-
 /* Two-Factor Authentication (2FA) */
 
 #two-factor-auth {

apps/settings/src/components/PasswordSection.vue

@@ -2,86 +2,85 @@
   - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
-<template>
-	<NcSettingsSection :name="t('settings', 'Password')">
-		<form id="passwordform" method="POST" @submit.prevent="changePassword">
-			<NcPasswordField
-				id="old-pass"
-				v-model="oldPass"
-				:label="t('settings', 'Current password')"
-				name="oldpassword"
-				autocomplete="current-password"
-				autocapitalize="none"
-				spellcheck="false" />
-
-			<NcPasswordField
-				id="new-pass"
-				v-model="newPass"
-				:label="t('settings', 'New password')"
-				:maxlength="469"
-				autocomplete="new-password"
-				autocapitalize="none"
-				spellcheck="false"
-				:check-password-strength="true" />
-
-			<NcButton
-				variant="primary"
-				type="submit"
-				:disabled="newPass.length === 0 || oldPass.length === 0">
-				{{ t('settings', 'Change password') }}
-			</NcButton>
-		</form>
-	</NcSettingsSection>
-</template>
 
-<script>
+<script setup lang="ts">
 import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
+import { NcFormBox } from '@nextcloud/vue'
+import { ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 
-export default {
-	name: 'PasswordSection',
-	components: {
-		NcSettingsSection,
-		NcButton,
-		NcPasswordField,
-	},
+const passwordform = ref<HTMLFormElement>()
 
-	data() {
-		return {
-			oldPass: '',
-			newPass: '',
-		}
-	},
+const oldPass = ref('')
+const newPass = ref('')
 
-	methods: {
-		changePassword() {
-			axios.post(generateUrl('/settings/personal/changepassword'), {
-				oldpassword: this.oldPass,
-				newpassword: this.newPass,
-			})
-				.then((res) => res.data)
-				.then((data) => {
-					if (data.status === 'error') {
-						this.errorMessage = data.data.message
-						showError(data.data.message)
-					} else {
-						showSuccess(data.data.message)
-					}
-				})
-		},
-	},
+/**
+ * Change the user's password
+ */
+async function changePassword() {
+	const { data } = await axios.post(generateUrl('/settings/personal/changepassword'), {
+		oldpassword: oldPass.value,
+		newpassword: newPass.value,
+	})
+	if (data.status === 'error') {
+		showError(data.data.message)
+	} else {
+		showSuccess(data.data.message)
+		oldPass.value = ''
+		newPass.value = ''
+		passwordform.value?.reset()
+	}
 }
 </script>
 
-<style>
-	#passwordform {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		max-width: 400px;
-	}
+<template>
+	<NcSettingsSection :name="t('settings', 'Password')">
+		<form
+			ref="passwordform"
+			:class="$style.passwordSection__form"
+			@submit.prevent="changePassword">
+			<NcFormBox>
+				<NcPasswordField
+					v-model="oldPass"
+					:label="t('settings', 'Current password')"
+					name="oldpassword"
+					autocomplete="current-password"
+					autocapitalize="none"
+					required
+					spellcheck="false" />
+
+				<NcPasswordField
+					v-model="newPass"
+					check-password-strength
+					:label="t('settings', 'New password')"
+					:maxlength="469"
+					name="newpassword"
+					autocomplete="new-password"
+					autocapitalize="none"
+					required
+					spellcheck="false" />
+			</NcFormBox>
+
+			<NcButton
+				type="submit"
+				variant="primary"
+				wide>
+				{{ t('settings', 'Change password') }}
+			</NcButton>
+		</form>
+	</NcSettingsSection>
+</template>
+
+<style module>
+.passwordSection__form {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--default-grid-baseline));
+	max-width: 300px !important;
+}
 </style>