From 2977abc964c51f3e2e1b55b14b9cf64191c6cdd0 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 14:05:38 +0200
Subject: [PATCH 1/7] refactor(settings): move the app password section into
 its own folder

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 apps/settings/src/{ => authtokens}/components/AuthToken.spec.ts | 0
 apps/settings/src/{ => authtokens}/components/AuthToken.vue     | 0
 .../src/{ => authtokens}/components/AuthTokenDeleteDialog.vue   | 0
 apps/settings/src/{ => authtokens}/components/AuthTokenList.vue | 0
 .../src/{ => authtokens}/components/AuthTokenRevokeAll.spec.ts  | 0
 .../{ => authtokens}/components/AuthTokenRevokeAllDialog.vue    | 0
 .../src/{ => authtokens}/components/AuthTokenSection.vue        | 0
 .../settings/src/{ => authtokens}/components/AuthTokenSetup.vue | 2 +-
 .../src/{ => authtokens}/components/AuthTokenSetupDialog.vue    | 2 +-
 apps/settings/src/{ => authtokens}/store/authtoken.ts           | 2 +-
 apps/settings/src/{ => authtokens}/utils/userAgentDetect.ts     | 0
 apps/settings/src/{ => authtokens}/utils/userAgentMap.ts        | 0
 apps/settings/src/main-personal-security.js                     | 2 +-
 core/src/components/AccountMenu/AccountMenuProfileEntry.vue     | 2 +-
 14 files changed, 5 insertions(+), 5 deletions(-)
 rename apps/settings/src/{ => authtokens}/components/AuthToken.spec.ts (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthToken.vue (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenDeleteDialog.vue (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenList.vue (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenRevokeAll.spec.ts (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenRevokeAllDialog.vue (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenSection.vue (100%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenSetup.vue (98%)
 rename apps/settings/src/{ => authtokens}/components/AuthTokenSetupDialog.vue (99%)
 rename apps/settings/src/{ => authtokens}/store/authtoken.ts (99%)
 rename apps/settings/src/{ => authtokens}/utils/userAgentDetect.ts (100%)
 rename apps/settings/src/{ => authtokens}/utils/userAgentMap.ts (100%)

diff --git a/apps/settings/src/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
similarity index 100%
rename from apps/settings/src/components/AuthToken.spec.ts
rename to apps/settings/src/authtokens/components/AuthToken.spec.ts
diff --git a/apps/settings/src/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
similarity index 100%
rename from apps/settings/src/components/AuthToken.vue
rename to apps/settings/src/authtokens/components/AuthToken.vue
diff --git a/apps/settings/src/components/AuthTokenDeleteDialog.vue b/apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenDeleteDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenDeleteDialog.vue
diff --git a/apps/settings/src/components/AuthTokenList.vue b/apps/settings/src/authtokens/components/AuthTokenList.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenList.vue
rename to apps/settings/src/authtokens/components/AuthTokenList.vue
diff --git a/apps/settings/src/components/AuthTokenRevokeAll.spec.ts b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
similarity index 100%
rename from apps/settings/src/components/AuthTokenRevokeAll.spec.ts
rename to apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
diff --git a/apps/settings/src/components/AuthTokenRevokeAllDialog.vue b/apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenRevokeAllDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenRevokeAllDialog.vue
diff --git a/apps/settings/src/components/AuthTokenSection.vue b/apps/settings/src/authtokens/components/AuthTokenSection.vue
similarity index 100%
rename from apps/settings/src/components/AuthTokenSection.vue
rename to apps/settings/src/authtokens/components/AuthTokenSection.vue
diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/authtokens/components/AuthTokenSetup.vue
similarity index 98%
rename from apps/settings/src/components/AuthTokenSetup.vue
rename to apps/settings/src/authtokens/components/AuthTokenSetup.vue
index 3f50894697b4a..b111d6de6f04a 100644
--- a/apps/settings/src/components/AuthTokenSetup.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetup.vue
@@ -36,7 +36,7 @@ import { defineComponent } 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'
 
 export default defineComponent({
diff --git a/apps/settings/src/components/AuthTokenSetupDialog.vue b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
similarity index 99%
rename from apps/settings/src/components/AuthTokenSetupDialog.vue
rename to apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
index 0b85adb0c68dc..829d5bc1deeec 100644
--- a/apps/settings/src/components/AuthTokenSetupDialog.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
@@ -61,7 +61,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'
 
 export default defineComponent({
 	name: 'AuthTokenSetupDialog',
diff --git a/apps/settings/src/store/authtoken.ts b/apps/settings/src/authtokens/store/authtoken.ts
similarity index 99%
rename from apps/settings/src/store/authtoken.ts
rename to apps/settings/src/authtokens/store/authtoken.ts
index 9c3040cff81ba..c90f5fa6b654d 100644
--- a/apps/settings/src/store/authtoken.ts
+++ b/apps/settings/src/authtokens/store/authtoken.ts
@@ -9,7 +9,7 @@ import { translatePlural as n, translate as 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/utils/userAgentDetect.ts b/apps/settings/src/authtokens/utils/userAgentDetect.ts
similarity index 100%
rename from apps/settings/src/utils/userAgentDetect.ts
rename to apps/settings/src/authtokens/utils/userAgentDetect.ts
diff --git a/apps/settings/src/utils/userAgentMap.ts b/apps/settings/src/authtokens/utils/userAgentMap.ts
similarity index 100%
rename from apps/settings/src/utils/userAgentMap.ts
rename to apps/settings/src/authtokens/utils/userAgentMap.ts
diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js
index eabad1bca6041..01b6be32cf8b8 100644
--- a/apps/settings/src/main-personal-security.js
+++ b/apps/settings/src/main-personal-security.js
@@ -7,7 +7,7 @@ import { getCSPNonce } from '@nextcloud/auth'
 import { createPinia, PiniaVuePlugin } from 'pinia'
 import VTooltipPlugin from 'v-tooltip'
 import Vue from 'vue'
-import AuthTokenSection from './components/AuthTokenSection.vue'
+import AuthTokenSection from './authtokens/components/AuthTokenSection.vue'
 
 __webpack_nonce__ = getCSPNonce()
 
diff --git a/core/src/components/AccountMenu/AccountMenuProfileEntry.vue b/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
index 49aab5483a144..c41166e038951 100644
--- a/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
+++ b/core/src/components/AccountMenu/AccountMenuProfileEntry.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts">
-import type { ITokenResponse } from '../../../../apps/settings/src/store/authtoken.ts'
+import type { ITokenResponse } from '../../../../apps/settings/src/authtokens/store/authtoken.ts'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'

From 010b9df16d8582304397d1b67c4d0a1c20741f50 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 14:14:59 +0200
Subject: [PATCH 2/7] chore(settings): move the app password section to Vue 3

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../src/authtokens/components/AuthToken.vue   | 16 +++++++-------
 .../components/AuthTokenSection.vue           |  4 ++--
 .../components/AuthTokenSetupDialog.vue       | 18 ++++++++++------
 apps/settings/src/authtokens/main.ts          | 14 +++++++++++++
 apps/settings/src/main-personal-security.js   | 21 -------------------
 .../settings/personal/security/authtokens.php |  5 +++--
 build/frontend-legacy/eslint.config.mjs       |  2 ++
 build/frontend-legacy/tsconfig.json           |  2 +-
 build/frontend-legacy/vitest.config.mts       |  2 ++
 build/frontend-legacy/webpack.modules.cjs     |  1 -
 build/frontend/package.json                   |  4 ++--
 build/frontend/tsconfig.json                  |  2 +-
 build/frontend/vite.config.ts                 |  6 ++++++
 build/frontend/vitest.config.ts               |  5 ++++-
 package-lock.json                             |  7 ++++---
 package.json                                  |  1 +
 16 files changed, 62 insertions(+), 48 deletions(-)
 create mode 100644 apps/settings/src/authtokens/main.ts
 delete mode 100644 apps/settings/src/main-personal-security.js

diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
index 716ed27edb0a4..8566dcf6c9042 100644
--- a/apps/settings/src/authtokens/components/AuthToken.vue
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -16,9 +16,9 @@
 						ref="input"
 						v-model="newName"
 						:label="t('settings', 'Device name')"
-						:show-trailing-button="true"
-						:trailing-button-label="t('settings', 'Cancel renaming')"
-						@trailing-button-click="cancelRename"
+						:showTrailingButton="true"
+						:trailingButtonLabel="t('settings', 'Cancel renaming')"
+						@trailingButtonClick="cancelRename"
 						@keyup.esc="cancelRename" />
 					<NcButton :aria-label="t('settings', 'Save new name')" variant="tertiary" type="submit">
 						<template #icon>
@@ -33,18 +33,18 @@
 		<td>
 			<NcDateTime
 				class="auth-token__last-activity"
-				:ignore-seconds="true"
+				:ignoreSeconds="true"
 				:timestamp="tokenLastActivity" />
 		</td>
 		<td class="auth-token__actions">
 			<NcActions
 				v-if="!token.current"
+				v-model:open="actionOpen"
 				:title="t('settings', 'Device settings')"
-				:aria-label="t('settings', 'Device settings')"
-				:open.sync="actionOpen">
+				:aria-label="t('settings', 'Device settings')">
 				<NcActionCheckbox
 					v-if="canChangeScope"
-					:model-value="token.scope.filesystem"
+					:modelValue="token.scope.filesystem"
 					@update:modelValue="updateFileSystemScope">
 					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Allow filesystem access') }}
@@ -84,8 +84,8 @@
 		</td>
 		<AuthTokenDeleteDialog
 			v-if="deleteDialogOpen"
+			v-model:open="deleteDialogOpen"
 			:token="token"
-			:open.sync="deleteDialogOpen"
 			@confirm="confirmDelete" />
 	</tr>
 </template>
diff --git a/apps/settings/src/authtokens/components/AuthTokenSection.vue b/apps/settings/src/authtokens/components/AuthTokenSection.vue
index 5731d1cc66f8b..a4abf0809b650 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSection.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSection.vue
@@ -19,9 +19,9 @@
 		</div>
 		<AuthTokenRevokeAllDialog
 			v-if="revokeAllDialogOpen"
+			v-model:open="revokeAllDialogOpen"
 			:count="authTokenStore.revocableCount"
-			:wipe-pending-count="authTokenStore.wipePendingCount"
-			:open.sync="revokeAllDialogOpen"
+			:wipePendingCount="authTokenStore.wipePendingCount"
 			@confirm="revokeAllOthers" />
 	</NcSettingsSection>
 </template>
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
index 829d5bc1deeec..baf0ec65ec367 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
@@ -4,14 +4,14 @@
 -->
 <template>
 	<NcDialog
-		:open.sync="open"
+		v-model:open="open"
 		:name="t('settings', 'New app password')"
-		content-classes="token-dialog">
+		contentClasses="token-dialog">
 		<p>
 			{{ t('settings', 'Use the credentials below to configure your app or device. For security reasons this password will only be shown once.') }}
 		</p>
 		<div class="token-dialog__name">
-			<NcTextField :label="t('settings', 'Login')" :model-value="loginName" readonly />
+			<NcTextField :label="t('settings', 'Login')" :modelValue="loginName" readonly />
 			<NcButton
 				variant="tertiary"
 				:title="copyLoginNameLabel"
@@ -26,7 +26,7 @@
 			<NcTextField
 				ref="appPassword"
 				:label="t('settings', 'Password')"
-				:model-value="appPassword"
+				:modelValue="appPassword"
 				readonly />
 			<NcButton
 				variant="tertiary"
@@ -42,7 +42,11 @@
 			<NcButton v-if="!showQRCode" @click="showQRCode = true">
 				{{ t('settings', 'Show QR code for mobile apps') }}
 			</NcButton>
-			<QR v-else :value="qrUrl" />
+			<QR
+				v-else
+				:value="qrUrl"
+				:size="196"
+				:margin="4" />
 		</div>
 	</NcDialog>
 </template>
@@ -51,7 +55,6 @@
 import type { PropType } from 'vue'
 import type { ITokenResponse } from '../store/authtoken.ts'
 
-import QR from '@chenfengyuan/vue-qrcode'
 import { mdiCheck, mdiContentCopy } from '@mdi/js'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
@@ -61,6 +64,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 QR from 'qrcode.vue'
 import logger from '../../logger.ts'
 
 export default defineComponent({
@@ -81,6 +85,8 @@ export default defineComponent({
 		},
 	},
 
+	emits: ['close'],
+
 	data() {
 		return {
 			isNameCopied: false,
diff --git a/apps/settings/src/authtokens/main.ts b/apps/settings/src/authtokens/main.ts
new file mode 100644
index 0000000000000..d9340268be119
--- /dev/null
+++ b/apps/settings/src/authtokens/main.ts
@@ -0,0 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { n, t } from '@nextcloud/l10n'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import AuthTokenSection from './components/AuthTokenSection.vue'
+
+const app = createApp(AuthTokenSection)
+app.use(createPinia())
+app.mixin({ methods: { t, n } })
+app.mount('#security-authtokens')
diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js
deleted file mode 100644
index 01b6be32cf8b8..0000000000000
--- a/apps/settings/src/main-personal-security.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCSPNonce } from '@nextcloud/auth'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import VTooltipPlugin from 'v-tooltip'
-import Vue from 'vue'
-import AuthTokenSection from './authtokens/components/AuthTokenSection.vue'
-
-__webpack_nonce__ = getCSPNonce()
-
-const pinia = createPinia()
-
-Vue.use(PiniaVuePlugin)
-Vue.use(VTooltipPlugin, { defaultHtml: false })
-Vue.prototype.t = t
-
-const View = Vue.extend(AuthTokenSection)
-new View({ pinia }).$mount('#security-authtokens')
diff --git a/apps/settings/templates/settings/personal/security/authtokens.php b/apps/settings/templates/settings/personal/security/authtokens.php
index e59266695bf7a..dd9b224bfefd5 100644
--- a/apps/settings/templates/settings/personal/security/authtokens.php
+++ b/apps/settings/templates/settings/personal/security/authtokens.php
@@ -5,8 +5,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-\OCP\Util::addScript('settings', 'vue-settings-personal-security', 'core');
+\OCP\Util::addScript('settings', 'personal-security-authtokens', 'core');
+\OCP\Util::addStyle('settings', 'personal-security-authtokens');
 
 ?>
 
-<div id="security-authtokens" class="section"></div>
+<div id="security-authtokens"></div>
diff --git a/build/frontend-legacy/eslint.config.mjs b/build/frontend-legacy/eslint.config.mjs
index 6e696e29f04a7..3efd882d40510 100644
--- a/build/frontend-legacy/eslint.config.mjs
+++ b/build/frontend-legacy/eslint.config.mjs
@@ -61,6 +61,8 @@ 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 section is Vue 3, it is linted by the Vue 3 frontend
+			'**/apps/settings/src/authtokens/',
 		],
 	},
 ])
diff --git a/build/frontend-legacy/tsconfig.json b/build/frontend-legacy/tsconfig.json
index c8dcfe86c4679..d27d784380d78 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", "./core/**/*.ts", "./core/**/*.vue", "./*.d.ts"],
-	"exclude": ["./**/*.cy.ts"],
+	"exclude": ["./**/*.cy.ts", "./apps/settings/src/authtokens"],
 	"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 35f77fb91c725..7c08f639d3067 100644
--- a/build/frontend-legacy/vitest.config.mts
+++ b/build/frontend-legacy/vitest.config.mts
@@ -68,6 +68,8 @@ export default defineConfig({
 		exclude: [
 			...defaultExclude,
 			...gitIgnore,
+			// the app password section is Vue 3, it is tested by the Vue 3 frontend
+			'**/apps/settings/src/authtokens/**',
 		],
 		globalSetup: './__tests__/setup-global.js',
 		server: {
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index 31d03e73bc78b..e01a3e0759a31 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -47,7 +47,6 @@ module.exports = {
 		'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-security': path.join(__dirname, 'apps/settings/src', 'main-personal-security.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 00a19f5607d93..72b06ab69c612 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/",
-    "lint:fix": "eslint --suppressions-location ../eslint-baseline.json --fix --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/",
+    "lint": "eslint --suppressions-location ../eslint-baseline.json --no-error-on-unmatched-pattern ./apps/*/ ./core/ ../../apps/files_sharing/src/public/ ../../apps/settings/src/authtokens/",
+    "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/",
     "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 24655181b3dbf..66b4e722e3e2f 100644
--- a/build/frontend/tsconfig.json
+++ b/build/frontend/tsconfig.json
@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["./apps", "./core"]
+	"include": ["./apps", "./core", "../../apps/settings/src/authtokens"]
 }
\ No newline at end of file
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index f62b207c082f3..8408a58217b41 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -78,6 +78,12 @@ const modules = {
 		main: resolve(import.meta.dirname, 'apps/profile/src', 'main.ts'),
 		reference: resolve(import.meta.dirname, 'apps/profile/src', 'reference.js'),
 	},
+	settings: {
+		// Only the app password section is migrated to Vue 3 so far, the rest
+		// of the app is still built by the Vue 2 frontend. It is referenced by path
+		// rather than through `apps/` so it resolves the Vue 3 dependencies.
+		'personal-security-authtokens': resolve(import.meta.dirname, '../..', 'apps/settings/src/authtokens', '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 72e57f3d59c81..575a8e353cde6 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -44,7 +44,10 @@ export default defineConfig({
 		},
 	},
 	test: {
-		include: ['apps/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+		include: [
+			'apps/**/*.{test,spec}.?(c|m)[jt]s?(x)',
+			'../../apps/settings/src/authtokens/**/*.spec.ts',
+		],
 		env: {
 			LANG: 'en_US',
 			TZ: 'UTC',
diff --git a/package-lock.json b/package-lock.json
index 3375a7434c2d9..67f847e3d7a12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "marked": "^18.0.13",
         "p-queue": "^9.3.3",
         "pinia": "^4.0.3",
+        "qrcode.vue": "^3.11.0",
         "sortablejs": "^1.15.7",
         "vue": "^3.5.43",
         "vue-router": "^5.0.6",
@@ -12252,9 +12253,9 @@
       "license": "MIT"
     },
     "node_modules/qrcode.vue": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.10.0.tgz",
-      "integrity": "sha512-1bjeBds9hRKMszZuBuYQZor9HdJYWtb0S44HG1JofZ9uicpJpdF+TtDvqo3+2ZlH0k80WVIkmiKB4hq0/N6/rA==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.11.0.tgz",
+      "integrity": "sha512-PnaO9yqcEVsH9euUmo4Nn0JZMkNwk4u6fDUosKjDTXv2Cgv7rHZhr2D8Iq54clBvSycOESwgUE/rw/tBRBjIVg==",
       "license": "MIT",
       "peerDependencies": {
         "vue": "^3.0.0"
diff --git a/package.json b/package.json
index d703c7942e603..d0e34b2d37366 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "marked": "^18.0.13",
     "p-queue": "^9.3.3",
     "pinia": "^4.0.3",
+    "qrcode.vue": "^3.11.0",
     "sortablejs": "^1.15.7",
     "vue": "^3.5.43",
     "vue-router": "^5.0.6",

From 910738af5f01252b2486b856005243dd5d3b0633 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 16:31:05 +0200
Subject: [PATCH 3/7] test(settings): port the app password specs to Vue Test
 Utils 2

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../authtokens/components/AuthToken.spec.ts   | 62 ++++++++--------
 .../components/AuthTokenRevokeAll.spec.ts     | 72 +++++++++++++------
 2 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
index 75b483247f66f..0166b71ea3caf 100644
--- a/apps/settings/src/authtokens/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -8,6 +8,7 @@ import type { IToken } from '../store/authtoken.ts'
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 // AuthToken.vue reads window.OC.theme.productName at module evaluation time.
 // vi.hoisted runs before imports, so this guarantees the property is set on
@@ -44,35 +45,38 @@ function makeToken(overrides: Partial<IToken> = {}): IToken {
 
 function mountAuthToken(token: IToken) {
 	return mount(AuthToken, {
-		// Vue Test Utils v1 (legacy pipeline) uses propsData; v2 also accepts it
-		propsData: { token },
-		mocks: {
-			t: (_: string, text: string) => text,
+		props: { token },
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				NcActions: true,
+				NcActionButton: true,
+				NcActionCheckbox: true,
+				NcButton: true,
+				NcDateTime: true,
+				NcIconSvgWrapper: true,
+				NcTextField: true,
+			},
+			plugins: [createTestingPinia({
+				createSpy: vi.fn,
+				initialState: { 'auth-token': { tokens: [token] } },
+			})],
 		},
-		stubs: {
-			NcActions: true,
-			NcActionButton: true,
-			NcActionCheckbox: true,
-			NcButton: true,
-			NcDateTime: true,
-			NcIconSvgWrapper: true,
-			NcTextField: true,
-		},
-		pinia: createTestingPinia({
-			createSpy: vi.fn,
-			initialState: { 'auth-token': { tokens: [token] } },
-		}),
 	})
 }
 
 function mountDeleteDialog(token: IToken, open = true) {
 	return mount(AuthTokenDeleteDialog, {
-		propsData: { token, open },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcDialog: { template: '<div><slot /></div>' },
+		props: { token, open },
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				NcDialog: { template: '<div><slot /></div>' },
+			},
 		},
 	})
 }
@@ -88,7 +92,7 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		expect(dialog.exists()).toBe(true)
@@ -102,12 +106,12 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		dialog.vm.$emit('confirm')
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(store.deleteToken).toHaveBeenCalledTimes(1)
 		expect(store.deleteToken).toHaveBeenCalledWith(token)
@@ -119,11 +123,11 @@ describe('AuthToken revoke flow', () => {
 		const store = useAuthTokenStore()
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		// Dialog is v-if'd off the tree once closed
 		expect(wrapper.findComponent(AuthTokenDeleteDialog).exists()).toBe(false)
@@ -135,7 +139,7 @@ describe('AuthToken revoke flow', () => {
 		const wrapper = mountAuthToken(token)
 
 		;(wrapper.vm as unknown as { revoke: () => void }).revoke()
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		const dialog = wrapper.findComponent(AuthTokenDeleteDialog)
 		expect(dialog.exists()).toBe(true)
diff --git a/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
index 29ca848275757..b6cfb70f3cbc9 100644
--- a/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthTokenRevokeAll.spec.ts
@@ -7,7 +7,8 @@ import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
 
 // AuthToken.vue, pulled in transitively, reads window.OC.theme.productName at module
 // evaluation time. vi.hoisted runs before imports, so it is set before the SFC is parsed.
@@ -15,13 +16,16 @@ vi.hoisted(() => {
 	(window as unknown as { OC: { theme: { productName: string } } }).OC.theme = { productName: 'Nextcloud' }
 })
 
+const defaultLoadState = vi.hoisted(() => (_app: string, key: string) => (key === 'app_tokens' ? [] : true))
 vi.mock('@nextcloud/initial-state', () => ({
-	loadState: vi.fn((_app: string, key: string) => (key === 'app_tokens' ? [] : true)),
+	loadState: vi.fn(defaultLoadState),
 }))
 
+import { loadState } from '@nextcloud/initial-state'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AuthTokenRevokeAllDialog from './AuthTokenRevokeAllDialog.vue'
 import AuthTokenSection from './AuthTokenSection.vue'
+import AuthTokenSetup from './AuthTokenSetup.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 
 function makeToken(overrides: Partial<IToken> = {}): IToken {
@@ -45,36 +49,41 @@ const NcDialogStub = {
 }
 
 const NcButtonStub = {
+	emits: ['click'],
 	template: '<button @click="$emit(\'click\')"><slot /></button>',
 }
 
 function mountSection(tokens: IToken[]) {
 	return mount(AuthTokenSection, {
-		mocks: {
-			t: (_: string, text: string) => text,
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				AuthTokenList: true,
+				AuthTokenSetup: true,
+				NcSettingsSection: { template: '<div><slot /></div>' },
+				NcButton: NcButtonStub,
+				NcDialog: NcDialogStub,
+			},
+			plugins: [createTestingPinia({
+				createSpy: vi.fn,
+				initialState: { 'auth-token': { tokens } },
+			})],
 		},
-		stubs: {
-			AuthTokenList: true,
-			AuthTokenSetup: true,
-			NcSettingsSection: { template: '<div><slot /></div>' },
-			NcButton: NcButtonStub,
-			NcDialog: NcDialogStub,
-		},
-		pinia: createTestingPinia({
-			createSpy: vi.fn,
-			initialState: { 'auth-token': { tokens } },
-		}),
 	})
 }
 
 function mountDialog(props: { count: number, wipePendingCount: number, open?: boolean }) {
 	return mount(AuthTokenRevokeAllDialog, {
-		propsData: { open: true, ...props },
-		mocks: {
-			t: (_: string, text: string) => text,
-		},
-		stubs: {
-			NcDialog: NcDialogStub,
+		props: { open: true, ...props },
+		global: {
+			mocks: {
+				t: (_: string, text: string) => text,
+			},
+			stubs: {
+				NcDialog: NcDialogStub,
+			},
 		},
 	})
 }
@@ -147,7 +156,7 @@ describe('AuthTokenSection revoke-all button', () => {
 		const dialog = wrapper.findComponent(AuthTokenRevokeAllDialog)
 		dialog.vm.$emit('confirm')
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(store.deleteAllOtherTokens).toHaveBeenCalledTimes(1)
 	})
@@ -163,13 +172,30 @@ describe('AuthTokenSection revoke-all button', () => {
 
 		const dialog = wrapper.findComponent(AuthTokenRevokeAllDialog)
 		dialog.vm.$emit('update:open', false)
-		await wrapper.vm.$nextTick()
+		await nextTick()
 
 		expect(wrapper.findComponent(AuthTokenRevokeAllDialog).exists()).toBe(false)
 		expect(store.deleteAllOtherTokens).not.toHaveBeenCalled()
 	})
 })
 
+describe('AuthTokenSection create form', () => {
+	afterEach(() => {
+		vi.mocked(loadState).mockImplementation(defaultLoadState)
+	})
+
+	it('shows the create form when creating app passwords is allowed', () => {
+		const wrapper = mountSection([makeToken({ id: 1, current: true })])
+		expect(wrapper.findComponent(AuthTokenSetup).exists()).toBe(true)
+	})
+
+	it('hides the create form when creating app passwords is disabled', () => {
+		vi.mocked(loadState).mockImplementation((app: string, key: string) => (key === 'can_create_app_token' ? false : defaultLoadState(app, key)))
+		const wrapper = mountSection([makeToken({ id: 1, current: true })])
+		expect(wrapper.findComponent(AuthTokenSetup).exists()).toBe(false)
+	})
+})
+
 describe('AuthTokenRevokeAllDialog', () => {
 	it('omits the wipe note when nothing is pending a wipe', () => {
 		const wrapper = mountDialog({ count: 3, wipePendingCount: 0 })

From 920f624c327b5420823e6283c5818f9473b06157 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 16:33:39 +0200
Subject: [PATCH 4/7] fix(settings): keep template comments out of app password
 action labels

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../authtokens/components/AuthToken.spec.ts   | 27 +++++++++++++++++++
 .../src/authtokens/components/AuthToken.vue   |  6 ++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
index 0166b71ea3caf..0aac798fce0d6 100644
--- a/apps/settings/src/authtokens/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -148,6 +148,33 @@ describe('AuthToken revoke flow', () => {
 	})
 })
 
+describe('AuthToken action labels', () => {
+	it('labels each action with its own text', () => {
+		const token = makeToken()
+		const wrapper = mount(AuthToken, {
+			props: { token },
+			global: {
+				mocks: {
+					t: (_: string, text: string) => text,
+				},
+				stubs: {
+					NcActions: { template: '<ul><slot /></ul>' },
+					NcActionCheckbox: true,
+					NcDateTime: true,
+					NcIconSvgWrapper: true,
+				},
+				plugins: [createTestingPinia({
+					createSpy: vi.fn,
+					initialState: { 'auth-token': { tokens: [token] } },
+				})],
+			},
+		})
+
+		const labels = wrapper.findAll('button').map((button) => button.text())
+		expect(labels).toEqual(expect.arrayContaining(['Rename', 'Revoke', 'Wipe device']))
+	})
+})
+
 describe('AuthToken wipe flow', () => {
 	beforeEach(() => {
 		vi.clearAllMocks()
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
index 8566dcf6c9042..9aaad5daf9c6a 100644
--- a/apps/settings/src/authtokens/components/AuthToken.vue
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -42,28 +42,28 @@
 				v-model:open="actionOpen"
 				:title="t('settings', 'Device settings')"
 				:aria-label="t('settings', 'Device settings')">
+				<!-- TODO: add text/longtext with some description -->
 				<NcActionCheckbox
 					v-if="canChangeScope"
 					:modelValue="token.scope.filesystem"
 					@update:modelValue="updateFileSystemScope">
-					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Allow filesystem access') }}
 				</NcActionCheckbox>
+				<!-- TODO: add text/longtext with some description -->
 				<NcActionButton
 					v-if="token.canRename"
 					icon="icon-rename"
 					@click.stop.prevent="startRename">
-					<!-- TODO: add text/longtext with some description -->
 					{{ t('settings', 'Rename') }}
 				</NcActionButton>
 
 				<!-- revoke & wipe -->
 				<template v-if="token.canDelete">
 					<template v-if="token.type !== TokenType.WIPING_TOKEN">
+						<!-- TODO: add text/longtext with some description -->
 						<NcActionButton
 							icon="icon-delete"
 							@click.stop.prevent="revoke">
-							<!-- TODO: add text/longtext with some description -->
 							{{ t('settings', 'Revoke') }}
 						</NcActionButton>
 						<NcActionButton

From 3804da7b7b9fcecb605e5f77f88ee23f25971689 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 16:35:17 +0200
Subject: [PATCH 5/7] fix(settings): return focus after renaming an app
 password

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../authtokens/components/AuthToken.spec.ts   | 90 ++++++++++++++++++-
 .../src/authtokens/components/AuthToken.vue   | 16 +++-
 2 files changed, 102 insertions(+), 4 deletions(-)

diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
index 0aac798fce0d6..3c9f1f3f08868 100644
--- a/apps/settings/src/authtokens/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -6,8 +6,8 @@
 import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
 
 // AuthToken.vue reads window.OC.theme.productName at module evaluation time.
@@ -30,6 +30,8 @@ import AuthTokenDeleteDialog from './AuthTokenDeleteDialog.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 import { detect } from '../utils/userAgentDetect.ts'
 
+enableAutoUnmount(afterEach)
+
 function makeToken(overrides: Partial<IToken> = {}): IToken {
 	return {
 		id: 1,
@@ -148,6 +150,90 @@ describe('AuthToken revoke flow', () => {
 	})
 })
 
+describe('AuthToken rename focus', () => {
+	function mountRenamable(token: IToken) {
+		return mount(AuthToken, {
+			props: { token },
+			attachTo: document.body,
+			global: {
+				mocks: {
+					t: (_: string, text: string) => text,
+				},
+				stubs: {
+					NcActions: { template: '<div><button>Device settings</button><slot /></div>' },
+					NcActionButton: true,
+					NcActionCheckbox: true,
+					NcButton: true,
+					NcDateTime: true,
+					NcIconSvgWrapper: true,
+					NcTextField: { template: '<input>', methods: { select() {} } },
+				},
+				plugins: [createTestingPinia({
+					createSpy: vi.fn,
+					initialState: { 'auth-token': { tokens: [token] } },
+				})],
+			},
+		})
+	}
+
+	function actionsButton(wrapper: ReturnType<typeof mountRenamable>) {
+		return wrapper.findAll('button').find((button) => button.text() === 'Device settings')!.element
+	}
+
+	it('returns focus to the actions button after cancelling with Escape', async () => {
+		const wrapper = mountRenamable(makeToken())
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('input').trigger('keyup', { key: 'Escape' })
+		await nextTick()
+
+		expect(wrapper.find('form').exists()).toBe(false)
+		expect(document.activeElement).toBe(actionsButton(wrapper))
+	})
+
+	it('returns focus to the actions button after saving the new name', async () => {
+		const token = makeToken()
+		const wrapper = mountRenamable(token)
+		const store = useAuthTokenStore()
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('form').trigger('submit')
+		await nextTick()
+
+		expect(store.renameToken).toHaveBeenCalledWith(token, token.name)
+		expect(document.activeElement).toBe(actionsButton(wrapper))
+	})
+
+	// Renaming always asks for the password, and that dialog takes focus until it closes.
+	it('returns focus to the actions button once the password confirmation closes', async () => {
+		const token = makeToken()
+		const wrapper = mountRenamable(token)
+		const store = useAuthTokenStore()
+		const dialogField = document.createElement('input')
+		document.body.appendChild(dialogField)
+		let closeDialog = () => {}
+		vi.mocked(store.renameToken).mockImplementation(async () => {
+			await new Promise((resolve) => setTimeout(resolve))
+			dialogField.focus()
+			await new Promise<void>((resolve) => {
+				closeDialog = resolve
+			})
+			dialogField.remove()
+			return true
+		})
+
+		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
+		await nextTick()
+		await wrapper.find('form').trigger('submit')
+		await vi.waitFor(() => expect(document.activeElement).toBe(dialogField))
+		closeDialog()
+
+		await vi.waitFor(() => expect(document.activeElement).toBe(actionsButton(wrapper)))
+	})
+})
+
 describe('AuthToken action labels', () => {
 	it('labels each action with its own text', () => {
 		const token = makeToken()
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
index 9aaad5daf9c6a..11bbe3104a3b6 100644
--- a/apps/settings/src/authtokens/components/AuthToken.vue
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -39,6 +39,7 @@
 		<td class="auth-token__actions">
 			<NcActions
 				v-if="!token.current"
+				ref="actions"
 				v-model:open="actionOpen"
 				:title="t('settings', 'Device settings')"
 				:aria-label="t('settings', 'Device settings')">
@@ -285,6 +286,13 @@ export default defineComponent({
 
 		cancelRename() {
 			this.renaming = false
+			this.$nextTick(() => {
+				this.focusActions()
+			})
+		},
+
+		focusActions() {
+			(this.$refs.actions as { $el: HTMLElement } | undefined)?.$el.querySelector('button')?.focus()
 		},
 
 		revoke() {
@@ -296,9 +304,13 @@ export default defineComponent({
 			this.authTokenStore.deleteToken(this.token)
 		},
 
-		rename() {
+		async rename() {
 			this.renaming = false
-			this.authTokenStore.renameToken(this.token, this.newName)
+			// Waits for the password confirmation, which takes focus while it is open
+			await this.authTokenStore.renameToken(this.token, this.newName)
+			this.$nextTick(() => {
+				this.focusActions()
+			})
 		},
 
 		async wipe() {

From 80147727613104b1cc76dabf3be5ddcb672142d5 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 16:35:34 +0200
Subject: [PATCH 6/7] fix(settings): hide the app password QR code from screen
 readers

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../authtokens/components/AuthToken.spec.ts   | 25 +++++++++++++++++++
 .../components/AuthTokenSetupDialog.vue       |  3 ++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
index 3c9f1f3f08868..0da03553b2422 100644
--- a/apps/settings/src/authtokens/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -27,6 +27,7 @@ vi.mock('@nextcloud/dialogs', () => ({
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import AuthToken from './AuthToken.vue'
 import AuthTokenDeleteDialog from './AuthTokenDeleteDialog.vue'
+import AuthTokenSetupDialog from './AuthTokenSetupDialog.vue'
 import { TokenType, useAuthTokenStore } from '../store/authtoken.ts'
 import { detect } from '../utils/userAgentDetect.ts'
 
@@ -261,6 +262,30 @@ describe('AuthToken action labels', () => {
 	})
 })
 
+describe('AuthTokenSetupDialog QR code', () => {
+	// The login name and password are shown as text, so the QR code adds nothing for assistive technology
+	it('hides the QR code from assistive technology', async () => {
+		const wrapper = mount(AuthTokenSetupDialog, {
+			props: { token: { token: 'app-password', loginName: 'admin', deviceToken: makeToken() } },
+			global: {
+				mocks: {
+					t: (_: string, text: string) => text,
+				},
+				stubs: {
+					NcDialog: { template: '<div><slot /></div>' },
+					NcIconSvgWrapper: true,
+				},
+			},
+		})
+
+		await wrapper.findAll('button').find((button) => button.text() === 'Show QR code for mobile apps')!.trigger('click')
+
+		const qrCode = wrapper.find('canvas')
+		expect(qrCode.exists()).toBe(true)
+		expect(qrCode.attributes('aria-hidden')).toBe('true')
+	})
+})
+
 describe('AuthToken wipe flow', () => {
 	beforeEach(() => {
 		vi.clearAllMocks()
diff --git a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
index baf0ec65ec367..6b74163a0eced 100644
--- a/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
+++ b/apps/settings/src/authtokens/components/AuthTokenSetupDialog.vue
@@ -46,7 +46,8 @@
 				v-else
 				:value="qrUrl"
 				:size="196"
-				:margin="4" />
+				:margin="4"
+				aria-hidden="true" />
 		</div>
 	</NcDialog>
 </template>

From 90435e3c30643240223a45ced4dcc5827b51e907 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Fri, 2 Oct 2026 16:54:41 +0200
Subject: [PATCH 7/7] refactor(settings): simplify the app password section
 tests and entry

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../authtokens/components/AuthToken.spec.ts   | 78 ++++++-------------
 .../src/authtokens/components/AuthToken.vue   | 16 ++--
 apps/settings/src/authtokens/main.ts          |  2 -
 build/frontend-legacy/vitest.config.mts       |  2 +-
 build/frontend/vitest.config.ts               |  1 +
 5 files changed, 34 insertions(+), 65 deletions(-)

diff --git a/apps/settings/src/authtokens/components/AuthToken.spec.ts b/apps/settings/src/authtokens/components/AuthToken.spec.ts
index 0da03553b2422..509712d72c4e5 100644
--- a/apps/settings/src/authtokens/components/AuthToken.spec.ts
+++ b/apps/settings/src/authtokens/components/AuthToken.spec.ts
@@ -6,6 +6,7 @@
 import type { IToken } from '../store/authtoken.ts'
 
 import { createTestingPinia } from '@pinia/testing'
+import { getByRole } from '@testing-library/vue'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { nextTick } from 'vue'
@@ -46,9 +47,10 @@ function makeToken(overrides: Partial<IToken> = {}): IToken {
 	}
 }
 
-function mountAuthToken(token: IToken) {
+function mountAuthToken(token: IToken, { stubs = {}, attachTo }: { stubs?: Record<string, object | boolean>, attachTo?: HTMLElement } = {}) {
 	return mount(AuthToken, {
 		props: { token },
+		attachTo,
 		global: {
 			mocks: {
 				t: (_: string, text: string) => text,
@@ -61,6 +63,7 @@ function mountAuthToken(token: IToken) {
 				NcDateTime: true,
 				NcIconSvgWrapper: true,
 				NcTextField: true,
+				...stubs,
 			},
 			plugins: [createTestingPinia({
 				createSpy: vi.fn,
@@ -153,32 +156,17 @@ describe('AuthToken revoke flow', () => {
 
 describe('AuthToken rename focus', () => {
 	function mountRenamable(token: IToken) {
-		return mount(AuthToken, {
-			props: { token },
+		return mountAuthToken(token, {
 			attachTo: document.body,
-			global: {
-				mocks: {
-					t: (_: string, text: string) => text,
-				},
-				stubs: {
-					NcActions: { template: '<div><button>Device settings</button><slot /></div>' },
-					NcActionButton: true,
-					NcActionCheckbox: true,
-					NcButton: true,
-					NcDateTime: true,
-					NcIconSvgWrapper: true,
-					NcTextField: { template: '<input>', methods: { select() {} } },
-				},
-				plugins: [createTestingPinia({
-					createSpy: vi.fn,
-					initialState: { 'auth-token': { tokens: [token] } },
-				})],
+			stubs: {
+				NcActions: { template: '<div><button>Device settings</button><slot /></div>' },
+				NcTextField: { template: '<input>', methods: { select() {} } },
 			},
 		})
 	}
 
 	function actionsButton(wrapper: ReturnType<typeof mountRenamable>) {
-		return wrapper.findAll('button').find((button) => button.text() === 'Device settings')!.element
+		return getByRole(wrapper.element, 'button', { name: 'Device settings' })
 	}
 
 	it('returns focus to the actions button after cancelling with Escape', async () => {
@@ -190,7 +178,7 @@ describe('AuthToken rename focus', () => {
 		await nextTick()
 
 		expect(wrapper.find('form').exists()).toBe(false)
-		expect(document.activeElement).toBe(actionsButton(wrapper))
+		expect(actionsButton(wrapper)).toHaveFocus()
 	})
 
 	it('returns focus to the actions button after saving the new name', async () => {
@@ -204,23 +192,20 @@ describe('AuthToken rename focus', () => {
 		await nextTick()
 
 		expect(store.renameToken).toHaveBeenCalledWith(token, token.name)
-		expect(document.activeElement).toBe(actionsButton(wrapper))
+		expect(actionsButton(wrapper)).toHaveFocus()
 	})
 
-	// Renaming always asks for the password, and that dialog takes focus until it closes.
 	it('returns focus to the actions button once the password confirmation closes', async () => {
 		const token = makeToken()
 		const wrapper = mountRenamable(token)
 		const store = useAuthTokenStore()
 		const dialogField = document.createElement('input')
 		document.body.appendChild(dialogField)
-		let closeDialog = () => {}
+		const dialog = Promise.withResolvers<void>()
 		vi.mocked(store.renameToken).mockImplementation(async () => {
 			await new Promise((resolve) => setTimeout(resolve))
 			dialogField.focus()
-			await new Promise<void>((resolve) => {
-				closeDialog = resolve
-			})
+			await dialog.promise
 			dialogField.remove()
 			return true
 		})
@@ -228,32 +213,20 @@ describe('AuthToken rename focus', () => {
 		;(wrapper.vm as unknown as { startRename: () => void }).startRename()
 		await nextTick()
 		await wrapper.find('form').trigger('submit')
-		await vi.waitFor(() => expect(document.activeElement).toBe(dialogField))
-		closeDialog()
+		await vi.waitFor(() => expect(dialogField).toHaveFocus(), { interval: 1 })
+		dialog.resolve()
 
-		await vi.waitFor(() => expect(document.activeElement).toBe(actionsButton(wrapper)))
+		await vi.waitFor(() => expect(actionsButton(wrapper)).toHaveFocus(), { interval: 1 })
 	})
 })
 
 describe('AuthToken action labels', () => {
 	it('labels each action with its own text', () => {
-		const token = makeToken()
-		const wrapper = mount(AuthToken, {
-			props: { token },
-			global: {
-				mocks: {
-					t: (_: string, text: string) => text,
-				},
-				stubs: {
-					NcActions: { template: '<ul><slot /></ul>' },
-					NcActionCheckbox: true,
-					NcDateTime: true,
-					NcIconSvgWrapper: true,
-				},
-				plugins: [createTestingPinia({
-					createSpy: vi.fn,
-					initialState: { 'auth-token': { tokens: [token] } },
-				})],
+		const wrapper = mountAuthToken(makeToken(), {
+			stubs: {
+				NcActions: { template: '<ul><slot /></ul>' },
+				NcActionButton: false,
+				NcButton: false,
 			},
 		})
 
@@ -263,7 +236,7 @@ describe('AuthToken action labels', () => {
 })
 
 describe('AuthTokenSetupDialog QR code', () => {
-	// The login name and password are shown as text, so the QR code adds nothing for assistive technology
+	// The credentials are shown as text, so the QR code is redundant for screen readers
 	it('hides the QR code from assistive technology', async () => {
 		const wrapper = mount(AuthTokenSetupDialog, {
 			props: { token: { token: 'app-password', loginName: 'admin', deviceToken: makeToken() } },
@@ -278,11 +251,10 @@ describe('AuthTokenSetupDialog QR code', () => {
 			},
 		})
 
-		await wrapper.findAll('button').find((button) => button.text() === 'Show QR code for mobile apps')!.trigger('click')
+		getByRole(wrapper.element, 'button', { name: 'Show QR code for mobile apps' }).click()
+		await nextTick()
 
-		const qrCode = wrapper.find('canvas')
-		expect(qrCode.exists()).toBe(true)
-		expect(qrCode.attributes('aria-hidden')).toBe('true')
+		expect(wrapper.find('canvas').element).toHaveAttribute('aria-hidden', 'true')
 	})
 })
 
diff --git a/apps/settings/src/authtokens/components/AuthToken.vue b/apps/settings/src/authtokens/components/AuthToken.vue
index 11bbe3104a3b6..d16862370bfc3 100644
--- a/apps/settings/src/authtokens/components/AuthToken.vue
+++ b/apps/settings/src/authtokens/components/AuthToken.vue
@@ -286,13 +286,13 @@ export default defineComponent({
 
 		cancelRename() {
 			this.renaming = false
-			this.$nextTick(() => {
-				this.focusActions()
-			})
+			this.focusActions()
 		},
 
-		focusActions() {
-			(this.$refs.actions as { $el: HTMLElement } | undefined)?.$el.querySelector('button')?.focus()
+		async focusActions() {
+			await this.$nextTick()
+			const actions = this.$refs.actions as { $el: HTMLElement } | undefined
+			actions?.$el.querySelector('button')?.focus()
 		},
 
 		revoke() {
@@ -306,11 +306,9 @@ export default defineComponent({
 
 		async rename() {
 			this.renaming = false
-			// Waits for the password confirmation, which takes focus while it is open
+			// The password confirmation holds focus until it closes, so refocus after it
 			await this.authTokenStore.renameToken(this.token, this.newName)
-			this.$nextTick(() => {
-				this.focusActions()
-			})
+			this.focusActions()
 		},
 
 		async wipe() {
diff --git a/apps/settings/src/authtokens/main.ts b/apps/settings/src/authtokens/main.ts
index d9340268be119..f7c3abbd6b5a6 100644
--- a/apps/settings/src/authtokens/main.ts
+++ b/apps/settings/src/authtokens/main.ts
@@ -3,12 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { n, t } from '@nextcloud/l10n'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import AuthTokenSection from './components/AuthTokenSection.vue'
 
 const app = createApp(AuthTokenSection)
 app.use(createPinia())
-app.mixin({ methods: { t, n } })
 app.mount('#security-authtokens')
diff --git a/build/frontend-legacy/vitest.config.mts b/build/frontend-legacy/vitest.config.mts
index 7c08f639d3067..d93165ca60d90 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/**', 'core/src/**'],
-			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],
+			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**', './apps/settings/src/authtokens/**'],
 			reporter: ['lcov', 'text'],
 			reportsDirectory: resolve(import.meta.dirname, '../../coverage/legacy'),
 		},
diff --git a/build/frontend/vitest.config.ts b/build/frontend/vitest.config.ts
index 575a8e353cde6..a1aee67508781 100644
--- a/build/frontend/vitest.config.ts
+++ b/build/frontend/vitest.config.ts
@@ -61,6 +61,7 @@ export default defineConfig({
 		coverage: {
 			include: [
 				'apps/*/src/**',
+				'../../apps/settings/src/authtokens/**',
 				/* 'core/src/**', */
 			],
 			exclude: ['**.spec.*', '**.test.*', '**.cy.*', 'core/src/tests/**'],