Help Center
Select Category

Categories

Kurtosys App
System Admin
DXM
Documents
Studio
Data
Communities
Studio for Office

Links

Contact Support
Kurtosys website

Authentication App – Customization

Customization

Every customer has their own set of styles and color palettes, their own logos, branding and marketing information which should be added into applications or posts. Some clients may also want additional security used in their portal like Assurance Images and/or Messages and Duo Authentication.

Customizations can be made by changing various components of the app configuration or styling configuration.

Some examples of customization include:

Table of Contents

Adding Extra Security Settings

Adding Assurance Setup

Assurance needs to be setup on the Authentication module under System Administration before it can be used in a Studio Authentication App.

  1. Click the Configuration tab.
  2. Click the <> (JSON) icon.
  3. Click the > (right) arrow to open the pane full-width
  4. In the UI pane on the left, click Components. You will notice a Disabled Actions section which currently includes Assurance Setup.

Assurance setup is currently disabled.

To enable it, do the following:

First, delete the whole “disabledActions" JSON section.

Note: Include the comma before the "disabledActions" section.

There are 2 ways to add elements to the Components section, either using the UI or by adding JSON.

Using the UI
  1. In the UI pane on the left, click Components.
  2. Click the edit icon to see the UI instead of the JSON.
  3. Click Add Element+.

  1. From the list of options that opens, check the checkbox next to Setup Assurances.
  2. Click Save.
  3. Click the Setup Assurances element.
  1. Click Add Element+ to add the Assurance UI for the user.
  2. Click Select All.
  3. Click Save.
 
Note: There is no standard wording for user instructions; add wording to each Text field, and set an Image Limit number.
  1. Click Instruction Text. This is to select an Assurance Image and/or Message.
  2. Click Add Element+.
  3. Select 1 of the options: Image Only, Message and Image, or Message Only.
  4. Click Save.
  1. After making your selection of Image and/or Message, add Instruction Text applicable to your selection.
  1. Click Save in the main pane to update the configuration.
  2. Add in a comment to describe your change.
  3. Click Confirm

A green Saved pop up bar will display across the bottom of the screen.

Adding Assurance via the config

  1. With the Configuration tab selected, click the <> JSON icon.
  2. Click the Components tab on the left to browse closer to the correct place to insert the JSON.
  3. Click the > right arrow to open the pane full width.
  4. Copy and Paste the JSON below into the appropriate space in the existing JSON config.
 "setupAssurances": {
    "heading": "Setup an assurance message",
    "imageLimit": 6,
    "instructionText": {
      "messageAndImage": "Setup a message and an image"
    },
    "messageRemainingCharactersText": "{count} characters available"
  },   

Note: The instruction text can be customized to be message only or image only and reworded, and the image limit can be changed.
  1. Click Save.
  2. Add a comment to describe your change, then click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

Adding Two-Factor Authentication (2FA) to the app

Using the UI
  1. Click the Configuration tab.
  2. In the UI pane on the left, click Components.
  3. Click Add Elements+.
  4. Select Mfa Setup options.
  1. Click Mfa Setup Backup – this is to set up instruction text for users who choose DUO call or text authentication.
  2. Add in text for the specified fields.
  1. Click Mfa Setup Push – this is to set up DUO Push authentication.
  2. Add in text for the specified fields.
  1. Click Save in the main pane to update the configuration.
  2. Add in a comment to describe your change.
  3. Click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

Adding 2FA via the config
  1. Click the Configuration tab.
  2. Click the <> (JSON) icon.
  3. Click the > (right) arrow to open the pane full-width
  4. In the UI pane on the left, click Components.
  5. Copy and paste the JSON below into the appropriate place in the existing configuration.
 "mfaSetupBackup": {
      "headingText": "Setup TEXT/CALL authentication",
      "skipLinkText": "Skip this step"
    },
    "mfaSetupPush": {
      "barcodeRequestFailText": "The barcode could not be retrieved. Please contact your administrator",
      "headingText": "Setup PUSH authentication",
      "skipLinkText": "Skip this step"
    },    

Note: the wording can be customized in the configuration.
  1. Click Save.
  2. Add a comment, then click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

Changing a Button Label

Change the “Forgot Username” button to “Forgotten Username”

  1. Click the Configuration tab.
  2.  Click the <> (JSON) icon.
  3. Press Command/Ctrl F to search for the appropriate text.

Or click the Components tab and scroll through to the applicable section.

  1. Click the > (right arrow) to open the pane to full width.
  2. Change the text in the quotes from “Forgot Username” to “Forgotten Username”.
  1. Click Save.
  2. Type in a comment, then click Confirm.

A green successful task bar will display across the bottom of the screen.

The wording will be changed in the app.

Changing a Field Prompt

When clicking a particular button like “Forgotten Username”, the expected action is that the user will be prompted for an email address so that their username can be sent to them, and then another button to send the email. The username prompt is displayed like a watermark in the field so that the user knows what information is required, and the button is positioned beneath this.

It is possible to change the wording for both the field and the button.

Change the Field Prompt “Email” to “Please enter your email address”

  1. Click the Configuration tab to begin.
  2. Click the <> (JSON) icon.
  3. Click the > (right arrow) to open the pane.
  4. Press Command/Ctrl F to search for the appropriate text.

Or click the Components tab and scroll to the appropriate section.

  1. Change the “placeholderText” below “forgotUsername” from “Email” to “Please enter your email address”.
  1. Click Save.
  2. Type in a comment then click Confirm.

A green Saved pop up bar will display across the bottom of the screen.

Click on the Forgotten Username text to see the new field prompt.

Changing a Color

Color is part of the styling configuration meaning it is must be changed using the Styles tab.

Change blue buttons to red

  1. Click the Styles tab to begin.
  2. Click the <> (JSON) button.
  3. Click the > (right arrow) to open the pane fully.
  4. Press Command/Ctrl F to search for the appropriate text.

Or click on Theme and scroll to the appropriate section.

Note: There will be numerous instances if you search for "color" so make sure you select the appropriate one. You can also search for the color code or name if you know it.

  1. Select the color to change.
  2. Replace it with the appropriate color code or color name, in this example “red”.
  1. Click Save.
  2. Enter a comment, then click Confirm.

A green pop up Saved bar will display across the bottom of the screen.

The Login button will now be red, and if you click on Forgotten Username or Forgot Password, the action buttons will also be red.

©2023 Kurtosys Systems

Youtube Linkedin Github