Customization

Custom Images and Themes (Branding)

Currently, the SafeNet Access Exchange does not provide any user interface to customize the theme and images. However, it can be changed manually by updating the images with the same name and resolution. You need to update the CSS styles in the custom.css file to update the Themes.

Prerequisites

Follow below steps for customization in Containerised envrionment (Docker or Podman):

1. After the container is running successfuly, copy the sas-login-ui folder from inside the container to your host machine by using below commands:

   podman/docker cp <containerid>:/opt/keycloak/themes/sas-login-ui /<path_on_your_host_machine>

2. Open the docker-compose file and add the following lines in volume section for mounting:

   /<path_on_your_host_machine>/sas-login-ui:/opt/keycloak/themes/sas-login-ui:Z

Customize the Background Image

1. Navigate to the directory <path_on_your_host_machine>\themes\sas-login-ui\login\resources\img

2. Replace your desired resource with the same name in the directory.

   1. background.jpg: The background image. (Recommended : JPG file with dimensions 1368px by 768px)
   2. bsid.ico: The BSID icon. (Recommended: ICO file with dimensions 48px X 48px)
   3. company_logo.png: The Company logo. (Recommended : PNG file with max. width of 300px)
   4. top_banner.png: The Company Banner image. (Recommended : PNG file with max. height of 75px)

3. The updated resources is reflected on the next login.

Customizing the Color of the Button on the Login Page

1. Navigate to the directory

   <path_on_your_host_machine>\themes\sas-login-ui\login\resources\css

2. Open the file named custom.css.

3. Modify the css, by changing the color under: "sas-button" and save the file.

   

4. The changes are reflected on next Login or refresh the screen to see the changes.

Language Selection

SafeNet Access Exchange with SAS PCE is available in multiple languages. A language selection menu is available to the user on the login page. Once a language is selected, the whole UI switches to the selected language.

You should see the language selection menu as shown below:

The language selection menu is enabled in SafeNet Access Exchange admin console > Realm Settings > Themes.

If users are present in SafeNet Access Exchange database then user specific language becomes a priority.

Click Save to save the new configuration of the Themes section as shown below. The supported locales are updated in the background but these changes are not reflected in front end.

1. Follow the below steps after realm configuration.

2. For existing realms, turn on the Internationalization enabled, the following supported languages are displayed:

   Supported languages are:

   • cs: Czech
   • da: Danish
   • de: German
   • en: English
   • es: Spanish
   • fi: Finnish
   • fr: French
   • it: Italian
   • ja: Japanese
   • ko: Korean
   • nb: Norwegian
   • nl: Dutch
   • sv: Swedish
   • zh-CN: Chinese, Mainland China, simplified characters
   • zh-TW: Chinese, Taiwan, traditional characters

   Note

   For new realms, this setting is enabled by default.

3. Click Save to save the realm configuration.

4. After configuration, the default set up of Localization section is displayed, click Save.

Keyword Customization

SafeNet Access Exchange server provides the functionality to customize the text appearing on SAS login screen. Customization of keywords can be achieved in two ways:

1. Edit language specific JSON file

2. Update language specific locale file

Edit language specific JSON file

1. Locate the language specific JSON files, placed at <path_on_your_host_machine>\themes\sas-login-ui\login\resources\langs.

   

2. Edit the required JSON file and Save it.

Update language specific locale file

1. Click Localization, select the locale as per your requirement.

2. Click Add message bundle, a pop-up is displayed.

3. Enter the corresponding Key Value pair, and click Create.

   Note

   Some important Key Value pair are enclosed below. To view all the Key Value pairs, go to JSON file of the desired language.

   Key	Default Value
   login-page-title-sas	SafeNet Authentication Service
   appname	SafeNet Authentication Service Console
   usernameOrEmail	Username
   password	Password
   button-login	Login

   

   

4. Sign in to SafeNet Authentication Service to see the updated keywords.