Customized Benefits Login Page

PlanSource offers clients the ability to create a customized login web page for the PlanSource Benefits application. The customized login page can be hosted on the client's website using the HTML code sample below.

Functional Overview

Users normally navigate to the PlanSource Benefits application to login. The Benefits application serves as a generic login page. The user interacts with this page to provide login and forgot password functionality.

There are times or situations where a client desires to provide users with a login experience that is branded for the client. This can be accomplished by creating a customized HTML page that provides the login form. The login form can be part of a web page on a client’s website and can provide whatever styling the client would prefer.

The PlanSource Benefits login page provides hooks that will allow this functionality. The HTML code snippet below provides an example of this functionality.

Detail Description

The customized HTML login form requests a username and password that will send to the PlanSource Benefits login page. The code below provides sample HTML code to produce a form similar to this example. The styling of the form can be adjusted to match the desired page styling.

The code below also provides an example of suggested Forgot Password? functionality. This functionality can be provided on the same HTML page as the login form, or a different HTML page depending on the desired functionality. The code below offers a suggested method by showing and hiding the forgot password form on the same page as the login form.

A web developer should modify the code below for the specific desired functionality and styling.
There are three important areas of this functionality.

1. The form posting URL’s must be exactly as shown below in order for the Benefits application to respond correctly.
2. You must provide the URL to the customized login page in the two areas with values labeled "your customized login page url here" if you wish the user to be returned to the customized login page.
3. Optionally, a message can be returned to the customized login page in case of login failure.

The code below shows an example of displaying messages returned by the Benefits application to the customized login page using Ruby on Rails. If this functionality is desired on your login page, your web developer will need to adjust based on your website technology.

The URL in bold is an example of how an alert is delivered back to a customized login page. Your web developer will need to provide the returned message:
http://www.yourcompany.com/customized_page?alert=Invalid%20login%20 or %20password.

Code

<script>
  function showhide(id){
    if (document.getElementById){
      obj = document.getElementById(id);
      if (obj.style.display == "none"){
        obj.style.display = "";
      } else {
        obj.style.display = "none";
      }
    }
  }
</script>

<%= params[:alert] %>
<h3>Log In</h3>
<form action="https://benefits.plansource.com/logon" method="post">
  <table>
    <tr>
      <td><strong>Username</strong></td>
	     <td><input type="text" id="user_name" name="user_name" size="30"/><td>
    </tr>
    <tr>
      <td><strong>Password</strong></td>
      <td><input type="password" name="password" size="30"/></td>
    </tr>
    <tr>
      <td><input type="submit" name="Submit" value="Login"></td><td></td>
    </tr>
  </table>
  <input type="hidden" name="return_to" value="your customized login page url here">
</form>
<br />

<h3><a href="#" onclick="showhide('forgot'); return(false);">Forgot Password?</a></h3>
<div id="forgot"  style="display: none;">
<form action="https://benefits.plansource.com/forgotpassword" method="post">
  <table>
    <tr>
      <td><strong>Username</strong></td>
	     <td><input type="text" id="user_name" name="user_name" size="30"/></td>
    </tr>
    <tr>
      <td>== AND ==</td><td></td>
    </tr>
    <tr>
	     <td><strong>Email Address</strong></td>
      <td><input type="text" name="email_address" size="30"/></td>
    </tr>
    <tr>
      <td><input type="submit" name="Submit" value="Submit"></td><td></td>
    </tr>
  </table>
  <input type="hidden" name="return_to" value="your customized login page url here">

</form>
</div>