diff --git a/design/.DS_Store b/design/.DS_Store new file mode 100644 index 0000000..89d4ab4 Binary files /dev/null and b/design/.DS_Store differ diff --git a/design/admin-console/.DS_Store b/design/admin-console/.DS_Store index abd5b61..a8552b8 100644 Binary files a/design/admin-console/.DS_Store and b/design/admin-console/.DS_Store differ diff --git a/design/admin-console/Dashboard/.DS_Store b/design/admin-console/Dashboard/.DS_Store new file mode 100644 index 0000000..61d67b2 Binary files /dev/null and b/design/admin-console/Dashboard/.DS_Store differ diff --git a/design/admin-console/Dashboard/Dashboard.md b/design/admin-console/Dashboard/Dashboard.md new file mode 100644 index 0000000..d08e66e --- /dev/null +++ b/design/admin-console/Dashboard/Dashboard.md @@ -0,0 +1,21 @@ +# Dashboard + +This version was designed for Keycloak version 7.5. In this design, the dashboard covers server information rather than real metrics or statistics. Therefore, this design is suitable for version 7.5. If all the data is ready, we will redesign the new dashboard for further release. + +The whole prototype can be accessed here: https://marvelapp.com/prototype/baei9db/screen/73638263 + +### Master realm +* Standalone mode +![DashboardStandalone](./images/DashboardStandalone.png) + * (A) +Refresh data: Click the “Refresh” button to update the data. + * (B) +Profile: In the new design, enabled features and disabled features have been displayed directly. The labels indicate the types of the feature. + +* Cluster mode +![DashboardCluster](./images/DashboardCluster.png) +As for Cluster mode, the Dashboard includes Server info and Profile. In addition, there is a welcome message as the first tile. + +### Non-master realm +If users change the realm from the Master realm to non-master realm, users will be navigated to this page. This is just a welcome message, no actual data. This page is displayed only once. Therefore the navigation bar on the left has no Dashboard menu. +![NonmasterRealm](./images/NonmasterRealm.png) diff --git a/design/admin-console/Dashboard/images/.DS_Store b/design/admin-console/Dashboard/images/.DS_Store new file mode 100644 index 0000000..40ca8e6 Binary files /dev/null and b/design/admin-console/Dashboard/images/.DS_Store differ diff --git a/design/admin-console/Dashboard/images/DashboardCluster.png b/design/admin-console/Dashboard/images/DashboardCluster.png new file mode 100644 index 0000000..6e1f3f2 Binary files /dev/null and b/design/admin-console/Dashboard/images/DashboardCluster.png differ diff --git a/design/admin-console/Dashboard/images/DashboardStandalone.png b/design/admin-console/Dashboard/images/DashboardStandalone.png new file mode 100644 index 0000000..54b4167 Binary files /dev/null and b/design/admin-console/Dashboard/images/DashboardStandalone.png differ diff --git a/design/admin-console/Dashboard/images/NonmasterRealm.png b/design/admin-console/Dashboard/images/NonmasterRealm.png new file mode 100644 index 0000000..d276f54 Binary files /dev/null and b/design/admin-console/Dashboard/images/NonmasterRealm.png differ diff --git a/design/admin-console/Dashboard/sidebar.md b/design/admin-console/Dashboard/sidebar.md new file mode 120000 index 0000000..38d6d51 --- /dev/null +++ b/design/admin-console/Dashboard/sidebar.md @@ -0,0 +1 @@ +../sidebar.md \ No newline at end of file diff --git a/design/admin-console/Events/.DS_Store b/design/admin-console/Events/.DS_Store new file mode 100644 index 0000000..3fc59f0 Binary files /dev/null and b/design/admin-console/Events/.DS_Store differ diff --git a/design/admin-console/Events/Events.md b/design/admin-console/Events/Events.md new file mode 100644 index 0000000..57356f8 --- /dev/null +++ b/design/admin-console/Events/Events.md @@ -0,0 +1,40 @@ +# Events + +In the current console, there are three tabs in the Events menu named Login events, Admin events and Config. In the new design, Config will be moved to Realm settings and Login events will be changed to User events. This part will mainly introduce the updates of Users events and Admin events. + +The whole prototype can be accessed here: https://marvelapp.com/prototype/506813g/screen/72103070 + +### User events +![UserEvents](./images/UserEvents.png) + +* (A) +Event configs: Clicking on the Event configs will direct users to the Event configs tab in Realm settings page. +* (B) +Search bar: Users can set up some criteria to search for the prefered events, as shown in the picture below. +![UserEvents_Search](./images/UserEvents_Search.png) +* (C) +Refresh: Due to the events data is dynamic, users need to be allowed to refresh the events to view the latest info. +* (D) +UserID: Clicking the user’s ID will enter the detail page of the user. +* (E) +Collapsible list: Click the arrow to expand the details of the event. +![UserEvents_Expand](./images/UserEvents_Expand.png) +* (F) +Event type: After clicking the error event types, the details will pop-up to show the reasons. +![UserEvents_popup](./images/UserEvents_popup.png) + +### Admin events +![AdminEvents](./images/AdminEvents.png) + +* (A) +Search bar and refresh: It is the same as what has been shown in Users events. +* (B) +Resource path: Click the resource path can direct users to the detail page of the resource. +* (C) +Auth: Click the Auth option, the auth info will pop up. +![AdminEvents_Auth](./images/AdminEvents_Auth.png) +* (D) +Representation: This JSON file captures only the fields that have been changed. +![AdminEvents_Representation](./images/AdminEvents_Representation.png) +* (E) +Details of resource path: If the text length of the resource path exceeds the limit, the user can hover over the resource path to see all the information. diff --git a/design/admin-console/Events/images/.DS_Store b/design/admin-console/Events/images/.DS_Store new file mode 100644 index 0000000..9aa7a15 Binary files /dev/null and b/design/admin-console/Events/images/.DS_Store differ diff --git a/design/admin-console/Events/images/AdminEvents.png b/design/admin-console/Events/images/AdminEvents.png new file mode 100644 index 0000000..2d8fe85 Binary files /dev/null and b/design/admin-console/Events/images/AdminEvents.png differ diff --git a/design/admin-console/Events/images/AdminEvents_Auth.png b/design/admin-console/Events/images/AdminEvents_Auth.png new file mode 100644 index 0000000..d44d2a8 Binary files /dev/null and b/design/admin-console/Events/images/AdminEvents_Auth.png differ diff --git a/design/admin-console/Events/images/AdminEvents_Representation.png b/design/admin-console/Events/images/AdminEvents_Representation.png new file mode 100644 index 0000000..cd687ec Binary files /dev/null and b/design/admin-console/Events/images/AdminEvents_Representation.png differ diff --git a/design/admin-console/Events/images/UserEvents.png b/design/admin-console/Events/images/UserEvents.png new file mode 100644 index 0000000..40c1cfb Binary files /dev/null and b/design/admin-console/Events/images/UserEvents.png differ diff --git a/design/admin-console/Events/images/UserEvents_Expand.png b/design/admin-console/Events/images/UserEvents_Expand.png new file mode 100644 index 0000000..ef83082 Binary files /dev/null and b/design/admin-console/Events/images/UserEvents_Expand.png differ diff --git a/design/admin-console/Events/images/UserEvents_Search.png b/design/admin-console/Events/images/UserEvents_Search.png new file mode 100644 index 0000000..7afeb21 Binary files /dev/null and b/design/admin-console/Events/images/UserEvents_Search.png differ diff --git a/design/admin-console/Events/images/UserEvents_popup.png b/design/admin-console/Events/images/UserEvents_popup.png new file mode 100644 index 0000000..67a967b Binary files /dev/null and b/design/admin-console/Events/images/UserEvents_popup.png differ diff --git a/design/admin-console/Events/sidebar.md b/design/admin-console/Events/sidebar.md new file mode 120000 index 0000000..38d6d51 --- /dev/null +++ b/design/admin-console/Events/sidebar.md @@ -0,0 +1 @@ +../sidebar.md \ No newline at end of file diff --git a/design/admin-console/RealmSettings/.DS_Store b/design/admin-console/RealmSettings/.DS_Store new file mode 100644 index 0000000..0c63cc0 Binary files /dev/null and b/design/admin-console/RealmSettings/.DS_Store differ diff --git a/design/admin-console/RealmSettings/EventConfigs.md b/design/admin-console/RealmSettings/EventConfigs.md new file mode 100644 index 0000000..222fc81 --- /dev/null +++ b/design/admin-console/RealmSettings/EventConfigs.md @@ -0,0 +1,45 @@ +# Event configs + +In the new design, Event configs will be moved to Realm settings. Event configs tab has three sub-tabs namly Event listener, User event settings and Admin events settings. In this way, the configuration is separated from the view of events. Users can focus on different requirements when using Events. + +The whole prototype can be accessed here: https://marvelapp.com/prototype/256i2h2g/screen/72446165 + +### Event listeners +![EventListeners_1](./images/EventListeners_1.png) +* (A) +Event listeners will not just be added, but also have configuration options when added. There can also be multiple instances of the same event listener (with different configuration). It is similar to Identity provider or User federation. +* (B) +“Listener type” is equal to “Listener” of the current console, including jboss-logging, email and so on. Based on the same listener type, users can create different listeners. + +![EventListeners_2](./images/EventListeners_2.png) +Some details of the creation page and edition page are not determined. This is just a rough layout. + +### User events settings +* Enable Save events +![UserEventsConfigs_1](./images/UserEventsConfigs_1.png) +After enabling the "Save events", users can set up the "Expiration" and manage the saved types. In addition, Keycloak will record all the subsequent user events. + +* Add saved types +![UserEventsConfigs_2](./images/UserEventsConfigs_2.png) + +After clicking the "Add saved types" button, users can select and add some types from the modal below. + + ![UserEventsConfigs_4](./images/UserEventsConfigs_4.png) + +### Admin events settings + * Enable Save events + ![AdminEvents_1](./images/AdminEvents_1.png) + + After enabling the “Save events”, Keycloak will record all the subsequent admin events. + + * Disable Save events + ![AdminEvents_2](./images/AdminEvents_2.png) + After disabling the “Save events”, Keycloak no longer records all the subsequent admin events. After clicking the "Save" button, there will be a reminder pop up, as shown below. The same thing goes with “User events settings”. + + ![AdminEvents_3](./images/AdminEvents_3.png) + + * Clear events + ![AdminEvents_4](./images/AdminEvents_4.png) + Click the “Clear all admin events” button, the reminder will pop up. After clearing all admin events of this realm, all records will be permanently deleted. It is the same as the truth with “User events settings”. + + ![AdminEvents_5](./images/AdminEvents_5.png) diff --git a/design/admin-console/RealmSettings/UserRegistration.md b/design/admin-console/RealmSettings/UserRegistration.md new file mode 100644 index 0000000..baeb67c --- /dev/null +++ b/design/admin-console/RealmSettings/UserRegistration.md @@ -0,0 +1,41 @@ +# User registration + +In the new design, the default roles from "Roles" menu and default groups from "Groups" menu will be merged together in Realm settings called “User registration”. This part will introduce some designs and updates of "User registration". + +The whole prototype can be accessed here: https://marvelapp.com/prototype/7gaf163/screen/74810895 + +### Default roles +Default roles allow users to automatically assign user role mappings when any user is newly created or imported through Identity Brokering. + +* Help info +![DefaultRoles_5](./images/DefaultRoles_5.png) + + Clicking on the link text brings up an explanation to help novice users better understand the feature. The similar thing happens to "Default groups". + +* Add default roles +![DefaultRoles_1](./images/DefaultRoles_1.png) +After clicking “Add roles” button, the roles table will popup as shown in the screenshot below. Users can add some roles from this table. + + ![DefaultRoles_3](./images/DefaultRoles_3.png) + +### Default Groups + Default groups allow users to automatically assign group membership whenever any new user is created or imported through Identity Brokering. + + * Add default groups + + ![DefaultGroups_1](./images/DefaultGroups_1.png) + + After clicking “Add groups” button, the group table will popup, as shown in the screenshot below. Users can select one or more groups to add to the default group. + + ![DefaultGroups_3](./images/DefaultGroups_3.png) + + * (A) There is a breadcrumb to indicate the group’s path. + * (B) Click the arrow to see the subgroups of the parent group. + + + * Remove groups + + ![DefaultGroups_7](./images/DefaultGroups_7.png) + Users can select one or more groups to remove. If users select the parent group, all of its child groups will be selected automatically. After clicking the "Remove", there will be a reminder for users, as shown in the modal below. Clicking the "Remove" button, all selected groups will be removed. + + ![DefaultGroups_8](./images/DefaultGroups_8.png) diff --git a/design/admin-console/RealmSettings/images/.DS_Store b/design/admin-console/RealmSettings/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/design/admin-console/RealmSettings/images/.DS_Store differ diff --git a/design/admin-console/RealmSettings/images/AdminEvents_1 2.png b/design/admin-console/RealmSettings/images/AdminEvents_1 2.png new file mode 100644 index 0000000..f173489 Binary files /dev/null and b/design/admin-console/RealmSettings/images/AdminEvents_1 2.png differ diff --git a/design/admin-console/RealmSettings/images/AdminEvents_1.png b/design/admin-console/RealmSettings/images/AdminEvents_1.png new file mode 100644 index 0000000..f173489 Binary files /dev/null and b/design/admin-console/RealmSettings/images/AdminEvents_1.png differ diff --git a/design/admin-console/RealmSettings/images/AdminEvents_2.png b/design/admin-console/RealmSettings/images/AdminEvents_2.png new file mode 100644 index 0000000..104341b Binary files /dev/null and b/design/admin-console/RealmSettings/images/AdminEvents_2.png differ diff --git a/design/admin-console/RealmSettings/images/AdminEvents_3.png b/design/admin-console/RealmSettings/images/AdminEvents_3.png new file mode 100644 index 0000000..7ce9920 Binary files /dev/null and b/design/admin-console/RealmSettings/images/AdminEvents_3.png differ diff --git a/design/admin-console/RealmSettings/images/AdminEvents_4.png b/design/admin-console/RealmSettings/images/AdminEvents_4.png new file mode 100644 index 0000000..bfe3c5f Binary files /dev/null and b/design/admin-console/RealmSettings/images/AdminEvents_4.png differ diff --git a/design/admin-console/RealmSettings/images/AdminEvents_5.png b/design/admin-console/RealmSettings/images/AdminEvents_5.png new file mode 100644 index 0000000..7e54fba Binary files /dev/null and b/design/admin-console/RealmSettings/images/AdminEvents_5.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultGroups_1.png b/design/admin-console/RealmSettings/images/DefaultGroups_1.png new file mode 100644 index 0000000..cc0fc8b Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultGroups_1.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultGroups_3.png b/design/admin-console/RealmSettings/images/DefaultGroups_3.png new file mode 100644 index 0000000..5959233 Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultGroups_3.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultGroups_7.png b/design/admin-console/RealmSettings/images/DefaultGroups_7.png new file mode 100644 index 0000000..e71551b Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultGroups_7.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultGroups_8.png b/design/admin-console/RealmSettings/images/DefaultGroups_8.png new file mode 100644 index 0000000..02fc294 Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultGroups_8.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultRoles_1.png b/design/admin-console/RealmSettings/images/DefaultRoles_1.png new file mode 100644 index 0000000..35a663c Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultRoles_1.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultRoles_3.png b/design/admin-console/RealmSettings/images/DefaultRoles_3.png new file mode 100644 index 0000000..66217bc Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultRoles_3.png differ diff --git a/design/admin-console/RealmSettings/images/DefaultRoles_5.png b/design/admin-console/RealmSettings/images/DefaultRoles_5.png new file mode 100644 index 0000000..c325a61 Binary files /dev/null and b/design/admin-console/RealmSettings/images/DefaultRoles_5.png differ diff --git a/design/admin-console/RealmSettings/images/EventListeners_1.png b/design/admin-console/RealmSettings/images/EventListeners_1.png new file mode 100644 index 0000000..920e2f3 Binary files /dev/null and b/design/admin-console/RealmSettings/images/EventListeners_1.png differ diff --git a/design/admin-console/RealmSettings/images/EventListeners_2.png b/design/admin-console/RealmSettings/images/EventListeners_2.png new file mode 100644 index 0000000..11304b9 Binary files /dev/null and b/design/admin-console/RealmSettings/images/EventListeners_2.png differ diff --git a/design/admin-console/RealmSettings/images/UserEventsConfigs_1.png b/design/admin-console/RealmSettings/images/UserEventsConfigs_1.png new file mode 100644 index 0000000..7eb5561 Binary files /dev/null and b/design/admin-console/RealmSettings/images/UserEventsConfigs_1.png differ diff --git a/design/admin-console/RealmSettings/images/UserEventsConfigs_2.png b/design/admin-console/RealmSettings/images/UserEventsConfigs_2.png new file mode 100644 index 0000000..07abd63 Binary files /dev/null and b/design/admin-console/RealmSettings/images/UserEventsConfigs_2.png differ diff --git a/design/admin-console/RealmSettings/images/UserEventsConfigs_4.png b/design/admin-console/RealmSettings/images/UserEventsConfigs_4.png new file mode 100644 index 0000000..bb89dc8 Binary files /dev/null and b/design/admin-console/RealmSettings/images/UserEventsConfigs_4.png differ diff --git a/design/admin-console/RealmSettings/overview.md b/design/admin-console/RealmSettings/overview.md new file mode 100644 index 0000000..f5e34a3 --- /dev/null +++ b/design/admin-console/RealmSettings/overview.md @@ -0,0 +1,6 @@ +# Realm settings + +In the new console, Realm settings has some updates. This website only records the main changes. It doesn't have all the updates yet. We will update this section over time. The whole prototype can be accessed through the following links. + +* [User registration](https://marvelapp.com/prototype/7gaf163/screen/74810895) +* [Event configs](https://marvelapp.com/prototype/256i2h2g/screen/72446165) diff --git a/design/admin-console/RealmSettings/sidebar.md b/design/admin-console/RealmSettings/sidebar.md new file mode 120000 index 0000000..38d6d51 --- /dev/null +++ b/design/admin-console/RealmSettings/sidebar.md @@ -0,0 +1 @@ +../sidebar.md \ No newline at end of file diff --git a/design/admin-console/clients/.DS_Store b/design/admin-console/clients/.DS_Store new file mode 100644 index 0000000..6a566a2 Binary files /dev/null and b/design/admin-console/clients/.DS_Store differ diff --git a/design/admin-console/clients/InitialAccessToken.md b/design/admin-console/clients/InitialAccessToken.md new file mode 100644 index 0000000..7d67da0 --- /dev/null +++ b/design/admin-console/clients/InitialAccessToken.md @@ -0,0 +1,22 @@ +# Initial access token + +Keycloak admin console can create clients and it also allows clients to create themselves. There are two methods to register clients. +* Click the “Create” button on the Client page to create a new client. That means this client has been registered. +* Clients/applications can register themselves and Keycloak needs to provide the initial access token. + +An initial access token can only be used to create clients and has a configurable expiration as well as a configurable limit on how many clients can be created. To some extent, initial access token is a part of client registration. Therefore, the "initial access token" will be moved to "Clients" section from "Realm settings" in the new design. + + +In the new design, Initial access token as a tab will be moved to Clients page from Realm settings. Client list is the same as what we designed before. Here is the client list design for your reference. https://marvelapp.com/prototype/f00e9jb/screen/71968754. The whole prototype of "Initial access token" can be accessed here: https://marvelapp.com/prototype/be22jj6/screen/74620513 + +### Initial access token tab + +![InitialAccessToken_1](./images/InitialAccessToken_1.png) + +Click the "Create" button, users will enter the creation page, as shown in the picture below. + +![InitialAccessToken_2](./images/InitialAccessToken_2.png) + +Users can set up the "Expiration" and "Count". After clicking the "Save" button, there will be a modal pop up. It reminds users to copy and paste the initial access token. Like the screenshot shows below. + +![InitialAccessToken_3](./images/InitialAccessToken_3.png) diff --git a/design/admin-console/clients/images/InitialAccessToken_1.png b/design/admin-console/clients/images/InitialAccessToken_1.png new file mode 100644 index 0000000..295d13c Binary files /dev/null and b/design/admin-console/clients/images/InitialAccessToken_1.png differ diff --git a/design/admin-console/clients/images/InitialAccessToken_2.png b/design/admin-console/clients/images/InitialAccessToken_2.png new file mode 100644 index 0000000..5e7bec6 Binary files /dev/null and b/design/admin-console/clients/images/InitialAccessToken_2.png differ diff --git a/design/admin-console/clients/images/InitialAccessToken_3.png b/design/admin-console/clients/images/InitialAccessToken_3.png new file mode 100644 index 0000000..52741e9 Binary files /dev/null and b/design/admin-console/clients/images/InitialAccessToken_3.png differ diff --git a/design/admin-console/clients/overview.md b/design/admin-console/clients/overview.md index 06bb949..5c58934 100644 --- a/design/admin-console/clients/overview.md +++ b/design/admin-console/clients/overview.md @@ -5,6 +5,7 @@ In the new console, the client protocols (OIDC/SAML2.0) will been extended to cl This website only records the main changes. The whole prototype can be accessed through the following links. * [Clients list](https://marvelapp.com/7gb4j6h/screen/66566055) +* [Initial access token](https://marvelapp.com/prototype/be22jj6/screen/74620513) * [Create/Import client](https://marvelapp.com/7gb4j6h/screen/66568447) * [Settings](https://marvelapp.com/7gb4j6h/screen/66065815) * [Credentials](https://marvelapp.com/7gb4j6h/screen/66577335) diff --git a/design/admin-console/sidebar.md b/design/admin-console/sidebar.md index c9957ba..6d79baf 100644 --- a/design/admin-console/sidebar.md +++ b/design/admin-console/sidebar.md @@ -3,6 +3,7 @@ * [**Clients**](/clients/overview.md) * [List](/clients/list.md) + * [Initial access token](/clients/InitialAccessToken.md) * [Create/Import](/clients/create-import.md) * [Settings](/clients/settings.md) * [Credentials](/clients/credentials.md) @@ -22,3 +23,11 @@ * [Composite role](/RealmRoles/composite-role.md) * [**Sessions**](/Sessions/sessions.md) + +* [**Events**](/Events/Events.md) + +* [**Dashboard**](/Dashboard/Dashboard.md) + +* [**Realm settings**](/RealmSettings/overview.md) + * [User registration](/RealmSettings/UserRegistration.md) + * [Event configs](/RealmSettings/EventConfigs.md)