Example customizing the cancel button for the Airlock 2FA migration page

This article explains how to customize the Loginapp UI using a token migration page as an example.

When migrating from another 2nd factor to Airlock 2FA, a page displays a QR code scanned by the end-user with a mobile app (e.g. the Airlock 2FA app). By default, the page contains a cancel button which - when clicked - informs the user that the migration process has been canceled.

• The cancel button example is used to show:
• how to display additional information on the cancel operation.
• how to hide the cancel button altogether.

To be able to customize the example page using the Loginapp Design Kit, the corresponding authentication flow step must be equipped with a step ID:

1. Go to:
   Loginapp >> Applications and Authentication Flows
   then select the affected authentication flow and within it navigate to the Airlock 2FA Activation Step plugin.
2. Set a Step ID (the id my-custom-step is used in the examples below).


The step ID is used in the Loginapp Design Kit to define the scope of the customization.

0. To modify the texts displayed on the example page, do the following in the Loginapp Design Kit customization folder:
1. Open the language properties files in
   $CUSTOM_DIRECTORY/src/assets/custom/i18n
   and change the properties.
2. custom.step.my-custom-step.authentication.pages.messages.cancel: customize the message shown after the user clicks the Cancel button.
3. custom.step.my-custom-step.authentication.airlock-2fa.migration.instruction: customize the text shown on the migration page above the Qr code, e.g, instruct the user to scan the QR code with the mobile app.
4. custom.step.my-custom-step.authentication.airlock-2fa.migration.do-no-close: customize the text shown on the migration page below the QR code, e.g., instruct the user to wait until the app is activated.

0. To hide the cancel button on the example page, do the following in the Loginapp Design Kit customization folder:
1. Open
$CUSTOM_DIRECTORY/src/sass/custom/_custom-styles.scss
2. Add the following code snippet to suppress the Cancel button:

[data-iam-step-id='my-custom-step'] {
    #cancelButton {
        display: none;
    }
}