Ext.ux.EncryptionLoginForm

[resTive]

Hi there,

i have build a simple Loginform including some simple MD5 encoding within another Ext.ux.

Implements a simple Ext.form.FormPanel as a Loginform with encryption
capabilities. This is the form only, so it can be embedded into a window or
static panel, or whatever (i hope ;-)).
Can be configured as any other FormPanel, with some exceptions:
- fixed anchor layout (anchor 100%)
- fixed items (logo-container, login/password-field)
- fixed buttons

Some new config options added:
- Simple Encryption support:

a type-string or function which performs the encrpytion. This type
has to be defined in Ext.util.Format or it has to be a function.
Currently supported types (in Ext.ux.Encryption) are 'md5' and
sha256'. The type 'md5' is the general fallback if type could not be
determined.
Example:

[...]
encryption: {
    active:true,
    type:'md5'
} 

One parameter will be passed to the specified function, expecting the
value to be encoded. If encryption is activated but no function could

be found, encryption will be deactivated.

- Submit configuration
Since you want to perform some actions after pressing the login button you
have to specify at least the success and failure callbacks. You are
allowed to specify any other config avaible in Ext.form.Basic#doAction
Example:

             submitConfig: {
               waitMsg:'Performing login...', //optional
               waitMsgTarget: true, // show msg direct in form.
               success: function(form, action) {
                 alert('success')
               },
               failure: function(form, action) {
                 alert('falure')
               }
             } 

- loginLabel
Labeltext for the login field. Defaults to 'Login'.

- passwordLabel
Labeltext for the password field. Defaults to 'Password'.

- loginButtonText
Text for the login button. Defaults to 'Login'.

- resetButtonText
Text for the reset button. Defaults to 'Reset'.

- hideResetButton
True to hide the reset button, false to show. Defaults to false.


Within the form is a logo-container specified. This Ext.container.Container
has a 60px height and an additional CSS-class called encryptedloginform-logo.

Complete example:

Ext.onReady( function() {
     Ext.QuickTips.init();
     var loginWindow = Ext.create('Ext.Window', {
         title:'Login',
         modal:true,
         closable:false,
         resizable:false,
         items: [{
             xtype:'encryptionloginform',
             preventHeader:true,
             border:false,
             width: 500,
             url:'login.php',
             defaults: {
             labelWidth:100
         },
 
         hideResetButton:false,
         resetButtonText:'My Reset Text',
         loginButtonText:'My Login Text',
         loginLabel:'Custom Login',
         passwordLabel:'Custom Password',
 
         encryption: {
             type:'md5',
             active: true
         },
 
         submitConfig: {
             waitMsg:'Performing login...',
             waitMsgTarget: true,
             success: function(form, action) {
                 alert('success')
             },
             failure: function(form, action) {
                 alert('falure')
             }
         }
     }]
});
loginWindow.show();
}); 

Finished the wall of text. A working example is attached.
Any criticism would be appreciated.

Update #1
Changed the way encryption works as mitchell supposed.
The Encryption class got divided into two seperate scripts (no more classes) and extend the Ext.util.Format class to its corresponding hashing algorithm.
Encryption.MD5.js
Encryption.SHA256.js

the encryption config now takes following parameters:

[...]
encryption: {
    active:true,
    type:'sha256' // or 'md5' or 'whatever' or Ext.util.Format.md5 or My.namespace.Class.function
},
[...] 

greetings
resTive