3.5. Customizing the Smart Card Enrollment User Interface
Red Hat Certificate System (specifically the TPS subsystem) ships with a generic, external smart card enrollment user interface (UI). This UI consists of HTML and Javascript, and consequently can be customized to suit individual deployments.
The default HTML file for the Enrollment UI is located at /var/lib/rhpki-tps/cgi-bin/home/Enroll.html
The UI references resources such as images and Javascript files within its code. These resources are located in /var/lib/rhpki-tps/docroot/home/
The following is an extract from the default UI HTML file, and it includes comments on how you might customize it to suit your requirements.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel=stylesheet href="/home/style.css" type="text/css"> <!-- Change the title if desired --> <title>Enrollment</title> </head> <script type="text/JavaScript" src="/home/util.js"> </script> <body onload="InitializeBindingTable();" onunload=cleanup();> <progressmeter id="progress-id" hidden="true" align = "center"/> <table width="100%" class="logobar"> <tr> <td> <!-- Use customized logo here... --> <img alt="" src="/home/logo.jpg"> </td> <td> <p class="headerText">Smartcard Enrollment</p> </td> </tr> </table> <table id="BindingTable" width="200px"align="center"> <tr id="HeaderRow"> </tr> </table> <!-- Insert customized descriptive text here. --> <p class="bodyText">You have plugged in your smart card! After answering a few easy questions, you will be able to use your smart card. </p> <p class="bodyText"> Now we would like you to identify yourself. </p> <table> <tr> <td><p >LDAP User ID: </p></td> <td> </td> <td><input type="text" id="snametf" value=""></td> <td> </td> <td><p>LDAP Password: </p></td> <td> </td> <td><input type="password" id="snamepwd" value=""></td> </tr> </table> <p class="bodyText"> Before you can use your smart card, you will need a password to protect it.</p> <table> <tr> <td><p >Password:</p></td> <td><input type="password" id="pintf" name="pintf" value=""></td> <td><p >Re-Enter Password:</p></td> <td><input type="password" id="reenterpintf" name="reenterpintf" value=""></td> </tr> </table> <br> <table width="100%"> <tr> <td align="right"> <input type="button" id="enrollbtn" name="enrollbtn" value="Enroll My Smartcard" onClick="DoEnrollCOOLKey();"> </td> </tr> </table> </body> </html>