Bloomreach

Bloomreach Documentation version

This article covers a Bloomreach Experience Manager version 13. There's an updated version available that covers our most recent release.

Extend / Customize / Customize Login Page

Customize the Login Page

Introduction

Goal

Customize the appearance and behavior of the Bloomreach Experience Manager login page.

Background

Developers can customize the appearance and behavior of the Bloomreach Experience Manager login page at code level. This page describes the customization options.

The login page also has several runtime configuration options that don't require any code customizations.

Customize Appearance and Behavior

Customization of the login page is split up between changes to the login form (adding or removing fields) and additions to the page in general.

Change the Appearance of the Login Page

The login page can be customized by supplying a custom styling with CSS and/or adding elements to the page, like adding a custom message. This example is written using the default archetype project but is applicable to all projects with a custom CMS.

The first step is to create an HTML override. In the folder cms/src/main/resources/org/hippoecm/frontend/plugins/login (create if not exists) add a file named SimpleLoginPlugin.html (the actual file name depends on the login plugin you are using, by default the CMS ships with LoginPlugin and SimpleLoginPlugin). Add the following contents to the file:

<html xmlns:wicket="http://wicket.apache.org/">
<body>
<wicket:extend>
  <h2>This is a customized login page</h2>
</wicket:extend>
</body>
</html>

Rebuild and restart the project and you should see a custom message. Make sure the Maven build does not filter out .html files from src/main/resources if nothing changed.

Next add a bit of CSS. First create a CSS file at cms/src/main/resources/skin/custom-login.css and reference it from the HTML page by adding a <link> element to the <wicket:head>:

<html xmlns:wicket="http://wicket.apache.org/">
  <wicket:head>
    <link rel="stylesheet" type="text/css" href="skin/custom-login.css"/>
  </wicket:head>
<body>
<wicket:extend>
  <h2>This is a customized login page</h2>
</wicket:extend>
</body>
</html>

Add some custom styling (like defining a white background) to the CSS file:

.hippo-root .hippo-login-extend {
  background-color: #fff;
}

Now rebuild and restart the CMS and the background should be white.

Note: the custom CSS file is added to the <head> before the default CSS file that is shipped with the CMS. This requires you to make the custom CSS rules more explicit than those that are defined in the default CSS file, hence the .hippo-root prefix.

Customize the Login Form

To customize the implementation of the login form, a custom login plugin has to be created. This custom login plugin will instantiate a custom login form. In the folder cms/src/main/java add package org.example.login and create a file named CustomLoginPlugin.java with the following contents:

package org.example.login;

import java.util.List;

import org.apache.wicket.Session;
import org.apache.wicket.markup.html.form.RequiredTextField;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.PropertyModel;
import org.hippoecm.frontend.plugin.IPluginContext;
import org.hippoecm.frontend.plugin.config.IPluginConfig;
import org.hippoecm.frontend.plugins.login.LoginHandler;
import org.hippoecm.frontend.plugins.login.LoginPanel;
import org.hippoecm.frontend.plugins.login.LoginPlugin;

public class CustomLoginPlugin extends LoginPlugin {

    private String companyName;

    public CustomLoginPlugin(final IPluginContext context, final IPluginConfig config) {
        super(context, config);
    }

    @Override
    protected LoginPanel createLoginPanel(final String id, final boolean autoComplete, final List<String> locales,
                                          final LoginHandler handler) {
        return new CustomLoginForm(id, autoComplete, locales, handler);
    }

    class CustomLoginForm extends LoginPanel {

        public CustomLoginForm(final String id, final boolean autoComplete, final List<String> locales, final LoginHandler handler) {
            super(id, autoComplete, locales, handler);

            final IModel<String> companyNameModel = PropertyModel.of(CustomLoginPlugin.this, "companyName");
            final TextField<String> companyName = new RequiredTextField<>("companyName", companyNameModel);
            form.add(companyName);
        }

        @Override
        protected void loginSuccess() {
            Session.get().setAttribute("companyName", companyName);
            super.loginSuccess();
        }
    }
}

In the folder cms/src/main/resources/org/example/login (create if not exists) add a new HTML file named CustomLoginPlugin$CustomLoginForm.html with the following contents:

<html xmlns:wicket="http://wicket.apache.org/">
<body>
  <wicket:panel>
    <wicket:extend>
      <div class="hippo-login-form-label">
        <label>Company name</label>
      </div>
      <div class="hippo-login-form-input">
        <input wicket:id="companyName"/>
      </div>
    </wicket:extend>
  </wicket:panel>
</body>
</html>

Rebuild and restart the application. At this point, the default login plugin is still used. To change this login to the console and navigate to the node

/hippo:configuration/hippo:frontend/login/login/loginPage

and change the value of property plugin.class to org.example.login.CustomLoginPlugin. Save changes and the login page will have a new field ‘company name’.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?