Login customizations to your ADF application

[alfresco]

This content is part of the Alfresco ADF basic customisations tutorials and describes how to customise the login page of your Alfresco ADF application. The customisation of the login page is very straightforward, thank to the ADF Login component. Before showing how to do it, we would like to submit to your attention the Alfresco Catalog, extremely useful for documentation and reference, during the development.

As we learnt in the previous paragraphs, everything is related to the login is managed by an Angular 4 component, in this case named alfresco-login and stored in the my-adf application in the app/components/login folder. Let’s see in the picture below, how the login looks like before any change.

Login page of my-adf application.

Following the ADF Login documentation, let’s edit the login-demo.component.html file according to the description below.

<alfresco-login #alfrescologin
  [backgroundImageUrl]="'background.jpg'"
  [logoImageUrl]="'logo.png'"
  [providers]="providers"
  [fieldsValidation]="customValidation"
  [disableCsrf]="disableCsrf"
  (executeSubmit)="validateForm($event)"
  (onSuccess)="onLogin($event)"
  (onError)="onError($event)">

Of course in this example is assumed that two pictures named background.jpg and logo.png are saved in the public folder of the my-adf application.

Saving the login-demo.component.html file, you will see that the application will be updated automatically. If it won’t happen, restart it from the terminal. Below a picture showing how the login page looks like after restarting.

Login page of my-adf application after customizations.

Next task >>

[hansdebal]

What if you don't want to store your custom logo in the root? Can't seem to make this work if I want to store the image somewhere else.

[fcorti]

You could use the logoImageUrl to put a blank image (or a single pixel image) in the form and the login-demo.component.html source code to put the logo where you prefer.
The login-demo.component.html file is a good example of a custom code for the login page.

[hansdebal]

Hi Francesco,

I'm not talking about the position of the logo on the login-screen, I'm talking about the location of the logo-file in my application folder-structure.

The tutorial says:

"Of course in this example is assumed that two pictures named background.jpg and logo.png are saved in the root of the application: the my-adf folder"

But I don't want to put all my images in the root-folder of the application. I tried putting my custom-logo file under app/components/assets or under app/components/login/assets, but whatever path (relative or absolute) I enter in logoImageUrl, the image is not shown.

[fcorti]

Hi Hans De Bal,
Would please submit your question in the support chat at Alfresco/alfresco-ng2-components - Gitter 

The ADF team is available there for technical questions and they reply in very short time.

To give you a proven reply I should test it in my dev env, and I'm sure they will give you an answer faster than me. ;-)

Please let me know if you have any other issue or question.

Cheers.

[descahill]

FYI

The login-demo.component.html is now just called login.component.html

Also the tag is:
<adf-login></adf-login>

instead of 
<alfresco-login></<alfresco-login>

Also i dont have the selectors in the top left to chose systems, i s that now redundant? i built the demo app with CS and PS, and have them hooked up and working through the API.

Regards

Des

[kring]

Yes - the documentation in this tutorial seems to be outdated as the login.component.html now (generated with Yeoman) just look like this:

<adf-login
  copyrightText="© 2017 Alfresco Software, Inc. All Rights Reserved."
  successRoute="/documentlist">
</adf-login>

[yassine__b]

Hello Hans;

I worked for me using 

[logoImageUrl]="'assets/snowflake-51-128.png'"

You have to pay attention to wrap the path with a simple quotes and then with a double quotes.

Cheers.