4.5. Customizing the Smart Card Enrollment User Interface

4.5. Customizing the Smart Card Enrollment User Interface

The Certificate System TPS subsystem has a generic external smartcard enrollment user interface which is formatted in standard HTML and Javascript. This makes the interface page appearance easy to customize.

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 default HTML page, shown in Example 4.2, “Customizing the Smart Card Enrollment User Interface”, can be edited to change the colors, images, and layout. 

<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 smartcard!
             After answering a few easy questions, you will be able to use your smartcard.
          </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 smartcard, you 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>
Example 4.2. Customizing the Smart Card Enrollment User Interface