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

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

We will make changes to the files:

<PhenixIDinstallationdirectory>/config/phenix-store.json

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

<PhenixIDinstallationdirectory>/bin/start-PhenixID.sh (Linux)

<PhenixIDinstallationdirectory>/bin/*.vmoptions (Windows)

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

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-selfservice~<VERSION>/web/index.html

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

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

Changes to the configuration file phenix-store.json should be made using the configuration portal.

NOTE: Changes made to the files above are located in modules for the current version of PhenixID Server. Meaning that the customizations made, needs to be manually transferred to the new module version when upgrade is made (except for the file phenix-store.json).

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. Background (please be aware that the instructions will apply to all auth http pages)

To change the logotype and background please edit the file:

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

and add the following line after the other css links:

<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
*/
.top .logo {
    display: block;
    float: left;
    background: url('../images/yourlogosmall.png');
    background-repeat: no-repeat;
    display: inline-block;
    height: 27px;
    width: 58px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
/* Alternative 1: Remove background image */
body {
    background: none;
    background-color: green;
}
/* Alternative 2: Change background image*/
body {
    background-color: #eee;
    background: url('../images/yourbackgroundimage.png') no-repeat center center fixed;
    -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

A URL pointing against an image can be used as well. 

3. Choice of Language

To remove the possibility to choose language on the login page find the following line (phenix-store.json):

"allowLanguageChange" : "true"

on the AUTHENTICATOR for Self Service and remove it from the configuration.

To force the language, set the following parameter in the startup file:

Linux (start-PhenixID.sh), JAVA_OPTS="${JAVA_OPTS} -Dcom.phenixidentity.globals.defaultLanguage=en"

Windows (.vmoptions), -Dcom.phenixidentity.globals.defaultLanguage=en

4. Text

To change the text, locate the language file:

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

Find the section <!-- User name & password template general --> and then customize the text according to your requirements.

5. "I am a human"

To remove this security checkbox, please follow this document:

http://document.phenixid.net/m/63284/l/683058-how-to-remove-the-security-checkbox-i-am-a-human

6. Self Service text

To change this text, edit the AUTHENTICATOR for the Self Service login and change the parameter "title", like the example below.

{
    "alias" : "eed7d3b6-9c5f-408e-96b7-b01410efd9a5",
    "name" : "PostUidAndPassword",
    "configuration" : {
      "pipeID" : "e176d457-26a6-4b28-83f0-83fc3ad12818",
      "successURL" : "/selfservice/",
      "translationKey" : "login.messages.information.body.enduser",
      "headingtranslationKey" : "login.messages.information.header.enduser",
      "title" : "My Company Self Service",
      "allowLanguageChange" : "true"
    }

1. Logotype

To change the logotype please edit the file:

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-selfservice~<VERSION>/web/index.html

and add the following line after the other css link:

<link rel="stylesheet" href="{{moduleContext}}/css/logo.css">

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

<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-selfservice

~<VERSION>/web/css

/* Change logo when logged in
   Important, change to correct height and width for image
*/
header.top .logo {
    background: url('../images/yourlogo.png');
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vertical-align: middle;
    margin-right: 10px;
    height: 27px;
    width: 58px;
}

2. Name

In phenix-store.json, search for com.phenixidentity~phenix-prism-selfservice.

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

3. Choice of Language

To remove the possibility to change language when logged in, add the following line:

"enable_language": "false"

to the module com.phenixidentity~phenix-prism used for Self Service, like this example:

{
    "name" : "com.phenixidentity~phenix-prism",
    "enabled" : "true",
    "config" : {
      "base_url" : "/selfservice",
      "auth_redirect_url" : "/selfservice/authenticate/afa27f8c-baff-4144-86f8-23a52e537e21",
      "http_configuration_ref" : "0ed4c639-732f-45ab-aca5-4acb85e6bf71",
      "module_refs" : "91e95ef3-55fe-466e-9626-4990c3914973",
      "enable_roles" : "true",
  "enable_language": "false"
    }

To change what is displayed and what can be edited on the Self Service page, use the configuration portal.

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

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