• PhenixID Server installed.
• Version 3.2 or later
• PhenixID Password Self Service configured

The instructions in this document will help you customize Password Self Service in PhenixID Server. Changes can be made to the parts of the pages described below.

Depending on the configuration and desired customisations, we will make changes to some, or all of the files mentioned in the instructions.
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 page numbered above. Follow the steps below for the respective parts of the page. Remember to have a backup of the files being changed.
Depending on the methods used, different templates will be changed depending on the configuration. Such as:
idpdiscovery.template
login.template
ot_login.template

1. Logotype and 2. Background (please be aware that the instructions will apply to all auth http pages using this template)

To change the logotype and background, please edit the file:
<PhenixIDinstalldir>/mods/com.phenixidentity~auth-http<VERSION>/templates/<templateofchoice>
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:
"allowLanguageChange" : "true"
on the AUTHENTICATOR for PhenixID PSS and set it to false.
This is done in the Configuration portal/Advanced tab/Authentication - HTTP.
Add the parameter to the configuration, in case it’s not already present.

Example:

{
       "id": "245c1446-9122-4617-a7bb-919cf6bf88c0",
       "alias": "UidPwd",
       "name": "PostUidAndPasswordSAML",
       "displayName": "SAMLuidpwd",
       "configuration": {
               "allowLanguageChange": "false",
               "pipeID": "8cfe51a3-9579-4e88-95ab-217a683a93dc",
              "idpID": "d91f7721-9b65-453a-9fdf-8198301b21c8"
              }
}

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 corresponding to what you want to change.

Service needs to be restarted after changes has been made.

5. Name and Icon on Authentication Methods

If two or more Authentication Methods has been configured, the names and icons of those can be changed. This is done on the Scenario in Configuration Manager.
Under Applications/Password self service. Go to the tab Authentication methods.
Set the desired description and choose an icon.

Sample icons are located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>web\res\images\icons

6,7 and 8. Logotype and color

Logotype is set in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>\web\res\stylesheets\templates\<tempalteused>.
Icons are located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~auth-http~<VERSION>\web\res\images\icons

Color is set in the same file, locate the two sections:

main .card {
  background-color: #288a49;
  background: #288a49;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.info {
  overflow: auto;
  overflow-x: hidden;
  background: #285a8a;
  color: #FFFFFF;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.33px;
  padding: 40px;
  justify-content: center;
  flex-direction: column;
  display: flex;
  width: 100%;
  order: 1;
}

1. Logotype and favicon

Icon is called default_blue.png and is located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-pwdreset~<VERSION>\web\images

Favicon can be changed in index.html. Remark the default line and add new line pointing to the icon of choice. Example:

2. Language

To remove the possibility to choose language on the reset password page, add the line:
"enable_language": "false",
on the module for PhenixID PSS.

This is done in the Configuration portal/Advanced tab/Modules.

Add the parameter to the configuration, like this example:
{
"name": "com.phenixidentity~phenix-prism",
"enabled": "true",
"config": {
"base_url": "/pss",
"enable_language": "false",
"auth_redirect_url": "/pss/authenticate/77ad39d3-5f5f-425d-b50e-fdad2e073da5",
"http_configuration_ref": "95c7aa57-7a0b-414a-85e1-c5468277bb33",
"enable_roles": "true",
"standalone": "true",
"module_refs": "0b5f8151-9f82-4877-a2a7-0b9a393ecc6c"
}
}

3. Text and language

To  change the texts, add subtitle on password page and result page, and add/remove/change settings for language, edit the file translation.json (for the respective language), located in:
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-pwdreset~3.2.0/web/locales/

To change the text size, add the following to index.html:
<style>#card-holder>div>form>div>div>div>div.ui.tiny.right.labeled.button > span.ui.label.tiny.basic {Font-size:10px!important;
}</style>

To add a new language copy one of the language folders located in :
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-pwdreset~3.2.0/web/locales/
Rename the folder to the new language code, for example to nl for Netherlands.
Edit the translation.json file in the new folder and translate all text variables to the new language.
Add the new language to the lang section of all the translation.json in every language folder see example below, "nl": "Dutch" have been added.

4. Background color:

Background color can be changed in the index.html page, under the head section, add:
<style>
body, section, section + #main{background-color: red!important;}
</style>

Can also be used with #1a9c12 and rgb(40, 90, 138). Just replace red with your color of choice. 

5. Top border background color and color of buttons:

To change the color of the border background and the buttons, start by adding a reference to new css in index.html:
<link href="./static/css/my.css" rel="stylesheet">
Place it at the end of the <body> section.

Then create my.css in /static/css, like this example:

Where first section is for the border and last section is for the buttons.

6. "Change password" button:

To change the color of the button "Change password", add the section below to index.html, in the <head> section:

7. Popup "Failed to reset password":

If the password is not accepted, a popup is displayed:

To change the color here, add the following to my.css (number 5 above):

Adding control against global breach list

Even though a password meets the local policies, there is still the possibility that the password has been part of a password leak .
It is possible to enable online control for breach validation checks.
If password has been found in prior data breach the user will be notified and can choose another password.

Enable external password check using the parameter:
"pwdreset_hint": "true"
On module:
"name": "com.phenixidentity~phenix-prism-pwdreset"

More information here.

Example of different password policies

Default policy rules can be changed in the scenario for PSS, under "Password Policy".
In case other password policy are needed they can be added through the Advanced tab, Modules and "com.phenixidentity~phenix-prism-pwdreset".
Add the desired regex to "pwdreset_rules", like the examples below.

At least 3 lowercase characters:
{\"name\":\"At least 3 lowercase characters\",\"regex\":\"^.*[a-z]{3}.*$\",\"enabled\":true}

At least 3 uppercase characters:
{\"name\":\"At least 3 uppercase characters\",\"regex\":\"^.*[A-Z]{3}.*$\",\"enabled\":true}

Comply with 3 out of 4:
{\"name\":\"Must contain upper or lower case letter, number or special character\",\"regex\":\"^(?:(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9]).*)|(?:(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[0-9]).*)|(?:(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[^a-zA-Z0-9]).*)|(?:(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9]).*)|(?:(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9]).*)$\",\"enabled\":true}