How to customize Self Service

This PhenixID Solution Document (PSD) is written for PhenixID Server.

This PSD describes how to customize Self Service in PhenixID Server.

The reader of this PSD should have some basic knowledge about PhenixID Server.

System requirements

  • PhenixID Server installed.
  • Version 1.5.x
  • PhenixID Self Service configured

Overview

The instructions in this document will help you customize Self Service in PhenixID Server.

We will make changes to the files:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/templates/login.template

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/lang/en/strings.xml

<PhenixIDinstallationdirectory>/config/phenix-store.json

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-otpenrollment~<VERSION>/web/locales/en/translation.json

So please make sure that you have a recent copy/backup of these files.

Customize the Login Self Service page

Customize the Login Self Service page

We can make changes to the parts of the web page numbered above. Follow the steps below for the respective parts of the page. Remember to have a backup of the files being changed.

1. Logotype and 2. Jumbo-image

To change the logotype please edit the file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/templates/login.template

and add the following line after the other css links (around line 15):

<link rel="stylesheet" href="/authenticate/res/css/yournew.css">

Use the example below and paste it into a new file called yournew.css. Then place this file in:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/css

/* Change logo
   Important, change to correct height and width for image
*/
.logo {
    height: 38px;
    width: 34px;
    background: url('../images/yourlogosmall.png');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 5px;
}
/* Remove jumbo-image */
.container .jumbotron, .container-fluid .jumbotron {
    display: none;
}
/* Change jumbo-image*/
.container .jumbotron, .container-fluid .jumbotron {
    background: url("../images/yourbigimage.jpg") no-repeat center;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/yourbigimage.jpg', sizingMethod='scale');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

So the images (in red) that is referenced in the example should be copied into:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/images

If the lines:

.container .jumbotron, .container-fluid .jumbotron {
    display: none;
}

is not uncommented or removed, there will be no bar displayed. If they are removed the bar will be displayed using the configuration for "Change jumbo-image".

3. Choice of Language

Changes to the language choice will be added in upcoming release.

4. Text language

To change the text, locate the language file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>/web/res/lang/en/strings.xml

Find the sections <!-- User name & password template general --> and Welcome to Self Service, then customize the text according to your requirements.

 

Customize the Self Service page

Customize the Self Service page

To change what is displayed and what can be edited on the Self Service page, follow the instructions below.

The changes will be made to the file:

<PhenixIDinstallationdirectory>/config/phenix-store.json

So please make sure to have a copy of this file.

In phenix-store.json, search for base_url" : "/otpenrollment. We will make the changes in this section.

To change the name displayed for the page in the  web browser (not displayed above) change the value "display_name" : "Self Service of OTP" to reflect your text, for example "display_name" : "CompanyName Self Service".

To change the text "PhenixID Self Service" in the bar, change the text in "display_name" : "PhenixID Self Service".

By default users are allowed to see and edit the information in E-mail and SMS/Voice. To change this behaviour edit the values for "enabled" : "true" and "read_only" : "false" on the respective methods.

If you want to customize the text for the respective enrollment methods, edit the file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-otpenrollment~<VERSION>/web/locales/en/translation.json