EXTJS Login Page

This post contains a source code snippet for the login page in EXTJS.

Login Page EXTJS Code - Login.js

Ext.define('App.view.auth.Login', {
    extend: 'Ext.Container',
    xtype: 'authlogin',

    controller: 'authlogin',

    cls: 'auth-login',

    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },

    items: [{
        cls: 'auth-header',
        html:
            '<span class="logo x-fa fa-circle-o-notch"></span>'+
            '<div class="title">Coworkee</div>'+
            '<div class="caption">Employee directory</div>'
    }, {
        xtype: 'formpanel',
        reference: 'form',
        layout: 'vbox',
        ui: 'auth',

        items: [{
            xtype: 'textfield',
            name: 'username',
            placeholder: 'Username',
            required: true
        }, {
            xtype: 'passwordfield',
            name: 'password',
            placeholder: 'Password',
            required: true
        }, {
            xtype: 'button',
            text: 'LOG IN',
            iconAlign: 'right',
            iconCls: 'x-fa fa-angle-right',
            handler: 'onLoginTap',
            ui: 'action'
        }]
    }, {
        cls: 'auth-footer',
        html:
            '<div>Ext JS example</div>'+
            '<a href="http://www.sencha.com" target="_blank">'+
                '<span class="logo ext ext-sencha"></span>'+
                '<span class="label">Sencha</span>'+
            '</a>'
    }]
});

The above Login.js produces UI:

LoginController.js

Ext.define('App.view.auth.LoginController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.authlogin',

    init: function() {
        this.callParent(arguments);
        this.lookup('form').setValues({
            username: 'norma.flores',
            password: 'wvyrEDvxI'
        });
    },

    onLoginTap: function() {
        var me = this,
            form = me.lookup('form'),
            values = form.getValues();

        form.clearErrors();

        Ext.Viewport.setMasked({ xtype: 'loadmask' });

        App.model.Session.login(values.username, values.password)
            .then(function(session) {
                me.fireEvent('login', session);
            })
            .catch(function(errors) {
                form.setErrors(App.util.Errors.toForm(errors));
            })
            .then(function(session) {
                Ext.Viewport.setMasked(false);
            });
    }
});

Login.scss

// Note: image from https://pixabay.com (Creative Commons CC0)
$auth-color: white;
$auth-background-color: #123d40;
$auth-background-image: url(get-resource-path('images/auth-background.jpg'));

@include panel-ui(
    $ui: 'auth',
    $background-color: transparent,
    $body-background-color: transparentize($auth-background-color, 0.75),
    $body-color: $auth-color,
    $body-padding: 24px
);

.auth-login {
    @include background-size(cover);
    background-image: $auth-background-image;
    background-position: center;

    > .x-body-el {
        background-color: rgba(black, 0.25);
    }

    .x-formpanel {
        width: 256px;

        .x-button {
            // Balance button vertical spacing with form fields
            margin: $field-vertical-spacing/2 0;

            .x-big {
                margin: $field-vertical-spacing-big/2 0;
            }
        }
    }

    .auth-header,
    .auth-footer {
        color: $auth-color;
        text-align: center;
        padding: 16px;

        a {
            color: $auth-color;
            text-decoration: none;
        }
    }

    .auth-header {
        .logo {
            @include single-text-shadow;
            color: $auth-color;
            font-size: 40px;
            line-height: 1;
        }

        .title, .caption {
            white-space: nowrap;
        }

        .title {
            font-size: 31px;
            font-weight: bold;
        }

        .caption {
            font-size: 15px;
            text-transform: uppercase;
        }
    }

    .auth-footer {
        .logo {
            font-size: 18px;
            margin-right: 2px;
            margin-left: -4px;

            &::before {
                vertical-align: middle;
            }
        }

        .label {
            font-weight: bold;
        }
    }
}

GitHub Repository

The complete source code of this example is available on GitHub.