Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

Customizing the Login component

In this tutorial you will learn how to customize the Login component following the technical documentation.

The task will be very simple. See the documentation for further details about customizing this component, along with examples.

Locating the component into your application

Starting from an existing ADF application, the Login component, like any other component, is stored in a subfolder of the app folder. In the Alfresco Content App it is stored in the /src/app/components/login path. In an ADF app created with Yeoman it is stored in the /src/app/login path.

Once you have located the Login component for your application, you can customize it as described below.

Changing the header

As with every regular Angular Component, you can customize the Login component can be customised via CSS, HTML and Typescript. In this simple example, we will customize the header (as described also in the technical documentation).

Open the login.component.html file and change the content to match the following source code:

<adf-login ...>
    <adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
</adf-login>

After saving the file, the login form will look like this:

login_header

More examples

As mentioned earlier, this is a very basic example and the Login component can be customized much more extensively than this. For a complete and detailed description, full of examples, check the technical documentation about the component. This describes every customization available for the Login component.

Interested in trying Alfresco?

Try Now