From 987f367d7b69ba4e36ad1a3e00e3453b91f3ac29 Mon Sep 17 00:00:00 2001
From: Bapuji Koraganti <34816445+bkoragan@users.noreply.github.com>
Date: Wed, 22 Apr 2026 20:02:00 -0400
Subject: [PATCH] web: merge MFA devices and tokens into unified Credentials
 tab (#21705)

* web: merge MFA devices and tokens into unified Credentials tab

Combines the separate "MFA Devices" and "Tokens and App passwords"
tabs into a single "Credentials" tab on the user settings page,
so users can manage all credentials from one place.

Fixes #21637

Signed-off-by: Bapuji Koraganti <bapuk.2008@gmail.com>

* add card title

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Bapuji Koraganti <bapuk.2008@gmail.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
---
 .../user/user-settings/UserSettingsPage.ts    | 39 ++++++++++---------
 .../user/user-settings/mfa/MFADevicesPage.ts  |  2 +-
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts
index 4cc3306ada..d4edc5d9d6 100644
--- a/web/src/user/user-settings/UserSettingsPage.ts
+++ b/web/src/user/user-settings/UserSettingsPage.ts
@@ -130,17 +130,30 @@ export class UserSettingsPage extends WithSession(AKElement) {
                         </div>
                     </div>
                     <div
-                        id="page-mfa"
+                        id="page-credentials"
                         role="tabpanel"
                         tabindex="0"
-                        slot="page-mfa"
-                        aria-label=${msg("MFA Devices")}
+                        slot="page-credentials"
+                        aria-label=${msg("Credentials")}
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <div class="pf-c-card">
-                            <ak-user-settings-mfa
-                                .userSettings=${this.userSettings}
-                            ></ak-user-settings-mfa>
+                        <div class="pf-l-stack pf-m-gutter">
+                            <div class="pf-l-stack__item">
+                                <div class="pf-c-card">
+                                    <div class="pf-c-card__title">${msg("MFA Devices")}</div>
+                                    <ak-user-settings-mfa
+                                        .userSettings=${this.userSettings}
+                                    ></ak-user-settings-mfa>
+                                </div>
+                            </div>
+                            <div class="pf-l-stack__item">
+                                <div class="pf-c-card">
+                                    <div class="pf-c-card__title">
+                                        ${msg("Tokens and App passwords")}
+                                    </div>
+                                    <ak-user-token-list></ak-user-token-list>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div
@@ -163,18 +176,6 @@ export class UserSettingsPage extends WithSession(AKElement) {
                             ></ak-user-settings-source>
                         </div>
                     </div>
-                    <div
-                        id="page-tokens"
-                        role="tabpanel"
-                        tabindex="0"
-                        slot="page-tokens"
-                        aria-label=${msg("Tokens and App passwords")}
-                        class="pf-c-page__main-section pf-m-no-padding-mobile"
-                    >
-                        <div class="pf-c-card">
-                            <ak-user-token-list></ak-user-token-list>
-                        </div>
-                    </div>
                 </ak-tabs>
             </div>
         </div>`;
diff --git a/web/src/user/user-settings/mfa/MFADevicesPage.ts b/web/src/user/user-settings/mfa/MFADevicesPage.ts
index 9800d32310..b5baff0828 100644
--- a/web/src/user/user-settings/mfa/MFADevicesPage.ts
+++ b/web/src/user/user-settings/mfa/MFADevicesPage.ts
@@ -85,7 +85,7 @@ export class MFADevicesPage extends Table<Device> {
                                 role="menuitem"
                                 href="${ifDefined(stage.configureUrl)}${AndNext(
                                     `${globalAK().api.relBase}if/user/#/settings;${JSON.stringify({
-                                        page: "page-mfa",
+                                        page: "page-credentials",
                                     })}`,
                                 )}"
                                 class="pf-c-dropdown__menu-item"