Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom theme for Keycloak login #77

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

Carifio24
Copy link
Member

This PR is a small update to add a custom theme for the Constellations login. This isn't a terribly key update but I think will be a nice improvement to make it less obvious that the login is being handled via a different service.

A few notes:

  • We override the default Keycloak theme rather than creating one from scratch. This allows us to just update the styling of what already exists. What I've added here is quite simple - I've grabbed the green color and the Roboto Condensed that we use throughout the app as the primary text/highlight color, as well as our almost-black rgb(16, 16, 20) background, to try to keep some stylistic consistency. Ultimately this is more of a "get it set up" type of thing that should make it easier to update the styling later if we want to.
    • One idea I was thinking of for a somewhat more exciting design would be some astronomical image with the login card in front of it (maybe with a blurred background so that the image is partially visible through it?) Any sorts of styling thoughts are welcome
  • I copied the template.ftl file from Keycloak's theme base so that we could change the favicon since this can't be done from theme.properties for a login account. The linked discussion mentions overriding the existing favicon, but in the Docker container the built-in themes are inside of a JAR file. Editing a JAR was obviously not a path that I wanted to go down, so I've just set the favicon to use a WWT assets URL. I also updated the title while I was at it.

@pkgw I'm not sure exactly how things are set up in the deployment, but we can insert this into the Keycloak Docker container in the right place via

# Run from the repository root
# The container needs to be restarted - I assume the set of themes is populated during setup

docker cp keycloak-themes/constellations <container-id>:/opt/keycloak/themes/
docker restart <container-id>

@pkgw
Copy link
Contributor

pkgw commented Apr 11, 2024

Thanks for putting this together! The infra that sets up the Keycloak server lives here:

https://github.com/WorldWideTelescope/wwt-terraform-infra/blob/master/prod/constellations-keycloak-app.tf#L34

We could change this to use a custom-built image, but it would be kind of nice to be able to keep on using a stock image. I'd like to look into whether there's a plausible way to get the custom theme while still doing that.

@pkgw
Copy link
Contributor

pkgw commented Apr 11, 2024

Here's the main info on starting up the stock image: https://www.keycloak.org/server/containers

We can set environment variables (the app_settings in the Terraform config) and the app_command_line. It's not looking like those knobs give us a way to add and use a custom theme, from what I've seen so far.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants