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

[item]

Thanks telecastg wonderfull

[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.