Setting-up a custom login page on Alfresco Community 5

4 or 5 months ago, i got tired of the traditionnal Alfresco Community login page and wanted to implement my own styling options. I began to search how to achieve that on Alfresco 5 and landed on a post on Francesco Corti’s blog (a major community member who developped an audit addon for Alfresco known as AAAR) where he explains how to achieve this objective on Alfresco Community 4.2c. I was really disappointed when i discovered those instructions where outdated and didnt work anymore with Alfresco 5, wich has another mechanism to override this page (see the Alfresco official documentation about overriding Share login page).The new way was far more difficult for me, regarding my limited technical knowledge. That’s why i want to contribute and help new Alfresco users like me, who frequently ask the question about the custom Share login page.

Setting up your tools

To develop for Alfresco, you will need the Maven Alfresco SDK. The current version is 2.1 (Alfresco Community 5.0d) and supports Java 8. The previous version is meant only to support java 7 (Alfresco Community 5.0c). I will not explain here how to set up the SDK as there are many ressources that are very accurate concerning this part of the project. You can refer to Jeff Potts Alfresco developper tutorial series. The first section is dedicated to how to set up Maven, the remote Maven Central Repository and how to generate alfresco Archetypes.

Starting your project

Create a Share AMP archetype (wether 2.0 or 2.1 according to your needs) in Eclipse (with Maven integration) or import it in Eclipse after you’ve generated it with Maven. Give it a group ID (mine is com.ad and a project artifact ID (mine is simply login). you can give them the names you want.

You can now see the folder structure of your Share archetype in the Eclipse project explorer. Lets now have a look at the files you are going to create for the project.

In /src/main/amp/config/alfresco/web-extension/site-data/extensions/

create a file named login.xml  with the following code snippet:

<extension>
    <modules>
        <module>
            <id>Login Module</id>
            <customizations>
                <customization>
                    <targetPackageRoot>org.alfresco.components</targetPackageRoot>
                    <sourcePackageRoot>com.ad.components</sourcePackageRoot>
                </customization>
            </customizations>
            <auto-deploy>true</auto-deploy>
        </module>
    </modules>
</extension>

The <id> element represents the purpose of your module. In our case, it is to customize the login page so i’ve decided to name it Login Module, but you are free to name it however you want with something that makes sense to you The targetPackageRoot element specifies wich default component your customization will override. The sourcePackageRoot element maps to your customized component that you are going to write shortly. Notice how my group ID (remember, you entered it when you created your Share archetype in Eclipse) appears in the sourcePackageRoot as com.ad.components.

Now switch to

/src/main/amp/config/alfresco/web-extension/site-webscripts/com/ad/components/head/ folder.

Add all the necessary subfolders to duplicate this structure. In the head folder, create a new file called ressources.get.html.ftl.
add the following snippet of code to the file:

<@markup id="custom-login-resources" action="after" target="resources">
 
   <link rel="stylesheet" type="text/css" href="${url.context}/res/login/customizations/components/head/resources.css" >
   </link>
 
</@markup>

This allows to map a custom css stylesheet for the login page. The file lives in the following folder:
/src/main/resources/META-INF/login/customizations/components/head/

Go on and create that file. Name it ressources.css, then add the following styling code to it:

.theme-company-logo {
    background: url("images/myCompanyLogo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    height: 50px !important;
    width: 304px !important;
}
 
.form-fields.login .form-field > span.yui-button {
    border-color: #235394 !important;
}
.form-fields.login .form-field > span.yui-button > .first-child {
    border-color: #235394 !important;
    background-color: #235394 !important;
}

.alfresco-guest .sticky-wrapper {
    background: url("images/myBgImage.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size:: cover;
    -o-background-size:: cover;
    background-size:: cover;
}

This finally allows you to adjust your new login page styling according to your needs. The .theme-company-logo css class controls the company logo field on the login box. You can adjust its height and width to fit your own logo.
The .alfresco-guest .sticky-wrapper css classes are here used to implement a full screen background image of your choice (the best size is 1920×1080).

To finish your project, create a folder where you will put your images:
/src/main/resources/META-INF/login/customizations/components/head/images
Import myCompanyLogo.png and myBgImage.jpg in the images folder.

Important : Dont forget to change the images file names in the css code instead of myCompanyLogo.png and myBgImage.jpg.

Finishing your project

Your project is now ready to go. You can choose to test by running a Maven integration test (see Jeff Potts tutorials for more details and watch this interesting video of Ole Hejlskov) or to build the Share AMP by running mvn install. Once your AMP is built, install it like described in the Alfresco Documentation.

Start your Alfresco server and you should see your awesome new Share login page !

alfresco-custom-login-capture

Thanks to Angel Borroy who helped me a lot to understand the mechanics needed to extend the Share login page. You can find his Blog here.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s