Handle keycloak assets

[luca-peruzzo]

As mentioned here: https://github.com/keycloakify/keycloakify/issues/656 We have to define a config to implement styles on per page basis

It shoud be possible to disable the import of the default stylesheets on a per per page basis.

Can I make a PR to do so?

[kathari00]

What are you trying to achieve with this?

[luca-peruzzo]

What are you trying to achieve with this?

I was working with the storybook implementation where we need assets to properly display the page. in https://github.com/keycloakify/keycloakify/issues/656 you can see there are errors on loading styles so I asked for informations. what we have now is the styles injection in the angular.json on development:

"styles": [
    "src/keycloak-theme/assets/.keycloakify/login/resources-common/node_modules/@patternfly/patternfly/patternfly.min.css",
    "src/keycloak-theme/assets/.keycloakify/login/resources-common/node_modules/patternfly/dist/css/patternfly.min.css",
    "src/keycloak-theme/assets/.keycloakify/login/resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css",
    "src/keycloak-theme/assets/.keycloakify/login/css/login.css",
    "src/keycloak-theme/assets/.keycloakify/login/resources-common/lib/pficon/pficon.css"
]

and the loadStyles function in template.component.ts:

private loadStyles(): void {
    if (isDevMode()) {
        this.stylesheetsLoaded$ = of(true);
        return;
    }
    const stylesheets = [
        `${this.kcContext.url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
        `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
        `${this.kcContext.url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
        `${this.kcContext.url.resourcesCommonPath}/lib/pficon/pficon.css`,
        `${this.kcContext.url.resourcesPath}/css/login.css`
    ];

    this.stylesheetsLoaded$ = forkJoin(
        stylesheets.map(url => this.dynamicStyleLoader.loadStyle(url))
    ).pipe(
        switchMap(() => of(true)),
        catchError(error => {
            console.error("Error loading styles:", error);
            return NEVER;
        })
    );

but we have to define style injection on per page basis...

I think the best solution in angular is to define a route resolver

[kathari00]

Yeah I am doing the storybook integration atm. I will let you know when I have a solution.

[luca-peruzzo]

Yeah I am doing the storybook integration atm. I will let you know when I have a solution.

ok but we also need to give the user the possibility to define style injection on per page basis, so we need a resolver. I will open a pull request so you can see what I mean.

[kathari00]

But what is the use case? I don't need different stylesheets per page.

[luca-peruzzo]

The use case is that you can decide if you want to inject styles on a page or not. @garronej has implemented this feature in the react project so we have to port it on angular

[luca-peruzzo]

[kathari00]

This is part of kcClass so we would need to let the pipe know. I would be happy about you submitting a pr.