Customising the Pentaho User Console – Part 1.

Posted under BI Server, Open Source, Pentaho, Tutorials, User Console

For the past couple of weeks I have been playing around with customising the Pentaho User Console (PUC) Version 3.5.x and to follow it up I thought I would put together a multi-part post on the topic. Each post will cover one aspect of customising the PUC, these include:

In this post I will show you how to customise the default login dialog and how to create a new login page.

Customising the Login Dialog

The login dialog is the form which pops up when you click on the Login button. This is part of the default PUC login page.

Pentaho User Console Login Form

With modifications to the loginsettings.properties file it is possible to:

  • Modify the users of the Sample User select box
  • Remove the Sample User select box

Modify Sample Users Select Box

To modify the users which appear in the Sample Users select box first locate the loginsettings.properties file which is found under the \tomcat\webapps\pentaho\mantleLogin\ directory and open up the file in a text editor:

# this file contains settings to configure the login dialog
# flag to turn on/off show users list (overrides pentaho.xml)
#showUsersList=true
# launch PUC in new window (default setting)
openInNewWindow=false
# sample users (be sure that each group has the same # of items as the rest)
userIds=joe, suzy, pat, tiffany
userDisplayNames=Joe (admin), Suzy, Pat, Tiffany
userPasswords=password, password, password, password

At the time of testing this the openInNewWindow option did not work.

To modify the users which appear in the select box you will need to make changes to three lines (you do not need to stop the Apache-Tomcat server before making any modifications):

userIds=joe, suzy, pat, tiffany
userDisplayNames=Joe (admin), Suzy,  Pat, Tiffany
userPasswords=password, password, password, password

For example I would like to:

  • Remove all users except for joe (Joe (admin))
  • Add a new user with the
    • userId of prashant (the userId which is stored in the Hibernate database)
    • userDisplayName of Prashant Raju (the value displayed in the select box)
    • userPassword of analysethis (the password which is stored in the Hibernate database against the userId prashant)

After making modifications the loginsettings.properties file now looks like this:

# this file contains settings to configure the login dialog
# flag  to turn on/off show users list (overrides pentaho.xml)
#showUsersList=true
# launch PUC in new window (default setting)
openInNewWindow=false
# sample users (be sure that each group has  the same # of items as the rest)
userIds=joe, prashant
userDisplayNames=Joe (admin), Prashant Raju
userPasswords=password, analysethis

Save and close the file, clear your web browser’s cache and refresh the login page. The login dialog now looks like this:

Login form with modified select box

Remove Sample Users Select Box

To remove the Sample Users select box you will need to make modifications to the loginsettings.properties file (you do not have to stop the Apache-Tomcat server). To remove the Sample Users select box you will need to make changes this line:

#showUsersList=true

After making modifications the loginsettings.properties file now looks like this:

# this file contains settings to configure the login dialog
# flag to  turn on/off show users list (overrides pentaho.xml)
showUsersList=false
# launch PUC in new window (default setting)
openInNewWindow=false
#  sample users (be sure that each group has the same # of items as the  rest)
userIds=joe, suzy, pat, tiffany
userDisplayNames=Joe  (admin), Suzy, Pat, Tiffany
userPasswords=password, password,  password, password

Save and close the file, clear your web browser’s cache and refresh the login page. The login dialog now looks like this:

Login form without sample users select box

Customising the Login Page

If you would like to modify the look of the login page to look similar to a specific style you will need to modify the PUC_Login.JSP file which is found under the /tomcat/webapps/pentaho/jsp directory.

Before we move onto the code here is a screenshot of the new login page which we will be creating:

New Login Page

You can click here for a HTML/CSS version (JSP code is commented out) of the above screenshot or below is a JSP/HTML/CSS version which you are able to copy and paste – make sure you read through the comments:

<%@ page language="java" import="org.springframework.security.ui.AbstractProcessingFilter,org.springframework.security.ui.webapp.AuthenticationProcessingFilter,org.springframework.security.ui.savedrequest.SavedRequest,org.springframework.security.AuthenticationException,org.pentaho.platform.uifoundation.component.HtmlComponent,org.pentaho.platform.engine.core.system.PentahoSystem,org.pentaho.platform.util.messages.LocaleHelper,org.pentaho.platform.api.engine.IPentahoSession,org.pentaho.platform.web.http.WebTemplateHelper,org.pentaho.platform.api.engine.IUITemplater,org.pentaho.platform.web.jsp.messages.Messages,java.util.List,java.util.ArrayList,java.util.StringTokenizer,org.apache.commons.lang.StringEscapeUtils,org.pentaho.platform.web.http.PentahoHttpSessionHelper" %>
<%
            // If the User is already logged in redirect to PUC Home
            String remoteUser = request.getRemoteUser();
            if (remoteUser != null && remoteUser != "") {
                response.sendRedirect("/pentaho/Home");
            }
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <title>Login to Steel Wheels - Pentaho User Console</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="gwt:property" content="locale=<%=request.getLocale()%>">
        <!-- Uncomment to put your own favicon
        <link rel="shortcut icon" href="/pentaho-style/favicon.ico" /> -->
        <style type="text/css" media="screen, projection">
            *{margin:0;padding:0;}
            html{font-size:100%;}
            body{background:#fff;color:#222;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;text-align:center;font-size:75%;}
            h2{font-size:2em;margin-bottom:0.75em;}
            .error{background:#FBE3E4;border:2px solid #FBC2C4;color:#8a1f11;margin-bottom:1em;text-align:center;width:332px;padding:6px;}
            #login-logo{padding:40px 0;}
            #login-form{background:#fff;border:1px solid #ccc;text-align:left;width:350px;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-box-shadow:0 1px 3px #ddd;-webkit-box-shadow:0 1px 3px #ddd;margin:0 auto;padding:15px 15px 25px;}
            #login-form h2{text-align:center;padding:5px 0;}
            #login-form .field{width:335px;margin:15px 0;}
            #login-form .field label{color:#777;display:block;font-size:1em;font-weight:700;margin-bottom:5px;text-align:left;}
            #login-form .field input{border:1px solid #ccc;font-size:1.2em;width:100%;padding:5px;}
        </style>
        <script type="text/javascript">
            // If the Username and Password values are blank then alert();
            // This can be replaced with an AJAX solution
            function checkForm(form) {
                if(form.j_username.value == "" && form.j_password.value == "") {
                    alert('You can not have a blank Username and Password!')
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <!-- Login Logo -->
        <div id="login-logo">
            <img src="/sw-style/active/sw_logo.jpg" alt="Steel Wheels Logo">
        </div>
        <!-- Login Form -->
        <div id="login-form">
            <!-- Header -->
            <h2>Login to Steel Wheels</h2>
            <!-- If the login_error URL parameter is set then show error box -->
            <% if (request.getParameter("login_error") != null) {%>
            <div class="error">Authentication failed! Please try again!</div>
            <% }%>
            <!-- Form -->
            <form id="sw-login" method="POST" action="/pentaho/j_spring_security_check">
                <!-- Username -->
                <div class="field">
                    <label for="username">Username</label>
                    <input id="username" name="j_username" type="text">
                </div>
                <!-- Password -->
                <div class="field">
                    <label for="password">Password</label>
                    <input id="password" name="j_password" type="password">
                </div>
                <!-- On click on the submit button run the checkFrom function -->
                <input type="submit" value="Login" onclick="return checkForm(form);">
            </form>
        </div>
    </body>
</html>

Below I have separated the code (seen above) into important parts, this will help you get a better understanding on the purpose of each section of code.

This section of code uses the getRemoteUser() function to check if the user loading the login page isn’t already logged in – if they are logged in they are redirected to the PUC home URL.

<%
// If the User is already logged in redirect to PUC Home
String remoteUser = request.getRemoteUser();
if (remoteUser != null && remoteUser != "") {
    response.sendRedirect("/pentaho/Home");

}
%>

The following piece of code is a JavaScript function which checks if the Username and Password of the login form are empty and if they are create an alert box to let the user know. This function was used because if a user submits an empty form a 500 error is thrown back by Spring Security – this isn’t as intuitive as an AJAX solution so if you would like to see an AJAX example let me know.

function checkForm(form) {
    if(form.j_username.value == "" && form.j_password.value == "") {
        alert('You can not have a blank Username and Password!')
        return false;
    }
}

To call the above function (checkForm()) it is attached to the onclick event of the submit button:

<input type="submit" value="Login" onclick="return checkForm(form);">

This section of code checks to see if an error has occurred when trying to login i.e. wrong password. When an error occurs it is sent back as a URL parameter login_error, the value of this parameter is a number (in this example I gave a generic error response to any number). If the login_error URL parameter value is not null it then shows the error message (div).

<% if (request.getParameter("login_error") != null) {%>
<div class="error">Authentication failed! Please try again!</div>
<% }%>

The last and most important section of code is the login form. It should be noted that the form action points to the /pentaho/j_spring_security_check URL and the username and password names are j_username and j_password – these are essential as they are needed by Spring Security to authenticate user credentials correctly.

<form id="sw-login" method="POST" action="/pentaho/j_spring_security_check">
    <!-- Username -->
    <div class="field">
        <label for="username">Username</label>
        <input id="username" name="j_username" type="text">
    </div>
    <!-- Password -->
    <div class="field">
        <label for="password">Password</label>
        <input id="password" name="j_password" type="password">
    </div>
    <!-- When the submit button is clicked run the checkForm function -->
    <input type="submit" value="Login" onclick="return checkForm(form);">
</form>

Well that’s it for now. Stay tuned for the next part which outlines how to change the default messages which appear throughout the PUC (including the login dialog, loading bar, titles etc.).

Enjoy.

Posted by Prashant Raju on Feb 14, 2010 — 9 Comments — Share

9 Comments for “Customising the Pentaho User Console – Part 1.”

  1. Posted by AnOs on Mar 2, 2010

    Hi,

    I try that and it’s working.

  2. Posted by Indian on Mar 17, 2010

    Nice Post, thank you, its a good starter.

  3. Posted by Mateo on Mar 20, 2010

    Very Helpful Post and Website in General.
    It’s a great resource for those of us learning Pentaho!

    Keep up the great work Prashant!

  4. Posted by Sam on Jun 17, 2010

    Hi,

    your articles about pentaho are really very interesting und well written!

    But there is one thing which is not covered yet: What do you have to do if you dont want to be redirected to the PUC but to another website (i.e. dashboard page)?

    Thanks for your efforts and keep up the good work!

    Regards,
    Sam

  5. Posted by Prashant Raju on Jun 17, 2010

    Sam

    I did :-) . Check out this post (Part 4 of the series).

    Prashant

  6. Posted by santenkelapa on Aug 11, 2010

    Like this …!
    all your artikel very good ..

  7. Posted by Kaushik on Aug 27, 2010

    How can we remove the login page?

  8. Posted by omar on Aug 27, 2010

    hi ,

    is it possible to change the admin( joe ) to myname ??

    thanks

  9. Posted by Prashant Raju on Aug 30, 2010

    @Kaushik

    You can enable no authentication but not sure about disabling the login page.

    Prashant.

Post a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">