web/user: rework MFA Device UI to support multiple devices

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/locales/en.po

@@ -39,7 +39,6 @@ msgstr "(Format: hours=-1;minutes=-2;seconds=-3)."
 #: src/pages/stages/invitation/InvitationListPage.ts
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "-"
 msgstr "-"
@@ -447,7 +446,6 @@ msgid "Authentication flow"
 msgstr "Authentication flow"
 
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 msgid "Authenticator"
 msgstr "Authenticator"
 
@@ -683,7 +681,7 @@ msgstr "Certificate/Key used for authentication. Can be left empty for no authen
 msgid "Certificates"
 msgstr "Certificates"
 
-#: src/user/user-settings/stages/UserSettingsPassword.ts
+#: src/user/user-settings/details/UserPassword.ts
 msgid "Change password"
 msgstr "Change password"
 
@@ -691,7 +689,7 @@ msgstr "Change password"
 msgid "Change status"
 msgstr "Change status"
 
-#: src/user/user-settings/stages/UserSettingsPassword.ts
+#: src/user/user-settings/details/UserPassword.ts
 msgid "Change your password"
 msgstr "Change your password"
 
@@ -875,9 +873,9 @@ msgstr "Configuration flow"
 msgid "Configuration stage"
 msgstr "Configuration stage"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Configure WebAuthn"
+#~ msgid "Configure WebAuthn"
-msgstr "Configure WebAuthn"
+#~ msgstr "Configure WebAuthn"
 
 #: 
 #~ msgid "Configure how long access codes are valid for."
@@ -1200,9 +1198,9 @@ msgstr "Create {0}"
 msgid "Created by"
 msgstr "Created by"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Created {0}"
+#~ msgid "Created {0}"
-msgstr "Created {0}"
+#~ msgstr "Created {0}"
 
 #: src/elements/events/ObjectChangelog.ts
 #: src/elements/events/UserEvents.ts
@@ -1289,7 +1287,8 @@ msgstr "Define how notifications are sent to users, like Email or Webhook."
 #: src/pages/tenants/TenantListPage.ts
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Delete"
 msgstr "Delete"
@@ -1315,7 +1314,7 @@ msgstr "Delete"
 #~ msgid "Delete Session"
 #~ msgstr "Delete Session"
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Delete account"
 msgstr "Delete account"
 
@@ -1392,9 +1391,14 @@ msgstr "Device classes"
 msgid "Device classes which can be used to authenticate."
 msgstr "Device classes which can be used to authenticate."
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Device name"
+#~ msgid "Device name"
-msgstr "Device name"
+#~ msgstr "Device name"
+
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Device(s)"
+msgstr "Device(s)"
 
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
@@ -1410,21 +1414,21 @@ msgstr "Digits"
 #~ msgid "Disable"
 #~ msgstr "Disable"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Disable Duo authenticator"
+#~ msgid "Disable Duo authenticator"
-msgstr "Disable Duo authenticator"
+#~ msgstr "Disable Duo authenticator"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-msgid "Disable SMS authenticator"
+#~ msgid "Disable SMS authenticator"
-msgstr "Disable SMS authenticator"
+#~ msgstr "Disable SMS authenticator"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-msgid "Disable Static Tokens"
+#~ msgid "Disable Static Tokens"
-msgstr "Disable Static Tokens"
+#~ msgstr "Disable Static Tokens"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Disable Time-based OTP"
+#~ msgid "Disable Time-based OTP"
-msgstr "Disable Time-based OTP"
+#~ msgstr "Disable Time-based OTP"
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Disabled"
@@ -1466,9 +1470,9 @@ msgstr "Due to protocol limitations, this certificate is only used when the outp
 msgid "Dummy stage used for testing. Shows a simple continue button and always passes."
 msgstr "Dummy stage used for testing. Shows a simple continue button and always passes."
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Duo"
+#~ msgid "Duo"
-msgstr "Duo"
+#~ msgstr "Duo"
 
 #: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
 msgid "Duo Authenticators"
@@ -1478,6 +1482,10 @@ msgstr "Duo Authenticators"
 msgid "Duo activation"
 msgstr "Duo activation"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "Duo authenticator"
+msgstr "Duo authenticator"
+
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
 msgid "Duo push-notifications"
 msgstr "Duo push-notifications"
@@ -1534,7 +1542,7 @@ msgstr "Either no applications are defined, or you don't have access to any."
 #: src/pages/stages/identification/IdentificationStageForm.ts
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Email"
 msgstr "Email"
 
@@ -1571,25 +1579,25 @@ msgstr "Embedded outpost is not configured correctly."
 #~ msgid "Enable"
 #~ msgstr "Enable"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Enable Duo authenticator"
+#~ msgid "Enable Duo authenticator"
-msgstr "Enable Duo authenticator"
+#~ msgstr "Enable Duo authenticator"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-msgid "Enable SMS authenticator"
+#~ msgid "Enable SMS authenticator"
-msgstr "Enable SMS authenticator"
+#~ msgstr "Enable SMS authenticator"
 
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Enable StartTLS"
 msgstr "Enable StartTLS"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-msgid "Enable Static Tokens"
+#~ msgid "Enable Static Tokens"
-msgstr "Enable Static Tokens"
+#~ msgstr "Enable Static Tokens"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Enable TOTP"
+#~ msgid "Enable TOTP"
-msgstr "Enable TOTP"
+#~ msgstr "Enable TOTP"
 
 #: src/pages/flows/FlowForm.ts
 msgid "Enable compatibility mode, increases compatibility with password managers on mobile devices."
@@ -1608,6 +1616,11 @@ msgstr "Enabled"
 msgid "Enabling this toggle will create a group named after the user, with the user as member."
 msgstr "Enabling this toggle will create a group named after the user, with the user as member."
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Enroll"
+msgstr "Enroll"
+
 #: src/pages/flows/utils.ts
 msgid "Enrollment"
 msgstr "Enrollment"
@@ -1643,9 +1656,9 @@ msgstr "Error when validating assertion on server: {err}"
 msgid "Error: unsupported source settings: {0}"
 msgstr "Error: unsupported source settings: {0}"
 
-#: src/user/user-settings/stages/StageSettings.ts
+#: 
-msgid "Error: unsupported stage settings: {0}"
+#~ msgid "Error: unsupported stage settings: {0}"
-msgstr "Error: unsupported stage settings: {0}"
+#~ msgstr "Error: unsupported stage settings: {0}"
 
 #: src/pages/flows/StageBindingForm.ts
 msgid "Evaluate on plan"
@@ -2488,9 +2501,10 @@ msgstr "Load servers"
 #: src/flows/stages/prompt/PromptStage.ts
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/pages/applications/ApplicationViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/sources/SourceSettings.ts
-#: src/user/user-settings/stages/StageSettings.ts
 #: src/utils.ts
 msgid "Loading"
 msgstr "Loading"
@@ -2621,6 +2635,10 @@ msgstr "Logs"
 msgid "Long-running operations which authentik executes in the background."
 msgstr "Long-running operations which authentik executes in the background."
 
+#: src/user/user-settings/UserSettingsPage.ts
+msgid "MFA Devices"
+msgstr "MFA Devices"
+
 #: src/pages/stages/user_write/UserWriteStageForm.ts
 msgid "Mark newly created users as inactive."
 msgstr "Mark newly created users as inactive."
@@ -2802,7 +2820,8 @@ msgstr "My applications"
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Name"
 msgstr "Name"
 
@@ -2947,6 +2966,7 @@ msgstr "Not used by any other object."
 #: src/flows/stages/authenticator_sms/AuthenticatorSMSStage.ts
 #: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
 #: src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+#: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
 #: src/flows/stages/captcha/CaptchaStage.ts
@@ -3201,9 +3221,9 @@ msgstr "Password set"
 msgid "Password stage"
 msgstr "Password stage"
 
-#: src/user/user-settings/UserSettingsPage.ts
+#: 
-msgid "Password, 2FA, etc"
+#~ msgid "Password, 2FA, etc"
-msgstr "Password, 2FA, etc"
+#~ msgstr "Password, 2FA, etc"
 
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Password: Masked input, password is validated against sources. Policies still have to be applied to this Stage. If two of these are used in the same stage, they are ensured to be identical."
@@ -3625,7 +3645,7 @@ msgstr "Required."
 
 #: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
 msgstr "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
 
@@ -3702,10 +3722,13 @@ msgid "SLO URL"
 msgstr "SLO URL"
 
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
 msgid "SMS"
 msgstr "SMS"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "SMS authenticator"
+msgstr "SMS authenticator"
+
 #: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
 msgid "SMS-based Authenticators"
 msgstr "SMS-based Authenticators"
@@ -3735,7 +3758,7 @@ msgstr "SSO URL"
 msgid "Same identifier is used for all providers"
 msgstr "Same identifier is used for all providers"
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Save"
 msgstr "Save"
 
@@ -3783,6 +3806,10 @@ msgstr "Secret was viewed"
 msgid "Secret:"
 msgstr "Secret:"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "Security key authenticator"
+msgstr "Security key authenticator"
+
 #: src/pages/policies/expression/ExpressionPolicyForm.ts
 #: src/pages/property-mappings/PropertyMappingLDAPForm.ts
 #: src/pages/property-mappings/PropertyMappingNotification.ts
@@ -4034,6 +4061,10 @@ msgstr "Something went wrong! Please try again later."
 msgid "Source linked"
 msgstr "Source linked"
 
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Source name"
+msgstr "Source name"
+
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
 msgid "Source {0}"
@@ -4162,9 +4193,13 @@ msgstr "State"
 msgid "Static Tokens"
 msgstr "Static Tokens"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
-msgid "Static tokens"
+msgid "Static authenticator"
-msgstr "Static tokens"
+msgstr "Static authenticator"
+
+#: 
+#~ msgid "Static tokens"
+#~ msgstr "Static tokens"
 
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Static: Static value, displayed as-is."
@@ -4178,19 +4213,19 @@ msgstr "Statically deny the flow. To use this stage effectively, disable *Evalua
 msgid "Status"
 msgstr "Status"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Status: Disabled"
+#~ msgid "Status: Disabled"
-msgstr "Status: Disabled"
+#~ msgstr "Status: Disabled"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Status: Enabled"
+#~ msgid "Status: Enabled"
-msgstr "Status: Enabled"
+#~ msgstr "Status: Enabled"
 
 #: src/interfaces/UserInterface.ts
 msgid "Stop impersonation"
@@ -4397,13 +4432,13 @@ msgstr "Successfully updated binding."
 msgid "Successfully updated certificate-key pair."
 msgstr "Successfully updated certificate-key pair."
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Successfully updated details."
 msgstr "Successfully updated details."
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Successfully updated device."
+#~ msgid "Successfully updated device."
-msgstr "Successfully updated device."
+#~ msgstr "Successfully updated device."
 
 #: src/pages/flows/FlowForm.ts
 msgid "Successfully updated flow."
@@ -4596,6 +4631,10 @@ msgstr "TLS Verification Certificate"
 msgid "TOTP Authenticators"
 msgstr "TOTP Authenticators"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "TOTP authenticator"
+msgstr "TOTP authenticator"
+
 #: src/pages/flows/StageBindingForm.ts
 msgid "Target"
 msgstr "Target"
@@ -4760,9 +4799,9 @@ msgstr "Time in minutes the token sent is valid."
 msgid "Time offset when temporary users should be deleted. This only applies if your IDP uses the NameID Format 'transient', and the user doesn't log out manually. (Format: hours=1;minutes=2;seconds=3)."
 msgstr "Time offset when temporary users should be deleted. This only applies if your IDP uses the NameID Format 'transient', and the user doesn't log out manually. (Format: hours=1;minutes=2;seconds=3)."
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Time-based One-Time Passwords"
+#~ msgid "Time-based One-Time Passwords"
-msgstr "Time-based One-Time Passwords"
+#~ msgstr "Time-based One-Time Passwords"
 
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -4893,6 +4932,7 @@ msgstr "Twilio Auth Token"
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Type"
 msgstr "Type"
 
@@ -5015,9 +5055,8 @@ msgstr "Up-to-date!"
 #: src/pages/users/UserActiveForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Update"
 msgstr "Update"
@@ -5035,6 +5074,11 @@ msgstr "Update Binding"
 msgid "Update Certificate-Key Pair"
 msgstr "Update Certificate-Key Pair"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Update Device"
+msgstr "Update Device"
+
 #: src/pages/flows/FlowListPage.ts
 msgid "Update Flow"
 msgstr "Update Flow"
@@ -5275,7 +5319,7 @@ msgid "User's avatar"
 msgstr "User's avatar"
 
 #: src/pages/users/UserForm.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "User's display name."
 msgstr "User's display name."
 
@@ -5303,7 +5347,7 @@ msgstr "Userinfo URL"
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Username"
 msgstr "Username"
 
@@ -5421,9 +5465,9 @@ msgstr "Warning: authentik Domain is not configured, authentication will not wor
 msgid "WebAuthn Authenticators"
 msgstr "WebAuthn Authenticators"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "WebAuthn Devices"
+#~ msgid "WebAuthn Devices"
-msgstr "WebAuthn Devices"
+#~ msgstr "WebAuthn Devices"
 
 #: src/pages/events/TransportForm.ts
 msgid "Webhook (Slack/Discord)"

web/src/locales/fr_FR.po

@@ -45,7 +45,6 @@ msgstr "(Format : heures=-1;minutes=-2;seconds=-3)"
 #: src/pages/stages/invitation/InvitationListPage.ts
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "-"
 msgstr "-"
@@ -451,7 +450,6 @@ msgid "Authentication flow"
 msgstr "Flux d'authentification"
 
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 msgid "Authenticator"
 msgstr "Authentificateur"
 
@@ -684,7 +682,7 @@ msgstr "Certificat et clé utilisés pour l'authentification. Peut être laissé
 msgid "Certificates"
 msgstr "Certificats"
 
-#: src/user/user-settings/stages/UserSettingsPassword.ts
+#: src/user/user-settings/details/UserPassword.ts
 msgid "Change password"
 msgstr "Changer le mot de pass"
 
@@ -692,7 +690,7 @@ msgstr "Changer le mot de pass"
 msgid "Change status"
 msgstr "Changer le statut"
 
-#: src/user/user-settings/stages/UserSettingsPassword.ts
+#: src/user/user-settings/details/UserPassword.ts
 msgid "Change your password"
 msgstr "Changer votre mot de pass"
 
@@ -876,9 +874,9 @@ msgstr "Flux de configuration"
 msgid "Configuration stage"
 msgstr "Étape de configuration"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Configure WebAuthn"
+#~ msgid "Configure WebAuthn"
-msgstr "Configurer WebAuthn"
+#~ msgstr "Configurer WebAuthn"
 
 #~ msgid "Configure how long access codes are valid for."
 #~ msgstr "Configure la durée de validité des codes d'accès."
@@ -1198,9 +1196,9 @@ msgstr "Créer {0}"
 msgid "Created by"
 msgstr "Créé par"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Created {0}"
+#~ msgid "Created {0}"
-msgstr "Créé {0}"
+#~ msgstr "Créé {0}"
 
 #: src/elements/events/ObjectChangelog.ts
 #: src/elements/events/UserEvents.ts
@@ -1287,7 +1285,8 @@ msgstr "Définit les méthodes d'envoi des notifications aux utilisateurs, telle
 #: src/pages/tenants/TenantListPage.ts
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Delete"
 msgstr "Supprimer"
@@ -1307,7 +1306,7 @@ msgstr "Supprimer"
 #~ msgid "Delete Session"
 #~ msgstr "Supprimer la session"
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Delete account"
 msgstr "Supprimer le compte"
 
@@ -1382,9 +1381,14 @@ msgstr "Classes d'équipement"
 msgid "Device classes which can be used to authenticate."
 msgstr "Classe d'équipement qui peut être utilisé pour s'authentifier"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Device name"
+#~ msgid "Device name"
-msgstr "Nom de l'équipement"
+#~ msgstr "Nom de l'équipement"
+
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Device(s)"
+msgstr ""
 
 #: src/pages/providers/saml/SAMLProviderForm.ts
 #: src/pages/sources/saml/SAMLSourceForm.ts
@@ -1398,21 +1402,21 @@ msgstr "Chiffres"
 #~ msgid "Disable"
 #~ msgstr "Désactiver"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Disable Duo authenticator"
+#~ msgid "Disable Duo authenticator"
-msgstr "Désactiver l'authentificateur Duo"
+#~ msgstr "Désactiver l'authentificateur Duo"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-msgid "Disable SMS authenticator"
+#~ msgid "Disable SMS authenticator"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-msgid "Disable Static Tokens"
+#~ msgid "Disable Static Tokens"
-msgstr "Désactiver les jetons statiques"
+#~ msgstr "Désactiver les jetons statiques"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Disable Time-based OTP"
+#~ msgid "Disable Time-based OTP"
-msgstr "Désactiver les OTP basés sur le temps"
+#~ msgstr "Désactiver les OTP basés sur le temps"
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Disabled"
@@ -1454,9 +1458,9 @@ msgstr "En raison des limitations de protocole, ce certificat n'est utilisé que
 msgid "Dummy stage used for testing. Shows a simple continue button and always passes."
 msgstr "Étape factice utilisée pour les tests. Montre un simple bouton continuer et réussit toujours."
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Duo"
+#~ msgid "Duo"
-msgstr "Duo"
+#~ msgstr "Duo"
 
 #: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
 msgid "Duo Authenticators"
@@ -1466,6 +1470,10 @@ msgstr "Authentificateurs Duo"
 msgid "Duo activation"
 msgstr "Activation Duo"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "Duo authenticator"
+msgstr ""
+
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
 msgid "Duo push-notifications"
 msgstr "Notification push Duo"
@@ -1522,7 +1530,7 @@ msgstr "Soit aucune application n'est définie, soit vous n'en avez accès à au
 #: src/pages/stages/identification/IdentificationStageForm.ts
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Email"
 msgstr "Courriel"
 
@@ -1557,25 +1565,25 @@ msgstr "L'avant poste intégré n'est pas configuré correctement"
 #~ msgid "Enable"
 #~ msgstr "Activer"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Enable Duo authenticator"
+#~ msgid "Enable Duo authenticator"
-msgstr "Activer l'authentificateur Duo"
+#~ msgstr "Activer l'authentificateur Duo"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-msgid "Enable SMS authenticator"
+#~ msgid "Enable SMS authenticator"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Enable StartTLS"
 msgstr "Activer StartTLS"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-msgid "Enable Static Tokens"
+#~ msgid "Enable Static Tokens"
-msgstr "Activer les jetons statiques"
+#~ msgstr "Activer les jetons statiques"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Enable TOTP"
+#~ msgid "Enable TOTP"
-msgstr "Activer TOTP"
+#~ msgstr "Activer TOTP"
 
 #: src/pages/flows/FlowForm.ts
 msgid "Enable compatibility mode, increases compatibility with password managers on mobile devices."
@@ -1594,6 +1602,11 @@ msgstr "Activé"
 msgid "Enabling this toggle will create a group named after the user, with the user as member."
 msgstr "Activer cette option va créer un groupe du même nom que l'utilisateur dont il sera membre."
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Enroll"
+msgstr ""
+
 #: src/pages/flows/utils.ts
 msgid "Enrollment"
 msgstr "Inscription"
@@ -1629,9 +1642,9 @@ msgstr "Erreur lors de la validation de l'assertion sur le serveur : {err}"
 msgid "Error: unsupported source settings: {0}"
 msgstr "Erreur : paramètres source non supportés : {0}"
 
-#: src/user/user-settings/stages/StageSettings.ts
+#: 
-msgid "Error: unsupported stage settings: {0}"
+#~ msgid "Error: unsupported stage settings: {0}"
-msgstr "Erreur : paramètres d'étape non supporté : {0}"
+#~ msgstr "Erreur : paramètres d'étape non supporté : {0}"
 
 #: src/pages/flows/StageBindingForm.ts
 msgid "Evaluate on plan"
@@ -2469,9 +2482,10 @@ msgstr "Charger les serveurs"
 #: src/flows/stages/prompt/PromptStage.ts
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/pages/applications/ApplicationViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/sources/SourceSettings.ts
-#: src/user/user-settings/stages/StageSettings.ts
 #: src/utils.ts
 msgid "Loading"
 msgstr "Chargement en cours"
@@ -2602,6 +2616,10 @@ msgstr "Logs"
 msgid "Long-running operations which authentik executes in the background."
 msgstr "Opérations de longue durée qu'Authentik exécute en arrière-plan."
 
+#: src/user/user-settings/UserSettingsPage.ts
+msgid "MFA Devices"
+msgstr ""
+
 #: src/pages/stages/user_write/UserWriteStageForm.ts
 msgid "Mark newly created users as inactive."
 msgstr "Marquer les utilisateurs nouvellements créés comme inactifs."
@@ -2782,7 +2800,8 @@ msgstr "Mes applications"
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Name"
 msgstr "Nom"
 
@@ -2927,6 +2946,7 @@ msgstr "Pas utilisé par un autre objet."
 #: src/flows/stages/authenticator_sms/AuthenticatorSMSStage.ts
 #: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
 #: src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+#: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
 #: src/flows/stages/captcha/CaptchaStage.ts
@@ -3175,9 +3195,9 @@ msgstr "Mot de passe défini"
 msgid "Password stage"
 msgstr "Étape de mot de passe"
 
-#: src/user/user-settings/UserSettingsPage.ts
+#: 
-msgid "Password, 2FA, etc"
+#~ msgid "Password, 2FA, etc"
-msgstr "Mot de passe, 2FA, etc"
+#~ msgstr "Mot de passe, 2FA, etc"
 
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Password: Masked input, password is validated against sources. Policies still have to be applied to this Stage. If two of these are used in the same stage, they are ensured to be identical."
@@ -3594,7 +3614,7 @@ msgstr "Obligatoire."
 
 #: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
 msgstr "Obligatoire. 150 caractères ou moins. Lettres, chiffres et @/./+/-/_ uniquement."
 
@@ -3670,10 +3690,13 @@ msgid "SLO URL"
 msgstr "URL SLO"
 
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
 msgid "SMS"
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "SMS authenticator"
+msgstr ""
+
 #: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
 msgid "SMS-based Authenticators"
 msgstr ""
@@ -3703,7 +3726,7 @@ msgstr "URL SSO"
 msgid "Same identifier is used for all providers"
 msgstr "Le même identifiant est utilisé pour tous les fournisseurs"
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Save"
 msgstr "Enregistrer"
 
@@ -3751,6 +3774,10 @@ msgstr "Le secret a été vu"
 msgid "Secret:"
 msgstr "Secret :"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "Security key authenticator"
+msgstr ""
+
 #: src/pages/policies/expression/ExpressionPolicyForm.ts
 #: src/pages/property-mappings/PropertyMappingLDAPForm.ts
 #: src/pages/property-mappings/PropertyMappingNotification.ts
@@ -3994,6 +4021,10 @@ msgstr "Une erreur s'est produite ! Veuillez réessayer plus tard."
 msgid "Source linked"
 msgstr "Source liée"
 
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Source name"
+msgstr ""
+
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
 msgid "Source {0}"
@@ -4120,9 +4151,13 @@ msgstr "État"
 msgid "Static Tokens"
 msgstr "Jetons statiques"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
-msgid "Static tokens"
+msgid "Static authenticator"
-msgstr "Jetons statiques"
+msgstr ""
+
+#: 
+#~ msgid "Static tokens"
+#~ msgstr "Jetons statiques"
 
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Static: Static value, displayed as-is."
@@ -4136,19 +4171,19 @@ msgstr "Refuser statiquement le flux. Pour utiliser cette étape efficacement, d
 msgid "Status"
 msgstr "Statut"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Status: Disabled"
+#~ msgid "Status: Disabled"
-msgstr "Statut : Désactivé"
+#~ msgstr "Statut : Désactivé"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Status: Enabled"
+#~ msgid "Status: Enabled"
-msgstr "Statut : Activé"
+#~ msgstr "Statut : Activé"
 
 #: src/interfaces/UserInterface.ts
 msgid "Stop impersonation"
@@ -4353,13 +4388,13 @@ msgstr "Liaison mise à jour avec succès"
 msgid "Successfully updated certificate-key pair."
 msgstr "Paire clé/certificat mise à jour avec succès."
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Successfully updated details."
 msgstr "Détails mis à jour avec succès"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Successfully updated device."
+#~ msgid "Successfully updated device."
-msgstr "Appareil mis à jour avec succès"
+#~ msgstr "Appareil mis à jour avec succès"
 
 #: src/pages/flows/FlowForm.ts
 msgid "Successfully updated flow."
@@ -4548,6 +4583,10 @@ msgstr "Certificat de vérification TLS"
 msgid "TOTP Authenticators"
 msgstr "Authentificateur TOTP"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "TOTP authenticator"
+msgstr ""
+
 #: src/pages/flows/StageBindingForm.ts
 msgid "Target"
 msgstr "Cible"
@@ -4704,9 +4743,9 @@ msgstr "Temps en minutes durant lequel le jeton envoyé est valide."
 msgid "Time offset when temporary users should be deleted. This only applies if your IDP uses the NameID Format 'transient', and the user doesn't log out manually. (Format: hours=1;minutes=2;seconds=3)."
 msgstr "Délai de suppression des utilisateurs temporaires. Ceci s'applique uniquement si votre fournisseur d'identité utilise le format NameID transitoire ('transient') et que l'utilisateur ne se déconnecte pas manuellement. (Format : heures=1;minutes=2;secondes=3)."
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Time-based One-Time Passwords"
+#~ msgid "Time-based One-Time Passwords"
-msgstr "Mots de passe unique basés sur le temps"
+#~ msgstr "Mots de passe unique basés sur le temps"
 
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -4835,6 +4874,7 @@ msgstr ""
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Type"
 msgstr "Type"
 
@@ -4956,9 +4996,8 @@ msgstr "À jour !"
 #: src/pages/users/UserActiveForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Update"
 msgstr "Mettre à jour"
@@ -4976,6 +5015,11 @@ msgstr "Mettre à jour la liaison"
 msgid "Update Certificate-Key Pair"
 msgstr "Mettre à jour la paire clé/certificat"
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Update Device"
+msgstr ""
+
 #: src/pages/flows/FlowListPage.ts
 msgid "Update Flow"
 msgstr "Mettre à jour le flux"
@@ -5214,7 +5258,7 @@ msgid "User's avatar"
 msgstr "Avatar de l'utilisateu"
 
 #: src/pages/users/UserForm.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "User's display name."
 msgstr "Nom d'affichage de l'utilisateur"
 
@@ -5242,7 +5286,7 @@ msgstr "URL Userinfo"
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Username"
 msgstr "Nom d'utilisateur"
 
@@ -5360,9 +5404,9 @@ msgstr "Avertissement : le domaine d'authentik n'est pas configuré, l'authentif
 msgid "WebAuthn Authenticators"
 msgstr "Authentificateurs WebAuthn"
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "WebAuthn Devices"
+#~ msgid "WebAuthn Devices"
-msgstr "Équipements WebAuthn"
+#~ msgstr "Équipements WebAuthn"
 
 #: src/pages/events/TransportForm.ts
 msgid "Webhook (Slack/Discord)"

web/src/locales/pseudo-LOCALE.po

@@ -39,7 +39,6 @@ msgstr ""
 #: src/pages/stages/invitation/InvitationListPage.ts
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "-"
 msgstr ""
@@ -443,7 +442,6 @@ msgid "Authentication flow"
 msgstr ""
 
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 msgid "Authenticator"
 msgstr ""
 
@@ -679,7 +677,7 @@ msgstr ""
 msgid "Certificates"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsPassword.ts
+#: src/user/user-settings/details/UserPassword.ts
 msgid "Change password"
 msgstr ""
 
@@ -687,7 +685,7 @@ msgstr ""
 msgid "Change status"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsPassword.ts
+#: src/user/user-settings/details/UserPassword.ts
 msgid "Change your password"
 msgstr ""
 
@@ -869,9 +867,9 @@ msgstr ""
 msgid "Configuration stage"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Configure WebAuthn"
+#~ msgid "Configure WebAuthn"
-msgstr ""
+#~ msgstr ""
 
 #: 
 #~ msgid "Configure how long access codes are valid for."
@@ -1194,9 +1192,9 @@ msgstr ""
 msgid "Created by"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Created {0}"
+#~ msgid "Created {0}"
-msgstr ""
+#~ msgstr ""
 
 #: src/elements/events/ObjectChangelog.ts
 #: src/elements/events/UserEvents.ts
@@ -1283,7 +1281,8 @@ msgstr ""
 #: src/pages/tenants/TenantListPage.ts
 #: src/pages/tokens/TokenListPage.ts
 #: src/pages/users/UserListPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Delete"
 msgstr ""
@@ -1309,7 +1308,7 @@ msgstr ""
 #~ msgid "Delete Session"
 #~ msgstr ""
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Delete account"
 msgstr ""
 
@@ -1384,8 +1383,13 @@ msgstr ""
 msgid "Device classes which can be used to authenticate."
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Device name"
+#~ msgid "Device name"
+#~ msgstr ""
+
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Device(s)"
 msgstr ""
 
 #: src/pages/providers/saml/SAMLProviderForm.ts
@@ -1402,21 +1406,21 @@ msgstr ""
 #~ msgid "Disable"
 #~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Disable Duo authenticator"
+#~ msgid "Disable Duo authenticator"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-msgid "Disable SMS authenticator"
+#~ msgid "Disable SMS authenticator"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-msgid "Disable Static Tokens"
+#~ msgid "Disable Static Tokens"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Disable Time-based OTP"
+#~ msgid "Disable Time-based OTP"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/sources/SourcesListPage.ts
 msgid "Disabled"
@@ -1458,9 +1462,9 @@ msgstr ""
 msgid "Dummy stage used for testing. Shows a simple continue button and always passes."
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Duo"
+#~ msgid "Duo"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
 msgid "Duo Authenticators"
@@ -1470,6 +1474,10 @@ msgstr ""
 msgid "Duo activation"
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "Duo authenticator"
+msgstr ""
+
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
 msgid "Duo push-notifications"
 msgstr ""
@@ -1526,7 +1534,7 @@ msgstr ""
 #: src/pages/stages/identification/IdentificationStageForm.ts
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Email"
 msgstr ""
 
@@ -1563,25 +1571,25 @@ msgstr ""
 #~ msgid "Enable"
 #~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-msgid "Enable Duo authenticator"
+#~ msgid "Enable Duo authenticator"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-msgid "Enable SMS authenticator"
+#~ msgid "Enable SMS authenticator"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/sources/ldap/LDAPSourceForm.ts
 msgid "Enable StartTLS"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-msgid "Enable Static Tokens"
+#~ msgid "Enable Static Tokens"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Enable TOTP"
+#~ msgid "Enable TOTP"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/flows/FlowForm.ts
 msgid "Enable compatibility mode, increases compatibility with password managers on mobile devices."
@@ -1600,6 +1608,11 @@ msgstr ""
 msgid "Enabling this toggle will create a group named after the user, with the user as member."
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Enroll"
+msgstr ""
+
 #: src/pages/flows/utils.ts
 msgid "Enrollment"
 msgstr ""
@@ -1635,9 +1648,9 @@ msgstr ""
 msgid "Error: unsupported source settings: {0}"
 msgstr ""
 
-#: src/user/user-settings/stages/StageSettings.ts
+#: 
-msgid "Error: unsupported stage settings: {0}"
+#~ msgid "Error: unsupported stage settings: {0}"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/flows/StageBindingForm.ts
 msgid "Evaluate on plan"
@@ -2480,9 +2493,10 @@ msgstr ""
 #: src/flows/stages/prompt/PromptStage.ts
 #: src/pages/applications/ApplicationViewPage.ts
 #: src/pages/applications/ApplicationViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
 #: src/user/user-settings/sources/SourceSettings.ts
-#: src/user/user-settings/stages/StageSettings.ts
 #: src/utils.ts
 msgid "Loading"
 msgstr ""
@@ -2613,6 +2627,10 @@ msgstr ""
 msgid "Long-running operations which authentik executes in the background."
 msgstr ""
 
+#: src/user/user-settings/UserSettingsPage.ts
+msgid "MFA Devices"
+msgstr ""
+
 #: src/pages/stages/user_write/UserWriteStageForm.ts
 msgid "Mark newly created users as inactive."
 msgstr ""
@@ -2794,7 +2812,8 @@ msgstr ""
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Name"
 msgstr ""
 
@@ -2939,6 +2958,7 @@ msgstr ""
 #: src/flows/stages/authenticator_sms/AuthenticatorSMSStage.ts
 #: src/flows/stages/authenticator_static/AuthenticatorStaticStage.ts
 #: src/flows/stages/authenticator_totp/AuthenticatorTOTPStage.ts
+#: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStageDuo.ts
 #: src/flows/stages/captcha/CaptchaStage.ts
@@ -3193,9 +3213,9 @@ msgstr ""
 msgid "Password stage"
 msgstr ""
 
-#: src/user/user-settings/UserSettingsPage.ts
+#: 
-msgid "Password, 2FA, etc"
+#~ msgid "Password, 2FA, etc"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Password: Masked input, password is validated against sources. Policies still have to be applied to this Stage. If two of these are used in the same stage, they are ensured to be identical."
@@ -3617,7 +3637,7 @@ msgstr ""
 
 #: src/pages/users/ServiceAccountForm.ts
 #: src/pages/users/UserForm.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only."
 msgstr ""
 
@@ -3694,10 +3714,13 @@ msgid "SLO URL"
 msgstr ""
 
 #: src/flows/stages/authenticator_validate/AuthenticatorValidateStage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
 msgid "SMS"
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "SMS authenticator"
+msgstr ""
+
 #: src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
 msgid "SMS-based Authenticators"
 msgstr ""
@@ -3727,7 +3750,7 @@ msgstr ""
 msgid "Same identifier is used for all providers"
 msgstr ""
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Save"
 msgstr ""
 
@@ -3775,6 +3798,10 @@ msgstr ""
 msgid "Secret:"
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "Security key authenticator"
+msgstr ""
+
 #: src/pages/policies/expression/ExpressionPolicyForm.ts
 #: src/pages/property-mappings/PropertyMappingLDAPForm.ts
 #: src/pages/property-mappings/PropertyMappingNotification.ts
@@ -4026,6 +4053,10 @@ msgstr ""
 msgid "Source linked"
 msgstr ""
 
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Source name"
+msgstr ""
+
 #: src/user/user-settings/sources/SourceSettingsOAuth.ts
 #: src/user/user-settings/sources/SourceSettingsPlex.ts
 msgid "Source {0}"
@@ -4154,10 +4185,14 @@ msgstr ""
 msgid "Static Tokens"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
-msgid "Static tokens"
+msgid "Static authenticator"
 msgstr ""
 
+#: 
+#~ msgid "Static tokens"
+#~ msgstr ""
+
 #: src/pages/stages/prompt/PromptForm.ts
 msgid "Static: Static value, displayed as-is."
 msgstr ""
@@ -4170,19 +4205,19 @@ msgstr ""
 msgid "Status"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Status: Disabled"
+#~ msgid "Status: Disabled"
-msgstr ""
+#~ msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts
+#: 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Status: Enabled"
+#~ msgid "Status: Enabled"
-msgstr ""
+#~ msgstr ""
 
 #: src/interfaces/UserInterface.ts
 msgid "Stop impersonation"
@@ -4389,13 +4424,13 @@ msgstr ""
 msgid "Successfully updated certificate-key pair."
 msgstr ""
 
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Successfully updated details."
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "Successfully updated device."
+#~ msgid "Successfully updated device."
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/flows/FlowForm.ts
 msgid "Successfully updated flow."
@@ -4588,6 +4623,10 @@ msgstr ""
 msgid "TOTP Authenticators"
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+msgid "TOTP authenticator"
+msgstr ""
+
 #: src/pages/flows/StageBindingForm.ts
 msgid "Target"
 msgstr ""
@@ -4745,9 +4784,9 @@ msgstr ""
 msgid "Time offset when temporary users should be deleted. This only applies if your IDP uses the NameID Format 'transient', and the user doesn't log out manually. (Format: hours=1;minutes=2;seconds=3)."
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts
+#: 
-msgid "Time-based One-Time Passwords"
+#~ msgid "Time-based One-Time Passwords"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/policies/BoundPoliciesList.ts
 #: src/pages/policies/PolicyBindingForm.ts
@@ -4878,6 +4917,7 @@ msgstr ""
 #: src/pages/sources/SourcesListPage.ts
 #: src/pages/stages/prompt/PromptForm.ts
 #: src/pages/stages/prompt/PromptListPage.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
 msgid "Type"
 msgstr ""
 
@@ -5000,9 +5040,8 @@ msgstr ""
 #: src/pages/users/UserActiveForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/mfa/MFADevicesPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
 #: src/user/user-settings/tokens/UserTokenList.ts
 msgid "Update"
 msgstr ""
@@ -5020,6 +5059,11 @@ msgstr ""
 msgid "Update Certificate-Key Pair"
 msgstr ""
 
+#: src/user/user-settings/mfa/MFADevicesPage.ts
+#: src/user/user-settings/sources/SourceConnectionsPage.ts
+msgid "Update Device"
+msgstr ""
+
 #: src/pages/flows/FlowListPage.ts
 msgid "Update Flow"
 msgstr ""
@@ -5260,7 +5304,7 @@ msgid "User's avatar"
 msgstr ""
 
 #: src/pages/users/UserForm.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "User's display name."
 msgstr ""
 
@@ -5288,7 +5332,7 @@ msgstr ""
 #: src/pages/users/UserForm.ts
 #: src/pages/users/UserListPage.ts
 #: src/pages/users/UserViewPage.ts
-#: src/user/user-settings/UserSelfForm.ts
+#: src/user/user-settings/details/UserDetailsForm.ts
 msgid "Username"
 msgstr ""
 
@@ -5406,9 +5450,9 @@ msgstr ""
 msgid "WebAuthn Authenticators"
 msgstr ""
 
-#: src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts
+#: 
-msgid "WebAuthn Devices"
+#~ msgid "WebAuthn Devices"
-msgstr ""
+#~ msgstr ""
 
 #: src/pages/events/TransportForm.ts
 msgid "Webhook (Slack/Discord)"

web/src/user/user-settings/UserSettingsPage.ts

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro";
 
 import { CSSResult, LitElement, TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 
 import AKGlobal from "../../authentik.css";
@@ -12,18 +12,24 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
 import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
 import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
 
+import { StagesApi, UserSetting } from "@goauthentik/api";
+
+import { DEFAULT_CONFIG } from "../../api/Config";
 import { me } from "../../api/Users";
+import { EVENT_REFRESH } from "../../constants";
 import "../../elements/Tabs";
 import "../../elements/user/SessionList";
 import "../../elements/user/UserConsentList";
-import "./UserSelfForm";
+import "./details/UserDetailsForm";
+import "./details/UserPassword";
+import "./mfa/MFADevicesPage";
 import "./sources/SourceSettings";
-import "./stages/StageSettings";
 import "./tokens/UserTokenList";
 
 @customElement("ak-user-settings")
@@ -41,10 +47,25 @@ export class UserSettingsPage extends LitElement {
             PFSizing,
             PFForm,
             PFFormControl,
+            PFStack,
             AKGlobal,
         ];
     }
 
+    @state()
+    userSettings!: Promise<UserSetting[]>;
+
+    constructor() {
+        super();
+        this.addEventListener(EVENT_REFRESH, () => {
+            this.firstUpdated();
+        });
+    }
+
+    firstUpdated(): void {
+        this.userSettings = new StagesApi(DEFAULT_CONFIG).stagesAllUserSettingsList();
+    }
+
     render(): TemplateResult {
         return html`<div class="pf-c-page">
             <main role="main" class="pf-c-page__main" tabindex="-1">
@@ -54,10 +75,30 @@ export class UserSettingsPage extends LitElement {
                         data-tab-title="${t`User details`}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
+                        <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">${t`Update details`}</div>
                                     <div class="pf-c-card__body">
-                                <ak-user-self-form .instancePk=${1}></ak-user-self-form>
+                                        <ak-user-details-form
+                                            .instancePk=${1}
+                                        ></ak-user-details-form>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="pf-l-stack__item">
+                                ${until(
+                                    this.userSettings?.then((settings) => {
+                                        if (
+                                            settings.filter(
+                                                (stage) =>
+                                                    stage.component === "ak-user-settings-password",
+                                            ).length > 0
+                                        ) {
+                                            return html`<ak-user-settings-password></ak-user-settings-password>`;
+                                        }
+                                    }),
+                                )}
                             </div>
                         </div>
                     </section>
@@ -88,11 +129,13 @@ export class UserSettingsPage extends LitElement {
                         )}
                     </section>
                     <section
-                        slot="page-stages"
+                        slot="page-mfa"
-                        data-tab-title="${t`Password, 2FA, etc`}"
+                        data-tab-title="${t`MFA Devices`}"
                         class="pf-c-page__main-section pf-m-no-padding-mobile"
                     >
-                        <ak-user-settings-stage></ak-user-settings-stage>
+                        <ak-user-settings-mfa
+                            .userSettings=${this.userSettings}
+                        ></ak-user-settings-mfa>
                     </section>
                     <section
                         slot="page-sources"

web/src/user/user-settings/details/UserDetailsForm.ts

@@ -7,21 +7,22 @@ import { until } from "lit/directives/until";
 
 import { CoreApi, UserSelf } from "@goauthentik/api";
 
-import { DEFAULT_CONFIG, tenant } from "../../api/Config";
+import { DEFAULT_CONFIG, tenant } from "../../../api/Config";
-import "../../elements/EmptyState";
+import { me } from "../../../api/Users";
-import "../../elements/forms/Form";
+import "../../../elements/EmptyState";
-import "../../elements/forms/FormElement";
+import "../../../elements/forms/Form";
-import "../../elements/forms/HorizontalFormElement";
+import "../../../elements/forms/FormElement";
-import { ModelForm } from "../../elements/forms/ModelForm";
+import "../../../elements/forms/HorizontalFormElement";
+import { ModelForm } from "../../../elements/forms/ModelForm";
 
-@customElement("ak-user-self-form")
+@customElement("ak-user-details-form")
-export class UserSelfForm extends ModelForm<UserSelf, number> {
+export class UserDetailsForm extends ModelForm<UserSelf, number> {
     viewportCheck = false;
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     loadInstance(pk: number): Promise<UserSelf> {
-        return new CoreApi(DEFAULT_CONFIG).coreUsersMeRetrieve().then((su) => {
+        return me().then((user) => {
-            return su.user;
+            return user.user;
         });
     }
 

web/src/user/user-settings/details/UserPassword.ts

@@ -1,13 +1,30 @@
 import { t } from "@lingui/macro";
 
 import { TemplateResult, html } from "lit";
+import { CSSResult, LitElement } from "lit";
 import { customElement } from "lit/decorators";
+import { property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 
-import { BaseUserSettings } from "../BaseUserSettings";
+import AKGlobal from "../../../authentik.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 @customElement("ak-user-settings-password")
-export class UserSettingsPassword extends BaseUserSettings {
+export class UserSettingsPassword extends LitElement {
+    @property()
+    objectId!: string;
+
+    @property()
+    configureUrl?: string;
+
+    static get styles(): CSSResult[] {
+        return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal];
+    }
+
     render(): TemplateResult {
         // For this stage we don't need to check for a configureFlow,
         // as the stage won't return any UI Elements if no configureFlow is set.

web/src/user/user-settings/mfa/MFADevicesPage.ts

@@ -0,0 +1,155 @@
+import { t } from "@lingui/macro";
+
+import { TemplateResult, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
+
+import { AuthenticatorsApi, Device, UserSetting } from "@goauthentik/api";
+
+import { AKResponse } from "../../../api/Client";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import "../../../elements/buttons/Dropdown";
+import "../../../elements/buttons/ModalButton";
+import "../../../elements/buttons/TokenCopyButton";
+import "../../../elements/forms/DeleteBulkForm";
+import "../../../elements/forms/ModalForm";
+import { Table, TableColumn } from "../../../elements/table/Table";
+
+export function stageToAuthenticatorName(stage: UserSetting): string {
+    switch (stage.component) {
+        case "ak-user-settings-authenticator-duo":
+            return t`Duo authenticator`;
+        case "ak-user-settings-authenticator-sms":
+            return t`SMS authenticator`;
+        case "ak-user-settings-authenticator-static":
+            return t`Static authenticator`;
+        case "ak-user-settings-authenticator-totp":
+            return t`TOTP authenticator`;
+        case "ak-user-settings-authenticator-webauthn":
+            return t`Security key authenticator`;
+    }
+    return `Invalid stage component ${stage.component}`;
+}
+
+@customElement("ak-user-settings-mfa")
+export class MFADevicesPage extends Table<Device> {
+    @property({ attribute: false })
+    userSettings?: Promise<UserSetting[]>;
+
+    checkbox = true;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async apiEndpoint(page: number): Promise<AKResponse<Device>> {
+        const devices = await new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsAllList();
+        return {
+            pagination: {
+                current: 0,
+                count: devices.length,
+                totalPages: 1,
+                startIndex: 1,
+                endIndex: devices.length,
+            },
+            results: devices,
+        };
+    }
+
+    columns(): TableColumn[] {
+        return [new TableColumn(t`Name`), new TableColumn(t`Type`), new TableColumn("")];
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`<ak-dropdown class="pf-c-dropdown">
+                <button class="pf-m-primary pf-c-dropdown__toggle" type="button">
+                    <span class="pf-c-dropdown__toggle-text">${t`Enroll`}</span>
+                    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
+                </button>
+                <ul class="pf-c-dropdown__menu" hidden>
+                    ${until(
+                        this.userSettings?.then((stages) => {
+                            return stages
+                                .filter((stage) => {
+                                    if (stage.component === "ak-user-settings-password") {
+                                        return false;
+                                    }
+                                    return stage.configureUrl;
+                                })
+                                .map((stage) => {
+                                    return html`<li>
+                                        <a
+                                            href="${stage.configureUrl}"
+                                            class="pf-c-dropdown__menu-item"
+                                        >
+                                            ${stageToAuthenticatorName(stage)}
+                                        </a>
+                                    </li>`;
+                                });
+                        }),
+                        html`<ak-empty-state
+                            ?loading="${true}"
+                            header=${t`Loading`}
+                        ></ak-empty-state>`,
+                    )}
+                </ul>
+            </ak-dropdown>
+            ${super.renderToolbar()}`;
+    }
+
+    async deleteWrapper(device: Device) {
+        switch (device.type) {
+            case "authentik_stages_authenticator_duo.DuoDevice":
+                return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsDuoDestroy({
+                    id: device.pk,
+                });
+            case "authentik_stages_authenticator_sms.SMSDevice":
+                return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsSmsDestroy({
+                    id: device.pk,
+                });
+            case "otp_totp.TOTPDevice":
+                return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpDestroy({
+                    id: device.pk,
+                });
+            case "otp_static.StaticDevice":
+                return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticDestroy({
+                    id: device.pk,
+                });
+            case "authentik_stages_authenticator_webauthn.WebAuthnDevice":
+                return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnDestroy({
+                    id: device.pk,
+                });
+            default:
+                break;
+        }
+    }
+
+    renderToolbarSelected(): TemplateResult {
+        const disabled = this.selectedElements.length < 1;
+        return html`<ak-forms-delete-bulk
+            objectLabel=${t`Device(s)`}
+            .objects=${this.selectedElements}
+            .delete=${(item: Device) => {
+                return this.deleteWrapper(item);
+            }}
+        >
+            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
+                ${t`Delete`}
+            </button>
+        </ak-forms-delete-bulk>`;
+    }
+
+    row(item: Device): TemplateResult[] {
+        return [
+            html`${item.name}`,
+            html`${item.verboseName}`,
+            html`
+                <ak-forms-modal>
+                    <span slot="submit">${t`Update`}</span>
+                    <span slot="header">${t`Update Device`}</span>
+                    <ak-user-token-form slot="form" .instancePk=${item.pk}> </ak-user-token-form>
+                    <button slot="trigger" class="pf-c-button pf-m-plain">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                </ak-forms-modal>
+            `,
+        ];
+    }
+}

web/src/user/user-settings/stages/StageSettings.ts

@@ -1,98 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { CSSResult, LitElement, TemplateResult, html } from "lit";
-import { customElement, property } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import PFStack from "@patternfly/patternfly/layouts/Stack/stack.css";
-
-import { StagesApi, UserSetting } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { EVENT_REFRESH } from "../../../constants";
-import "../../../elements/EmptyState";
-import "./UserSettingsAuthenticatorDuo";
-import "./UserSettingsAuthenticatorSMS";
-import "./UserSettingsAuthenticatorStatic";
-import "./UserSettingsAuthenticatorTOTP";
-import "./UserSettingsAuthenticatorWebAuthn";
-import "./UserSettingsPassword";
-
-@customElement("ak-user-settings-stage")
-export class UserStageSettingsPage extends LitElement {
-    @property({ attribute: false })
-    userSettings?: Promise<UserSetting[]>;
-
-    static get styles(): CSSResult[] {
-        return [PFStack];
-    }
-
-    constructor() {
-        super();
-        this.addEventListener(EVENT_REFRESH, () => {
-            this.firstUpdated();
-        });
-    }
-
-    firstUpdated(): void {
-        this.userSettings = new StagesApi(DEFAULT_CONFIG).stagesAllUserSettingsList();
-    }
-
-    renderStageSettings(stage: UserSetting): TemplateResult {
-        switch (stage.component) {
-            case "ak-user-settings-authenticator-webauthn":
-                return html`<ak-user-settings-authenticator-webauthn
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-webauthn>`;
-            case "ak-user-settings-password":
-                return html`<ak-user-settings-password
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-password>`;
-            case "ak-user-settings-authenticator-totp":
-                return html`<ak-user-settings-authenticator-totp
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-totp>`;
-            case "ak-user-settings-authenticator-static":
-                return html`<ak-user-settings-authenticator-static
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-static>`;
-            case "ak-user-settings-authenticator-duo":
-                return html`<ak-user-settings-authenticator-duo
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-duo>`;
-            case "ak-user-settings-authenticator-sms":
-                return html`<ak-user-settings-authenticator-sms
-                    objectId=${stage.objectUid}
-                    .configureUrl=${stage.configureUrl}
-                >
-                </ak-user-settings-authenticator-sms>`;
-            default:
-                return html`<p>${t`Error: unsupported stage settings: ${stage.component}`}</p>`;
-        }
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-l-stack pf-m-gutter">
-            ${until(
-                this.userSettings?.then((stages) => {
-                    return stages.map((stage) => {
-                        return html`<div class="pf-l-stack__item">
-                            ${this.renderStageSettings(stage)}
-                        </div>`;
-                    });
-                }),
-                html`<ak-empty-state ?loading="${true}" header=${t`Loading`}></ak-empty-state>`,
-            )}
-        </div>`;
-    }
-}

web/src/user/user-settings/stages/UserSettingsAuthenticatorDuo.ts

@@ -1,85 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import { AuthenticatorsApi } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { EVENT_REFRESH } from "../../../constants";
-import { BaseUserSettings } from "../BaseUserSettings";
-
-@customElement("ak-user-settings-authenticator-duo")
-export class UserSettingsAuthenticatorDuo extends BaseUserSettings {
-    renderEnabled(): TemplateResult {
-        return html`<div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Enabled`}
-                    <i class="pf-icon pf-icon-ok"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                <button
-                    class="pf-c-button pf-m-danger"
-                    @click=${() => {
-                        return new AuthenticatorsApi(DEFAULT_CONFIG)
-                            .authenticatorsDuoList({})
-                            .then((devices) => {
-                                if (devices.results.length < 1) {
-                                    return;
-                                }
-                                // TODO: Handle multiple devices, currently we assume only one TOTP Device
-                                return new AuthenticatorsApi(DEFAULT_CONFIG)
-                                    .authenticatorsDuoDestroy({
-                                        id: devices.results[0].pk || 0,
-                                    })
-                                    .then(() => {
-                                        this.dispatchEvent(
-                                            new CustomEvent(EVENT_REFRESH, {
-                                                bubbles: true,
-                                                composed: true,
-                                            }),
-                                        );
-                                    });
-                            });
-                    }}
-                >
-                    ${t`Disable Duo authenticator`}
-                </button>
-            </div>`;
-    }
-
-    renderDisabled(): TemplateResult {
-        return html` <div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Disabled`}
-                    <i class="pf-icon pf-icon-error-circle-o"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                ${this.configureUrl
-                    ? html`<a
-                          href="${this.configureUrl}?next=/${encodeURIComponent(
-                              "#/settings;page-stages",
-                          )}"
-                          class="pf-c-button pf-m-primary"
-                          >${t`Enable Duo authenticator`}
-                      </a>`
-                    : html``}
-            </div>`;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`Duo`}</div>
-            ${until(
-                new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsDuoList({}).then((devices) => {
-                    return devices.results.length > 0
-                        ? this.renderEnabled()
-                        : this.renderDisabled();
-                }),
-            )}
-        </div>`;
-    }
-}

web/src/user/user-settings/stages/UserSettingsAuthenticatorSMS.ts

@@ -1,85 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import { AuthenticatorsApi } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { EVENT_REFRESH } from "../../../constants";
-import { BaseUserSettings } from "../BaseUserSettings";
-
-@customElement("ak-user-settings-authenticator-sms")
-export class UserSettingsAuthenticatorSMS extends BaseUserSettings {
-    renderEnabled(): TemplateResult {
-        return html`<div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Enabled`}
-                    <i class="pf-icon pf-icon-ok"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                <button
-                    class="pf-c-button pf-m-danger"
-                    @click=${() => {
-                        return new AuthenticatorsApi(DEFAULT_CONFIG)
-                            .authenticatorsSmsList({})
-                            .then((devices) => {
-                                if (devices.results.length < 1) {
-                                    return;
-                                }
-                                // TODO: Handle multiple devices, currently we assume only one TOTP Device
-                                return new AuthenticatorsApi(DEFAULT_CONFIG)
-                                    .authenticatorsSmsDestroy({
-                                        id: devices.results[0].pk || 0,
-                                    })
-                                    .then(() => {
-                                        this.dispatchEvent(
-                                            new CustomEvent(EVENT_REFRESH, {
-                                                bubbles: true,
-                                                composed: true,
-                                            }),
-                                        );
-                                    });
-                            });
-                    }}
-                >
-                    ${t`Disable SMS authenticator`}
-                </button>
-            </div>`;
-    }
-
-    renderDisabled(): TemplateResult {
-        return html` <div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Disabled`}
-                    <i class="pf-icon pf-icon-error-circle-o"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                ${this.configureUrl
-                    ? html`<a
-                          href="${this.configureUrl}?next=/${encodeURIComponent(
-                              "#/settings;page-stages",
-                          )}"
-                          class="pf-c-button pf-m-primary"
-                          >${t`Enable SMS authenticator`}
-                      </a>`
-                    : html``}
-            </div>`;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`SMS`}</div>
-            ${until(
-                new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsSmsList({}).then((devices) => {
-                    return devices.results.length > 0
-                        ? this.renderEnabled()
-                        : this.renderDisabled();
-                }),
-            )}
-        </div>`;
-    }
-}

web/src/user/user-settings/stages/UserSettingsAuthenticatorStatic.ts

@@ -1,106 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { CSSResult, TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import { AuthenticatorsApi } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { EVENT_REFRESH } from "../../../constants";
-import { STATIC_TOKEN_STYLE } from "../../../flows/stages/authenticator_static/AuthenticatorStaticStage";
-import { BaseUserSettings } from "../BaseUserSettings";
-
-@customElement("ak-user-settings-authenticator-static")
-export class UserSettingsAuthenticatorStatic extends BaseUserSettings {
-    static get styles(): CSSResult[] {
-        return super.styles.concat(STATIC_TOKEN_STYLE);
-    }
-
-    renderEnabled(): TemplateResult {
-        return html`<div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Enabled`}
-                    <i class="pf-icon pf-icon-ok"></i>
-                </p>
-                <ul class="ak-otp-tokens">
-                    ${until(
-                        new AuthenticatorsApi(DEFAULT_CONFIG)
-                            .authenticatorsStaticList({})
-                            .then((devices) => {
-                                if (devices.results.length < 1) {
-                                    return;
-                                }
-                                return devices.results[0].tokenSet?.map((token) => {
-                                    return html`<li>${token.token}</li>`;
-                                });
-                            }),
-                    )}
-                </ul>
-            </div>
-            <div class="pf-c-card__footer">
-                <button
-                    class="pf-c-button pf-m-danger"
-                    @click=${() => {
-                        return new AuthenticatorsApi(DEFAULT_CONFIG)
-                            .authenticatorsStaticList({})
-                            .then((devices) => {
-                                if (devices.results.length < 1) {
-                                    return;
-                                }
-                                // TODO: Handle multiple devices, currently we assume only one TOTP Device
-                                return new AuthenticatorsApi(DEFAULT_CONFIG)
-                                    .authenticatorsStaticDestroy({
-                                        id: devices.results[0].pk || 0,
-                                    })
-                                    .then(() => {
-                                        this.dispatchEvent(
-                                            new CustomEvent(EVENT_REFRESH, {
-                                                bubbles: true,
-                                                composed: true,
-                                            }),
-                                        );
-                                    });
-                            });
-                    }}
-                >
-                    ${t`Disable Static Tokens`}
-                </button>
-            </div>`;
-    }
-
-    renderDisabled(): TemplateResult {
-        return html` <div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Disabled`}
-                    <i class="pf-icon pf-icon-error-circle-o"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                ${this.configureUrl
-                    ? html`<a
-                          href="${this.configureUrl}?next=/${encodeURIComponent(
-                              "#/settings;page-stages",
-                          )}"
-                          class="pf-c-button pf-m-primary"
-                          >${t`Enable Static Tokens`}
-                      </a>`
-                    : html``}
-            </div>`;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`Static tokens`}</div>
-            ${until(
-                new AuthenticatorsApi(DEFAULT_CONFIG)
-                    .authenticatorsStaticList({})
-                    .then((devices) => {
-                        return devices.results.length > 0
-                            ? this.renderEnabled()
-                            : this.renderDisabled();
-                    }),
-            )}
-        </div>`;
-    }
-}

web/src/user/user-settings/stages/UserSettingsAuthenticatorTOTP.ts

@@ -1,85 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
-import { until } from "lit/directives/until";
-
-import { AuthenticatorsApi } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { EVENT_REFRESH } from "../../../constants";
-import { BaseUserSettings } from "../BaseUserSettings";
-
-@customElement("ak-user-settings-authenticator-totp")
-export class UserSettingsAuthenticatorTOTP extends BaseUserSettings {
-    renderEnabled(): TemplateResult {
-        return html`<div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Enabled`}
-                    <i class="pf-icon pf-icon-ok"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                <button
-                    class="pf-c-button pf-m-danger"
-                    @click=${() => {
-                        return new AuthenticatorsApi(DEFAULT_CONFIG)
-                            .authenticatorsTotpList({})
-                            .then((devices) => {
-                                if (devices.results.length < 1) {
-                                    return;
-                                }
-                                // TODO: Handle multiple devices, currently we assume only one TOTP Device
-                                return new AuthenticatorsApi(DEFAULT_CONFIG)
-                                    .authenticatorsTotpDestroy({
-                                        id: devices.results[0].pk || 0,
-                                    })
-                                    .then(() => {
-                                        this.dispatchEvent(
-                                            new CustomEvent(EVENT_REFRESH, {
-                                                bubbles: true,
-                                                composed: true,
-                                            }),
-                                        );
-                                    });
-                            });
-                    }}
-                >
-                    ${t`Disable Time-based OTP`}
-                </button>
-            </div>`;
-    }
-
-    renderDisabled(): TemplateResult {
-        return html` <div class="pf-c-card__body">
-                <p>
-                    ${t`Status: Disabled`}
-                    <i class="pf-icon pf-icon-error-circle-o"></i>
-                </p>
-            </div>
-            <div class="pf-c-card__footer">
-                ${this.configureUrl
-                    ? html`<a
-                          href="${this.configureUrl}?next=/${encodeURIComponent(
-                              "#/settings;page-stages",
-                          )}"
-                          class="pf-c-button pf-m-primary"
-                          >${t`Enable TOTP`}
-                      </a>`
-                    : html``}
-            </div>`;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`Time-based One-Time Passwords`}</div>
-            ${until(
-                new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
-                    return devices.results.length > 0
-                        ? this.renderEnabled()
-                        : this.renderDisabled();
-                }),
-            )}
-        </div>`;
-    }
-}

web/src/user/user-settings/stages/UserSettingsAuthenticatorWebAuthn.ts

@@ -1,132 +0,0 @@
-import { t } from "@lingui/macro";
-
-import { CSSResult, TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { until } from "lit/directives/until";
-
-import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
-
-import { AuthenticatorsApi, WebAuthnDevice } from "@goauthentik/api";
-
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { EVENT_REFRESH } from "../../../constants";
-import "../../../elements/buttons/ModalButton";
-import "../../../elements/buttons/SpinnerButton";
-import "../../../elements/forms/DeleteForm";
-import "../../../elements/forms/Form";
-import "../../../elements/forms/HorizontalFormElement";
-import "../../../elements/forms/ModalForm";
-import { BaseUserSettings } from "../BaseUserSettings";
-
-@customElement("ak-user-settings-authenticator-webauthn")
-export class UserSettingsAuthenticatorWebAuthn extends BaseUserSettings {
-    static get styles(): CSSResult[] {
-        return super.styles.concat(PFDataList);
-    }
-
-    renderDelete(device: WebAuthnDevice): TemplateResult {
-        return html`<ak-forms-delete
-            .obj=${device}
-            objectLabel=${t`Authenticator`}
-            .delete=${() => {
-                return new AuthenticatorsApi(DEFAULT_CONFIG)
-                    .authenticatorsWebauthnDestroy({
-                        id: device.pk || 0,
-                    })
-                    .then(() => {
-                        this.dispatchEvent(
-                            new CustomEvent(EVENT_REFRESH, {
-                                bubbles: true,
-                                composed: true,
-                            }),
-                        );
-                    });
-            }}
-        >
-            <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
-        </ak-forms-delete>`;
-    }
-
-    renderUpdate(device: WebAuthnDevice): TemplateResult {
-        return html`<ak-forms-modal>
-            <span slot="submit"> ${t`Update`} </span>
-            <span slot="header"> ${t`Update`} </span>
-            <ak-form
-                slot="form"
-                successMessage=${t`Successfully updated device.`}
-                .send=${(data: unknown) => {
-                    return new AuthenticatorsApi(DEFAULT_CONFIG)
-                        .authenticatorsWebauthnUpdate({
-                            id: device.pk || 0,
-                            webAuthnDeviceRequest: data as WebAuthnDevice,
-                        })
-                        .then(() => {
-                            this.requestUpdate();
-                        });
-                }}
-            >
-                <form class="pf-c-form pf-m-horizontal">
-                    <ak-form-element-horizontal
-                        label=${t`Device name`}
-                        ?required=${true}
-                        name="name"
-                    >
-                        <input
-                            type="text"
-                            value="${ifDefined(device.name)}"
-                            class="pf-c-form-control"
-                            required
-                        />
-                    </ak-form-element-horizontal>
-                </form>
-            </ak-form>
-            <button slot="trigger" class="pf-c-button pf-m-primary">${t`Update`}</button>
-        </ak-forms-modal>`;
-    }
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">${t`WebAuthn Devices`}</div>
-            <div class="pf-c-card__body">
-                <ul class="pf-c-data-list" role="list">
-                    ${until(
-                        new AuthenticatorsApi(DEFAULT_CONFIG)
-                            .authenticatorsWebauthnList({})
-                            .then((devices) => {
-                                return devices.results.map((device) => {
-                                    return html`<li class="pf-c-data-list__item">
-                                        <div class="pf-c-data-list__item-row">
-                                            <div class="pf-c-data-list__item-content">
-                                                <div class="pf-c-data-list__cell">
-                                                    ${device.name || t`-`}
-                                                </div>
-                                                <div class="pf-c-data-list__cell">
-                                                    ${t`Created ${device.createdOn?.toLocaleString()}`}
-                                                </div>
-                                                <div class="pf-c-data-list__cell">
-                                                    ${this.renderUpdate(device)}
-                                                    ${this.renderDelete(device)}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </li>`;
-                                });
-                            }),
-                    )}
-                </ul>
-            </div>
-            <div class="pf-c-card__footer">
-                ${this.configureUrl
-                    ? html`<a
-                          href="${this.configureUrl}?next=/${encodeURIComponent(
-                              "#/settings;page-stages",
-                          )}"
-                          class="pf-c-button pf-m-primary"
-                          >${t`Configure WebAuthn`}
-                      </a>`
-                    : html``}
-            </div>
-        </div>`;
-    }
-}