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
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
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