How to customize PSS 4.1 or later

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

This PSD describes how to customize Password Self Service in PhenixID Server 4.1 and later.

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

NOTE: Changes will be made to files that 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).

System requirements

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

Overview

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.

Most things in the examples below will work with PSS 4.2, but a few of them will only be available from the 4.3 version. Please not the separate chapter for 4.1 customizations!

Depending on the configuration and desired customizations, 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).

Customizations

Logotype and favicon (AAA)

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 \mods\com.phenixidentity~phenix-prism-pwdreset~<VERSION>\web\index.html. Remark the default line and add new line pointing to the icon of choice. Example:

<!--link rel="icon" href="./favicon.ico"/-->
<link rel="shortcut icon" href="./images/mylogo.ico">
Click to copy

Add references to custom css file

Include the following just before the </body> in \mods\com.phenixidentity~phenix-prism-pwdreset~<VERSION>\web\index.html.

<link href="./static/css/custom.css" rel="stylesheet">
Click to copy

Complete example of css file with comments

The following css-file is an example of a customized pss. Please use this as a template for your 4.2.0 version or later.

The css files should be called custom.css and placed in mods\com.phenixidentity~phenix-prism-pwdreset~<VERSION>\web\static\css

/* This is a template css file for PSS created for version 4.3 2021-09-21. 
The default styling will be used for everything except the whats configured in this file.
Quick start, just search and replace the default colors:
Primary background color (active): #80b7ab
Secondary background color (inactive): #e0e0e0
Primary font color (active): #ffffff
Secondary font color (inactive):#747474
*/

/* Top bar wrapper (BBB) */ 
 header>.wrapper{
    border-bottom: 1px solid #80b7ab;
    border-top: 1px solid #80b7ab;
  }
  .Border-Color{
    border-color:#80b7ab!important ;
    border-top: 1px solid #80b7ab !important;
  } 
  
 /* (CCC) */
  #phenix-header-avatar{
    background: #80b7ab;
  }
 
  /* Color for language menu  (CCC) */
  ul#list > li[active="true"] {
     background-color: #80b7ab !important;
}
  
  /* (HHH) */
  #card-holder{
    border: 1px solid #80b7ab;
    border-color: #80b7ab!important
  }
  
  #new-password{
    -webkit-box-shadow: inset 2px 0px 0px 0px #80b7ab;
  }
  .MuiInputLabel-root.Mui-focused,
  .MainColor{
    color: #000!important
  }
 
 
 /* Password rule, inactive (FFF) */
  .label-button-first:not(.active),
  .label-button-second:not(.active)
   { 
	color: #747474 !important; 
    border-color: #747474 !important;
    background-color: #e0e0e0 !important; 
  }
  
   /* Password rule, active (EEE) */
    .label-button-first.active,
	.label-button-second.active
{   
    color: #ffffff !important; 
    border-color: #ffffff !important;
    background-color: #80b7ab !important;
  }


 /* submit password button (GGG) */
  #submit_password:not(:disabled){
    background: #80b7ab;
  }

/* Password rule, font size (EEE/FFF)*/
/*  .label-button-first,
  .label-button-second
   { 
	Font-size: 10px !important;
  }
  */  

   /* submit password button, font size (GGG) */
/*
 #submit_password{
	Font-size: 10px !important;
  }
  */ 
  
/* backgroud (DDD) */ 
 /* body, header, section{
    background: #fbfaf8!important;
  } */
 /*
  section {
    border: 0px!important;
    height: calc(-96px + 100vh)!important;
  }
 */
Click to copy

Version 4.1 specific

Color of buttons and menu (CCC / EEE / FFF / GGG)

To change the color of the border background and the buttons, the following css rule has to be applied in custom.css. 

/* Version 4.1.0 (including 4.0.3 and 4.0.4, but not 4.0.5) */
.jss69.active {
	background-color: #80b7ab !important; /* background color */
	color: black !important; /* Text colour */
	border-color: blue !important; /* border */
}

/* Password rules button background color */
.MuiButton-containedPrimary-92 {
    background-color: #80b7ab;
} 

/* Change password button */
.MuiButton-containedPrimary-92:hover {
    background-color: #80b7ab;
}

/* Menu color */
.MuiFab-root-39 {
    background-color: #80b7ab;
}

.MuiTypography-colorPrimary-27 {
    color: #80b7ab;
}

.MuiListItem-root-146.Mui-selected {
    background-color: #80b7ab;
}
Click to copy

Remove Change Language from menu (CCC)

To remove the possibility to choose language on the reset password page, the following css rule has to be applied in custom-body.css. 

/* Hide change language */
.jss35 {
	display: none;
}
Click to copy

Text and translations

Pwd-reset module

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~<VERSION>/web/locales/

To add a new language copy one of the language folders located in :
<PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism-pwdreset~<VERSION>/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.

"lang": {
             "en": "English",
             "sv": "Swedish",
             "de": "German",
             "fr": "French",
             "nl": "Dutch"
         }
Click to copy

Prism module

Some translations are inherited from the default webapp.
Edit the file translation.json (for the respective language), located in: <PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism~<VERSION>/locales/

To add a new language copy one of the language folders located in: <PhenixIDinstallationdirectory>/mods/com.phenixidentity~phenix-prism~<VERSION>/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.

Misc

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 lower case characters 

{\"name\":\"3-lower\",\"regex\":\"^.*[a-z]{3}.*$\",\"enabled\":true}
Click to copy

Please add translation for "3-lower" in translation.json, ex: "At least 3 lower case characters"

At least 3 uppercase characters 

{\"name\":\"3-upper\",\"regex\":\"^.*[A-Z]{3}.*$\",\"enabled\":true}
Click to copy

Please add translation for "3-upper" in translation.json, ex: "At least 3 upper case characters"

Comply with 3 out of 4 

{\"name\":\"complex\",\"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}
Click to copy

Please add translation for "complex" in translation.json, ex: "Must contain upper or lower case letter, number or special character"

Remove Change Language from menu 4.2.x and later (CCC)

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

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"
    }
}
Click to copy