Tutorial - Implement a self-registration button in a custom landing page. Part 1

[telecastg]

This tutorial is a follow up on the previous post on how to implement a custom landing page for EspoCRM without modifying any core scripts.

https://forum.espocrm.com/forum/deve...n-landing-page

If you haven't read the thread, please consult it before reading this tutorial.

Because of the length of the tutorial, this article will be posted as two topics.

From a top level perspective, when a visitor clicks on the "Register" button in the landing page, a form appears where the visitor can enter it's first name, last name, email address and cell phone number and after submitting a message appears saying that a response by email will follow.

Upon submission of the form, EspoCRM compares the data received against existing portal users to filter out possible duplicates.

If an existing portal user matches the data submitted, an email is sent to the applicant with the username information and instructions to go back and request a Password change from the landing page.

If no duplicates exist, then the system creates a Registration Request record and alerts the Administrator that a registration request has been received via email.

When the Administrator opens the Registration Request record, it is possible to accept or deny the request.

If the request is denied an email is sent to the applicant informing it of the decision.

If the request is granted, then the system creates a new portal user and emails the new credentials to the applicant.

Steps:

1) Go to Administration > Entity Manager > Create Entity
Name: RegistrationRequest
Type: Base
Labels: Write your own labels
Stream: Leave unchecked
Save the new entity.

2) Add the following fields to RegistrationRequest:
Name: firstName
Type: varchar
Required: yes

Name: lastName
Type: varchar
Required: yes

Name: cellPhone
Type: varchar
Required: yes

Name: emailAddress
Type: varchar
Required: yes

Name: status
Type: enum
Options: [Received, Approved, Rejected]
Default: Received

3) Go to Administration > Rebuild

The above actions will create a custom entity RegistrationRequest which is where the visitor's requests will be stored and is the entity that the Administrator will check to approve or deny the requests.

4) Edit script client/custom/src/views/login.js,created in the previous tutorial, make sure that the value for "selfRegistrationEnabled" is set to "true" and implement the event listener and function createRegistrationRequest as follows:

        events: {
            'submit #login-form': function (e) {
                this.login();
                return false;
            },
            'click a[data-action="showRegistrationRequest"]': function (e) {
                this.showRegistrationRequest();
            },
            'click a[data-action="passwordChangeRequest"]': function (e) {
                this.showPasswordChangeRequest();
            }
        },

        showRegistrationRequest: function () {
            Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
            this.createView('registrationRequest', 'custom:views/modals/registration-request', {
                url: window.location.href
            }, function (view) {
                view.render();
                Espo.Ui.notify(false);
            });
        }

The code above tells Espo to instantiate a modal view class registration-request when a visitor clicks on the "Register" field.