The login functionality of an application is the first thing most people see when they go to use a product. It is the most essential, inevitable, and foundational part of any software system out there. A developer who is working on an application often looks for quick and easy ways in which they can build the login part of an application, and focus most of the energy on implementing the actual business logic.

In this blog post, we’ll see a quick overview of how we can rapidly build a login system for your JavaScript dashboards using Sencha Ext JS. For a more in-depth version of this guide see the documentation.

How can I generate an app using Sencha CMD?

Sencha allows you to generate an application boilerplate using the Sencha CMD. Run the following command in your terminal or CLI to generate a LoginApp boilerplate code.

sencha -sdk /path/to/ExtSDK generate app LoginApp ./LoginApp

Once you have generated the app, navigate to {appRoot}/app.js and remove the mainView config from the application config. We are doing this because we want to perform some validations and evaluations before deciding the initial view when the application loads. For example, there is no need to instantiate the Main view if the user is logged out of the system.

At this point, when we have removed the mainView config, the browser shows a blank page upon refreshing the page. This is because the app does not know which view to instantiate yet. We handle this by adding plugins: 'viewport' line to {appRoot}/app/view/main/Main.js file.

How can I create the login view components?

After handling all the configurations and setup prerequisites, navigate to app/view folder inside the LoginApp folder and create a new directory called login. Inside this new directory, create two files Login.js and LoginController.js.

Your directory structure should look somewhat like this now.

How to generate the login window in my application?

To create the login window, open the {appRoot}/app/view/login/Login.js file and define the Login class as follows.

Ext.define('LoginApp.view.login.Login', { extend: 'Ext.window.Window', xtype: 'login' });

In the above code, we essentially extended the Ext.window.Window class to create our own Login class to be further in the application.

Let’s add some basic dependencies and properties that our Login class should rely on.

requires: [
        'LoginApp.view.login.LoginController',
        'Ext.form.Panel'
    ],

    controller: 'login',
    bodyPadding: 10,
    title: 'Login Window',
    closable: false,
    autoShow: true

Now comes the actual UI part. We need to create a form containing at least three entities in total; username text field, password text field, and login button itself.

items: {
        xtype: 'form',
        reference: 'form',
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }

All in all, the final code for in Login.js file should look like below.

Ext.define('LoginApp.view.login.Login', {
    extend: 'Ext.window.Window',
    xtype: 'login',

    requires: [
        'LoginApp.view.login.LoginController',
        'Ext.form.Panel'
    ],

    controller: 'login',
    bodyPadding: 10,
    title: 'Login Window',
    closable: false,
    autoShow: true,

    items: {
        xtype: 'form',
        reference: 'form',
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: 'Password',
            allowBlank: false
        }, {
            xtype: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }
});

What is the right way to make the login logic work?

Note that in the previous section, we gave onLoginClick callback function to the button’s click event. Now, it is time to define this function in LoginController class.

Ext.define('LoginApp.view.login.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.login',

    onLoginClick: function() {

        // This would be the ideal location to verify the user's credentials via
        // a server-side lookup. We'll just move forward for the sake of this example.

        // Set the localStorage value to true
        localStorage.setItem("LoginAppLoggedInStatus", true);

        // Remove Login Window
        this.getView().destroy();

        // Add the main view to the viewport
        Ext.widget('app-main');

    }
});

After successfully performing your custom server logic, the above function sets a boolean variable LoginAppLoggedInStatus to true in the browser local storage. This flag variable will tell whether a user is logged in or not, based on which you can execute custom behaviors inside your application.

How can I register the launch logic in the Sencha app?

Next, let’s discuss {appRoot}/app/Application.js and the launch function.

Application.js is the heart of your application. It provides a handy method called launch, which fires when your application has loaded all of its required classes. Here is the full code for this tutorial’s Application.js file.

/**
 * The main application class. An instance of this class is created by `app.js` when it calls
 * Ext.application(). This is the ideal place to handle application launch and initialization
 * details.
 */
Ext.define('LoginApp.Application', {
    extend: 'Ext.app.Application',

    name: 'LoginApp',

    stores: [
        // TODO: add global / shared stores here
    ],
    views: [
        'LoginApp.view.login.Login',
        'LoginApp.view.main.Main'
    ],
    launch: function () {

        // It's important to note that this type of application could use
        // any type of storage, i.e., Cookies, LocalStorage, etc.
        var loggedIn;

        // Check to see the current value of the localStorage key
        loggedIn = localStorage.getItem("LoginAppLoggedInStatus");

        // This ternary operator determines the value of the LoginAppLoggedInStatus key.
        // If LoginAppLoggedInStatus isn't true, we display the login window,
        // otherwise, we display the main view
        Ext.widget(loggedIn ? 'app-main' : 'login');

    }
});

How can I add the logout functionality to my login application?

Up until here, we saw how to execute a login functionality in our application. The logout functionality is equally important and must be present in every application. Let’s look at how we can add that to our LoginApp.

In the MainController class, define an event callback function for the logout feature.

Ext.define('LoginApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    onClickButton: function () {

        // Remove the localStorage key/value
        localStorage.removeItem('LoginAppLoggedInStatus');

        // Remove Main View
        this.getView().destroy();

        // Add the Login Window
        Ext.widget('login');

    }
});

That’s all there is to it. Now that we have walked you through the sample check out the full source code.

Ready to get started with Sencha Ext JS? Head over to Sencha Ext JS and create your own login app now.