From 75d95283a5169217c2a899605fbe245069ce6944 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Mon, 2 Nov 2026 16:53:14 +0100
Subject: [PATCH 1/6] test(settings): cover changing the password

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 .../playwright/e2e/settings/password.spec.ts  | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 tests/playwright/e2e/settings/password.spec.ts

diff --git a/tests/playwright/e2e/settings/password.spec.ts b/tests/playwright/e2e/settings/password.spec.ts
new file mode 100644
index 0000000000000..e93fda52bdd28
--- /dev/null
+++ b/tests/playwright/e2e/settings/password.spec.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { login } from '@nextcloud/e2e-test-server/playwright'
+import { expect, request } from '@playwright/test'
+import { test } from '../../support/fixtures/personal-settings-page.ts'
+import { getToast } from '../../support/utils/toast.ts'
+
+const newPassword = 'Another-Passw0rd-for-e2e!'
+
+test.describe('Settings: Change password', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto('/settings/user/security')
+		await expect(page.getByRole('heading', { name: 'Password', level: 2, exact: true })).toBeVisible()
+	})
+
+	test('changes the password', async ({ page, user, baseURL }) => {
+		await page.getByLabel('Current password').fill(user.password)
+		await page.getByLabel('New password').fill(newPassword)
+		await page.getByRole('button', { name: 'Change password' }).click()
+
+		await expect(getToast(page, 'Saved')).toBeVisible()
+		await expect(page.getByLabel('Current password')).toHaveValue('')
+		await expect(page.getByLabel('New password')).toHaveValue('')
+
+		const context = await request.newContext({ baseURL })
+		await expect(login(context, user)).rejects.toThrow()
+		await login(context, { ...user, password: newPassword })
+		await context.dispose()
+	})
+
+	test('rejects a wrong current password', async ({ page }) => {
+		await page.getByLabel('Current password').fill('not-my-password')
+		await page.getByLabel('New password').fill(newPassword)
+		await page.getByRole('button', { name: 'Change password' }).click()
+
+		await expect(getToast(page, 'Wrong password')).toBeVisible()
+	})
+})

From b4c60b560023d38309ab2a05af46639d5dcd5a6e Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Mon, 2 Nov 2026 16:53:30 +0100
Subject: [PATCH 2/6] refactor(settings): migrate password, WebAuthn and
 language sections to Vue 3

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 .../LanguageLocaleSettings.vue                |  8 +--
 .../components/FirstDayOfWeekSection.spec.ts  | 58 +++++++++++++++++++
 .../components}/FirstDayOfWeekSection.vue     | 30 +++++++---
 .../components}/LanguageSection.vue           | 10 ++--
 .../components}/LanguageSectionEntry.vue      | 17 +++---
 .../components}/LocaleSection.vue             | 10 ++--
 .../components}/LocaleSectionEntry.vue        | 42 +++++++++-----
 .../components}/TimezoneSection.vue           |  4 +-
 apps/settings/src/language-locale/main.ts     | 12 ++++
 apps/settings/src/main-language-locale.js     | 20 -------
 apps/settings/src/main-personal-password.js   | 19 ------
 apps/settings/src/main-personal-webauth.js    | 23 --------
 .../PasswordSection.vue                       |  2 +-
 apps/settings/src/password/main.ts            |  9 +++
 .../components}/WebAuthnAddDevice.vue         | 12 ++--
 .../components}/WebAuthnDevice.vue            |  4 +-
 .../components}/WebAuthnSection.vue           |  8 +--
 apps/settings/src/webauthn/main.ts            | 17 ++++++
 .../settings/personal/language.locale.php     |  3 +-
 .../settings/personal/security/password.php   |  3 +-
 .../settings/personal/security/webauthn.php   |  5 +-
 build/frontend-legacy/eslint.config.mjs       |  5 +-
 build/frontend-legacy/tsconfig.json           |  2 +-
 build/frontend-legacy/vitest.config.mts       |  7 ++-
 build/frontend-legacy/webpack.modules.cjs     |  3 -
 build/frontend/package.json                   |  4 +-
 build/frontend/tsconfig.json                  |  2 +-
 build/frontend/vite.config.ts                 |  9 ++-
 build/frontend/vitest.config.ts               |  6 ++
 29 files changed, 217 insertions(+), 137 deletions(-)
 rename apps/settings/src/{views => language-locale}/LanguageLocaleSettings.vue (64%)
 create mode 100644 apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
 rename apps/settings/src/{components/PersonalInfo => language-locale/components}/FirstDayOfWeekSection.vue (75%)
 rename apps/settings/src/{components/PersonalInfo/LanguageSection => language-locale/components}/LanguageSection.vue (84%)
 rename apps/settings/src/{components/PersonalInfo/LanguageSection => language-locale/components}/LanguageSectionEntry.vue (85%)
 rename apps/settings/src/{components/PersonalInfo/LocaleSection => language-locale/components}/LocaleSection.vue (83%)
 rename apps/settings/src/{components/PersonalInfo/LocaleSection => language-locale/components}/LocaleSectionEntry.vue (71%)
 rename apps/settings/src/{components/PersonalInfo => language-locale/components}/TimezoneSection.vue (93%)
 create mode 100644 apps/settings/src/language-locale/main.ts
 delete mode 100644 apps/settings/src/main-language-locale.js
 delete mode 100644 apps/settings/src/main-personal-password.js
 delete mode 100644 apps/settings/src/main-personal-webauth.js
 rename apps/settings/src/{components => password}/PasswordSection.vue (98%)
 create mode 100644 apps/settings/src/password/main.ts
 rename apps/settings/src/{components/WebAuthn => webauthn/components}/WebAuthnAddDevice.vue (95%)
 rename apps/settings/src/{components/WebAuthn => webauthn/components}/WebAuthnDevice.vue (94%)
 rename apps/settings/src/{components/WebAuthn => webauthn/components}/WebAuthnSection.vue (95%)
 create mode 100644 apps/settings/src/webauthn/main.ts

diff --git a/apps/settings/src/views/LanguageLocaleSettings.vue b/apps/settings/src/language-locale/LanguageLocaleSettings.vue
similarity index 64%
rename from apps/settings/src/views/LanguageLocaleSettings.vue
rename to apps/settings/src/language-locale/LanguageLocaleSettings.vue
index 27cee8021ecd0..e915a24d75614 100644
--- a/apps/settings/src/views/LanguageLocaleSettings.vue
+++ b/apps/settings/src/language-locale/LanguageLocaleSettings.vue
@@ -6,11 +6,11 @@
 <script setup lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import FirstDayOfWeekSection from '../components/PersonalInfo/FirstDayOfWeekSection.vue'
-import LanguageSection from '../components/PersonalInfo/LanguageSection/LanguageSection.vue'
-import LocaleSection from '../components/PersonalInfo/LocaleSection/LocaleSection.vue'
-import TimezoneSection from '../components/PersonalInfo/TimezoneSection.vue'
 import SettingsColumn from '../components/SettingsColumn.vue'
+import FirstDayOfWeekSection from './components/FirstDayOfWeekSection.vue'
+import LanguageSection from './components/LanguageSection.vue'
+import LocaleSection from './components/LocaleSection.vue'
+import TimezoneSection from './components/TimezoneSection.vue'
 </script>
 
 <template>
diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
new file mode 100644
index 0000000000000..bcb151779f891
--- /dev/null
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
@@ -0,0 +1,58 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type * as L10n from '@nextcloud/l10n'
+
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const l10n = vi.hoisted(() => ({
+	getCanonicalLocale: vi.fn(() => 'en-US'),
+	getFirstDay: vi.fn(() => 0),
+}))
+vi.mock('@nextcloud/l10n', async (importOriginal) => ({
+	...await importOriginal<typeof L10n>(),
+	...l10n,
+}))
+
+import { t } from '@nextcloud/l10n'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import FirstDayOfWeekSection from './FirstDayOfWeekSection.vue'
+
+/** Label of the option that follows the locale */
+function localeOptionLabel(): string {
+	const wrapper = mount(FirstDayOfWeekSection, { global: { mocks: { t } } })
+	return wrapper.findComponent(NcSelect).props('options')[0].label
+}
+
+describe('FirstDayOfWeekSection', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it.each([
+		['en-US', 'Sunday'],
+		['de-DE', 'Monday'],
+		['ar-EG', 'Saturday'],
+	])('names the first day of the %s locale', (locale, day) => {
+		l10n.getCanonicalLocale.mockReturnValue(locale)
+
+		expect(localeOptionLabel()).toBe(`Derived from your locale (${day})`)
+	})
+
+	it('falls back to the first day in use without Intl week info', () => {
+		const prototype = Intl.Locale.prototype as Intl.Locale & { getWeekInfo?: unknown }
+		const getWeekInfo = Object.getOwnPropertyDescriptor(prototype, 'getWeekInfo')!
+		delete prototype.getWeekInfo
+		l10n.getCanonicalLocale.mockReturnValue('de-DE')
+		l10n.getFirstDay.mockReturnValue(3)
+
+		try {
+			expect(localeOptionLabel()).toBe('Derived from your locale (Wednesday)')
+		} finally {
+			Object.defineProperty(prototype, 'getWeekInfo', getWeekInfo)
+		}
+	})
+})
diff --git a/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
similarity index 75%
rename from apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue
rename to apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
index bfdea0c6a1f7d..937b0bba7dea1 100644
--- a/apps/settings/src/components/PersonalInfo/FirstDayOfWeekSection.vue
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
@@ -9,19 +9,19 @@
 			:aria-label-listbox="t('settings', 'Day to use as the first day of week')"
 			class="fdow-section__day-select"
 			:clearable="false"
-			:input-id="inputId"
-			:input-label="t('settings', 'First day of week')"
+			:inputId="inputId"
+			:inputLabel="t('settings', 'First day of week')"
 			label="label"
 			:options="dayOptions"
-			:model-value="valueOption"
+			:modelValue="valueOption"
 			@option:selected="updateFirstDayOfWeek" />
 	</section>
 </template>
 
 <script lang="ts">
 import { loadState } from '@nextcloud/initial-state'
-import { getDayNames } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
+import { getCanonicalLocale, getDayNames, getFirstDay, t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import {
 	ACCOUNT_SETTING_PROPERTY_ENUM,
@@ -40,12 +40,26 @@ const { firstDayOfWeek } = loadState<{ firstDayOfWeek?: string }>(
 	{},
 )
 
-export default {
+/**
+ * The first day of week of the user's locale, 0 being Sunday.
+ *
+ * Browsers without `Intl.Locale.getWeekInfo` (Firefox < 153, Chrome < 130) fall back to
+ * the first day in use, which differs from the locale's if the user picked another day.
+ */
+function getLocaleFirstDay(): number {
+	const locale = new Intl.Locale(getCanonicalLocale()) as Intl.Locale & { getWeekInfo?: () => { firstDay: number } }
+	// Intl counts the days from 1 (Monday) to 7 (Sunday)
+	return (locale.getWeekInfo?.().firstDay ?? getFirstDay()) % 7
+}
+
+export default defineComponent({
 	name: 'FirstDayOfWeekSection',
 	components: {
 		NcSelect,
 	},
 
+	emits: ['update:value'],
+
 	data() {
 		let firstDay = -1
 		if (firstDayOfWeek) {
@@ -67,7 +81,7 @@ export default {
 				value: -1,
 				label: t('settings', 'Derived from your locale ({weekDayName})', {
 					// use the locale's default first day (not the user's saved override)
-					weekDayName: getDayNames()[moment.localeData().firstDayOfWeek()],
+					weekDayName: getDayNames()[getLocaleFirstDay()],
 				}),
 			}]
 			for (const [index, dayName] of getDayNames().entries()) {
@@ -110,7 +124,7 @@ export default {
 			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue b/apps/settings/src/language-locale/components/LanguageSection.vue
similarity index 84%
rename from apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
rename to apps/settings/src/language-locale/components/LanguageSection.vue
index 1f855c99a04c4..8efbf940d5122 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
+++ b/apps/settings/src/language-locale/components/LanguageSection.vue
@@ -11,10 +11,10 @@
 
 		<LanguageSectionEntry
 			v-if="isEditable"
-			:input-id="inputId"
-			:common-languages="commonLanguages"
-			:other-languages="otherLanguages"
-			:language.sync="language" />
+			v-model:language="language"
+			:inputId="inputId"
+			:commonLanguages="commonLanguages"
+			:otherLanguages="otherLanguages" />
 
 		<span v-else>
 			{{ t('settings', 'No language set') }}
@@ -25,7 +25,7 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import LanguageSectionEntry from './LanguageSectionEntry.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
 
 const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState('settings', 'personalInfoParameters', {})
 
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSectionEntry.vue b/apps/settings/src/language-locale/components/LanguageSectionEntry.vue
similarity index 85%
rename from apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSectionEntry.vue
rename to apps/settings/src/language-locale/components/LanguageSectionEntry.vue
index 27a3b370224dc..ccdfedf349b4a 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSectionEntry.vue
+++ b/apps/settings/src/language-locale/components/LanguageSectionEntry.vue
@@ -9,11 +9,11 @@
 			:aria-label-listbox="t('settings', 'Languages')"
 			class="language__select"
 			:clearable="false"
-			:input-id="inputId"
+			:inputId="inputId"
 			label="name"
-			label-outside
+			labelOutside
 			:options="allLanguages"
-			:model-value="language"
+			:modelValue="language"
 			@option:selected="onLanguageChange" />
 
 		<NcFormBoxButton
@@ -28,13 +28,14 @@
 </template>
 
 <script>
+import { t } from '@nextcloud/l10n'
 import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../../utils/handlers.ts'
-import { validateLanguage } from '../../../utils/validate.js'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../utils/handlers.ts'
+import { validateLanguage } from '../../utils/validate.js'
 
 export default {
 	name: 'LanguageSectionEntry',
@@ -67,6 +68,8 @@ export default {
 		},
 	},
 
+	emits: ['update:language'],
+
 	data() {
 		return {
 			initialLanguage: this.language,
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue b/apps/settings/src/language-locale/components/LocaleSection.vue
similarity index 83%
rename from apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
rename to apps/settings/src/language-locale/components/LocaleSection.vue
index af9caab1b1200..baf83a4a3b26f 100644
--- a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSection.vue
+++ b/apps/settings/src/language-locale/components/LocaleSection.vue
@@ -11,10 +11,10 @@
 
 		<LocaleSectionEntry
 			v-if="isEditable"
-			:input-id="inputId"
-			:locales-for-language="localesForLanguage"
-			:other-locales="otherLocales"
-			:locale.sync="locale" />
+			v-model:locale="locale"
+			:inputId="inputId"
+			:localesForLanguage="localesForLanguage"
+			:otherLocales="otherLocales" />
 
 		<span v-else>
 			{{ t('settings', 'No locale set') }}
@@ -25,7 +25,7 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import LocaleSectionEntry from './LocaleSectionEntry.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
 
 const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState('settings', 'personalInfoParameters', {})
 
diff --git a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue b/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
similarity index 71%
rename from apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
rename to apps/settings/src/language-locale/components/LocaleSectionEntry.vue
index 00a6cdec23e2f..5644696c91835 100644
--- a/apps/settings/src/components/PersonalInfo/LocaleSection/LocaleSectionEntry.vue
+++ b/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
@@ -13,21 +13,35 @@
 			:aria-label-listbox="t('settings', 'Locales')"
 			class="locale__select"
 			:clearable="false"
-			:input-id="inputId"
+			:inputId="inputId"
 			label="name"
-			label-outside
+			labelOutside
 			:options="allLocales"
-			:model-value="locale"
+			:modelValue="locale"
 			@option:selected="updateLocale" />
 	</div>
 </template>
 
 <script>
-import moment from '@nextcloud/moment'
+import { getCanonicalLocale, t } from '@nextcloud/l10n'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.js'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../../utils/handlers.ts'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../utils/handlers.ts'
+
+const dateFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit', day: '2-digit' })
+const timeFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { hour: 'numeric', minute: '2-digit', second: '2-digit' })
+
+/**
+ * The current date and time, formatted in the user's locale
+ */
+function formatExample() {
+	const now = new Date()
+	return {
+		date: dateFormat.format(now),
+		time: timeFormat.format(now),
+	}
+}
 
 export default {
 	name: 'LocaleSectionEntry',
@@ -58,14 +72,13 @@ export default {
 		},
 	},
 
+	emits: ['update:locale'],
+
 	data() {
 		return {
 			initialLocale: this.locale,
 			intervalId: 0,
-			example: {
-				date: moment().format('L'),
-				time: moment().format('LTS'),
-			},
+			example: formatExample(),
 		}
 	},
 
@@ -84,7 +97,7 @@ export default {
 		this.intervalId = window.setInterval(this.refreshExample, 1000)
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		window.clearInterval(this.intervalId)
 	},
 
@@ -115,10 +128,7 @@ export default {
 		},
 
 		refreshExample() {
-			this.example = {
-				date: moment().format('L'),
-				time: moment().format('LTS'),
-			}
+			this.example = formatExample()
 		},
 	},
 }
diff --git a/apps/settings/src/components/PersonalInfo/TimezoneSection.vue b/apps/settings/src/language-locale/components/TimezoneSection.vue
similarity index 93%
rename from apps/settings/src/components/PersonalInfo/TimezoneSection.vue
rename to apps/settings/src/language-locale/components/TimezoneSection.vue
index ed1c85dcd3d17..130ba03abcb2e 100644
--- a/apps/settings/src/components/PersonalInfo/TimezoneSection.vue
+++ b/apps/settings/src/language-locale/components/TimezoneSection.vue
@@ -24,8 +24,8 @@ watch(timezone, () => {
 		<NcTimezonePicker
 			v-model="timezone"
 			class="timezone-section__picker"
-			:label="t('settings', 'Time zone')"
-			:input-id="inputId" />
+			:inputLabel="t('settings', 'Time zone')"
+			:uid="inputId" />
 	</section>
 </template>
 
diff --git a/apps/settings/src/language-locale/main.ts b/apps/settings/src/language-locale/main.ts
new file mode 100644
index 0000000000000..236ed0731fcd4
--- /dev/null
+++ b/apps/settings/src/language-locale/main.ts
@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { t } from '@nextcloud/l10n'
+import { createApp } from 'vue'
+import LanguageLocaleSettings from './LanguageLocaleSettings.vue'
+
+const app = createApp(LanguageLocaleSettings)
+app.mixin({ methods: { t } })
+app.mount('#language-locale-settings')
diff --git a/apps/settings/src/main-language-locale.js b/apps/settings/src/main-language-locale.js
deleted file mode 100644
index 0a377d5a7d3f7..0000000000000
--- a/apps/settings/src/main-language-locale.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { translate as t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import LanguageLocaleSettings from './views/LanguageLocaleSettings.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.mixin({
-	methods: {
-		t,
-	},
-})
-
-const app = new Vue(LanguageLocaleSettings)
-app.$mount('#language-locale-settings')
diff --git a/apps/settings/src/main-personal-password.js b/apps/settings/src/main-personal-password.js
deleted file mode 100644
index 1c835cac6b6ce..0000000000000
--- a/apps/settings/src/main-personal-password.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-import { getCSPNonce } from '@nextcloud/auth'
-import { n, t } from '@nextcloud/l10n'
-import Vue from 'vue'
-import PasswordSection from './components/PasswordSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.prototype.t = t
-Vue.prototype.n = n
-
-export default new Vue({
-	el: '#security-password',
-	name: 'main-personal-password',
-	render: (h) => h(PasswordSection),
-})
diff --git a/apps/settings/src/main-personal-webauth.js b/apps/settings/src/main-personal-webauth.js
deleted file mode 100644
index d659e188fb4d9..0000000000000
--- a/apps/settings/src/main-personal-webauth.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { loadState } from '@nextcloud/initial-state'
-import Vue from 'vue'
-import WebAuthnSection from './components/WebAuthn/WebAuthnSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-Vue.prototype.t = t
-
-const View = Vue.extend(WebAuthnSection)
-const devices = loadState('settings', 'webauthn-devices')
-new View({
-	propsData: {
-		initialDevices: devices,
-		isHttps: window.location.protocol === 'https:',
-		isLocalhost: window.location.hostname === 'localhost',
-	},
-}).$mount('#security-webauthn')
diff --git a/apps/settings/src/components/PasswordSection.vue b/apps/settings/src/password/PasswordSection.vue
similarity index 98%
rename from apps/settings/src/components/PasswordSection.vue
rename to apps/settings/src/password/PasswordSection.vue
index 8ff9d28783cbf..788b42ef8a012 100644
--- a/apps/settings/src/components/PasswordSection.vue
+++ b/apps/settings/src/password/PasswordSection.vue
@@ -56,7 +56,7 @@ async function changePassword() {
 
 				<NcPasswordField
 					v-model="newPass"
-					check-password-strength
+					checkPasswordStrength
 					:label="t('settings', 'New password')"
 					:maxlength="469"
 					name="newpassword"
diff --git a/apps/settings/src/password/main.ts b/apps/settings/src/password/main.ts
new file mode 100644
index 0000000000000..00b0cd8e2bcc2
--- /dev/null
+++ b/apps/settings/src/password/main.ts
@@ -0,0 +1,9 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createApp } from 'vue'
+import PasswordSection from './PasswordSection.vue'
+
+createApp(PasswordSection).mount('#security-password')
diff --git a/apps/settings/src/components/WebAuthn/WebAuthnAddDevice.vue b/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
similarity index 95%
rename from apps/settings/src/components/WebAuthn/WebAuthnAddDevice.vue
rename to apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
index 4d22d1d6cc44e..d3d4e11a784a0 100644
--- a/apps/settings/src/components/WebAuthn/WebAuthnAddDevice.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
@@ -32,10 +32,10 @@
 					v-model="name"
 					class="new-webauthn-device__name"
 					:label="t('settings', 'Device name')"
-					show-trailing-button
-					:trailing-button-label="t('settings', 'Add')"
-					trailing-button-icon="arrowEnd"
-					@trailing-button-click="submit" />
+					showTrailingButton
+					:trailingButtonLabel="t('settings', 'Add')"
+					trailingButtonIcon="arrowEnd"
+					@trailingButtonClick="submit" />
 			</form>
 		</div>
 
@@ -54,6 +54,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
@@ -89,7 +90,6 @@ export default {
 	},
 
 	props: {
-		httpWarning: Boolean,
 		isHttps: {
 			type: Boolean,
 			default: false,
@@ -101,6 +101,8 @@ export default {
 		},
 	},
 
+	emits: ['added'],
+
 	setup() {
 		// non reactive props
 		return {
diff --git a/apps/settings/src/components/WebAuthn/WebAuthnDevice.vue b/apps/settings/src/webauthn/components/WebAuthnDevice.vue
similarity index 94%
rename from apps/settings/src/components/WebAuthn/WebAuthnDevice.vue
rename to apps/settings/src/webauthn/components/WebAuthnDevice.vue
index 2c138ee38af82..3c006db834b00 100644
--- a/apps/settings/src/components/WebAuthn/WebAuthnDevice.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnDevice.vue
@@ -7,7 +7,7 @@
 	<li class="webauthn-device">
 		<span class="icon-webauthn-device" />
 		{{ name || t('settings', 'Unnamed device') }}
-		<NcActions :force-menu="true">
+		<NcActions :forceMenu="true">
 			<NcActionButton icon="icon-delete" @click="$emit('delete')">
 				{{ t('settings', 'Delete') }}
 			</NcActionButton>
@@ -33,6 +33,8 @@ export default {
 			required: true,
 		},
 	},
+
+	emits: ['delete'],
 }
 </script>
 
diff --git a/apps/settings/src/components/WebAuthn/WebAuthnSection.vue b/apps/settings/src/webauthn/components/WebAuthnSection.vue
similarity index 95%
rename from apps/settings/src/components/WebAuthn/WebAuthnSection.vue
rename to apps/settings/src/webauthn/components/WebAuthnSection.vue
index 1d8acc400fdf9..48f74e21b3a24 100644
--- a/apps/settings/src/components/WebAuthn/WebAuthnSection.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnSection.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div id="security-webauthn" class="section">
+	<div class="section">
 		<h2>{{ t('settings', 'Passwordless Authentication') }}</h2>
 		<p class="settings-hint hidden-when-empty">
 			{{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }}
@@ -32,8 +32,8 @@
 
 		<WebAuthnAddDevice
 			v-if="supportsWebauthn"
-			:is-https="isHttps"
-			:is-localhost="isLocalhost"
+			:isHttps="isHttps"
+			:isLocalhost="isLocalhost"
 			@added="deviceAdded" />
 	</div>
 </template>
@@ -48,7 +48,7 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
 import WebAuthnDevice from './WebAuthnDevice.vue'
 import logger from '../../logger.ts'
-import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js'
+import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.ts'
 
 const sortByName = sortBy('name')
 
diff --git a/apps/settings/src/webauthn/main.ts b/apps/settings/src/webauthn/main.ts
new file mode 100644
index 0000000000000..3d52b3c746977
--- /dev/null
+++ b/apps/settings/src/webauthn/main.ts
@@ -0,0 +1,17 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { createApp } from 'vue'
+import WebAuthnSection from './components/WebAuthnSection.vue'
+
+const app = createApp(WebAuthnSection, {
+	initialDevices: loadState('settings', 'webauthn-devices'),
+	isHttps: window.location.protocol === 'https:',
+	isLocalhost: window.location.hostname === 'localhost',
+})
+app.mixin({ methods: { t } })
+app.mount('#security-webauthn')
diff --git a/apps/settings/templates/settings/personal/language.locale.php b/apps/settings/templates/settings/personal/language.locale.php
index 38e3201015c50..174edaaebe328 100644
--- a/apps/settings/templates/settings/personal/language.locale.php
+++ b/apps/settings/templates/settings/personal/language.locale.php
@@ -5,6 +5,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-language-locale');
+\OCP\Util::addScript('settings', 'personal-language-locale');
+\OCP\Util::addStyle('settings', 'personal-language-locale');
 ?>
 <div id="language-locale-settings"></div>
diff --git a/apps/settings/templates/settings/personal/security/password.php b/apps/settings/templates/settings/personal/security/password.php
index 0531468913a69..96951271e1a55 100644
--- a/apps/settings/templates/settings/personal/security/password.php
+++ b/apps/settings/templates/settings/personal/security/password.php
@@ -5,7 +5,8 @@
  */
 
 if ($_['passwordChangeSupported']) {
-	\OCP\Util::addScript('settings', 'vue-settings-personal-password');
+	\OCP\Util::addScript('settings', 'personal-password');
+	\OCP\Util::addStyle('settings', 'personal-password');
 }
 ?>
 <div id="security-password"></div>
diff --git a/apps/settings/templates/settings/personal/security/webauthn.php b/apps/settings/templates/settings/personal/security/webauthn.php
index 33611b5399c25..2156af1639e68 100644
--- a/apps/settings/templates/settings/personal/security/webauthn.php
+++ b/apps/settings/templates/settings/personal/security/webauthn.php
@@ -5,8 +5,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-personal-webauthn', 'core');
+\OCP\Util::addScript('settings', 'personal-webauthn', 'core');
+\OCP\Util::addStyle('settings', 'personal-webauthn');
 
 ?>
 
-<div id="security-webauthn" class="section"></div>
+<div id="security-webauthn"></div>
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index 254f6e4c5cc0c..a92fb1beadbeb 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -61,9 +61,12 @@ export default defineConfig([
 			'**/vendor/', // different vendors
 			// the public share entry point is Vue 3, it is linted by the Vue 3 frontend
 			'**/apps/files_sharing/src/public/',
-			// the app password and admin sharing sections are Vue 3, they are linted by the Vue 3 frontend
+			// these sections are Vue 3, they are linted by the Vue 3 frontend
 			'**/apps/settings/src/authtokens/',
 			'**/apps/settings/src/sharing/',
+			'**/apps/settings/src/password/',
+			'**/apps/settings/src/webauthn/',
+			'**/apps/settings/src/language-locale/',
 		],
 	},
 ])
diff --git a/build/frontend-legacy/tsconfig.json b/build/frontend-legacy/tsconfig.json
index 559f5dd537ea2..043d663dffdd0 100644
--- a/build/frontend-legacy/tsconfig.json
+++ b/build/frontend-legacy/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "@vue/tsconfig/tsconfig.json",
 	"include": ["./apps/**/*.ts", "./apps/**/*.vue", "./*.d.ts"],
-	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens", "./apps/settings/src/sharing"],
+	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens", "./apps/settings/src/sharing", "./apps/settings/src/password", "./apps/settings/src/webauthn", "./apps/settings/src/language-locale"],
 	"compilerOptions": {
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"types": ["node", "vue", "vue-router"],
diff --git a/build/frontend-legacy/vitest.config.mts b/build/frontend-legacy/vitest.config.mts
index 638f916a9ecd7..8c1be7d601845 100644
--- a/build/frontend-legacy/vitest.config.mts
+++ b/build/frontend-legacy/vitest.config.mts
@@ -57,7 +57,7 @@ export default defineConfig({
 		},
 		coverage: {
 			include: ['./apps/*/src/**'],
-			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/authtokens/**', './apps/settings/src/sharing/**'],
+			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/authtokens/**', './apps/settings/src/sharing/**', './apps/settings/src/password/**', './apps/settings/src/webauthn/**', './apps/settings/src/language-locale/**'],
 			reporter: ['lcov', 'text'],
 			reportsDirectory: resolve(import.meta.dirname, '../../coverage/legacy'),
 		},
@@ -68,9 +68,12 @@ export default defineConfig({
 		exclude: [
 			...defaultExclude,
 			...gitIgnore,
-			// the app password and admin sharing sections are Vue 3, they are tested by the Vue 3 frontend
+			// these sections are Vue 3, they are tested by the Vue 3 frontend
 			'**/apps/settings/src/authtokens/**',
 			'**/apps/settings/src/sharing/**',
+			'**/apps/settings/src/password/**',
+			'**/apps/settings/src/webauthn/**',
+			'**/apps/settings/src/language-locale/**',
 		],
 		globalSetup: './__tests__/setup-global.js',
 		server: {
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index 2ff8c0e08226b..8978aefd7af37 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -25,9 +25,6 @@ module.exports = {
 		'vue-settings-admin-settings-presets': path.join(__dirname, 'apps/settings/src', 'main-admin-settings-presets.js'),
 		'vue-settings-nextcloud-pdf': path.join(__dirname, 'apps/settings/src', 'main-nextcloud-pdf.js'),
 		'vue-settings-profile-contact': path.join(__dirname, 'apps/settings/src', 'main-profile-contact.js'),
-		'vue-settings-language-locale': path.join(__dirname, 'apps/settings/src', 'main-language-locale.js'),
-		'vue-settings-personal-password': path.join(__dirname, 'apps/settings/src', 'main-personal-password.js'),
-		'vue-settings-personal-webauthn': path.join(__dirname, 'apps/settings/src', 'main-personal-webauth.js'),
 		'vue-settings-users-management': path.join(__dirname, 'apps/settings/src', 'main-users-management.ts'),
 		'declarative-settings-forms': path.join(__dirname, 'apps/settings/src', 'main-declarative-settings-forms.ts'),
 	},
diff --git a/build/frontend/package.json b/build/frontend/package.json
index 9d2007988ece3..15390054a49a1 100644
--- a/build/frontend/package.json
+++ b/build/frontend/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "NODE_ENV=development vite build --mode development",
-    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/",
-    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/ ../../apps/settings/src/password/ ../../apps/settings/src/webauthn/ ../../apps/settings/src/language-locale/",
+    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/ ../../apps/settings/src/password/ ../../apps/settings/src/webauthn/ ../../apps/settings/src/language-locale/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage --reporter=default",
     "test:update-snapshots": "vitest run --update",
diff --git a/build/frontend/tsconfig.json b/build/frontend/tsconfig.json
index 79d104f42a576..1518ae727ef62 100644
--- a/build/frontend/tsconfig.json
+++ b/build/frontend/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./apps", "./core", "../../apps/settings/src/authtokens", "../../apps/settings/src/sharing"]
+	"include": ["./apps", "./core", "../../apps/settings/src/authtokens", "../../apps/settings/src/sharing", "../../apps/settings/src/password", "../../apps/settings/src/webauthn", "../../apps/settings/src/language-locale"]
 }
\ No newline at end of file
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index 3b00d66c763ba..08d8887be6ce9 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -96,11 +96,14 @@ const modules = {
 		reference: resolve(import.meta.dirname, 'apps/profile/src', 'reference.js'),
 	},
 	settings: {
-		// Only the app password and the admin sharing sections are migrated to Vue 3
-		// so far, the rest of the app is still built by the Vue 2 frontend. They are
-		// referenced by path rather than through `apps/` so they resolve the Vue 3 dependencies.
+		// Only some sections are migrated to Vue 3 so far, the rest of the app
+		// is still built by the Vue 2 frontend. They are referenced by path
+		// rather than through `apps/` so they resolve the Vue 3 dependencies.
 		'admin-sharing': resolve(import.meta.dirname, '../..', 'apps/settings/src/sharing', 'main.ts'),
 		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/authtokens', 'main.ts'),
+		'personal-password': resolve(import.meta.dirname, '../..', 'apps/settings/src/password', 'main.ts'),
+		'personal-webauthn': resolve(import.meta.dirname, '../..', 'apps/settings/src/webauthn', 'main.ts'),
+		'personal-language-locale': resolve(import.meta.dirname, '../..', 'apps/settings/src/language-locale', 'main.ts'),
 	},
 	sharebymail: {
 		'admin-settings': resolve(import.meta.dirname, 'apps/sharebymail/src', 'settings-admin.ts'),
diff --git a/build/frontend/vitest.config.ts b/build/frontend/vitest.config.ts
index 3bca323f4902f..5d530d0033937 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -48,6 +48,9 @@ export default defineConfig({
 			'{apps,core}/**/*.{test,spec}.?(c|m)[jt]s?(x)',
 			'../../apps/settings/src/authtokens/**/*.spec.ts',
 			'../../apps/settings/src/sharing/**/*.spec.ts',
+			'../../apps/settings/src/password/**/*.spec.ts',
+			'../../apps/settings/src/webauthn/**/*.spec.ts',
+			'../../apps/settings/src/language-locale/**/*.spec.ts',
 		],
 		env: {
 			LANG: 'en_US',
@@ -64,6 +67,9 @@ export default defineConfig({
 				'apps/*/src/**',
 				'../../apps/settings/src/authtokens/**',
 				'../../apps/settings/src/sharing/**',
+				'../../apps/settings/src/password/**',
+				'../../apps/settings/src/webauthn/**',
+				'../../apps/settings/src/language-locale/**',
 				'core/src/**',
 			],
 			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],

From 2df7c517325aa85e1c21df8fa5c6f5e128567538 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Tue, 3 Nov 2026 12:53:54 +0100
Subject: [PATCH 3/6] refactor(settings): simplify the migrated personal
 sections

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 .../components/FirstDayOfWeekSection.spec.ts  |  3 +-
 .../components/FirstDayOfWeekSection.vue      | 10 ++----
 .../components/LocaleSectionEntry.vue         |  2 +-
 .../components/TimezoneSection.vue            |  2 +-
 .../settings/src/password/PasswordSection.vue |  2 +-
 .../webauthn/components/WebAuthnSection.vue   |  6 ++--
 .../playwright/e2e/settings/password.spec.ts  | 21 +++++------
 .../fixtures/personal-settings-page.ts        |  6 ++++
 .../support/sections/PasswordSettingsPage.ts  | 36 +++++++++++++++++++
 9 files changed, 59 insertions(+), 29 deletions(-)
 create mode 100644 tests/playwright/support/sections/PasswordSettingsPage.ts

diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
index bcb151779f891..d9d83e4a686c7 100644
--- a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
@@ -21,7 +21,6 @@ import { t } from '@nextcloud/l10n'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import FirstDayOfWeekSection from './FirstDayOfWeekSection.vue'
 
-/** Label of the option that follows the locale */
 function localeOptionLabel(): string {
 	const wrapper = mount(FirstDayOfWeekSection, { global: { mocks: { t } } })
 	return wrapper.findComponent(NcSelect).props('options')[0].label
@@ -29,7 +28,7 @@ function localeOptionLabel(): string {
 
 describe('FirstDayOfWeekSection', () => {
 	afterEach(() => {
-		vi.restoreAllMocks()
+		vi.resetAllMocks()
 	})
 
 	it.each([
diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
index 937b0bba7dea1..09805a75a40af 100644
--- a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
@@ -41,10 +41,9 @@ const { firstDayOfWeek } = loadState<{ firstDayOfWeek?: string }>(
 )
 
 /**
- * The first day of week of the user's locale, 0 being Sunday.
- *
- * Browsers without `Intl.Locale.getWeekInfo` (Firefox < 153, Chrome < 130) fall back to
- * the first day in use, which differs from the locale's if the user picked another day.
+ * The locale's first day of week, 0 being Sunday.
+ * Without `Intl.Locale.getWeekInfo` (Firefox < 153, Chrome < 130) this is the day in use,
+ * which is wrong if the user picked another one.
  */
 function getLocaleFirstDay(): number {
 	const locale = new Intl.Locale(getCanonicalLocale()) as Intl.Locale & { getWeekInfo?: () => { firstDay: number } }
@@ -58,8 +57,6 @@ export default defineComponent({
 		NcSelect,
 	},
 
-	emits: ['update:value'],
-
 	data() {
 		let firstDay = -1
 		if (firstDayOfWeek) {
@@ -119,7 +116,6 @@ export default defineComponent({
 			if (status === 'ok') {
 				this.firstDay = value
 			} else {
-				this.$emit('update:value', this.firstDay)
 				handleError(error, errorMessage)
 			}
 		},
diff --git a/apps/settings/src/language-locale/components/LocaleSectionEntry.vue b/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
index 5644696c91835..66865f82b9508 100644
--- a/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
+++ b/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
@@ -33,7 +33,7 @@ const dateFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeri
 const timeFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { hour: 'numeric', minute: '2-digit', second: '2-digit' })
 
 /**
- * The current date and time, formatted in the user's locale
+ * Now, in the user's locale
  */
 function formatExample() {
 	const now = new Date()
diff --git a/apps/settings/src/language-locale/components/TimezoneSection.vue b/apps/settings/src/language-locale/components/TimezoneSection.vue
index 130ba03abcb2e..8a65047cf3fc9 100644
--- a/apps/settings/src/language-locale/components/TimezoneSection.vue
+++ b/apps/settings/src/language-locale/components/TimezoneSection.vue
@@ -25,7 +25,7 @@ watch(timezone, () => {
 			v-model="timezone"
 			class="timezone-section__picker"
 			:inputLabel="t('settings', 'Time zone')"
-			:uid="inputId" />
+			:inputId="inputId" />
 	</section>
 </template>
 
diff --git a/apps/settings/src/password/PasswordSection.vue b/apps/settings/src/password/PasswordSection.vue
index 788b42ef8a012..466c8afb2c9ac 100644
--- a/apps/settings/src/password/PasswordSection.vue
+++ b/apps/settings/src/password/PasswordSection.vue
@@ -8,9 +8,9 @@ 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 NcFormBox from '@nextcloud/vue/components/NcFormBox'
 import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 
diff --git a/apps/settings/src/webauthn/components/WebAuthnSection.vue b/apps/settings/src/webauthn/components/WebAuthnSection.vue
index 48f74e21b3a24..f9ef5a2302883 100644
--- a/apps/settings/src/webauthn/components/WebAuthnSection.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnSection.vue
@@ -43,15 +43,13 @@
 
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
-import sortBy from 'lodash/fp/sortBy.js'
+import sortBy from 'lodash/sortBy.js'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
 import WebAuthnDevice from './WebAuthnDevice.vue'
 import logger from '../../logger.ts'
 import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.ts'
 
-const sortByName = sortBy('name')
-
 export default {
 	name: 'WebAuthnSection',
 
@@ -93,7 +91,7 @@ export default {
 
 	computed: {
 		sortedDevices() {
-			return sortByName(this.devices)
+			return sortBy(this.devices, 'name')
 		},
 	},
 
diff --git a/tests/playwright/e2e/settings/password.spec.ts b/tests/playwright/e2e/settings/password.spec.ts
index e93fda52bdd28..e6ccedb7f7afa 100644
--- a/tests/playwright/e2e/settings/password.spec.ts
+++ b/tests/playwright/e2e/settings/password.spec.ts
@@ -11,19 +11,16 @@ import { getToast } from '../../support/utils/toast.ts'
 const newPassword = 'Another-Passw0rd-for-e2e!'
 
 test.describe('Settings: Change password', () => {
-	test.beforeEach(async ({ page }) => {
-		await page.goto('/settings/user/security')
-		await expect(page.getByRole('heading', { name: 'Password', level: 2, exact: true })).toBeVisible()
+	test.beforeEach(async ({ passwordPage }) => {
+		await passwordPage.open()
 	})
 
-	test('changes the password', async ({ page, user, baseURL }) => {
-		await page.getByLabel('Current password').fill(user.password)
-		await page.getByLabel('New password').fill(newPassword)
-		await page.getByRole('button', { name: 'Change password' }).click()
+	test('changes the password', async ({ page, passwordPage, user, baseURL }) => {
+		await passwordPage.changePassword(user.password, newPassword)
 
 		await expect(getToast(page, 'Saved')).toBeVisible()
-		await expect(page.getByLabel('Current password')).toHaveValue('')
-		await expect(page.getByLabel('New password')).toHaveValue('')
+		await expect(passwordPage.currentPasswordInput()).toHaveValue('')
+		await expect(passwordPage.newPasswordInput()).toHaveValue('')
 
 		const context = await request.newContext({ baseURL })
 		await expect(login(context, user)).rejects.toThrow()
@@ -31,10 +28,8 @@ test.describe('Settings: Change password', () => {
 		await context.dispose()
 	})
 
-	test('rejects a wrong current password', async ({ page }) => {
-		await page.getByLabel('Current password').fill('not-my-password')
-		await page.getByLabel('New password').fill(newPassword)
-		await page.getByRole('button', { name: 'Change password' }).click()
+	test('rejects a wrong current password', async ({ page, passwordPage }) => {
+		await passwordPage.changePassword('not-my-password', newPassword)
 
 		await expect(getToast(page, 'Wrong password')).toBeVisible()
 	})
diff --git a/tests/playwright/support/fixtures/personal-settings-page.ts b/tests/playwright/support/fixtures/personal-settings-page.ts
index 7e8ae2509e7f1..1378b03574a19 100644
--- a/tests/playwright/support/fixtures/personal-settings-page.ts
+++ b/tests/playwright/support/fixtures/personal-settings-page.ts
@@ -6,6 +6,7 @@
 import { runOcc } from '@nextcloud/e2e-test-server/docker'
 import { DevicesSessionsSettingsPage } from '../sections/DevicesSessionsSettingsPage.ts'
 import { LanguageLocaleSettingsPage } from '../sections/LanguageLocaleSettingsPage.ts'
+import { PasswordSettingsPage } from '../sections/PasswordSettingsPage.ts'
 import { ProfileContactSettingsPage } from '../sections/ProfileContactSettingsPage.ts'
 import { test as userSessionTest } from './random-user-session.ts'
 
@@ -18,6 +19,7 @@ export const test = userSessionTest.extend<{
 	profileContactPage: ProfileContactSettingsPage
 	languageLocalePage: LanguageLocaleSettingsPage
 	devicesSessionsPage: DevicesSessionsSettingsPage
+	passwordPage: PasswordSettingsPage
 }>({
 	user: async ({ user: baseUser }, use) => {
 		await runOcc(['user:setting', baseUser.userId, 'core', 'lang', 'en'])
@@ -36,4 +38,8 @@ export const test = userSessionTest.extend<{
 	devicesSessionsPage: async ({ page }, use) => {
 		await use(new DevicesSessionsSettingsPage(page))
 	},
+
+	passwordPage: async ({ page }, use) => {
+		await use(new PasswordSettingsPage(page))
+	},
 })
diff --git a/tests/playwright/support/sections/PasswordSettingsPage.ts b/tests/playwright/support/sections/PasswordSettingsPage.ts
new file mode 100644
index 0000000000000..f119126e7e1f8
--- /dev/null
+++ b/tests/playwright/support/sections/PasswordSettingsPage.ts
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Locator, Page } from '@playwright/test'
+
+import { expect } from '@playwright/test'
+
+export class PasswordSettingsPage {
+	constructor(private readonly page: Page) {}
+
+	heading(): Locator {
+		// "Passwordless Authentication" is on the same page
+		return this.page.getByRole('heading', { name: 'Password', level: 2, exact: true })
+	}
+
+	async open(): Promise<void> {
+		await this.page.goto('settings/user/security')
+		await expect(this.heading()).toBeVisible()
+	}
+
+	currentPasswordInput(): Locator {
+		return this.page.getByLabel('Current password')
+	}
+
+	newPasswordInput(): Locator {
+		return this.page.getByLabel('New password')
+	}
+
+	async changePassword(currentPassword: string, newPassword: string): Promise<void> {
+		await this.currentPasswordInput().fill(currentPassword)
+		await this.newPasswordInput().fill(newPassword)
+		await this.page.getByRole('button', { name: 'Change password' }).click()
+	}
+}

From 72d869b789c05f3c7ea276fb6af84095815193c7 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Tue, 3 Nov 2026 13:29:01 +0100
Subject: [PATCH 4/6] refactor(settings): match master's time zone picker and
 drop lodash

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Assisted-by: ClaudeCode:claude-opus-5-5
---
 .../components/FirstDayOfWeekSection.spec.ts  | 19 ++++++++++++++++++-
 .../components/FirstDayOfWeekSection.vue      | 12 ++++++++----
 .../components/TimezoneSection.vue            |  6 +-----
 .../webauthn/components/WebAuthnSection.vue   |  4 ++--
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
index d9d83e4a686c7..afd2136bfccdb 100644
--- a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
@@ -41,17 +41,34 @@ describe('FirstDayOfWeekSection', () => {
 		expect(localeOptionLabel()).toBe(`Derived from your locale (${day})`)
 	})
 
-	it('falls back to the first day in use without Intl week info', () => {
+	it('reads the older weekInfo getter without getWeekInfo', () => {
 		const prototype = Intl.Locale.prototype as Intl.Locale & { getWeekInfo?: unknown }
 		const getWeekInfo = Object.getOwnPropertyDescriptor(prototype, 'getWeekInfo')!
 		delete prototype.getWeekInfo
 		l10n.getCanonicalLocale.mockReturnValue('de-DE')
 		l10n.getFirstDay.mockReturnValue(3)
 
+		try {
+			expect(localeOptionLabel()).toBe('Derived from your locale (Monday)')
+		} finally {
+			Object.defineProperty(prototype, 'getWeekInfo', getWeekInfo)
+		}
+	})
+
+	it('falls back to the first day in use without Intl week info', () => {
+		const prototype = Intl.Locale.prototype as Intl.Locale & { getWeekInfo?: unknown, weekInfo?: unknown }
+		const getWeekInfo = Object.getOwnPropertyDescriptor(prototype, 'getWeekInfo')!
+		const weekInfo = Object.getOwnPropertyDescriptor(prototype, 'weekInfo')!
+		delete prototype.getWeekInfo
+		delete prototype.weekInfo
+		l10n.getCanonicalLocale.mockReturnValue('de-DE')
+		l10n.getFirstDay.mockReturnValue(3)
+
 		try {
 			expect(localeOptionLabel()).toBe('Derived from your locale (Wednesday)')
 		} finally {
 			Object.defineProperty(prototype, 'getWeekInfo', getWeekInfo)
+			Object.defineProperty(prototype, 'weekInfo', weekInfo)
 		}
 	})
 })
diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
index 09805a75a40af..993420a88ab29 100644
--- a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
@@ -29,6 +29,10 @@ import {
 import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
 import { handleError } from '../../utils/handlers.ts'
 
+interface WeekInfo {
+	firstDay: number
+}
+
 interface DayOption {
 	value: number
 	label: string
@@ -42,13 +46,13 @@ const { firstDayOfWeek } = loadState<{ firstDayOfWeek?: string }>(
 
 /**
  * The locale's first day of week, 0 being Sunday.
- * Without `Intl.Locale.getWeekInfo` (Firefox < 153, Chrome < 130) this is the day in use,
- * which is wrong if the user picked another one.
+ * Without Intl week info (Firefox < 153) this is the day in use, which is wrong if the user
+ * picked another one.
  */
 function getLocaleFirstDay(): number {
-	const locale = new Intl.Locale(getCanonicalLocale()) as Intl.Locale & { getWeekInfo?: () => { firstDay: number } }
+	const locale = new Intl.Locale(getCanonicalLocale()) as Intl.Locale & { getWeekInfo?: () => WeekInfo, weekInfo?: WeekInfo }
 	// Intl counts the days from 1 (Monday) to 7 (Sunday)
-	return (locale.getWeekInfo?.().firstDay ?? getFirstDay()) % 7
+	return ((locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay ?? getFirstDay()) % 7
 }
 
 export default defineComponent({
diff --git a/apps/settings/src/language-locale/components/TimezoneSection.vue b/apps/settings/src/language-locale/components/TimezoneSection.vue
index 8a65047cf3fc9..be98c598f25d2 100644
--- a/apps/settings/src/language-locale/components/TimezoneSection.vue
+++ b/apps/settings/src/language-locale/components/TimezoneSection.vue
@@ -5,14 +5,12 @@
 
 <script setup lang="ts">
 import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
 import { ref, watch } from 'vue'
 import NcTimezonePicker from '@nextcloud/vue/components/NcTimezonePicker'
 import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
 
 const { timezone: currentTimezone } = loadState<{ timezone: string }>('settings', 'personalInfoParameters')
 
-const inputId = 'account-property-timezone'
 const timezone = ref(currentTimezone)
 watch(timezone, () => {
 	savePrimaryAccountProperty('timezone', timezone.value)
@@ -23,9 +21,7 @@ watch(timezone, () => {
 	<section class="timezone-section">
 		<NcTimezonePicker
 			v-model="timezone"
-			class="timezone-section__picker"
-			:inputLabel="t('settings', 'Time zone')"
-			:inputId="inputId" />
+			class="timezone-section__picker" />
 	</section>
 </template>
 
diff --git a/apps/settings/src/webauthn/components/WebAuthnSection.vue b/apps/settings/src/webauthn/components/WebAuthnSection.vue
index f9ef5a2302883..d8ee1abb563f8 100644
--- a/apps/settings/src/webauthn/components/WebAuthnSection.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnSection.vue
@@ -43,12 +43,12 @@
 
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
-import sortBy from 'lodash/sortBy.js'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
 import WebAuthnDevice from './WebAuthnDevice.vue'
 import logger from '../../logger.ts'
 import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.ts'
+import { naturalCollator } from '../../utils/sorting.ts'
 
 export default {
 	name: 'WebAuthnSection',
@@ -91,7 +91,7 @@ export default {
 
 	computed: {
 		sortedDevices() {
-			return sortBy(this.devices, 'name')
+			return [...this.devices].sort((a, b) => naturalCollator.compare(a.name ?? '', b.name ?? ''))
 		},
 	},
 

From f397eaa988ad89c3054e1d64c58b864aca83b498 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Tue, 3 Nov 2026 14:40:51 +0100
Subject: [PATCH 5/6] refactor(settings): migrate the personal sections to
 script setup

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../components/FirstDayOfWeekSection.vue      |  94 +++------
 .../components/LanguageSection.vue            |  43 +---
 .../components/LanguageSectionEntry.vue       | 123 ++++--------
 .../components/LocaleSection.vue              |  37 +---
 .../components/LocaleSectionEntry.vue         | 122 ++++-------
 apps/settings/src/language-locale/main.ts     |   5 +-
 .../src/service/WebAuthnRegistrationSerice.ts |   7 +-
 .../webauthn/components/WebAuthnAddDevice.vue | 190 ++++++++----------
 .../webauthn/components/WebAuthnDevice.vue    |  25 +--
 .../webauthn/components/WebAuthnSection.vue   | 103 ++++------
 apps/settings/src/webauthn/main.ts            |   7 +-
 11 files changed, 255 insertions(+), 501 deletions(-)

diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
index 993420a88ab29..9b1b4d91f382c 100644
--- a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
+++ b/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
@@ -18,10 +18,12 @@
 	</section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import type { AxiosError } from '@nextcloud/axios'
+
 import { loadState } from '@nextcloud/initial-state'
 import { getCanonicalLocale, getDayNames, getFirstDay, t } from '@nextcloud/l10n'
-import { defineComponent } from 'vue'
+import { computed, ref } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import {
 	ACCOUNT_SETTING_PROPERTY_ENUM,
@@ -55,76 +57,32 @@ function getLocaleFirstDay(): number {
 	return ((locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay ?? getFirstDay()) % 7
 }
 
-export default defineComponent({
-	name: 'FirstDayOfWeekSection',
-	components: {
-		NcSelect,
-	},
-
-	data() {
-		let firstDay = -1
-		if (firstDayOfWeek) {
-			firstDay = parseInt(firstDayOfWeek)
-		}
-
-		return {
-			firstDay,
-		}
-	},
-
-	computed: {
-		inputId(): string {
-			return 'account-property-fdow'
-		},
+const inputId = 'account-property-fdow'
 
-		dayOptions(): DayOption[] {
-			const options = [{
-				value: -1,
-				label: t('settings', 'Derived from your locale ({weekDayName})', {
-					// use the locale's default first day (not the user's saved override)
-					weekDayName: getDayNames()[getLocaleFirstDay()],
-				}),
-			}]
-			for (const [index, dayName] of getDayNames().entries()) {
-				options.push({ value: index, label: dayName })
-			}
-			return options
-		},
+const firstDay = ref(firstDayOfWeek ? parseInt(firstDayOfWeek) : -1)
 
-		valueOption(): DayOption | undefined {
-			return this.dayOptions.find((option) => option.value === this.firstDay)
-		},
-	},
+const dayOptions: DayOption[] = [{
+	value: -1,
+	label: t('settings', 'Derived from your locale ({weekDayName})', {
+		// use the locale's default first day (not the user's saved override)
+		weekDayName: getDayNames()[getLocaleFirstDay()],
+	}),
+}, ...getDayNames().map((dayName, index) => ({ value: index, label: dayName }))]
 
-	methods: {
-		async updateFirstDayOfWeek(option: DayOption): Promise<void> {
-			try {
-				const responseData = await savePrimaryAccountProperty(
-					ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK,
-					option.value.toString(),
-				)
-				this.handleResponse({
-					value: option.value,
-					status: responseData.ocs?.meta?.status,
-				})
-				window.location.reload()
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update first day of week'),
-					error: e,
-				})
-			}
-		},
+const valueOption = computed(() => dayOptions.find((option) => option.value === firstDay.value))
 
-		handleResponse({ value, status, errorMessage, error }): void {
-			if (status === 'ok') {
-				this.firstDay = value
-			} else {
-				handleError(error, errorMessage)
-			}
-		},
-	},
-})
+/**
+ * @param option The day picked in the select, the page reloads with it
+ */
+async function updateFirstDayOfWeek(option: DayOption): Promise<void> {
+	try {
+		await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.FIRST_DAY_OF_WEEK, option.value.toString())
+		firstDay.value = option.value
+		window.location.reload()
+	} catch (error) {
+		handleError(error as AxiosError, t('settings', 'Unable to update first day of week'))
+	}
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/settings/src/language-locale/components/LanguageSection.vue b/apps/settings/src/language-locale/components/LanguageSection.vue
index 8efbf940d5122..4762438ff870c 100644
--- a/apps/settings/src/language-locale/components/LanguageSection.vue
+++ b/apps/settings/src/language-locale/components/LanguageSection.vue
@@ -22,44 +22,23 @@
 	</section>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
+
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
 import LanguageSectionEntry from './LanguageSectionEntry.vue'
 import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
 
-const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState('settings', 'personalInfoParameters', {})
-
-export default {
-	name: 'LanguageSection',
-
-	components: {
-		LanguageSectionEntry,
-	},
+const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState<{
+	languageMap: { activeLanguage: LanguageOption, commonLanguages: LanguageOption[], otherLanguages: LanguageOption[] }
+}>('settings', 'personalInfoParameters')
 
-	setup() {
-		// Non reactive instance properties
-		return {
-			commonLanguages,
-			otherLanguages,
-		}
-	},
+const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
 
-	data() {
-		return {
-			language: activeLanguage,
-		}
-	},
-
-	computed: {
-		inputId() {
-			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
-		},
-
-		isEditable() {
-			return Boolean(this.language)
-		},
-	},
-}
+const language = ref(activeLanguage)
+const isEditable = computed(() => Boolean(language.value))
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/settings/src/language-locale/components/LanguageSectionEntry.vue b/apps/settings/src/language-locale/components/LanguageSectionEntry.vue
index ccdfedf349b4a..d9a8829ea8fde 100644
--- a/apps/settings/src/language-locale/components/LanguageSectionEntry.vue
+++ b/apps/settings/src/language-locale/components/LanguageSectionEntry.vue
@@ -27,8 +27,12 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { AxiosError } from '@nextcloud/axios'
+import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
+
 import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
 import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
@@ -37,90 +41,39 @@ import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalI
 import { handleError } from '../../utils/handlers.ts'
 import { validateLanguage } from '../../utils/validate.js'
 
-export default {
-	name: 'LanguageSectionEntry',
-
-	components: {
-		NcFormBoxButton,
-		NcSelect,
-		OpenInNew,
-	},
-
-	props: {
-		inputId: {
-			type: String,
-			default: null,
-		},
-
-		commonLanguages: {
-			type: Array,
-			required: true,
-		},
-
-		otherLanguages: {
-			type: Array,
-			required: true,
-		},
-
-		language: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	emits: ['update:language'],
-
-	data() {
-		return {
-			initialLanguage: this.language,
-		}
-	},
-
-	computed: {
-		/**
-		 * All available languages, sorted like: current, common, other
-		 */
-		allLanguages() {
-			const common = this.commonLanguages.filter((l) => l.code !== this.language.code)
-			const other = this.otherLanguages.filter((l) => l.code !== this.language.code)
-			return [this.language, ...common, ...other]
-		},
-	},
-
-	methods: {
-		async onLanguageChange(language) {
-			this.$emit('update:language', language)
-
-			if (validateLanguage(language)) {
-				await this.updateLanguage(language)
-			}
-		},
-
-		async updateLanguage(language) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE, language.code)
-				this.handleResponse({
-					language,
-					status: responseData.ocs?.meta?.status,
-				})
-				window.location.reload()
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update language'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ language, status, errorMessage, error }) {
-			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialLanguage = language
-			} else {
-				handleError(error, errorMessage)
-			}
-		},
-	},
+const language = defineModel<LanguageOption>('language', { required: true })
+
+const props = defineProps<{
+	inputId?: string
+	commonLanguages: LanguageOption[]
+	otherLanguages: LanguageOption[]
+}>()
+
+/**
+ * All available languages, sorted like: current, common, other
+ */
+const allLanguages = computed(() => {
+	const common = props.commonLanguages.filter((l) => l.code !== language.value.code)
+	const other = props.otherLanguages.filter((l) => l.code !== language.value.code)
+	return [language.value, ...common, ...other]
+})
+
+/**
+ * @param newLanguage The language picked in the select, the page reloads in it
+ */
+async function onLanguageChange(newLanguage: LanguageOption) {
+	language.value = newLanguage
+
+	if (!validateLanguage(newLanguage)) {
+		return
+	}
+
+	try {
+		await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE, newLanguage.code)
+		window.location.reload()
+	} catch (error) {
+		handleError(error as AxiosError, t('settings', 'Unable to update language'))
+	}
 }
 </script>
 
diff --git a/apps/settings/src/language-locale/components/LocaleSection.vue b/apps/settings/src/language-locale/components/LocaleSection.vue
index baf83a4a3b26f..a6cd2219525c9 100644
--- a/apps/settings/src/language-locale/components/LocaleSection.vue
+++ b/apps/settings/src/language-locale/components/LocaleSection.vue
@@ -11,7 +11,7 @@
 
 		<LocaleSectionEntry
 			v-if="isEditable"
-			v-model:locale="locale"
+			:locale="activeLocale"
 			:inputId="inputId"
 			:localesForLanguage="localesForLanguage"
 			:otherLocales="otherLocales" />
@@ -22,38 +22,21 @@
 	</section>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
+
 import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
 import LocaleSectionEntry from './LocaleSectionEntry.vue'
 import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
 
-const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState('settings', 'personalInfoParameters', {})
-
-export default {
-	name: 'LocaleSection',
-
-	components: {
-		LocaleSectionEntry,
-	},
+const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState<{
+	localeMap: { activeLocale: LanguageOption, localesForLanguage: LanguageOption[], otherLocales: LanguageOption[] }
+}>('settings', 'personalInfoParameters')
 
-	data() {
-		return {
-			localesForLanguage,
-			otherLocales,
-			locale: activeLocale,
-		}
-	},
+const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
 
-	computed: {
-		inputId() {
-			return `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
-		},
-
-		isEditable() {
-			return Boolean(this.locale)
-		},
-	},
-}
+const isEditable = Boolean(activeLocale)
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/settings/src/language-locale/components/LocaleSectionEntry.vue b/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
index 66865f82b9508..4167aaabd7f73 100644
--- a/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
+++ b/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
@@ -22,13 +22,25 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { AxiosError } from '@nextcloud/axios'
+import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
+
 import { getCanonicalLocale, t } from '@nextcloud/l10n'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
 import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
 import { handleError } from '../../utils/handlers.ts'
 
+const props = defineProps<{
+	inputId?: string
+	locale: LanguageOption
+	localesForLanguage: LanguageOption[]
+	otherLocales: LanguageOption[]
+}>()
+
 const dateFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit', day: '2-digit' })
 const timeFormat = new Intl.DateTimeFormat(getCanonicalLocale(), { hour: 'numeric', minute: '2-digit', second: '2-digit' })
 
@@ -43,94 +55,30 @@ function formatExample() {
 	}
 }
 
-export default {
-	name: 'LocaleSectionEntry',
-
-	components: {
-		NcSelect,
-	},
-
-	props: {
-		inputId: {
-			type: String,
-			default: null,
-		},
-
-		locale: {
-			type: Object,
-			required: true,
-		},
-
-		localesForLanguage: {
-			type: Array,
-			required: true,
-		},
-
-		otherLocales: {
-			type: Array,
-			required: true,
-		},
-	},
-
-	emits: ['update:locale'],
-
-	data() {
-		return {
-			initialLocale: this.locale,
-			intervalId: 0,
-			example: formatExample(),
-		}
-	},
+const example = ref(formatExample())
+useIntervalFn(() => {
+	example.value = formatExample()
+}, 1000)
 
-	computed: {
-		/**
-		 * All available locale, sorted like: current, common, other
-		 */
-		allLocales() {
-			const common = this.localesForLanguage.filter((l) => l.code !== this.locale.code)
-			const other = this.otherLocales.filter((l) => l.code !== this.locale.code)
-			return [this.locale, ...common, ...other]
-		},
-	},
-
-	mounted() {
-		this.intervalId = window.setInterval(this.refreshExample, 1000)
-	},
-
-	beforeUnmount() {
-		window.clearInterval(this.intervalId)
-	},
-
-	methods: {
-		async updateLocale(locale) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, locale.code)
-				this.handleResponse({
-					locale,
-					status: responseData.ocs?.meta?.status,
-				})
-				window.location.reload()
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update locale'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ locale, status, errorMessage, error }) {
-			if (status === 'ok') {
-				this.initialLocale = locale
-			} else {
-				this.$emit('update:locale', this.initialLocale)
-				handleError(error, errorMessage)
-			}
-		},
+/**
+ * All available locale, sorted like: current, common, other
+ */
+const allLocales = computed(() => {
+	const common = props.localesForLanguage.filter((l) => l.code !== props.locale.code)
+	const other = props.otherLocales.filter((l) => l.code !== props.locale.code)
+	return [props.locale, ...common, ...other]
+})
 
-		refreshExample() {
-			this.example = formatExample()
-		},
-	},
+/**
+ * @param newLocale The locale to save, the page reloads with it
+ */
+async function updateLocale(newLocale: LanguageOption) {
+	try {
+		await savePrimaryAccountProperty(ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE, newLocale.code)
+		window.location.reload()
+	} catch (error) {
+		handleError(error as AxiosError, t('settings', 'Unable to update locale'))
+	}
 }
 </script>
 
diff --git a/apps/settings/src/language-locale/main.ts b/apps/settings/src/language-locale/main.ts
index 236ed0731fcd4..b9cff9e2f1b7e 100644
--- a/apps/settings/src/language-locale/main.ts
+++ b/apps/settings/src/language-locale/main.ts
@@ -3,10 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { t } from '@nextcloud/l10n'
 import { createApp } from 'vue'
 import LanguageLocaleSettings from './LanguageLocaleSettings.vue'
 
-const app = createApp(LanguageLocaleSettings)
-app.mixin({ methods: { t } })
-app.mount('#language-locale-settings')
+createApp(LanguageLocaleSettings).mount('#language-locale-settings')
diff --git a/apps/settings/src/service/WebAuthnRegistrationSerice.ts b/apps/settings/src/service/WebAuthnRegistrationSerice.ts
index 6e4c0c6b9393d..a462c6243cd6b 100644
--- a/apps/settings/src/service/WebAuthnRegistrationSerice.ts
+++ b/apps/settings/src/service/WebAuthnRegistrationSerice.ts
@@ -11,6 +11,11 @@ import { generateUrl } from '@nextcloud/router'
 import { startRegistration as registerWebAuthn } from '@simplewebauthn/browser'
 import logger from '../logger.ts'
 
+export interface WebAuthnDevice {
+	id: number
+	name: string | null
+}
+
 /**
  * Start registering a new device
  *
@@ -43,7 +48,7 @@ export async function startRegistration() {
 export async function finishRegistration(name: string, data: RegistrationResponseJSON) {
 	const url = generateUrl('/settings/api/personal/webauthn/registration')
 
-	const resp = await axios.post(url, { name, data: JSON.stringify(data) })
+	const resp = await axios.post<WebAuthnDevice>(url, { name, data: JSON.stringify(data) })
 	return resp.data
 }
 
diff --git a/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue b/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
index d3d4e11a784a0..85348a8a96331 100644
--- a/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
@@ -52,10 +52,14 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import type { RegistrationResponseJSON } from '@simplewebauthn/browser'
+import type { WebAuthnDevice } from '../../service/WebAuthnRegistrationSerice.ts'
+
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
+import { nextTick, ref, useTemplateRef } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import logger from '../../logger.ts'
@@ -64,15 +68,14 @@ import {
 	startRegistration,
 } from '../../service/WebAuthnRegistrationSerice.ts'
 
-/**
- * @param {string} text The text to log
- */
-function logAndPass(text) {
-	return (data) => {
-		logger.debug(text)
-		return data
-	}
-}
+defineProps<{
+	isHttps?: boolean
+	isLocalhost?: boolean
+}>()
+
+const emit = defineEmits<{
+	added: [device: WebAuthnDevice]
+}>()
 
 const RegistrationSteps = Object.freeze({
 	READY: 1,
@@ -81,107 +84,72 @@ const RegistrationSteps = Object.freeze({
 	PERSIST: 4,
 })
 
-export default {
-	name: 'WebAuthnAddDevice',
-
-	components: {
-		NcButton,
-		NcTextField,
-	},
-
-	props: {
-		isHttps: {
-			type: Boolean,
-			default: false,
-		},
-
-		isLocalhost: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	emits: ['added'],
-
-	setup() {
-		// non reactive props
-		return {
-			RegistrationSteps,
-		}
-	},
-
-	data() {
-		return {
-			name: '',
-			credential: {},
-			step: RegistrationSteps.READY,
-		}
-	},
-
-	watch: {
-		/**
-		 * Auto focus the name input when naming a device
-		 */
-		step() {
-			if (this.step === RegistrationSteps.NAMING) {
-				this.$nextTick(() => this.$refs.nameInput?.focus())
-			}
-		},
-	},
-
-	methods: {
-		/**
-		 * Start the registration process by loading the authenticator parameters
-		 * The next step is the naming of the device
-		 */
-		async start() {
-			this.step = RegistrationSteps.REGISTRATION
-			logger.debug('Starting WebAuthn registration')
-
-			try {
-				await confirmPassword()
-				this.credential = await startRegistration()
-				this.step = RegistrationSteps.NAMING
-			} catch (err) {
-				showError(err)
-				this.step = RegistrationSteps.READY
-			}
-		},
-
-		/**
-		 * Save the new device with the given name on the server
-		 */
-		submit() {
-			this.step = RegistrationSteps.PERSIST
-
-			return confirmPassword()
-				.then(logAndPass('confirmed password'))
-				.then(this.saveRegistrationData)
-				.then(logAndPass('registration data saved'))
-				.then(() => this.reset())
-				.then(logAndPass('app reset'))
-				.catch(logger.error)
-		},
-
-		async saveRegistrationData() {
-			try {
-				const device = await finishRegistration(this.name, this.credential)
-
-				logger.info('new device added', { device })
-
-				this.$emit('added', device)
-			} catch (err) {
-				logger.error('Error persisting webauthn registration', { error: err })
-				throw new Error(t('settings', 'Server error while trying to complete WebAuthn device registration'), { cause: err })
-			}
-		},
-
-		reset() {
-			this.name = ''
-			this.registrationData = {}
-			this.step = RegistrationSteps.READY
-		},
-	},
+const name = ref('')
+const credential = ref<RegistrationResponseJSON>()
+const step = ref<number>(RegistrationSteps.READY)
+
+const nameInput = useTemplateRef('nameInput')
+
+/**
+ * Start the registration process by loading the authenticator parameters
+ * The next step is the naming of the device
+ */
+async function start() {
+	step.value = RegistrationSteps.REGISTRATION
+	logger.debug('Starting WebAuthn registration')
+
+	try {
+		await confirmPassword()
+		credential.value = await startRegistration()
+		step.value = RegistrationSteps.NAMING
+		await nextTick()
+		nameInput.value?.focus()
+	} catch (err) {
+		showError(String(err))
+		step.value = RegistrationSteps.READY
+	}
+}
+
+/**
+ * Save the new device with the given name on the server
+ */
+async function submit() {
+	step.value = RegistrationSteps.PERSIST
+
+	try {
+		await confirmPassword()
+		logger.debug('confirmed password')
+		await saveRegistrationData()
+		logger.debug('registration data saved')
+		reset()
+		logger.debug('app reset')
+	} catch (error) {
+		logger.error(String(error), { error })
+	}
+}
+
+/**
+ * Finish the registration on the server and add the new device to the list
+ */
+async function saveRegistrationData() {
+	try {
+		const device = await finishRegistration(name.value, credential.value!)
+
+		logger.info('new device added', { device })
+
+		emit('added', device)
+	} catch (err) {
+		logger.error('Error persisting webauthn registration', { error: err })
+		throw new Error(t('settings', 'Server error while trying to complete WebAuthn device registration'), { cause: err })
+	}
+}
+
+/**
+ * Back to the start, ready for the next device
+ */
+function reset() {
+	name.value = ''
+	step.value = RegistrationSteps.READY
 }
 </script>
 
diff --git a/apps/settings/src/webauthn/components/WebAuthnDevice.vue b/apps/settings/src/webauthn/components/WebAuthnDevice.vue
index 3c006db834b00..0250b68169045 100644
--- a/apps/settings/src/webauthn/components/WebAuthnDevice.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnDevice.vue
@@ -15,27 +15,18 @@
 	</li>
 </template>
 
-<script>
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 
-export default {
-	name: 'WebAuthnDevice',
+defineProps<{
+	name: string | null
+}>()
 
-	components: {
-		NcActionButton,
-		NcActions,
-	},
-
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-	},
-
-	emits: ['delete'],
-}
+defineEmits<{
+	delete: []
+}>()
 </script>
 
 <style scoped>
diff --git a/apps/settings/src/webauthn/components/WebAuthnSection.vue b/apps/settings/src/webauthn/components/WebAuthnSection.vue
index d8ee1abb563f8..b0fa03b158299 100644
--- a/apps/settings/src/webauthn/components/WebAuthnSection.vue
+++ b/apps/settings/src/webauthn/components/WebAuthnSection.vue
@@ -38,11 +38,15 @@
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
 /* eslint vue/multi-word-component-names: "warn" */
 
+import type { WebAuthnDevice as Device } from '../../service/WebAuthnRegistrationSerice.ts'
+
+import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
 import { browserSupportsWebAuthn } from '@simplewebauthn/browser'
+import { computed, ref } from 'vue'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
 import WebAuthnDevice from './WebAuthnDevice.vue'
@@ -50,69 +54,40 @@ import logger from '../../logger.ts'
 import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.ts'
 import { naturalCollator } from '../../utils/sorting.ts'
 
-export default {
-	name: 'WebAuthnSection',
-
-	components: {
-		WebAuthnAddDevice,
-		WebAuthnDevice,
-		NcNoteCard,
-	},
-
-	props: {
-		initialDevices: {
-			type: Array,
-			required: true,
-		},
-
-		isHttps: {
-			type: Boolean,
-			default: false,
-		},
-
-		isLocalhost: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	setup() {
-		// Non reactive properties
-		return {
-			supportsWebauthn: browserSupportsWebAuthn(),
-		}
-	},
-
-	data() {
-		return {
-			devices: this.initialDevices,
-		}
-	},
-
-	computed: {
-		sortedDevices() {
-			return [...this.devices].sort((a, b) => naturalCollator.compare(a.name ?? '', b.name ?? ''))
-		},
-	},
-
-	methods: {
-		deviceAdded(device) {
-			logger.debug(`adding new device to the list ${device.id}`)
-
-			this.devices.push(device)
-		},
-
-		async deleteDevice(id) {
-			logger.info(`deleting webauthn device ${id}`)
-
-			await confirmPassword()
-			await removeRegistration(id)
-
-			this.devices = this.devices.filter((d) => d.id !== id)
-
-			logger.info(`webauthn device ${id} removed successfully`)
-		},
-	},
+const props = defineProps<{
+	initialDevices: Device[]
+	isHttps?: boolean
+	isLocalhost?: boolean
+}>()
+
+// Non reactive properties
+const supportsWebauthn = browserSupportsWebAuthn()
+
+const devices = ref(props.initialDevices)
+
+const sortedDevices = computed(() => [...devices.value].sort((a, b) => naturalCollator.compare(a.name ?? '', b.name ?? '')))
+
+/**
+ * @param device The device the server just registered
+ */
+function deviceAdded(device: Device) {
+	logger.debug(`adding new device to the list ${device.id}`)
+
+	devices.value.push(device)
+}
+
+/**
+ * @param id The device to delete
+ */
+async function deleteDevice(id: number) {
+	logger.info(`deleting webauthn device ${id}`)
+
+	await confirmPassword()
+	await removeRegistration(id)
+
+	devices.value = devices.value.filter((d) => d.id !== id)
+
+	logger.info(`webauthn device ${id} removed successfully`)
 }
 </script>
 
diff --git a/apps/settings/src/webauthn/main.ts b/apps/settings/src/webauthn/main.ts
index 3d52b3c746977..b1117c1497482 100644
--- a/apps/settings/src/webauthn/main.ts
+++ b/apps/settings/src/webauthn/main.ts
@@ -4,14 +4,11 @@
  */
 
 import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
 import { createApp } from 'vue'
 import WebAuthnSection from './components/WebAuthnSection.vue'
 
-const app = createApp(WebAuthnSection, {
+createApp(WebAuthnSection, {
 	initialDevices: loadState('settings', 'webauthn-devices'),
 	isHttps: window.location.protocol === 'https:',
 	isLocalhost: window.location.hostname === 'localhost',
-})
-app.mixin({ methods: { t } })
-app.mount('#security-webauthn')
+}).mount('#security-webauthn')

From 18f7dd025544dad155a5b33cb17e52f2d9771c6f Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Wed, 4 Nov 2026 13:40:49 +0100
Subject: [PATCH 6/6] refactor(settings): move migrated sections under sections
 and put script first

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../authtokens/components/AuthToken.spec.ts   |   0
 .../authtokens/components/AuthToken.vue       |   0
 .../components/AuthTokenDeleteDialog.vue      |   0
 .../authtokens/components/AuthTokenList.vue   |   0
 .../components/AuthTokenRevokeAll.spec.ts     |   0
 .../components/AuthTokenRevokeAllDialog.vue   |   0
 .../components/AuthTokenSection.vue           |   0
 .../authtokens/components/AuthTokenSetup.vue  |   2 +-
 .../components/AuthTokenSetupDialog.vue       |   2 +-
 .../src/{ => sections}/authtokens/main.ts     |   0
 .../authtokens/store/authtoken.spec.ts        |   0
 .../authtokens/store/authtoken.ts             |   2 +-
 .../authtokens/utils/userAgentDetect.ts       |   0
 .../authtokens/utils/userAgentMap.ts          |   0
 .../LanguageLocaleSettings.vue                |   2 +-
 .../components/FirstDayOfWeekSection.spec.ts  |   0
 .../components/FirstDayOfWeekSection.vue      |  36 +++---
 .../components/LanguageSection.vue            |  38 +++----
 .../components/LanguageSectionEntry.vue       |  62 +++++-----
 .../components/LocaleSection.vue              |  34 +++---
 .../components/LocaleSectionEntry.vue         |  50 ++++----
 .../components/TimezoneSection.vue            |   2 +-
 .../{ => sections}/language-locale/main.ts    |   0
 .../password/PasswordSection.vue              |   0
 .../src/{ => sections}/password/main.ts       |   0
 .../webauthn/components/WebAuthnAddDevice.vue | 107 +++++++++---------
 .../webauthn/components/WebAuthnDevice.vue    |  26 +++--
 .../webauthn/components/WebAuthnSection.vue   |  81 ++++++-------
 .../src/{ => sections}/webauthn/main.ts       |   0
 build/frontend-legacy/eslint.config.mjs       |   5 +-
 build/frontend-legacy/tsconfig.json           |   2 +-
 build/frontend-legacy/vitest.config.mts       |   7 +-
 build/frontend/package.json                   |   4 +-
 build/frontend/tsconfig.json                  |   2 +-
 build/frontend/vite.config.ts                 |   8 +-
 build/frontend/vitest.config.ts               |  10 +-
 36 files changed, 243 insertions(+), 239 deletions(-)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthToken.spec.ts (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthToken.vue (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenDeleteDialog.vue (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenList.vue (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenRevokeAll.spec.ts (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenRevokeAllDialog.vue (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenSection.vue (100%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenSetup.vue (98%)
 rename apps/settings/src/{ => sections}/authtokens/components/AuthTokenSetupDialog.vue (99%)
 rename apps/settings/src/{ => sections}/authtokens/main.ts (100%)
 rename apps/settings/src/{ => sections}/authtokens/store/authtoken.spec.ts (100%)
 rename apps/settings/src/{ => sections}/authtokens/store/authtoken.ts (99%)
 rename apps/settings/src/{ => sections}/authtokens/utils/userAgentDetect.ts (100%)
 rename apps/settings/src/{ => sections}/authtokens/utils/userAgentMap.ts (100%)
 rename apps/settings/src/{ => sections}/language-locale/LanguageLocaleSettings.vue (92%)
 rename apps/settings/src/{ => sections}/language-locale/components/FirstDayOfWeekSection.spec.ts (100%)
 rename apps/settings/src/{ => sections}/language-locale/components/FirstDayOfWeekSection.vue (92%)
 rename apps/settings/src/{ => sections}/language-locale/components/LanguageSection.vue (88%)
 rename apps/settings/src/{ => sections}/language-locale/components/LanguageSectionEntry.vue (79%)
 rename apps/settings/src/{ => sections}/language-locale/components/LocaleSection.vue (87%)
 rename apps/settings/src/{ => sections}/language-locale/components/LocaleSectionEntry.vue (82%)
 rename apps/settings/src/{ => sections}/language-locale/components/TimezoneSection.vue (89%)
 rename apps/settings/src/{ => sections}/language-locale/main.ts (100%)
 rename apps/settings/src/{ => sections}/password/PasswordSection.vue (100%)
 rename apps/settings/src/{ => sections}/password/main.ts (100%)
 rename apps/settings/src/{ => sections}/webauthn/components/WebAuthnAddDevice.vue (92%)
 rename apps/settings/src/{ => sections}/webauthn/components/WebAuthnDevice.vue (91%)
 rename apps/settings/src/{ => sections}/webauthn/components/WebAuthnSection.vue (86%)
 rename apps/settings/src/{ => sections}/webauthn/main.ts (100%)

diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/sections/authtokens/components/AuthToken.spec.ts
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthToken.spec.ts
rename to apps/settings/src/sections/authtokens/components/AuthToken.spec.ts
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/sections/authtokens/components/AuthToken.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthToken.vue
rename to apps/settings/src/sections/authtokens/components/AuthToken.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue b/apps/settings/src/sections/authtokens/components/AuthTokenDeleteDialog.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenDeleteDialog.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenList.vue b/apps/settings/src/sections/authtokens/components/AuthTokenList.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenList.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenList.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts b/apps/settings/src/sections/authtokens/components/AuthTokenRevokeAll.spec.ts
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
rename to apps/settings/src/sections/authtokens/components/AuthTokenRevokeAll.spec.ts
diff --git a/apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue b/apps/settings/src/sections/authtokens/components/AuthTokenRevokeAllDialog.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenRevokeAllDialog.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenSection.vue b/apps/settings/src/sections/authtokens/components/AuthTokenSection.vue
similarity index 100%
rename from apps/settings/src/authtokens/components/AuthTokenSection.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenSection.vue
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetup.vue b/apps/settings/src/sections/authtokens/components/AuthTokenSetup.vue
similarity index 98%
rename from apps/settings/src/authtokens/components/AuthTokenSetup.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenSetup.vue
index d31775fe1c570..803cc95bcdac1 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSetup.vue
+++ b/apps/settings/src/sections/authtokens/components/AuthTokenSetup.vue
@@ -12,7 +12,7 @@ import { ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
-import logger from '../../logger.ts'
+import logger from '../../../logger.ts'
 import { useAuthTokenStore } from '../store/authtoken.ts'
 
 const authTokenStore = useAuthTokenStore()
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue b/apps/settings/src/sections/authtokens/components/AuthTokenSetupDialog.vue
similarity index 99%
rename from apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
rename to apps/settings/src/sections/authtokens/components/AuthTokenSetupDialog.vue
index cf94dd46c3224..382ac3451cde2 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
+++ b/apps/settings/src/sections/authtokens/components/AuthTokenSetupDialog.vue
@@ -16,7 +16,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import logger from '../../logger.ts'
+import logger from '../../../logger.ts'
 
 const props = withDefaults(defineProps<{
 	/** The newly created token, `null` while the dialog is closed */
diff --git a/apps/settings/src/authtokens/main.ts b/apps/settings/src/sections/authtokens/main.ts
similarity index 100%
rename from apps/settings/src/authtokens/main.ts
rename to apps/settings/src/sections/authtokens/main.ts
diff --git a/apps/settings/src/authtokens/store/authtoken.spec.ts b/apps/settings/src/sections/authtokens/store/authtoken.spec.ts
similarity index 100%
rename from apps/settings/src/authtokens/store/authtoken.spec.ts
rename to apps/settings/src/sections/authtokens/store/authtoken.spec.ts
diff --git a/apps/settings/src/authtokens/store/authtoken.ts b/apps/settings/src/sections/authtokens/store/authtoken.ts
similarity index 99%
rename from apps/settings/src/authtokens/store/authtoken.ts
rename to apps/settings/src/sections/authtokens/store/authtoken.ts
index 131cb60afb7e1..3afee09550db0 100644
--- a/apps/settings/src/authtokens/store/authtoken.ts
+++ b/apps/settings/src/sections/authtokens/store/authtoken.ts
@@ -9,7 +9,7 @@ import { n, t } from '@nextcloud/l10n'
 import { addPasswordConfirmationInterceptors, confirmPassword, PwdConfirmationMode } from '@nextcloud/password-confirmation'
 import { generateUrl } from '@nextcloud/router'
 import { defineStore } from 'pinia'
-import logger from '../../logger.ts'
+import logger from '../../../logger.ts'
 
 const BASE_URL = generateUrl('/settings/personal/authtokens')
 addPasswordConfirmationInterceptors(axios)
diff --git a/apps/settings/src/authtokens/utils/userAgentDetect.ts b/apps/settings/src/sections/authtokens/utils/userAgentDetect.ts
similarity index 100%
rename from apps/settings/src/authtokens/utils/userAgentDetect.ts
rename to apps/settings/src/sections/authtokens/utils/userAgentDetect.ts
diff --git a/apps/settings/src/authtokens/utils/userAgentMap.ts b/apps/settings/src/sections/authtokens/utils/userAgentMap.ts
similarity index 100%
rename from apps/settings/src/authtokens/utils/userAgentMap.ts
rename to apps/settings/src/sections/authtokens/utils/userAgentMap.ts
diff --git a/apps/settings/src/language-locale/LanguageLocaleSettings.vue b/apps/settings/src/sections/language-locale/LanguageLocaleSettings.vue
similarity index 92%
rename from apps/settings/src/language-locale/LanguageLocaleSettings.vue
rename to apps/settings/src/sections/language-locale/LanguageLocaleSettings.vue
index e915a24d75614..e1aa6655a7d6c 100644
--- a/apps/settings/src/language-locale/LanguageLocaleSettings.vue
+++ b/apps/settings/src/sections/language-locale/LanguageLocaleSettings.vue
@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { translate as t } from '@nextcloud/l10n'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import SettingsColumn from '../components/SettingsColumn.vue'
+import SettingsColumn from '../../components/SettingsColumn.vue'
 import FirstDayOfWeekSection from './components/FirstDayOfWeekSection.vue'
 import LanguageSection from './components/LanguageSection.vue'
 import LocaleSection from './components/LocaleSection.vue'
diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.spec.ts
similarity index 100%
rename from apps/settings/src/language-locale/components/FirstDayOfWeekSection.spec.ts
rename to apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.spec.ts
diff --git a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.vue
similarity index 92%
rename from apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
rename to apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.vue
index 9b1b4d91f382c..8e1a1b2aa8041 100644
--- a/apps/settings/src/language-locale/components/FirstDayOfWeekSection.vue
+++ b/apps/settings/src/sections/language-locale/components/FirstDayOfWeekSection.vue
@@ -3,21 +3,6 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
  -->
 
-<template>
-	<section class="fdow-section">
-		<NcSelect
-			:aria-label-listbox="t('settings', 'Day to use as the first day of week')"
-			class="fdow-section__day-select"
-			:clearable="false"
-			:inputId="inputId"
-			:inputLabel="t('settings', 'First day of week')"
-			label="label"
-			:options="dayOptions"
-			:modelValue="valueOption"
-			@option:selected="updateFirstDayOfWeek" />
-	</section>
-</template>
-
 <script setup lang="ts">
 import type { AxiosError } from '@nextcloud/axios'
 
@@ -27,9 +12,9 @@ import { computed, ref } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import {
 	ACCOUNT_SETTING_PROPERTY_ENUM,
-} from '../../constants/AccountPropertyConstants.ts'
-import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../utils/handlers.ts'
+} from '../../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
 
 interface WeekInfo {
 	firstDay: number
@@ -85,6 +70,21 @@ async function updateFirstDayOfWeek(option: DayOption): Promise<void> {
 }
 </script>
 
+<template>
+	<section class="fdow-section">
+		<NcSelect
+			:aria-label-listbox="t('settings', 'Day to use as the first day of week')"
+			class="fdow-section__day-select"
+			:clearable="false"
+			:inputId="inputId"
+			:inputLabel="t('settings', 'First day of week')"
+			label="label"
+			:options="dayOptions"
+			:modelValue="valueOption"
+			@option:selected="updateFirstDayOfWeek" />
+	</section>
+</template>
+
 <style lang="scss" scoped>
 .fdow-section {
 	padding: 6px 0;
diff --git a/apps/settings/src/language-locale/components/LanguageSection.vue b/apps/settings/src/sections/language-locale/components/LanguageSection.vue
similarity index 88%
rename from apps/settings/src/language-locale/components/LanguageSection.vue
rename to apps/settings/src/sections/language-locale/components/LanguageSection.vue
index 4762438ff870c..242877ed69674 100644
--- a/apps/settings/src/language-locale/components/LanguageSection.vue
+++ b/apps/settings/src/sections/language-locale/components/LanguageSection.vue
@@ -3,6 +3,25 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
+
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
+import LanguageSectionEntry from './LanguageSectionEntry.vue'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+
+const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState<{
+	languageMap: { activeLanguage: LanguageOption, commonLanguages: LanguageOption[], otherLanguages: LanguageOption[] }
+}>('settings', 'personalInfoParameters')
+
+const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
+
+const language = ref(activeLanguage)
+const isEditable = computed(() => Boolean(language.value))
+</script>
+
 <template>
 	<section class="language-section">
 		<h3 class="language-section__heading">
@@ -22,25 +41,6 @@
 	</section>
 </template>
 
-<script setup lang="ts">
-import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
-
-import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
-import { computed, ref } from 'vue'
-import LanguageSectionEntry from './LanguageSectionEntry.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
-
-const { languageMap: { activeLanguage, commonLanguages, otherLanguages } } = loadState<{
-	languageMap: { activeLanguage: LanguageOption, commonLanguages: LanguageOption[], otherLanguages: LanguageOption[] }
-}>('settings', 'personalInfoParameters')
-
-const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LANGUAGE}`
-
-const language = ref(activeLanguage)
-const isEditable = computed(() => Boolean(language.value))
-</script>
-
 <style lang="scss" scoped>
 .language-section {
 	padding: 6px 0;
diff --git a/apps/settings/src/language-locale/components/LanguageSectionEntry.vue b/apps/settings/src/sections/language-locale/components/LanguageSectionEntry.vue
similarity index 79%
rename from apps/settings/src/language-locale/components/LanguageSectionEntry.vue
rename to apps/settings/src/sections/language-locale/components/LanguageSectionEntry.vue
index d9a8829ea8fde..7771e97f87613 100644
--- a/apps/settings/src/language-locale/components/LanguageSectionEntry.vue
+++ b/apps/settings/src/sections/language-locale/components/LanguageSectionEntry.vue
@@ -3,49 +3,29 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<div class="language">
-		<NcSelect
-			:aria-label-listbox="t('settings', 'Languages')"
-			class="language__select"
-			:clearable="false"
-			:inputId="inputId"
-			label="name"
-			labelOutside
-			:options="allLanguages"
-			:modelValue="language"
-			@option:selected="onLanguageChange" />
-
-		<NcFormBoxButton
-			:label="t('settings', 'Help translate')"
-			href="https://explore.transifex.com/nextcloud/"
-			target="_blank">
-			<template #icon>
-				<OpenInNew :size="20" />
-			</template>
-		</NcFormBoxButton>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { AxiosError } from '@nextcloud/axios'
-import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
 
 import { t } from '@nextcloud/l10n'
 import { computed } from 'vue'
 import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
-import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../utils/handlers.ts'
-import { validateLanguage } from '../../utils/validate.js'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
+import { validateLanguage } from '../../../utils/validate.js'
 
+/** The user's current language */
 const language = defineModel<LanguageOption>('language', { required: true })
 
 const props = defineProps<{
+	/** Id of the select input, for the section's label */
 	inputId?: string
+	/** Most used languages, listed first */
 	commonLanguages: LanguageOption[]
+	/** All other languages */
 	otherLanguages: LanguageOption[]
 }>()
 
@@ -77,6 +57,30 @@ async function onLanguageChange(newLanguage: LanguageOption) {
 }
 </script>
 
+<template>
+	<div class="language">
+		<NcSelect
+			:aria-label-listbox="t('settings', 'Languages')"
+			class="language__select"
+			:clearable="false"
+			:inputId="inputId"
+			label="name"
+			labelOutside
+			:options="allLanguages"
+			:modelValue="language"
+			@option:selected="onLanguageChange" />
+
+		<NcFormBoxButton
+			:label="t('settings', 'Help translate')"
+			href="https://explore.transifex.com/nextcloud/"
+			target="_blank">
+			<template #icon>
+				<OpenInNew :size="20" />
+			</template>
+		</NcFormBoxButton>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 .language {
 	display: flex;
diff --git a/apps/settings/src/language-locale/components/LocaleSection.vue b/apps/settings/src/sections/language-locale/components/LocaleSection.vue
similarity index 87%
rename from apps/settings/src/language-locale/components/LocaleSection.vue
rename to apps/settings/src/sections/language-locale/components/LocaleSection.vue
index a6cd2219525c9..d9cbecf2a27bd 100644
--- a/apps/settings/src/language-locale/components/LocaleSection.vue
+++ b/apps/settings/src/sections/language-locale/components/LocaleSection.vue
@@ -3,6 +3,23 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
+
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import LocaleSectionEntry from './LocaleSectionEntry.vue'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+
+const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState<{
+	localeMap: { activeLocale: LanguageOption, localesForLanguage: LanguageOption[], otherLocales: LanguageOption[] }
+}>('settings', 'personalInfoParameters')
+
+const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
+
+const isEditable = Boolean(activeLocale)
+</script>
+
 <template>
 	<section class="locale-section">
 		<h3 class="locale-section__heading">
@@ -22,23 +39,6 @@
 	</section>
 </template>
 
-<script setup lang="ts">
-import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
-
-import { loadState } from '@nextcloud/initial-state'
-import { t } from '@nextcloud/l10n'
-import LocaleSectionEntry from './LocaleSectionEntry.vue'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
-
-const { localeMap: { activeLocale, localesForLanguage, otherLocales } } = loadState<{
-	localeMap: { activeLocale: LanguageOption, localesForLanguage: LanguageOption[], otherLocales: LanguageOption[] }
-}>('settings', 'personalInfoParameters')
-
-const inputId = `account-setting-${ACCOUNT_SETTING_PROPERTY_ENUM.LOCALE}`
-
-const isEditable = Boolean(activeLocale)
-</script>
-
 <style lang="scss" scoped>
 .locale-section {
 	padding: 6px 0;
diff --git a/apps/settings/src/language-locale/components/LocaleSectionEntry.vue b/apps/settings/src/sections/language-locale/components/LocaleSectionEntry.vue
similarity index 82%
rename from apps/settings/src/language-locale/components/LocaleSectionEntry.vue
rename to apps/settings/src/sections/language-locale/components/LocaleSectionEntry.vue
index 4167aaabd7f73..c498033a85e06 100644
--- a/apps/settings/src/language-locale/components/LocaleSectionEntry.vue
+++ b/apps/settings/src/sections/language-locale/components/LocaleSectionEntry.vue
@@ -3,41 +3,26 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<div class="locale">
-		<p class="locale__example">
-			{{ t('settings', 'Example: {example}', { example: `${example.date} ${example.time}` }) }}
-		</p>
-
-		<NcSelect
-			:aria-label-listbox="t('settings', 'Locales')"
-			class="locale__select"
-			:clearable="false"
-			:inputId="inputId"
-			label="name"
-			labelOutside
-			:options="allLocales"
-			:modelValue="locale"
-			@option:selected="updateLocale" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { AxiosError } from '@nextcloud/axios'
-import type { LanguageOption } from '../../components/Users/userFormUtils.ts'
+import type { LanguageOption } from '../../../components/Users/userFormUtils.ts'
 
 import { getCanonicalLocale, t } from '@nextcloud/l10n'
 import { useIntervalFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
-import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../constants/AccountPropertyConstants.ts'
-import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
-import { handleError } from '../../utils/handlers.ts'
+import { ACCOUNT_SETTING_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants.ts'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
+import { handleError } from '../../../utils/handlers.ts'
 
 const props = defineProps<{
+	/** Id of the select input, for the section's label */
 	inputId?: string
+	/** The user's current locale */
 	locale: LanguageOption
+	/** Locales matching the user's language, listed first */
 	localesForLanguage: LanguageOption[]
+	/** All other locales */
 	otherLocales: LanguageOption[]
 }>()
 
@@ -82,6 +67,25 @@ async function updateLocale(newLocale: LanguageOption) {
 }
 </script>
 
+<template>
+	<div class="locale">
+		<p class="locale__example">
+			{{ t('settings', 'Example: {example}', { example: `${example.date} ${example.time}` }) }}
+		</p>
+
+		<NcSelect
+			:aria-label-listbox="t('settings', 'Locales')"
+			class="locale__select"
+			:clearable="false"
+			:inputId="inputId"
+			label="name"
+			labelOutside
+			:options="allLocales"
+			:modelValue="locale"
+			@option:selected="updateLocale" />
+	</div>
+</template>
+
 <style lang="scss" scoped>
 .locale {
 	display: flex;
diff --git a/apps/settings/src/language-locale/components/TimezoneSection.vue b/apps/settings/src/sections/language-locale/components/TimezoneSection.vue
similarity index 89%
rename from apps/settings/src/language-locale/components/TimezoneSection.vue
rename to apps/settings/src/sections/language-locale/components/TimezoneSection.vue
index be98c598f25d2..eea0660712a71 100644
--- a/apps/settings/src/language-locale/components/TimezoneSection.vue
+++ b/apps/settings/src/sections/language-locale/components/TimezoneSection.vue
@@ -7,7 +7,7 @@
 import { loadState } from '@nextcloud/initial-state'
 import { ref, watch } from 'vue'
 import NcTimezonePicker from '@nextcloud/vue/components/NcTimezonePicker'
-import { savePrimaryAccountProperty } from '../../service/PersonalInfo/PersonalInfoService.js'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService.js'
 
 const { timezone: currentTimezone } = loadState<{ timezone: string }>('settings', 'personalInfoParameters')
 
diff --git a/apps/settings/src/language-locale/main.ts b/apps/settings/src/sections/language-locale/main.ts
similarity index 100%
rename from apps/settings/src/language-locale/main.ts
rename to apps/settings/src/sections/language-locale/main.ts
diff --git a/apps/settings/src/password/PasswordSection.vue b/apps/settings/src/sections/password/PasswordSection.vue
similarity index 100%
rename from apps/settings/src/password/PasswordSection.vue
rename to apps/settings/src/sections/password/PasswordSection.vue
diff --git a/apps/settings/src/password/main.ts b/apps/settings/src/sections/password/main.ts
similarity index 100%
rename from apps/settings/src/password/main.ts
rename to apps/settings/src/sections/password/main.ts
diff --git a/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue b/apps/settings/src/sections/webauthn/components/WebAuthnAddDevice.vue
similarity index 92%
rename from apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
rename to apps/settings/src/sections/webauthn/components/WebAuthnAddDevice.vue
index 85348a8a96331..efeaf91651473 100644
--- a/apps/settings/src/webauthn/components/WebAuthnAddDevice.vue
+++ b/apps/settings/src/sections/webauthn/components/WebAuthnAddDevice.vue
@@ -3,58 +3,9 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<div v-if="!isHttps && !isLocalhost">
-		{{ t('settings', 'Passwordless authentication requires a secure connection.') }}
-	</div>
-	<div v-else>
-		<NcButton
-			v-if="step === RegistrationSteps.READY"
-			variant="primary"
-			@click="start">
-			{{ t('settings', 'Add WebAuthn device') }}
-		</NcButton>
-
-		<div
-			v-else-if="step === RegistrationSteps.REGISTRATION"
-			class="new-webauthn-device">
-			<span class="icon-loading-small webauthn-loading" />
-			{{ t('settings', 'Please authorize your WebAuthn device.') }}
-		</div>
-
-		<div
-			v-else-if="step === RegistrationSteps.NAMING"
-			class="new-webauthn-device">
-			<span class="icon-loading-small webauthn-loading" />
-			<form @submit.prevent="submit">
-				<NcTextField
-					ref="nameInput"
-					v-model="name"
-					class="new-webauthn-device__name"
-					:label="t('settings', 'Device name')"
-					showTrailingButton
-					:trailingButtonLabel="t('settings', 'Add')"
-					trailingButtonIcon="arrowEnd"
-					@trailingButtonClick="submit" />
-			</form>
-		</div>
-
-		<div
-			v-else-if="step === RegistrationSteps.PERSIST"
-			class="new-webauthn-device">
-			<span class="icon-loading-small webauthn-loading" />
-			{{ t('settings', 'Adding your device …') }}
-		</div>
-
-		<div v-else>
-			Invalid registration step. This should not have happened.
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { RegistrationResponseJSON } from '@simplewebauthn/browser'
-import type { WebAuthnDevice } from '../../service/WebAuthnRegistrationSerice.ts'
+import type { WebAuthnDevice } from '../../../service/WebAuthnRegistrationSerice.ts'
 
 import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
@@ -62,18 +13,21 @@ import { confirmPassword } from '@nextcloud/password-confirmation'
 import { nextTick, ref, useTemplateRef } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import logger from '../../logger.ts'
+import logger from '../../../logger.ts'
 import {
 	finishRegistration,
 	startRegistration,
-} from '../../service/WebAuthnRegistrationSerice.ts'
+} from '../../../service/WebAuthnRegistrationSerice.ts'
 
 defineProps<{
+	/** Whether the page is served over HTTPS */
 	isHttps?: boolean
+	/** Whether the page is served from localhost */
 	isLocalhost?: boolean
 }>()
 
 const emit = defineEmits<{
+	/** A device was registered on the server */
 	added: [device: WebAuthnDevice]
 }>()
 
@@ -153,6 +107,55 @@ function reset() {
 }
 </script>
 
+<template>
+	<div v-if="!isHttps && !isLocalhost">
+		{{ t('settings', 'Passwordless authentication requires a secure connection.') }}
+	</div>
+	<div v-else>
+		<NcButton
+			v-if="step === RegistrationSteps.READY"
+			variant="primary"
+			@click="start">
+			{{ t('settings', 'Add WebAuthn device') }}
+		</NcButton>
+
+		<div
+			v-else-if="step === RegistrationSteps.REGISTRATION"
+			class="new-webauthn-device">
+			<span class="icon-loading-small webauthn-loading" />
+			{{ t('settings', 'Please authorize your WebAuthn device.') }}
+		</div>
+
+		<div
+			v-else-if="step === RegistrationSteps.NAMING"
+			class="new-webauthn-device">
+			<span class="icon-loading-small webauthn-loading" />
+			<form @submit.prevent="submit">
+				<NcTextField
+					ref="nameInput"
+					v-model="name"
+					class="new-webauthn-device__name"
+					:label="t('settings', 'Device name')"
+					showTrailingButton
+					:trailingButtonLabel="t('settings', 'Add')"
+					trailingButtonIcon="arrowEnd"
+					@trailingButtonClick="submit" />
+			</form>
+		</div>
+
+		<div
+			v-else-if="step === RegistrationSteps.PERSIST"
+			class="new-webauthn-device">
+			<span class="icon-loading-small webauthn-loading" />
+			{{ t('settings', 'Adding your device …') }}
+		</div>
+
+		<div v-else>
+			Invalid registration step. This should not have happened.
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .webauthn-loading {
 	display: inline-block;
diff --git a/apps/settings/src/webauthn/components/WebAuthnDevice.vue b/apps/settings/src/sections/webauthn/components/WebAuthnDevice.vue
similarity index 91%
rename from apps/settings/src/webauthn/components/WebAuthnDevice.vue
rename to apps/settings/src/sections/webauthn/components/WebAuthnDevice.vue
index 0250b68169045..32dbdba8fafed 100644
--- a/apps/settings/src/webauthn/components/WebAuthnDevice.vue
+++ b/apps/settings/src/sections/webauthn/components/WebAuthnDevice.vue
@@ -3,32 +3,34 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<li class="webauthn-device">
-		<span class="icon-webauthn-device" />
-		{{ name || t('settings', 'Unnamed device') }}
-		<NcActions :forceMenu="true">
-			<NcActionButton icon="icon-delete" @click="$emit('delete')">
-				{{ t('settings', 'Delete') }}
-			</NcActionButton>
-		</NcActions>
-	</li>
-</template>
-
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 
 defineProps<{
+	/** Name the user gave the device, if any */
 	name: string | null
 }>()
 
 defineEmits<{
+	/** The user asked to delete the device */
 	delete: []
 }>()
 </script>
 
+<template>
+	<li class="webauthn-device">
+		<span class="icon-webauthn-device" />
+		{{ name || t('settings', 'Unnamed device') }}
+		<NcActions :forceMenu="true">
+			<NcActionButton icon="icon-delete" @click="$emit('delete')">
+				{{ t('settings', 'Delete') }}
+			</NcActionButton>
+		</NcActions>
+	</li>
+</template>
+
 <style scoped>
 	.webauthn-device {
 		line-height: 300%;
diff --git a/apps/settings/src/webauthn/components/WebAuthnSection.vue b/apps/settings/src/sections/webauthn/components/WebAuthnSection.vue
similarity index 86%
rename from apps/settings/src/webauthn/components/WebAuthnSection.vue
rename to apps/settings/src/sections/webauthn/components/WebAuthnSection.vue
index b0fa03b158299..e876433284ce9 100644
--- a/apps/settings/src/webauthn/components/WebAuthnSection.vue
+++ b/apps/settings/src/sections/webauthn/components/WebAuthnSection.vue
@@ -3,45 +3,10 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<div class="section">
-		<h2>{{ t('settings', 'Passwordless Authentication') }}</h2>
-		<p class="settings-hint hidden-when-empty">
-			{{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }}
-		</p>
-
-		<NcNoteCard v-if="devices.length === 0" type="info">
-			{{ t('settings', 'No devices configured.') }}
-		</NcNoteCard>
-		<template v-else>
-			<h3 id="security-webauthn__active-devices">
-				{{ t('settings', 'The following devices are configured for your account:') }}
-			</h3>
-			<ul aria-labelledby="security-webauthn__active-devices" class="security-webauthn__device-list">
-				<WebAuthnDevice
-					v-for="device in sortedDevices"
-					:key="device.id"
-					:name="device.name"
-					@delete="deleteDevice(device.id)" />
-			</ul>
-		</template>
-
-		<NcNoteCard v-if="!supportsWebauthn" type="warning">
-			{{ t('settings', 'Your browser does not support WebAuthn.') }}
-		</NcNoteCard>
-
-		<WebAuthnAddDevice
-			v-if="supportsWebauthn"
-			:isHttps="isHttps"
-			:isLocalhost="isLocalhost"
-			@added="deviceAdded" />
-	</div>
-</template>
-
 <script setup lang="ts">
 /* eslint vue/multi-word-component-names: "warn" */
 
-import type { WebAuthnDevice as Device } from '../../service/WebAuthnRegistrationSerice.ts'
+import type { WebAuthnDevice as Device } from '../../../service/WebAuthnRegistrationSerice.ts'
 
 import { t } from '@nextcloud/l10n'
 import { confirmPassword } from '@nextcloud/password-confirmation'
@@ -50,13 +15,16 @@ import { computed, ref } from 'vue'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import WebAuthnAddDevice from './WebAuthnAddDevice.vue'
 import WebAuthnDevice from './WebAuthnDevice.vue'
-import logger from '../../logger.ts'
-import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.ts'
-import { naturalCollator } from '../../utils/sorting.ts'
+import logger from '../../../logger.ts'
+import { removeRegistration } from '../../../service/WebAuthnRegistrationSerice.ts'
+import { naturalCollator } from '../../../utils/sorting.ts'
 
 const props = defineProps<{
+	/** Devices registered when the page loaded */
 	initialDevices: Device[]
+	/** Whether the page is served over HTTPS */
 	isHttps?: boolean
+	/** Whether the page is served from localhost */
 	isLocalhost?: boolean
 }>()
 
@@ -91,6 +59,41 @@ async function deleteDevice(id: number) {
 }
 </script>
 
+<template>
+	<div class="section">
+		<h2>{{ t('settings', 'Passwordless Authentication') }}</h2>
+		<p class="settings-hint hidden-when-empty">
+			{{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }}
+		</p>
+
+		<NcNoteCard v-if="devices.length === 0" type="info">
+			{{ t('settings', 'No devices configured.') }}
+		</NcNoteCard>
+		<template v-else>
+			<h3 id="security-webauthn__active-devices">
+				{{ t('settings', 'The following devices are configured for your account:') }}
+			</h3>
+			<ul aria-labelledby="security-webauthn__active-devices" class="security-webauthn__device-list">
+				<WebAuthnDevice
+					v-for="device in sortedDevices"
+					:key="device.id"
+					:name="device.name"
+					@delete="deleteDevice(device.id)" />
+			</ul>
+		</template>
+
+		<NcNoteCard v-if="!supportsWebauthn" type="warning">
+			{{ t('settings', 'Your browser does not support WebAuthn.') }}
+		</NcNoteCard>
+
+		<WebAuthnAddDevice
+			v-if="supportsWebauthn"
+			:isHttps="isHttps"
+			:isLocalhost="isLocalhost"
+			@added="deviceAdded" />
+	</div>
+</template>
+
 <style scoped>
 .security-webauthn__device-list {
 	margin-block: 12px 18px;
diff --git a/apps/settings/src/webauthn/main.ts b/apps/settings/src/sections/webauthn/main.ts
similarity index 100%
rename from apps/settings/src/webauthn/main.ts
rename to apps/settings/src/sections/webauthn/main.ts
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index a92fb1beadbeb..b9191edce234f 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -62,11 +62,8 @@ export default defineConfig([
 			// the public share entry point is Vue 3, it is linted by the Vue 3 frontend
 			'**/apps/files_sharing/src/public/',
 			// these sections are Vue 3, they are linted by the Vue 3 frontend
-			'**/apps/settings/src/authtokens/',
+			'**/apps/settings/src/sections/',
 			'**/apps/settings/src/sharing/',
-			'**/apps/settings/src/password/',
-			'**/apps/settings/src/webauthn/',
-			'**/apps/settings/src/language-locale/',
 		],
 	},
 ])
diff --git a/build/frontend-legacy/tsconfig.json b/build/frontend-legacy/tsconfig.json
index 043d663dffdd0..5d59e20e6a56a 100644
--- a/build/frontend-legacy/tsconfig.json
+++ b/build/frontend-legacy/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"extends": "@vue/tsconfig/tsconfig.json",
 	"include": ["./apps/**/*.ts", "./apps/**/*.vue", "./*.d.ts"],
-	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens", "./apps/settings/src/sharing", "./apps/settings/src/password", "./apps/settings/src/webauthn", "./apps/settings/src/language-locale"],
+	"exclude": ["./**/*.cy.ts", "./apps/settings/src/sections", "./apps/settings/src/sharing"],
 	"compilerOptions": {
 		"lib": ["DOM", "DOM.Iterable", "ESNext"],
 		"types": ["node", "vue", "vue-router"],
diff --git a/build/frontend-legacy/vitest.config.mts b/build/frontend-legacy/vitest.config.mts
index 8c1be7d601845..b35e1e2359fb9 100644
--- a/build/frontend-legacy/vitest.config.mts
+++ b/build/frontend-legacy/vitest.config.mts
@@ -57,7 +57,7 @@ export default defineConfig({
 		},
 		coverage: {
 			include: ['./apps/*/src/**'],
-			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/authtokens/**', './apps/settings/src/sharing/**', './apps/settings/src/password/**', './apps/settings/src/webauthn/**', './apps/settings/src/language-locale/**'],
+			exclude: ['**.spec.*', '**.test.*', '**.cy.*', './apps/settings/src/sections/**', './apps/settings/src/sharing/**'],
 			reporter: ['lcov', 'text'],
 			reportsDirectory: resolve(import.meta.dirname, '../../coverage/legacy'),
 		},
@@ -69,11 +69,8 @@ export default defineConfig({
 			...defaultExclude,
 			...gitIgnore,
 			// these sections are Vue 3, they are tested by the Vue 3 frontend
-			'**/apps/settings/src/authtokens/**',
+			'**/apps/settings/src/sections/**',
 			'**/apps/settings/src/sharing/**',
-			'**/apps/settings/src/password/**',
-			'**/apps/settings/src/webauthn/**',
-			'**/apps/settings/src/language-locale/**',
 		],
 		globalSetup: './__tests__/setup-global.js',
 		server: {
diff --git a/build/frontend/package.json b/build/frontend/package.json
index 15390054a49a1..d5d1e6df0e916 100644
--- a/build/frontend/package.json
+++ b/build/frontend/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "build": "vite build",
     "dev": "NODE_ENV=development vite build --mode development",
-    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/ ../../apps/settings/src/password/ ../../apps/settings/src/webauthn/ ../../apps/settings/src/language-locale/",
-    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/ ../../apps/settings/src/sharing/ ../../apps/settings/src/password/ ../../apps/settings/src/webauthn/ ../../apps/settings/src/language-locale/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/sections/ ../../apps/settings/src/sharing/",
+    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/sections/ ../../apps/settings/src/sharing/",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage --reporter=default",
     "test:update-snapshots": "vitest run --update",
diff --git a/build/frontend/tsconfig.json b/build/frontend/tsconfig.json
index 1518ae727ef62..3dff94be0b598 100644
--- a/build/frontend/tsconfig.json
+++ b/build/frontend/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./apps", "./core", "../../apps/settings/src/authtokens", "../../apps/settings/src/sharing", "../../apps/settings/src/password", "../../apps/settings/src/webauthn", "../../apps/settings/src/language-locale"]
+	"include": ["./apps", "./core", "../../apps/settings/src/sections", "../../apps/settings/src/sharing"]
 }
\ No newline at end of file
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index 08d8887be6ce9..8ca6403adcaa5 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -100,10 +100,10 @@ const modules = {
 		// is still built by the Vue 2 frontend. They are referenced by path
 		// rather than through `apps/` so they resolve the Vue 3 dependencies.
 		'admin-sharing': resolve(import.meta.dirname, '../..', 'apps/settings/src/sharing', 'main.ts'),
-		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/authtokens', 'main.ts'),
-		'personal-password': resolve(import.meta.dirname, '../..', 'apps/settings/src/password', 'main.ts'),
-		'personal-webauthn': resolve(import.meta.dirname, '../..', 'apps/settings/src/webauthn', 'main.ts'),
-		'personal-language-locale': resolve(import.meta.dirname, '../..', 'apps/settings/src/language-locale', 'main.ts'),
+		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/authtokens', 'main.ts'),
+		'personal-password': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/password', 'main.ts'),
+		'personal-webauthn': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/webauthn', 'main.ts'),
+		'personal-language-locale': resolve(import.meta.dirname, '../..', 'apps/settings/src/sections/language-locale', 'main.ts'),
 	},
 	sharebymail: {
 		'admin-settings': resolve(import.meta.dirname, 'apps/sharebymail/src', 'settings-admin.ts'),
diff --git a/build/frontend/vitest.config.ts b/build/frontend/vitest.config.ts
index 5d530d0033937..353b3b25e234c 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -46,11 +46,8 @@ export default defineConfig({
 	test: {
 		include: [
 			'{apps,core}/**/*.{test,spec}.?(c|m)[jt]s?(x)',
-			'../../apps/settings/src/authtokens/**/*.spec.ts',
+			'../../apps/settings/src/sections/**/*.spec.ts',
 			'../../apps/settings/src/sharing/**/*.spec.ts',
-			'../../apps/settings/src/password/**/*.spec.ts',
-			'../../apps/settings/src/webauthn/**/*.spec.ts',
-			'../../apps/settings/src/language-locale/**/*.spec.ts',
 		],
 		env: {
 			LANG: 'en_US',
@@ -65,11 +62,8 @@ export default defineConfig({
 		coverage: {
 			include: [
 				'apps/*/src/**',
-				'../../apps/settings/src/authtokens/**',
+				'../../apps/settings/src/sections/**',
 				'../../apps/settings/src/sharing/**',
-				'../../apps/settings/src/password/**',
-				'../../apps/settings/src/webauthn/**',
-				'../../apps/settings/src/language-locale/**',
 				'core/src/**',
 			],
 			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],