Document toolboxDocument toolbox

(sv) Login page / App name / Support Login

Owned by Maciej Zabielski
Last updated: Sept 12, 2024
3 min read

 

Intro

This chapter describes how to customize login page and parameters like:

  • app name

  • provider logo

  • provider link

  • EULA, Terms of Service links

 

Manage themes

Go to admin console and select realm, make sure that this realm is using tessel theme for all sections:

Override values

 Some parameters do not have a default in theme. In such case a value must be provided for all languages, otherwise there will be no default translation in client. 

We pass on specific values by using translation overrides in Localization tab:

  1. App name will be taken as default from theme or from specific locale. Each language can have separate values. 

  2. If value in given language is not available it will fall back to english, so make sure to add values in all languages. 

For ease of use, you can import values from a JSON file to each locale. Content of the JSON file is as follows:


{ "tslProviderMainHeader": "HDC FM", "tslPrivacyPolicyUrl": "https://tessel.com/privacy-policy/", "tslTermsOfServiceUrl": "https://tessel.com/privacy-policy/", "tslEulaLink": "https://tessel.com/privacy-policy/", "tslProviderLogo": "http://localhost:8080/providerfiles/tessel-logo-white-tr.png", "tslProviderLogoWidth": "100", "tslProviderName": "Tessel Systems AB", "tslProviderUrl": "https: //www.tessel.com", "tslPrivacyPolicy": "Privacy Policy", "tslTermsOfService": "Terms of Service", "tslEulaText": "End User License Agreement", "accountManagementTitle": "Welcome to HDC FM Account Management", "accountManagementWelcomeMessage": "Welcome to HDC FM Account Management", "authenticatorFinishSetUpMessage": "Each time you sign in to your HDC FM account, you will be asked to provide a two-factor authentication code.", "authenticatorSMSMessage": "HDC FM will send the Verification code to your phone as the two-factor authentication.", "emailSenderInfo": "You are receiving this e-mail as a registered FM ACCESS BIM.cloud user" "emailSignature": "Best Regards,<br/> FM ACCESS BIM.cloud Team" }

Sample file is attached and also available in repo under KeycloakThemes theme-customizations.json

 Only upload a file with needed values. Keys can also be managed and changed in the GUI. 

Languages

Available language (locale) keys: 

  1.  

    1. de

    2. en

    3. es

    4. no

    5. pl

    6. sv

    7. ... and so on

How to add logo

Logo should be set using these two parameters:

"tslProviderLogo": "http://localhost:8080/providerfiles/tessel-logo-white-tr.png",
"tslProviderLogoWidth": "100",

Width must be determined by checking how the logo looks like and then choose appropriate value. 

Logo link must be a fill, absolute link. You can place logo in provider files folder in HDC config directory. 

In that case the link will look like in the sample:

https://myapp.bim.cloud/providerfiles/mylogo.png

Support Login

The realm that should display "support login" mini button must have the follwoing translation strings added:

{ "use-support-login": true, "support-login-idp": "hyperhouse_ldap" }

 baseUrl must be set on realm client definition

Customize values in shared realm

We use shared realms for LDAP accounts, where a geoup of users is registered in the same, shared LDAP. 

In such case the only way to distinguish a specific customer is to use separat Client registration per application.

When a theme detects a client and client name it will use client name as a prefic to translation texts. 

Then we need to add all texts with a prefix, in all languages

 

"More login options" for shared LDAP

Any time we use a sub-realm - like in shared LDAP case, a "more login options" button will be added if:

  • conditions from "Customize values in shared realm" are met

  • baseUrl for Client is set

  • translations include "tsl-use-return-home" equals to: true


A "More login options" button will be added, baed on baseUrl: a /client is added and ?idp_hint query param.

{ "tsl-use-return-home": true }

 That option should not be used on a "main" realm.

 

Logo / Title / Subtitle

Logo is fixed and can be enabled.

Main title text is not visible when logo option is used

When logo is not visible, a text from 

tslProviderMainHeader

is used. 

Subtitle is turned off by default.