Dynamic Themes

With the introduction of Service Management application, deployers are now able to switch the themes based on different services. For example, you may want to have different login screens (different styles) for staff applications and student applications, or you want to show two layouts for day time and night time. This document could help you go through the basic settings to achieve this.

Static Themes

CAS is configured to decorate views based on the theme property of a given registered service in the Service Registry. The theme that is activated via this method will still preserve the default views for CAS but will apply decorations such as CSS and Javascript to the views. The physical structure of views cannot be modified via this method.

Configuration

The following settings and properties are available from the CAS configuration catalog:

The configuration settings listed below are tagged as Required in the CAS configuration metadata. This flag indicates that the presence of the setting may be needed to activate or affect the behavior of the CAS feature and generally should be reviewed, possibly owned and adjusted. If the setting is assigned a default value, you do not need to strictly put the setting in your copy of the configuration, but should review it nonetheless to make sure it matches your deployment expectations.

The configuration settings listed below are tagged as Optional in the CAS configuration metadata. This flag indicates that the presence of the setting is not immediately necessary in the end-user CAS configuration, because a default value is assigned or the activation of the feature is not conditionally controlled by the setting value. You should only include this field in your configuration if you need to modify the default value.

  • cas.theme.default-theme-name=cas-theme-default

    • The default theme name of this CAS deployment.

    org.apereo.cas.configuration.model.support.themes.ThemeProperties.

    How can I configure this property?

  • cas.theme.param-name=theme

    • The parameter name used to switch themes.

    org.apereo.cas.configuration.model.support.themes.ThemeProperties.

    How can I configure this property?

  • cas.theme.name=

    • The name of this theme used in various titles/captions.

    How can I configure this property?

  • cas.theme.description=

    • The description for this theme to describe its purpose

    How can I configure this property?

    Configuration Metadata

    The collection of configuration properties listed in this section are automatically generated from the CAS source and components that contain the actual field definitions, types, descriptions, modules, etc. This metadata may not always be 100% accurate, or could be lacking details and sufficient explanations.

    Be Selective

    This section is meant as a guide only. Do NOT copy/paste the entire collection of settings into your CAS configuration; rather pick only the properties that you need. Do NOT enable settings unless you are certain of their purpose and do NOT copy settings into your configuration only to keep them as reference. All these ideas lead to upgrade headaches, maintenance nightmares and premature aging.

    YAGNI

    Note that for nearly ALL use cases, declaring and configuring properties listed here is sufficient. You should NOT have to explicitly massage a CAS XML/Java/etc configuration file to design an authentication handler, create attribute release policies, etc. CAS at runtime will auto-configure all required changes for you. If you are unsure about the meaning of a given CAS setting, do NOT turn it on without hesitation. Review the codebase or better yet, ask questions to clarify the intended behavior.

    Naming Convention

    Property names can be specified in very relaxed terms. For instance cas.someProperty, cas.some-property, cas.some_property are all valid names. While all forms are accepted by CAS, there are certain components (in CAS and other frameworks used) whose activation at runtime is conditional on a property value, where this property is required to have been specified in CAS configuration using kebab case. This is both true for properties that are owned by CAS as well as those that might be presented to the system via an external library or framework such as Spring Boot, etc.

    When possible, properties should be stored in lower-case kebab format, such as cas.property-name=value. The only possible exception to this rule is when naming actuator endpoints; The name of the actuator endpoints (i.e. ssoSessions) MUST remain in camelCase mode.

    Settings and properties that are controlled by the CAS platform directly always begin with the prefix cas. All other settings are controlled and provided to CAS via other underlying frameworks and may have their own schemas and syntax. BE CAREFUL with the distinction. Unrecognized properties are rejected by CAS and/or frameworks upon which CAS depends. This means if you somehow misspell a property definition or fail to adhere to the dot-notation syntax and such, your setting is entirely refused by CAS and likely the feature it controls will never be activated in the way you intend.

    Validation

    Configuration properties are automatically validated on CAS startup to report issues with configuration binding, specially if defined CAS settings cannot be recognized or validated by the configuration schema. The validation process is on by default and can be skipped on startup using a special system property SKIP_CONFIG_VALIDATION that should be set to true. Additional validation processes are also handled via Configuration Metadata and property migrations applied automatically on startup by Spring Boot and family.

    Indexed Settings

    CAS settings able to accept multiple values are typically documented with an index, such as cas.some.setting[0]=value. The index [0] is meant to be incremented by the adopter to allow for distinct multiple configuration blocks.

    To create a theme, please follow the below instructions:

    • Add a [theme_name].properties placed to the root of src/main/resources folder. Contents of this file may contain the following settings:
    Setting Description Value
    cas.standard.css.file Path to theme CSS file; Multiple files may be comma-separated. /themes/[theme_name]/css/cas.css
    cas.standard.js.file Path to theme Javascript file; Multiple files may be comma-separated. /themes/[theme_name]/js/js/css
    cas.logo.file Path to theme logo to display via the common layout /images/logo.png
    cas.drawer-menu.enabled Decide whether drawer menu should be displayed true
    cas.theme.name Theme name used in various titles/captions Example Theme
    cas.theme.description Theme description used in various titles/captions Example Theme Description
    cas.pm-links.enabled Whether password management/reset links should be displayed. true
    cas.login-form.enabled When the CAS login form should be displayed. true
    cas.notifications-menu.enabled Enable and display the notifications menu. true
    cas.favicon.file Path to theme favicon file. /themes/example/images/favicon.ico
    cas.hero-banner.file Path to a “hero” styled image/logo on the login form /themes/example/images/hero.png
    cas.js.core.enabled Whether core/default Javascript libraries should be included /themes/example/images/hero.png
    cas.successful-login.display-attributes Whether attributes/applications should be displayed on login /themes/example/images/hero.png
    • Create the directory src/main/resources/static/themes/[theme_name]. Put the theme-specific cas.css and cas.js inside the appropriate directories for css and js.
    • Specify [theme_name] for the service definition under the theme property.
    1
2
3
4
5
6
7

    {
  "@class" : "org.apereo.cas.services.CasRegisteredService",
  "serviceId" : "^https://www.example.org",
  "name" : "MyTheme",
  "theme" : "[theme_name]",
  "id" : 1000
}

    Values can use the Spring Expression Language syntax.

    Themed Views

    CAS can also utilize a service’s associated theme to selectively choose which set of UI views will be used to generate the standard views (login/casLoginView.html, etc). This is specially useful in cases where the set of pages for a theme that are targeted for a different type of audience are entirely different structurally that using a simple theme is not practical to augment the default views. In such cases, new view pages may be required.

    Views associated with a particular theme by default are expected to be found at: src/main/resources/templates/<theme-id>. Note that CAS views and theme-based views may both be externalized out of the web application context. When externalized, themed views are expected to be found at the specified path via CAS properties under a directory named after the theme. For instance, if the external path for CAS views is /etc/cas/templates, view template files for theme sample may be located /etc/cas/templates/sample/.

    The following settings and properties are available from the CAS configuration catalog:

    The configuration settings listed below are tagged as Required in the CAS configuration metadata. This flag indicates that the presence of the setting may be needed to activate or affect the behavior of the CAS feature and generally should be reviewed, possibly owned and adjusted. If the setting is assigned a default value, you do not need to strictly put the setting in your copy of the configuration, but should review it nonetheless to make sure it matches your deployment expectations.

    The configuration settings listed below are tagged as Optional in the CAS configuration metadata. This flag indicates that the presence of the setting is not immediately necessary in the end-user CAS configuration, because a default value is assigned or the activation of the feature is not conditionally controlled by the setting value. You should only include this field in your configuration if you need to modify the default value.

  • cas.view.template-prefixes=

    • Comma separated paths to where CAS templates may be found. Example might be classpath:templates,file:/templates.

    org.apereo.cas.configuration.model.core.web.view.ViewProperties.

    How can I configure this property?

    Configuration Metadata

    The collection of configuration properties listed in this section are automatically generated from the CAS source and components that contain the actual field definitions, types, descriptions, modules, etc. This metadata may not always be 100% accurate, or could be lacking details and sufficient explanations.

    Be Selective

    This section is meant as a guide only. Do NOT copy/paste the entire collection of settings into your CAS configuration; rather pick only the properties that you need. Do NOT enable settings unless you are certain of their purpose and do NOT copy settings into your configuration only to keep them as reference. All these ideas lead to upgrade headaches, maintenance nightmares and premature aging.

    YAGNI

    Note that for nearly ALL use cases, declaring and configuring properties listed here is sufficient. You should NOT have to explicitly massage a CAS XML/Java/etc configuration file to design an authentication handler, create attribute release policies, etc. CAS at runtime will auto-configure all required changes for you. If you are unsure about the meaning of a given CAS setting, do NOT turn it on without hesitation. Review the codebase or better yet, ask questions to clarify the intended behavior.

    Naming Convention

    Property names can be specified in very relaxed terms. For instance cas.someProperty, cas.some-property, cas.some_property are all valid names. While all forms are accepted by CAS, there are certain components (in CAS and other frameworks used) whose activation at runtime is conditional on a property value, where this property is required to have been specified in CAS configuration using kebab case. This is both true for properties that are owned by CAS as well as those that might be presented to the system via an external library or framework such as Spring Boot, etc.

    When possible, properties should be stored in lower-case kebab format, such as cas.property-name=value. The only possible exception to this rule is when naming actuator endpoints; The name of the actuator endpoints (i.e. ssoSessions) MUST remain in camelCase mode.

    Settings and properties that are controlled by the CAS platform directly always begin with the prefix cas. All other settings are controlled and provided to CAS via other underlying frameworks and may have their own schemas and syntax. BE CAREFUL with the distinction. Unrecognized properties are rejected by CAS and/or frameworks upon which CAS depends. This means if you somehow misspell a property definition or fail to adhere to the dot-notation syntax and such, your setting is entirely refused by CAS and likely the feature it controls will never be activated in the way you intend.

    Validation

    Configuration properties are automatically validated on CAS startup to report issues with configuration binding, specially if defined CAS settings cannot be recognized or validated by the configuration schema. The validation process is on by default and can be skipped on startup using a special system property SKIP_CONFIG_VALIDATION that should be set to true. Additional validation processes are also handled via Configuration Metadata and property migrations applied automatically on startup by Spring Boot and family.

    Indexed Settings

    CAS settings able to accept multiple values are typically documented with an index, such as cas.some.setting[0]=value. The index [0] is meant to be incremented by the adopter to allow for distinct multiple configuration blocks.

    Configuration

    • Add a [theme_name].properties placed to the root of src/main/resources folder. Contents of this file should match the following:
    1
2

    cas.standard.css.file=/themes/[theme_name]/css/cas.css
cas.standard.js.file=/themes/[theme_name]/js/cas.js
    • Clone the default set of view pages into a new directory based on the theme id (i.e. src/main/resources/templates/<theme-id>).
    • Specify the name of your theme for the service definition under the theme property.

    Theme Collections

    CAS provides a module that presents a number of ready-made themes. The intention for each themes to account for common and provide for common use cases when it comes to user interface modifications and samples, and attempt to automate much of the configuration.

    Support is enabled by including the following module in the WAR overlay:

    1
2
3
4
5

    <dependency>
    <groupId>org.apereo.cas</groupId>
    <artifactId>cas-server-support-themes-collection</artifactId>
    <version>${cas.version}</version>
</dependency>

    1

    implementation "org.apereo.cas:cas-server-support-themes-collection:${project.'cas.version'}"

    1
2
3
4
5
6
7
8
9

    dependencyManagement {
    imports {
        mavenBom "org.apereo.cas:cas-server-support-bom:${project.'cas.version'}"
    }
}

dependencies {
    implementation "org.apereo.cas:cas-server-support-themes-collection"
}

    1
2
3
4
5
6
7
8
9
10

    dependencies {
    /*
    The following platform references should be included automatically and are listed here for reference only.
            
    implementation enforcedPlatform("org.apereo.cas:cas-server-support-bom:${project.'cas.version'}")
    implementation platform(org.springframework.boot.gradle.plugin.SpringBootPlugin.BOM_COORDINATES)
    */

    implementation "org.apereo.cas:cas-server-support-themes-collection"
}

    The following themes are provided by this module and can be assigned to service definitions:

    Theme Description
    example A reference example theme that combines customized CSS, Javascript and views
    twbs A basic theme utilizing Bootstrap for CSS and Javascript

    The collection of themes above can also serve as reference examples of how to define a theme with custom CSS, Javascript and associated views and fragments.

    Groovy Themes

    If you have multiple themes defined, it may be desirable to dynamically determine a theme for a given service definition. In order to do, you may calculate the final theme name via a Groovy script of your own design. The theme assigned to the service definition needs to point to the location of the script:

    1
2
3
4
5
6
7

    {
  "@class" : "org.apereo.cas.services.CasRegisteredService",
  "serviceId" : "^https://www.example.org",
  "name" : "MyTheme",
  "theme" : "file:///etc/cas/config/themes.groovy",
  "id" : 1000
}

    The script itself may be designed as:

    1
2
3
4
5
6
7
8
9
10
11
12
13

    import java.util.*

def String run(final Object... args) {
    def service = args[0]
    def registeredService = args[1]
    def queryStrings = args[2]
    def headers = args[3]
    def logger = args[4]

    // Determine theme ...

    return null
}

    Returning null or blank will have CAS switch to the default theme. The following parameters may be passed to a Groovy script:

    Parameter Description
    service The object representing the requesting service.
    registeredService The object representing the matching registered service in the registry.
    queryStrings Textual representation of all query strings found in the request, if any.
    headers Map of all request headers and their values found in the request, if any.
    logger The object responsible for issuing log messages such as logger.info(...).

    RESTful Themes

    Somewhat similar to the above option, you may calculate the final theme name via a REST endpoint of your own design. The theme assigned to the service definition needs to point to the location of the REST API. Endpoints must be designed to accept/process application/json via GET requests. A returned status code 200 allows CAS to read the body of the response to determine the theme name. Empty response bodies will have CAS switch to the default theme.

    1
2
3
4
5
6
7

    {
  "@class" : "org.apereo.cas.services.CasRegisteredService",
  "serviceId" : "^https://www.example.org",
  "name" : "MyTheme",
  "theme" : "https://themes.example.org",
  "id" : 1000
}

    The following parameters may be passed to a Groovy script:

    Parameter Description
    service The requesting service identifier.