Tutorial - How to implement a custom (login) landing page

[telecastg]

EspoCRM makes it possible to implement your own login screen in an "upgrade safe" way by following the steps below:



Please note that this tutorial requires custom coding. All folders and files described need to be created by the developer.

STEPS:

1) Create metadata file custom/Espo/Custom/Resources/metadata/clientDefs/App.json

{
    "loginView" : "custom:views/login"
}

The code above will instruct Espo to use a custom view to render the login page instead of the standard login view.

2) Create script client/custom/src/views/login.js

define('custom:views/login', 'views/login', function (Dep) {

    return Dep.extend({

        // specify your custom template
        template: 'custom:login',

        // specify your own custom values for any custom placeholders that you are including in the template
        // in this example, a background image, company name, custom button for self-registration and captcha are included
        landingPageData: {
            backgroundImage: '{{path to your background image file}}',
            companyName: '{{Your company name}}',
            selfRegistrationEnabled: true,
            captchaEnabled: false            
        },

        // include the custom values in the standard "data" function which will provide the placeholder values to the template
        // the values for "logoSrc" and "showForgotPassword" are the standard values specified in the core login script
        data: function () {
            return{        
              logoSrc: this.getLogoSrc(),
              showForgotPassword: this.getConfig().get('passwordRecoveryEnabled'),
              companyName: this.landingPageData.companyName,
              backgroundImage: this.landingPageData.backgroundImage,
              selfRegistrationEnabled: this.landingPageData.selfRegistrationEnabled
           };          
        },

        // this is the function that will be triggered when the visitor clicks on the custom "Register" button
        showRegistrationRequest: function () {

            // to keep things simple, the implementation of the self registration is not included in this tutorial
            // but this shows how a custom button can be implemented in your own custom landing page

        }

    });
});

The custom view will call a custom template, will implement any custom functions that need to be added, and will provide the placeholder values for the template.

3) Create a custom template to use for rendering the login / landing page: client/custom/res/templates/login.tpl

<div class="container content landing-page" style="background-image:url('{{backgroundImage}}');">
    <div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2">
    <div id="login" class="panel panel-default">
        <div class="panel-heading">
            <div class="logo-container">
                <img src="{{logoSrc}}" class="logo">
                <span class='logo-company-name'>{{companyName}}</span>
            </div>
        </div>
        <div class="panel-body">
            <div>
                <form id="login-form" onsubmit="return false;">
                    <div class="form-group">
                        <label for="field-username">{{translate 'Username'}}</label>
                        <input type="text" name="username" id="field-userName" class="form-control" autocapitalize="off" autocorrect="off" tabindex="1" autocomplete="username">
                    </div>
                    <div class="form-group">
                        <label for="login">{{translate 'Password'}}</label>
                        <input type="password" name="password" id="field-password" class="form-control" tabindex="2" autocomplete="current-password">
                    </div>
                    <div>
                        {{#if showForgotPassword}}<a href="javascript:" class="btn btn-link pull-right" data-action="passwordChangeRequest" tabindex="4">
                            {{translate 'Forgot Password?' scope='User'}}
                        </a>{{/if}}
                        <button type="submit" class="btn btn-primary" id="btn-login" tabindex="3">{{translate 'Login' scope='User'}}</button>
                        {{#if selfRegistrationEnabled}}
                            <a href="javascript:" class="btn btn-default" data-action="createRegistrationRequest" tabindex="5" id='btn-register' style='margin-left:10px;'>
                                {{translate 'register' scope='RegistrationRequest'}}
                            </a>
                        {{/if}}
                    </div>
                </form>
            </div>
        </div>
    </div>
    </div>
</div>
<footer class="container">{{{footer}}}</footer>

4) Create custom CSS to be used by the custom template: client/custom/lib/css/landingPage.css

#login .logo-container {
    width: 100% !important ;
    height: 43px;
}

.logo-company-name {
    color:#fff;
    margin-left:10px;
    font-size:24px;
    vertical-align: bottom;
}

.landing-page {
    background-repeat: no-repeat;
    background-position: relative;
    background-size: cover;
    margin-top: -29px;
    margin-bottom: 29px;
}

#login {
    margin-top: 60px;
}

5) Create custom Javascript code to be used with the custom landing page (this example does not include any, but this is where you would incorporate fancy interface effects, etc): client/custom/lib/js/landingPage.js

// This example does not include any custom Javascript

6) Create custom metadata file to let EspoCRM know that there is are custom Javascript and CSS files that need to be loaded:
custom/Espo/Custom/Resources/metadata/app/client.json

{
    "scriptList": [
       "__APPEND__",
      "client/custom/lib/js/landingPage.js"
    ],
    "developerModeScriptList": [
       "__APPEND__",
      "client/custom/lib/js/landingPage.js"
    ],
     "cssList": [
        "__APPEND__",
       "client/custom/lib/css/landingPage.css"              
    ],
    "developerModeCssList": [
        "__APPEND__",
       "client/custom/lib/css/landingPage.css"              
    ]
}

The custom template above and the custom CSS code will modify the regular login page display by including a company's name, a custom background and a "Register" button.

Of course this template can be vastly improved by front end designers to suit a client needs.

[item]

Thanks telecastg wonderfull

[telecastg]

Youre welcome item :-) I added instructions to incorporate custom css and js scripts to the tutorial.

[esforim]

Look like I got a task for the weekend to do.

[Oni]

Good info, thanks for share it... =P

[bradaks]

telecastg ,

All these tutorials you have been posting have been amazing to learn from! Thank you so much for doing all this!

One question on the custom landing pages..

Is it possible to do customization based on the Portal Landing page? For example, I want to show a button on the client portal and a different button on the customer portal?

Thanks again! I look forward to reading your posts in the future!

Brad

[telecastg]

Hi Brad, you are welcome, I am glad you like the postings, hopefully it will inspire others to take the time to share their experiences posting solutions, not just questions, in this forum, and make it a better learning tool for everyone.

Yes it is possible to add custom buttons that would only show in the portal landing page like this:

1) Add the new button to the custom login template client/custom/res/templates/login.tpl (use the section {{#if selfRegistrationEnabled}} as reference)

2) Modify the custom login view client/custom/src/views/login.js as follows:

a) Add an event to define which function to execute when the new button is clicked. (use the click a[data-action="createRegistrationRequest"] event as reference)

b) Implement the function called for in the event (use function showRegistrationRequest() as reference)

c) Use jquery to show or hide a button depending if the landing page is for a portal or not in the init() function.

        init: function() {
            // this function will return a value like "../../" if the page is being accessed from the portal, so we can use it to determine what to show or hide
            // in this example we will only show the "Registration" button if the page is being displayed in a portal
            if(this.getBasePath()) {
                $('a[data-action="createRegistrationRequest"]').show();
                // set the path for the same background image for the portals
                this.landingPageData.backgroundImage = this.getBasePath()+this.landingPageData.backgroundImage;
            } else {
                $('a[data-action="createRegistrationRequest"]').hide();
            }
        },

[Sab0tajue]

I did everything according to the model and it worked, but I can’t move the company logo on the authorization page in the middle. All my attempts to edit css failed. I ask for help. thank
Screenshot: https://hkar.ru/125gc

[item]

hello,
try this :

<span class='logo-company-name'><center>{{companyName}}</center></span> 

clear cache .. and to on browser

[Sab0tajue]

After I made a custom design, I have a logo and all the icons like the default avatar. Tell me what I did crookedly. I took instructions from the forum. The EspoCRM logo is displayed normally.

[telecastg]

It looks like the application is not finding your logo, go to Administration > User Interface and make sure that the logo shows like the picture attached or upload it there. (see the attached image)

Espo will look for this image and place it everywhere a company log is called.

[gerac]

I followed the Instructions to create a custom login (landing) Page. But for some reason it still displays the default login Page. Any idea why? Do i need to actvate something in the Backend?

[esforim]

Aside from clearing the admin Cache and Rebuild, I think you may also want to clear your Browser cache too? Or use Private Browsing/Incognito to see it "cache-less"

[gerac]

Still no Luck. There is still the default login Page displayed. Am i right that i have to put the content from step1 and step6 into the same File? correct?

[telecastg]

No, sorry the correct file reference for Step 6 is: custom/Espo/Custom/Resources/metadata/app/client.json I edited the instructions, must have been a typo from an edit after the original publication.

[tothewine]

thank for the helpful post!

[telecastg]

You're welcome :-)

[Fehu]

Hey telecastg, I was trying to implement a custom background for the login page as defined above but having no luck. Will this process still work with the current version of espocrm?

[esforim]

This guide should still be applicable to 5.9.3. Maybe your background location is missing/invalid/can't be found?

backgroundImage: '{{path to your background image file}}',

Should be something like this I believe:

backgroundImage: /espocrm/wallpaper.jpg/


---
These code should be working for a long while, I don't think Developer planning any changes to Landing page which would