Customize Login Page and Welcome Page

Introduction

The generic openBIS Web application comes with a start page which shows the openBIS logo, a login form and a footer with a link to a help page:

After login the application shows a welcome page together with a history of recently viewed entities. The standard welcome page is just the text "Welcome to openBIS":

These two pages can be customized by creating a core plugin Web app named start_page.

It is also possible to disable login by the presence of a file named nologin.html in <openBIS installation path>/servers/openBIS-server/jetty/etc/.

How to customize Login Page and Welcome Page

Preparation

First you have to create a new core plugin module with an arbitrary name, say my-start-page. It should contain a Web app named start-page. Here is the file structure in the folder <openBIS installation path>/servers/core-plugins (for more details see Core Plugins):
```
my-start-page
  1
    as
      webapps
        start-page
          html
          plugin.properties
```
The module name my-start-page is arbitrary but the core plugin name start-page is fixed.
The plugin.properties has just the line
```
webapp-folder = html
```
Next you copy the existing index.html (to be found in folder <openBIS installation path>/servers/openBIS-server/jetty/webapps/openbis) into the folder html. In addition copy also all files in folder <openBIS installation path>/servers/openBIS-server/jetty/webapps/openbis/custom) into the folder html.
Add my-start-page (the name of the new module) to the comma-separated list of property enabled-modules of <openBIS installation path>/servers/core-plugins/core-plugins.properties.

After starting up openBIS you will find that the original file index.html and folder custom in <openBIS installation path>/servers/openBIS-server/jetty/webapps/openbis have been replaced by symbolic links into the Web app.

Before starting to customize the login page or the welcome page it is a good idea to make a backup of the existing content of the folder html of the Web app.

Developing customized Login Page

After the preparation step you can start to modify index.html and observe the result after reloading it in the Web browser. Note, that the index.html isn't shown as a brief look into its code might suggest. In fact the start page is created by Javascript using various <div> elements defined in index.html. All these elements have to be inside the invisible <div> element with id openbis_login_div. The following <div> elements are recognized and used if present.

The <div> element openbis_login_form is mandatory.

ID	Description
`openbis_instance`	The name of the openBIS instance. It will be placed near the openBIS logo.
`header`	HTML which just appears above the openBIS logo. If not present the file `loginHeader.html` will be used. It is by default empty.
`footer`	HTML which appears after the login form. By default it shows the text "Click here for help." where "here" is a link to the file `help.html`.
`openbis_login_form`	This form should have two fields with the ids `openbis_login_username` and `openbis_login_password`. The submit button should have the id `openbis_login_submit`. Every thing else can be modified.

Here is an example which illustrates the layout of the various elements:

The corresponding index.html reads:

index.html

<!DOCTYPE html>
<html>
<head>
<title>my openBIS for HCS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/gxt-gray.css" />
<link rel="stylesheet" type="text/css" href="resources/css/debug-panel.css" />
<script language="javascript" src="ch.systemsx.cisd.openbis.OpenBIS.nocache.js"></script>
<!-- This snippet should be automatically included in all the HTML that wishes to use the debug panel. -->
<script type="text/javascript" language="javascript">
    var stats = window.__stats = [];
    window.__gwtStatsEvent = function(evt) {
      stats[stats.length] = evt;
      var listener = window.__stats_listener;
      listener && listener(evt);
      return true;
  }  
</script>

</head>
<body>
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<div id="openbis_login_div" style="visibility: hidden">
<div id="openbis_instance" style="background-color: #fea">id = openbis_instance</div>
<div id="header" style="background-color: #fea">id = header</div>
<div id="footer" style="background-color: #fea">id = footer</div>
<form id="openbis_login_form" method="post" action="javascript:;" style="background-color: #fea; border: 1px solid blue">
<center>id = openbis_login_form</center>
<table cellspacing="5">
	<tbody>
		<tr style="padding-bottom: 5px">
			<td><span>ETH Account:</span></td>
			<td><input type="text" id="openbis_login_username" name="openbis-username" style="width: 150px;"></td>
		</tr>
		<tr style="padding-bottom: 5px">
			<td><span>ETH Password:</span></td>
			<td><input type="password" id="openbis_login_password" name="openbis-password" style="width: 150px;"></td>
		</tr>
	</tbody>
</table>
<input style="margin-left: 200px" type="submit" id="openbis_login_submit" value="Login">
</form>
</div>
</body>
</html>

Developing customized Welcome Pages

There are three HTML files for welcome pages: welcomePage.html, welcomePageSimpleGeneric.html and welcomePageSimpleScreening.html. The first will be used in normal view mode. That is, when openBIS application is a normal GUI application with menu bars. The two others will be used in simple view mode. That is, when openBIS application looks like a normal HTML page without any menu bar (see also Simple View Mode of openBIS). welcomePageSimpleScreening.html is used when technology screening is enabled otherwise welcomePageSimpleGeneric.html is used.

Here is an example:

The content of welcomePage.html of the example reads:

welcomePage.html

<div style="margin-top: 150px; font-size: large; text-align: center; background-color:#fea">
file = welcomePage.html
</div>

Disable login

This feature is available in S198+ and 13.04.12+.

In order to inform users of openBIS that soon a shutdown of the service is needed log-in can be disabled. A disabled openBIS will show some information instead of the login form on the login page. Any authentication attempts via APIs will fail with the error message 'Login is disabled by the administrator'.

Login is disabled if the file <openBIS installation path>/servers/openBIS-server/jetty/etc/nologin.html is present. The content of the file can be any valid HTML. It will replacing the login form on the login page.

In addition all session will expire after 10 minutes of inactivity. This default time out can be modified by the property session-timeout-no-login in service.properties of openBIS AS. Note: The value of {{session-timeout-no-login}} should be less than 30. Otherwise, the session will not expire before the normal session time out because the client pings the server every 30 minutes. The standard openBIS Web app shows a pop-up dialog with the content of nologin.html when pinging failed because of expired session during no-login state.

Example:

prompt> echo "<div style='color:red'>NO LOGIN</div>" > <openbis installation path>/servers/openBIS-server/jetty/etc/nologin.html

Login screen:

Removing of this file enables login again.

Page tree