[New Account Console] Heavy customization

[Hind RHAN]

Hello, 

Happy New year ! 

I'd like to customize the new account console built with React. The changes are heavy, such as getting rid of the side and upper bar, deleting some displayed field, etc. 

I'd like to avoid forking the source code, making changes and recompiling the whole project, as it makes mantenance really touchy.  Is it possible ? 

If it is, is there some kind of documentation that can help me do it? 

Thank you, 

[Stan Silvert]

Yes, that can definitely be done.

Take a look at the sample project here:
https://github.com/keycloak/keycloak-quickstarts/tree/master/extend-account-console

What you will do is to extend the new account console using a new theme.  Then replace only the files you need to change.  The theme mechanism works the same as before.  See https://www.keycloak.org/docs/latest/server_development/#_themes

Stan

--
You received this message because you are subscribed to the Google Groups "Keycloak User" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/3bda6a57-ffbc-41e7-969d-b67fb81f69e3n%40googlegroups.com.

[Hind Rhanoui]

 Thank you for your response. 

I've tried replacing only the files I need to change, however, when the file in question include imports with relative paths, I have problemes building without copying the whole project. 

For example, I'd like to customize the page AccountPage.tsx (https://github.com/keycloak/keycloak/blob/12.0.0/themes/src/main/resources/theme/keycloak.v2/account/src/app/content/account-page/AccountPage.tsx) 

One of the imports are : 

import { LocaleSelector } from '../../widgets/LocaleSelectors'; import { KeycloakContext } from '../../keycloak-service/KeycloakContext';

In order to be able to build the project, the imports have to be resolved, which is not the case if I do not copy all the imported files.  

How do I build without copying the whole project ? 

Thank you. 

You received this message because you are subscribed to a topic in the Google Groups "Keycloak User" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/keycloak-user/0b1yFcMlHpM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to keycloak-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/5cc21969-0f8e-de51-cf33-9604f25b303b%40redhat.com.

[Stan Silvert]

On 1/22/2021 4:08 AM, Hind Rhanoui wrote:

 Thank you for your response. 

I've tried replacing only the files I need to change, however, when the file in question include imports with relative paths, I have problemes building without copying the whole project. 

For example, I'd like to customize the page AccountPage.tsx (https://github.com/keycloak/keycloak/blob/12.0.0/themes/src/main/resources/theme/keycloak.v2/account/src/app/content/account-page/AccountPage.tsx) 

One of the imports are : 

import { LocaleSelector } from '../../widgets/LocaleSelectors'; import { KeycloakContext } from '../../keycloak-service/KeycloakContext';

In order to be able to build the project, the imports have to be resolved, which is not the case if I do not copy all the imported files.  

How do I build without copying the whole project ? 

Thank you.

Instead of copying all the source to your project, you could just develop your modified page on the keycloak master source.  Then copy the *.js file over.  That's probably the easiest solution right now.

For a general solution, I'm afraid I don't have a great answer for you right now, but I think I know what the solution should be.

To make TypeScript happy, you can prepend the path to the keycloak.v2 source in your imports.  In my case, it looks like this:

import { HttpResponse } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../account-service/account.service";

import { AccountServiceContext } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../account-service/AccountServiceContext";

import { Features } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../widgets/features";

import { Msg } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../widgets/Msg";

import { ContentPage } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../ContentPage";

import { ContentAlert } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../ContentAlert";

import { LocaleSelector } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../widgets/LocaleSelectors";

import { KeycloakContext } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../keycloak-service/KeycloakContext";

import { KeycloakService } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../keycloak-service/keycloak.service";

import { AIACommand } from "../../../../../../keycloak.v2/account/src/app/content/account-page/../../util/AIACommand";

When you run this through babel, the snowpack/assets/babel-plugin.js will convert the imports in AccountPage.js to this:

import { AccountServiceContext } from "../../../../../../keycloak.v2/account/src/app/account-service/AccountServiceContext.js";

import { Msg } from "../../../../../../keycloak.v2/account/src/app/widgets/Msg.js";

import { ContentPage } from "../../../../../../keycloak.v2/account/src/app/content/ContentPage.js";

import { ContentAlert } from "../../../../../../keycloak.v2/account/src/app/content/ContentAlert.js";

import { LocaleSelector } from "../../../../../../keycloak.v2/account/src/app/widgets/LocaleSelectors.js";

import { KeycloakContext } from "../../../../../../keycloak.v2/account/src/app/keycloak-service/KeycloakContext.js";

import { AIACommand } from "../../../../../../keycloak.v2/account/src/app/util/AIACommand.js";

The problem is, those paths are not available to Keycloak. To get your modified AccountPage.js to work, the imports need to look like this:

import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";

import { Msg } from "../../widgets/Msg.js";

import { ContentPage } from "../ContentPage.js";

import { ContentAlert } from "../ContentAlert.js";

import { LocaleSelector } from "../../widgets/LocaleSelectors.js";

import { KeycloakContext } from "../../keycloak-service/KeycloakContext.js";

import { AIACommand } from "../../util/AIACommand.js"; So you could write a babel plugin to take care of this. But I think the ultimate solution will be to release the new account console as a library. Then you will be able to import like this:

import { HttpResponse } from '@keycloak-account/account-service/account.service';

[Hind Rhanoui]

Thank you for your reactivity ! I'll see what I can do ! 

Will a more general solution for heavy customization be covered in future releases of Keycloak ? 

Thank you,

Hind, 

[Stan Silvert]

On 1/25/2021 4:57 AM, Hind Rhanoui wrote:

Thank you for your reactivity ! I'll see what I can do ! 

Will a more general solution for heavy customization be covered in future releases of Keycloak ? 

Thank you,

Hind,

I wouldn't count on it any time soon.  We would have to think long and hard about how to support it if we created a library based on the Account Console code.  However, the community could always publish something to npm that's not supported by us.

Forking the current console is a decent solution for now.  Just copy our source to your own theme directory and off you go.

If you want to go completely out on your own you could just create your own console from scratch and use the new Account REST API.

Also, I thought of yet another approach.  You can always just take the *.js file from the current Account Console build and modify that.  It would work without transpilation, so it's good if you are making relatively small changes and you don't insist on using TypeScript.

Stan

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/530a8752-537a-4bd1-8560-51731da93acdn%40googlegroups.com.

[Hind Rhanoui]

Thank you for your response ! 

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/528616b9-a10c-6f5d-0d00-edcc6cc45762%40redhat.com.