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>
This commit is contained in:
Bapuji Koraganti
2026-04-22 20:02:00 -04:00
committed by GitHub
parent 805ff9f1ab
commit 987f367d7b
2 changed files with 21 additions and 20 deletions

View File

@@ -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>`;

View File

@@ -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"