Migrate Keycloak OpenRemote templates to Vaadin

[MartinaeyNL]

Description

We'd like to migrate the default OpenRemote Keycloak themes from Material UI to Vaadin.
This is a more complex migration, as Keycloak uses FreeMarker templates to display their user interfaces.
You'll need to look at their documentation, which is sparse, and migrate the pages.

The goal is to align with the new design, and keep the maintainability for the future low.
It would be great if we can re-use these templates for custom projects, without having to modify the code.
As we'd like to pull the brand color and logo from the manager_config.json file like we do now.

Pages to migrate:

• Login
• Register
• Forgot password
• Two factor authentication signup
• Two factor authentication login

Email templates are out of scope for now, and will be picked up separately.

Design

See comment below by @remyberden

Checklist

• The new design is compatible with the latest Keycloak upgrade we did in Upgrade to Keycloak 26.7.0 #27
• The login, register, forgot password, and 2FA pages use the Vaadin UI / OpenRemote design system instead of Material UI
• The maintainability of the Keycloak themes is minimal, without having to change the Keycloak theme source code on every design system change.
• Brand color and logo are also visible on the new Keycloak pages, pulled from the manager_config.json file. (should be the same as now)
• The 2FA and password reset flow has been tested with a Keycloak instances that includes the new Vaadin design.
• A custom project has been tested with a Keycloak instance that includes the new Vaadin design.
• The new Vaadin design has been tested on multiple screen sizes.
• The new themes are included in the default Keycloak images, and maintained from this repository.

Technical notes

• We'd preferably import @openremote/or-vaadin-components into the FreeMarker templates, and go from there.
  This saves the hassle of tinkering with CSS to make it fit the design, and improves maintainability.
• Be aware that in mobile apps (maybe desktop as well) caching is active to prevent unnecessary HTTP calls.
  So updating the theme, might now always reflect in your browser instantly.
• I was initially thinking about using Keycloakify, and simplifying the development of new themes, but this might be out of scope.
• The less code there is to maintain, the better. 😂

[remyberden]

I've added the designs to Figma (OR manager file)

The designs cover all five pages: login, register, forgot password, 2FA signup, and 2FA login.

Customisation per client would mean adding a custom logo, setting the primary brand colour, and picking the main brand hue that gets applied across all the shades in the design system (using the same principles as the rest of the manager in the future). As long as we stick to these hues, everything should work fine in both light and dark mode and match the manager UI.