1 of 6

UI

Overview

The UI can be adapted to the look and feel of the organisation style.

Overlay

All applications providing UI implement the same pattern regarding styling.

Configure the overlay folders

In order to make the application read the custom files instead of the default files the configuration parameter overlay_dirs must be used.

Add parameter "overlay_dirs":<path_to_custom_directories>.

Simple example from a Forms config.

{
  "name": "Forms",
  "config": {
    "http_context": "/forms",
    "logout_endpoint_url": "/forms/logout",
    "overlay_dirs": ["config/locale_overlay", "config/ui_overlay"],
    "flows": "@include:../flows/*/flow.json"
  }
}

In the custom directory create a folder, "assets".

Favicon

in the assets folder of your overlay_dir, place the favicon.ico.

CSS

css_overrides.css

Configure the css_overrides.css file in the assets/ folder of your overlay_dir

The file is empty by default. To override the css variables used in the applications see all the default values below. Note, if you wish to only override for example the button background color you do not need to include the rest of the variables.

Default values/available variables

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  src: url('fonts/font-inter/inter-regular.woff2') format('woff2'),
    url('fonts/font-inter/inter-regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('fonts/font-inter/inter-roman.var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url('fonts/font-inter/inter-italic.var.woff2') format('woff2');
}

:root {
  --color-primary: #024550;
  --color-accent: #00cc7e;
  --color-background: #181830;
  --color-surface: #ffffff;
  --color-backface: #f5f5f5;
  --color-on-primary: #ffffff;
  --color-on-surface: var(--color-primary);
  
  --color-button-background: #181830;
  --color-button-background-hover: #c7f3aa;
  --color-button-background-disabled: #d4d4d4;
  --color-button-text: #ffffff;
  --color-button-text-hover: #181830;
  --color-button-text-disabled: #181830;
  --color-link: #045e6c;
  --color-link-hover: #058194;
  --color-link-text-disabled: #bcbcbc;
  --button-radius: 0rem;
  
  --background-image: url('bg_login.svg') no-repeat center center/cover fixed;
  --background-fallback-color: var(--color-background);
  --color-header-background: var(--color-primary);
  --color-header-text: var(--color-on-primary);
  --color-progress-filled: #024550;
  --color-progress-background: #e2e8e9;
  --color-loader-indicator-bottom: #00ca7b;
  --color-loader-indicator-middle: #02444e;
  --color-loader-indicator-top: rgba(200, 200, 200, 0.7);
}

html {
  color: var(--color-on-surface);
  background-color: var(--background-fallback-color);
  background: var(--background-image), var(--background-fallback-color);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }
}
@media (min-width: 521px) and (max-height: 915px) {
  :root {
    font-size: 95%;
  }
}
@media (min-width: 521px) and (max-height: 880px) {
  :root {
    font-size: 90%;
  }
}
@media (min-width: 521px) and (max-height: 830px) {
  :root {
    font-size: 85%;
  }
}
@media (min-width: 521px) and (max-height: 760px) {
  :root {
    font-size: 82%;
  }
}
.loader {
  position: relative;
  width: 77px;
  height: 48px;
  background: #00ca7b;
  background: var(--color-loader-indicator-bottom);
  transform: rotateX(65deg) rotate(45deg);
  color: #02444e;
  color: var(--color-loader-indicator-middle);
  animation: layers1 1s linear infinite alternate;
}
.loader:after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 200, 200, 0.7);
  background: var(--color-loader-indicator-top);
  animation: layerTr 1s linear infinite alternate;
}
@keyframes layers1 {
  0% {
    box-shadow: 0px 0px 0 0px;
  }
  90%,
  100% {
    box-shadow: 20px 20px 0 -4px;
  }
}
@keyframes layerTr {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-25px, -25px) scale(1);
  }
}

Examples

Example: To update the button backgrounds define in your css_overrides.css:

:root {
  --color-button-background: #ffe4c4;
  --color-button-background-hover: rgb(143 188 143);
  --color-button-text: #32cd32;
  --color-button-text-hover: #00fa9a;
}

Example: To change background image

Make sure image is available in the assets folder (using the overlay method preferably) and define in your css_overrides.css

:root {
  --background-image: url('new_background_image.png') no-repeat center center fixed;
}

UI Configuration Overrides

This is how overrides of ui_config should be done in all frontend apps/auth.

Configure the ui_config_overrides.json

Use overlay to provide the custom file and place the file in <overlay_dir>/assets/ui_config_overrides.json.

The data in ui_config_overrides.json will be merged with the default values.

Name

Description

Default value

logos

An object containing logos for app_logo (top bar of apps like forms and portal), and access_header and access_footer for Access authentication apps

"assets/fortified_logo_green.svg"

logos.app_logo/logos.access_header/logos.access_footer

Logo objects. All logos are configured in the same way. Properties below are for all logos (app_logo, access_header and access_footer). Can be configured as false to disable the logo. Example: { "logos": { "access_header": false } [...]} See next section for more information about logos.

logos.app_logo.src

The src of the bottom vendor logo. If undefined or empty string "" no logo will be shown

logos.app_logo.width

The width of the logo. Use css values like "40px"

"auto"

logos.app_logo.height

The height of the logo. Use css values like "40px"

"100%"

logos.app_logo.link

Link object. Can be configured as false to disable

logos.app_logo.link.url

logos.app_logo.link.text

If undefined or empty string "" no link text will be shown

supportedLanguages

List of supported languages. If a language is specified here it is assumed to be available under the folder assets/locales/<code>.jsonSee more in section below

title

Browser tab title

"Fortified ID"

localesMergePath

Path for merging locale files. If omitted or empty string "" is used no locale merging will be done. Important: must end with /

""

fallbackLanguage

Default/fallback language if user has not saved a language in cookies

"sv"

{
  "variables": {},
  "logos": {
    "app_logo": {
      "src": "assets/fortified_logo_green-white.svg",
      "size": "40px"
    },
    "access_header": {
      "src": "assets/logo.svg",
      "link": false
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-white.svg",
      "size": "80px",
      "link": {
        "url": "https://fortifiedid.se"
      }
    }
  },
  "supportedLanguages": [
    {
      "code": "en",
      "name": "English"
    },
    {
      "code": "sv",
      "name": "Svenska"
    }
  ],
  "title": "Fortified ID",
  "localesMergePath": "",
  "fallbackLanguage": "sv"
}

Logo Configuration

All logos are configured as follows:

{
  "logos": {
    "app_logo": {
      "src": "assets/fortified_logo_green-white.svg",
      "height": "40px"
    },
    "access_header": {
      "src": "assets/fortified_logo_green-teal.svg",
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "height": "40px",
      "link": {
        "url": "https://fortifiedid.se",
        "text": "FortifiedID"
      }
    }
  }
}

All logos can be made into links.

For example, BankID has the following default configuration, where it has BankID's logo at the top (with some negative margins because it has so much whitespace in it and we have our own margins otherwise):

{
  "logos": {
    "access_header": {
      "src": "assets/svg/logo_bankid.svg",
      "link": false, //or omit 
      "width": "14rem",
      "margin": "-2.5rem auto -0.5rem auto"
    },
    "access_footer": {
      "src": "assets/fortified_logo_green-teal.svg",
      "size": "40px",
      "link": {
        "text": "",
        "url": "https://fortifiedid.se"
      }
    }
  },
  // ... remaining configuration with title etc.
}

Advanced Configuration

If you want or need to have the same overrides file for several apps, you can also configure more advanced for all apps (password_reset, forms, portal, enrollment), all access (bidomd selector etc) and all infoendpoint by scoping as below. You can also make configuration for a specific app/auth/infoendpoint.

{
  "logos": {
    "access_header": { ... },
    "access_footer": { ... }
  },
  "title": "Acme", // all get this title, even pwd_reset for example
  "access": {
    "title": "Acme IdP", // all Access get this
    "logos": {
      "access_header": { ... } // more specific. all Access auth apps will get a designated header logo
    }
  },
  "bidomd": {
    "logos": {
        "access_header": "default" // most specific, will become the Bankid logo which is default 
    },
    "title": "Acme BankID" // bidomd gets this title
  },
  "selector": {
     "logos": {
         "access_header": false // most specific, turn off the upper logo only on the selector
     }
  }
  // ... remaining configuration with title etc.
}

Variables in Config

If variables are defined in the variables object, all instances of the variable will be replaced in the output to the browser. Note: since search and replace are used for variables, use caution when naming the variables. Use for example __VARIABLE_NAME__ as naming convention to avoid unexpected bugs.

{
  "variables": {
    "__NAME__": "Acme"
  },
  "title": "__NAME__ title" // becomes "Acme title" in the browser
}

Language translations

Customizing translations

All text that is displayed can be customized. The default locale file contains standard translations and can be changed and extended by future updates. Use the overlay method to override the default locale file with a custom file. The default file will be merged with the custom file, with the keys in the custom file taking precedence.

Add more languages

Default provided languages are English and Swedish. Language files must be present in <overlay_dir>/assets/locales/ E.g. assets/locales/en.json

To add more languages add to the array in supportedLanguages and place file (using overlay method) in locales folder. E.g. add the following to the supportedLanguages array {code: 'de', name: 'Deutsch'} and add a file called assets/locales/de.json

Custom translation keys

To customise translations use localesMergePath to extend and merge with the provided default files.

Example of a custom extension/merge:

Default language file contains the translations keys

{
    "selector.header": "Choose authentication method",
    "selector.error": "An error occured",
    "change_language": ""
}

The overlay_dir contains a ui_config_overrides.json with localesMergePath: "assets/custom_locales/" (See Overlay)

A file is placed in <overlay_dir>/assets/custom_locales/en.json containing the following:

{
    "selector.header": "A different header"
}

The resulting merged language file used in the application will contain the following:

{
    "selector.header": "A different header",
    "selector.error": "An error occured",
    "change_language": ""
}

For each language that will be customised, add language files <overlay_dir>/assets/custom_locales/<lang>.json

Scoped Translation Strings with Prefixing

You can scope your translation strings by prefixing them with the last segment of a path. This allows you to define translation strings that are specific to a particular page or context.

Example for Path-Based Prefixing

For example, given the path:

https://dev.fortifiedid.se/saml/authn/selector_root/

You can prefix your translation strings with the last part of the path, selector_root, to create translations specific to that page:

{
  "selector_root.selector.header": "A header specific to this page"
}

Add these translations to your translation file, and they will only apply to the specified path.

Forms Prefixing with Control IDs

For forms, you can also choose to scope translations by using a part of the path as described above or by prefixing with a control ID. This approach helps localize translations at a finer level of granularity for specific form elements.

Example of a control ID-based prefix:

{
  "min_control.forms.multiselectwidget.removed_item": "Item removed from the multiselect widget"
}

This flexibility in prefixing allows you to maintain organized and context-aware translations across your application.

Accessibility/A11y

Fortified ID aims to make applications that are usable for all.

Fortified ID uses the guidelines of WCAG 2.1 to make content more accessible to a wider range of people with disabilities.

WCAG defines four principles that provides the foundation of making a website/application accessible: that it is Perceivable, Operable, Understandable, Robust.

Examples of how Fortified user interfaces are designed according with accessibility/a11y in mind:

1. Perceivable – Information and user interface components must be presented in ways that users can perceive. For example, providing alternative text for images and ensuring clear color contrasts.

2. Operable – The user interface and navigation must be usable by all, regardless of physical or cognitive ability. This includes keyboard navigation support and avoiding content that may trigger seizures or other health issues.

3. Understandable – Content and interface must be understandable for users, which means clear language, predictable navigation, and explanations where necessary.

4. Robust – Content must be robust enough to work with a variety of assistive technologies and future user agents.