Customize the Login Page

Overview

This page explains how to customize the appearance and behavior of the Bloomreach Content login page at the code level.

Note: For runtime configuration options that do not require code changes, see Configuring the Login Page.

Customization Options

You can customize the login page by modifying its appearance (such as adding messages or custom styles) or by changing the login form itself (such as adding or removing fields).

To modify the appearance of the login page, you can override the default HTML and add custom CSS. The following steps use the default archetype project, but the approach applies to any project with a custom CMS.

Create an HTML Override

In your project, create the directory cms/src/main/resources/org/hippoecm/frontend/plugins/login if it does not exist. Add a file named DefaultLoginPlugin.html with the following content:
```
<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 your project. The login page will now display the custom message.

Note: Ensure that your Maven build does not filter out .html files from src/main/resources.
Add Custom CSS

Create a CSS file at cms/src/main/resources/skin/custom-login.css. Reference this file from your HTML override by adding a <link> element inside the <wicket:head> section:
```
<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 your custom styles to the CSS file. For example, to set a white background:
```
.hippo-root .login-extend {
  background-color: #fff;
}
```
Rebuild and restart the CMS. The background of the login page will now be white.

Note: The custom CSS file is loaded before the default CMS CSS. To ensure your styles take effect, use more specific selectors (such as the .hippo-root prefix).

To change the login form's implementation, you need to create a custom login plugin that instantiates a custom login form.

Create the Custom Login Plugin

In cms/src/main/java, add the package org.example.login and create a file named CustomLoginPlugin.java with the following content:

package org.example.login;

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.LoginConfig;
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);
    }

    protected LoginPanel createLoginPanel(final String id, final LoginConfig config, final LoginHandler handler) {
        return new CustomLoginForm(id, config, handler);
    }

    class CustomLoginForm extends LoginPanel {

        public CustomLoginForm(final String id, final LoginConfig config, final LoginHandler handler) {
            super(id, config, 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();
        }
    }
}

Create the Corresponding HTML Template

In cms/src/main/resources/org/example/login (create the directory if needed), add a file named CustomLoginPlugin$CustomLoginForm.html with the following content:

<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>

Register the Custom Plugin

Rebuild and restart the application. By default, the system still uses the original login plugin. To activate your custom plugin:
- Open the console and navigate to the node:
```
/hippo:configuration/hippo:frontend/login/login/loginPage
```
- Change the value of the plugin.class property to:
```
org.example.login.CustomLoginPlugin
```
- Save your changes.
The login page will now include the new "company name" field.

Verification

After rebuilding and restarting, verify that your changes appear on the login page.
For form customizations, confirm that the new field is present and that its value is handled as expected.

Customize the Login Page

Overview

Customization Options

Change the Appearance of the Login Page

Customize the Login Form

Verification

Related Topics