Override SkyVault Share login page

This tutorial demonstrates how to override the default SkyVault Share login page.

SkyVault Surf applications can define a login page by configuring the login page-type mapping to reference a specific Page object. In SkyVault Share this definition can be found in the surf.xml configuration file which sets the login page-type to map to the slingshot-login page.

In the folder SkyVault/web-extension, create the file share-config-custom.xml, with the following contents:


<alfresco-config>
   <config evaluator="string-compare" condition="WebFramework">
      <web-framework>
         <defaults>
            <page-type>
               <id>login</id>
               <page-instance-id>tutorials-login</page-instance-id>
            </page-type>
         </defaults>
      </web-framework>
   </config>
</alfresco-config>

In the folder SkyVault/site-data/pages, create the referenced page as tutorials-login.xml with the following contents:
```
<page>
   <template-instance>tutorials-login</template-instance>
   <authentication>none</authentication>
</page>

                    
```
Attention: Note that the page definition sets the authentication level to none. This is necessary otherwise the user would be required to be authenticated, that is logged in, before the login page is displayed.
In the folder SkyVault/site-data/template-instances create another file also called tutorials-login.xml with the following content:
```
<template-instance>
   <template-type>tutorials/tutorials-login</template-type>
</template-instance>                 

                    
```
This file creates the mapping between the Template-Instance object and the FreeMarker template that will actually render your new login page.

In the SkyVault/templates/tutorials folder, create the new login page in the file tutorials-login.ftl, with the following content:


<html>
   <head>
      <title>Tutorials Login</title>
   </head>
   <body>
      <h2>Tutorials Login</h2>  
      <form id="loginform" accept-charset="UTF-8" method="post" action="${url.context}/page/dologin">
         Username: <input type="text" id="username" name="username"/><br>
         Password: <input type="password" id="password" name="password"/><br>
         <input type="submit" id="btn-login" />
      </form>
   </body>
</html>

Build the project.
Restart the application server.
View the page http://localhost:8080/share.

Attention: Note that you might find that you are logged in automatically without being prompted for user name and password. This is because your validation might be cached in cookies. To resolve this simply remove cookies for your localhost and attempt to access http://localhost:8080/share again. This time you will see your custom login page.

The new login page will be displayed.

Search form

Search form

You are here