Write announcement and documentation for Account Console v3 (#26318)

Closes #26122

Signed-off-by: Jon Koops <jonkoops@gmail.com>

common/src/main/java/org/keycloak/common/Profile.java

@@ -51,8 +51,8 @@ public class Profile {
         ACCOUNT_API("Account Management REST API", Type.DEFAULT),
 
         @Deprecated
-        ACCOUNT2("Account Management Console 2", Type.DEPRECATED, Feature.ACCOUNT_API),
+        ACCOUNT2("Account Console version 2", Type.DEPRECATED, Feature.ACCOUNT_API),
-        ACCOUNT3("Account Management Console 3", Type.DEFAULT, Feature.ACCOUNT_API),
+        ACCOUNT3("Account Console version 3", Type.DEFAULT, Feature.ACCOUNT_API),
 
         ADMIN_FINE_GRAINED_AUTHZ("Fine-Grained Admin Permissions", Type.PREVIEW),
 

docs/documentation/release_notes/topics/24_0_0.adoc

@@ -91,7 +91,17 @@ The 'welcome' page that is shown when a user starts Keycloak for the first time,
 
 image::images/new-welcome-screen.png["A screenshot of the new welcome page, showing a simplified layout with a user registration form."]
 
-If you are using a custom theme, you may need to update it to support the new welcome page. For more details consult the link:{upgradingguide_link}[{upgradingguide_name}].
+If you are using a custom theme, you may need to update it to support the new welcome page. For more details, see the link:{upgradingguide_link}[{upgradingguide_name}].
+
+= New Account Console now the default
+
+We introduced version 3 of the Account Console in Keycloak 22 as a preview feature. In this release, we are making it the default version, and deprecating version 2 in the process, which will be removed in a subsequent release.
+
+This new version has built-in support for the user profile feature, which allows administrators to configure which attributes are available to users in the Account Console, and lands a user directly on their personal account page after logging in:
+.New Account Console with custom attributes
+image::images/new-account-console.png["New Account Console with custom attributes"]
+
+If you are using or extending the customization features of this theme,  you may need to perform additional migrations. For more details, see the link:{upgradingguide_link}[{upgradingguide_name}].
 
 = Keycloak JS
 
@@ -201,8 +211,8 @@ As a result, you can use the CR to configure build time options also when a cust
 = Enhanced reverse proxy settings
 
 It is now possible to separately enable parsing of either `Forwarded` or `X-Forwarded-*` headers via the new `--proxy-headers` option.
-For details consult the https://www.keycloak.org/server/reverseproxy[Reverse Proxy Guide].
+For details, see the https://www.keycloak.org/server/reverseproxy[Reverse Proxy Guide].
-The original `--proxy` option is now deprecated and will be removed in a future release. For migration instructions consult the link:{upgradingguide_link}[{upgradingguide_name}].
+The original `--proxy` option is now deprecated and will be removed in a future release. For migration instructions, see the link:{upgradingguide_link}[{upgradingguide_name}].
 
 = Changes to the user representation in both Admin API and Account contexts
 

docs/documentation/securing_apps/topics/oidc/javascript-adapter.adoc

@@ -438,11 +438,11 @@ Options are same as for the createLoginUrl method but 'action' is set to 'regist
 
 *accountManagement()*
 
-Redirects to the Account Management Console.
+Redirects to the Account Console.
 
 *createAccountUrl(options)*
 
-Returns the URL to the Account Management Console.
+Returns the URL to the Account Console.
 
 Options is an Object, where:
 

docs/documentation/server_admin/topics/account.adoc

@@ -2,23 +2,19 @@
 
 == Account Console
 
-{project_name} users can manage their accounts through the Account Console. Users can configure their profiles, add two-factor authentication, include identity provider accounts, and oversee device activity.
+{project_name} users can manage their accounts through the Account Console. They can configure their profiles, add two-factor authentication, include identity provider accounts, and oversee device activity.
 
 [role="_additional-resources"]
 .Additional resources
 
-* The Account Console can be configured in terms of appearance and language preferences. An example is adding attributes to the *Personal info* page by clicking *Personal info* link and completing and saving details. For more information, see the {developerguide_link}[{developerguide_name}].
+* The Account Console can be configured in terms of appearance and language preferences. An example is adding additional attributes to the *Personal info* page. For more information, see the {developerguide_link}[{developerguide_name}].
 
 === Accessing the Account Console
 
-Any user can access the Account Console.
-
 .Procedure
 
 . Make note of the realm name and IP address for the {project_name} server where your account exists.
-
 . In a web browser, enter a URL in this format: _server-root_{kc_realms_path}/{realm-name}/account.
-
 . Enter your login name and password.
 
 .Account Console
@@ -37,21 +33,15 @@ You can sign in to this console using basic authentication (a login name and pas
 .Procedure
 
 . Click *Account security* in the menu.
-
 . Click *Signing in*.
-
+. Click *Set up Authenticator application*.
-. Click *Set up authenticator application*.
 +
 .Signing in
 image:images/account-console-signing-in.png[Signing in]
 
-. Follow the directions that appear on the screen to use either
+. Follow the directions that appear on the screen to use your mobile device as your OTP generator.
- https://freeotp.github.io/[FreeOTP] or https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2[Google Authenticator] on your mobile device as your OTP generator.
-
 . Scan the QR code in the screen shot into the OTP generator on your mobile device.
-
 . Log out and log in again.
-
 . Respond to the prompt by entering an OTP that is provided on your mobile device.
 
 ==== Two-factor authentication with WebAuthn
@@ -63,20 +53,15 @@ image:images/account-console-signing-in.png[Signing in]
 .Procedure
 
 . Click *Account Security* in the menu.
-
+. Click *Signing in*.
-. Click *Signing In*.
-
 . Click *Set up Security Key*.
 +
 .Signing In
 image:images/account-console-signing-in-webauthn-2factor.png[Signing In With Security Key]
 
 . Prepare your WebAuthn Security Key. How you prepare this key depends on the type of WebAuthn security key you use. For example, for a USB based Yubikey, you may need to put your key into the USB port on your laptop.
-
 . Click *Register* to register your security key.
-
 . Log out and log in again.
-
 . Assuming authentication flow was correctly set, a message appears asking you to authenticate with your Security Key as second factor.
 
 ==== Passwordless authentication with WebAuthn
@@ -88,9 +73,7 @@ image:images/account-console-signing-in-webauthn-2factor.png[Signing In With Sec
 .Procedure
 
 . Click *Account Security* in the menu.
-
 . Click *Signing In*.
-
 . Click *Set up Security Key* in the *Passwordless* section.
 +
 .Signing In
@@ -99,9 +82,7 @@ image:images/account-console-signing-in-webauthn-passwordless.png[Signing In Wit
 . Prepare your WebAuthn Security Key. How you prepare this key depends on the type of WebAuthn security key you use. For example, for a USB based Yubikey, you may need to put your key into the USB port on your laptop.
 
 . Click *Register* to register your security key.
-
 . Log out and log in again.
-
 . Assuming authentication flow was correctly set, a message appears asking you to authenticate with your Security Key as second factor. You no longer need to provide your password to log in.
 
 === Viewing device activity
@@ -124,15 +105,10 @@ You can link your account with an <<_identity_broker, identity broker>>. This op
 .Procedure
 
 . Log into the Admin Console.
-
 . Click *Identity providers* in the menu.
-
 . Select a provider and complete the fields.
-
 . Return to the Account Console.
-
 . Click *Account security* in the menu.
-
 . Click *Linked accounts*.
 
 The identity provider you added appears in this page.
@@ -158,4 +134,5 @@ If you select *Direct membership* checkbox, you will see only the groups you are
 * You need to have the *view-groups* account role for being able to view *Groups* menu.
 
 .View group memberships
-image:images/groups_account_console.png[View group memberships]
+.View group memberships
+image:images/account-console-groups.png[View group memberships]

docs/documentation/server_admin/topics/overview/features.adoc

@@ -12,7 +12,7 @@
 * User Federation - Sync users from LDAP and Active Directory servers.
 * Kerberos bridge - Automatically authenticate users that are logged-in to a Kerberos server.
 * Admin Console for central management of users, roles, role mappings, clients and configuration.
-* Account Management console that allows users to centrally manage their account.
+* Account Console that allows users to centrally manage their account.
 * Theme support - Customize all user facing pages to integrate with your applications and branding.
 * Two-factor Authentication - Support for TOTP/HOTP via Google Authenticator or FreeOTP.
 * Login flows - optional user self-registration, recover password, verify email, require password update, etc.

docs/documentation/server_admin/topics/realms/themes.adoc

@@ -17,7 +17,7 @@ Login theme::
   Username password entry, OTP entry, new user registration, and other similar screens related to login.
 
 Account theme::
-  Each user has a User Account Management UI.
+  The console used by the user to manage his or her account.
 
 Admin console theme::
   The skin of the {project_name} Admin Console.

docs/documentation/server_admin/topics/threat/csrf.adoc

@@ -7,4 +7,4 @@ The OAuth 2.0 login specification requires that a state cookie matches against a
 
 The {project_name} Admin Console is a JavaScript/HTML5 application that makes REST calls to the backend {project_name} admin REST API. These calls all require bearer token authentication and consist of JavaScript Ajax calls, so CSRF is impossible. You can configure the admin REST API to validate the CORS origins.
 
-The user account management section in {project_name} can be vulnerable to CSRF. To prevent CSRF attacks, {project_name} sets a state cookie and embeds the value of this cookie in hidden form fields or query parameters within action links. {project_name} checks the query/form parameter against the state cookie to verify that the user makes the call.
+The Account Console in {project_name} can be vulnerable to CSRF. To prevent CSRF attacks, {project_name} sets a state cookie and embeds the value of this cookie in hidden form fields or query parameters within action links. {project_name} checks the query/form parameter against the state cookie to verify that the same user made the call.

docs/documentation/server_admin/topics/users/con-user-impersonation.adoc

@@ -19,7 +19,7 @@ image:images/user-impersonate-action.png[]
 * If the administrator and the user are in the same realm, then the administrator will be logged out and automatically logged in as the user being impersonated.
 * If the administrator and user are in different realms, the administrator will remain logged in, and additionally will be logged in as the user in that user's realm.
 
-In both instances, the *User Account Management* page of the impersonated user is displayed.
+In both instances, the *Account Console* of the impersonated user is displayed.
 
 .Additional resources
 * For more information on assigning administration permissions, see the <<_admin_permissions,Admin Console Access Control>> chapter.

docs/documentation/server_development/topics/themes.adoc

@@ -11,7 +11,7 @@ image::images/login-sunrise.png[caption="",title="Login page with sunrise exampl
 
 A theme can provide one or more types to customize different aspects of {project_name}. The types available are:
 
-* Account - Account management
+* Account - Account Console
 * Admin - Admin Console
 * Email - Emails
 * Login - Login forms
@@ -105,7 +105,7 @@ You have now created a theme with support for the login type.
 . For *Login Theme* select *mytheme* and click *Save*.
 . Open the login page for the realm.
 +
-You can do this either by logging in through your application or by opening the Account Management console (`/realms/{realm name}/account`).
+You can do this either by logging in through your application or by opening the Account Console (`/realms/{realm name}/account`).
 
 . To see the effect of changing the parent theme, set `parent=keycloak` in `theme.properties` and refresh the login page.
 

docs/documentation/tests/src/test/resources/ignored-links

@@ -43,3 +43,4 @@ https://github.com/apache/felix-dev/tree/master/http#using-the-osgi-http-whitebo
 https://github.com/keycloak/keycloak/blob/025778fe9c745316f80b53fe3052aeb314e868ef/js/apps/admin-ui/public/locales/en/dashboard.json#L3
 https://github.com/keycloak/keycloak/issues/new?*
 https://stackapps.com/apps/oauth/register
+https://github.com/keycloak/keycloak-quickstarts/tree/release/24.0/extension/extend-account-console

docs/documentation/upgrading/topics/keycloak/changes-24_0_0.adoc

@@ -26,6 +26,38 @@ Images such as the background, logo and favicon are now loaded from the 'common'
 import=common/your-theme-name
 ----
 
+= Changes to the Account Console theme customization
+
+If you were previously extending the now deprecated version 2 of the Account Console theme, you will need to update your theme to use the new version 3 of the Account Console theme. The new version of the Account Console theme comes with some changes in regards to how it is customized. To start with a clean slate, you can follow the new https://github.com/keycloak/keycloak-quickstarts/tree/release/24.0/extension/extend-account-console[customization quickstart].
+
+To move your custom theme start by changing the `parent` to the new theme:
+
+[source,properties]
+----
+# Before
+parent=keycloak.v2
+
+# After
+parent=keycloak.v3
+----
+
+If you have any custom React components, you will import React directly, rather than using a relative path:
+
+[source,js]
+----
+// Before
+import * as React from "../../../../common/keycloak/web_modules/react.js";
+
+// After
+import React from "react";
+----
+
+
+If you are using `content.json` to customize the theme there are some changes to the structure of the file, specifically:
+
+* The `content` property has been renamed to `children`.
+* The `id`, `icon` and `componentName` properties have been removed, as `modulePath` provides the same functionality.
+
 = Keycloak JS imports might need to be updated
 
 If you are loading Keycloak JS directly from the Keycloak server, this section can be safely ignored. If you are loading Keycloak JS from the NPM package and are using a bundler like Webpack, Vite, and so on, you might need to make some changes to your code. The Keycloak JS package now uses the https://webpack.js.org/guides/package-exports/[`exports` field] in the package.json file. This means that you might have to change your imports: