Loginapp UI Customizations Fix in 8.0.4 and 8.1.1

IAM releases 8.0.4 and 8.1.1 included bug fixes in the layout of the Loginapp UI. Existing UI customizations may have to be adapted.

Who is affected?

The problem that was fixed - details on fixes see below - was introduced in 8.0.0 and existed in the releases 8.0.0, 8.0.1, 8.0.2, 8.0.3, and 8.1.0.

If one of the versions is used and a workaround for the UI bugs has been implemented by adapting the UI customizations, they may have to be adapted when upgrading to IAM 8.2. In other words, if you did not adapt the UI customizations because of the bugs in one of the mentioned versions, you do not need to adapt anything.

  1. To find out whether UI customizations in use are affected and whether you need to adapt them, go through the following list.
  2. Check the list of fixes below and verify if one of the affected features is used in your IAM UI customization.
  3. The media breakpoint issue most likely affects all customizations: You are affected, if the layout on any page changes between 0 - 767px, and this is not intended by your customizations.
  4. You are not affected:
    • if you drop all IAM CSS stylings and use your own.
    • if your customizations explicitly handle media breakpoints. It is still recommended to validate the Loginapp UI after upgrading.

You may use the Loginapp Design Kit to test your customizations and to see if and how you are affected. To do so, use a design kit version 8.0.4 (or newer), 8.1.1 (or newer), or 8.2.x.

Details on fixes

FIX 1: Media breakpoint handling is the same as it was in IAM 7.7.

  • With the initial 8.0.0 release, an unintended layout change in the Loginapp UI was introduced. Instead of 3 layouts (mobile, desktop small, desktop large) a new layout was added with a screen width of 567 - 767px (marked bold in the table below).
  • IAM 8.0.4, 8.1.1, and 8.2 restore the original behavior so that the layout switches from 'mobile' to 'desktop small' at a browser width of 768px.

Use-Case

IAM 7.7.x

IAM 8.0.x

IAM 8.0.4, 8.1.1, 8.2 (and newer)

mobile

0px - 767px

0px - 575px

0px - 767px

576px - 767px

desktop small

768px - 991px

768px - 991px

768px - 991px

desktop large

992px - max

992px - max

992px - max

FIX 2: The self-service portal applications were not functional if viewed on small devices

  • The Airlock IAM portal applications could not be clicked on devices with a screen size of 575px or less.
  • Visual default styling was wrong and differed from the styling provided with IAM 7.7.x for screen sizes <= 767px.

IAM 8.0.4, 8.1.1, 8.2, and newer allow portal applications to be clicked and correctly apply the styling in all layouts.

FIX 3: Self-Service Logout Links did not work

Affects only customizations that enabled the SASS variable $iam-show-logout-link. Once enabled, logout links were shown, but clicking the link did not work.

FIX 4: No dynamic font scaling

  • The font size of some HTML elements scaled with the screen size - this was unintended and affected:
  • Self-service portal application titles (header elements).
  • Modal dialog titles.

FIX 5: Positioning of Cronto challenge images

  • Affects all pages that can display a Cronto challenge image.
  • The images were placed too far to the right in the affected IAM versions.

Why was the change in 8.0 necessary?

  • With Airlock IAM 8.0.0 a major update of the internal frontend toolkit (Bootstrap) was implemented, to achieve the following goals:
  • Software and library dependencies are always kept up-to-date for security reasons.
  • Web dependencies are kept to a minimum. With IAM 8.0.0 we were able to remove dependencies that the older version of the toolkit still enforced, i.e. jQuery, popper, etc.
  • IAM 8.0.0 was a major version and allowed some minimal breaking changes.