PDA

View Full Version : looking for reCaptch for extjs 4



blex2010
26 Jul 2011, 7:59 AM
Has anyone created a plugin for reCaptcha that works with extjs 4?

emblemparade
29 Jul 2011, 12:02 PM
I've created one as part of the Savory framework (http://threecrickets.com/savory/) (LGPL). However, he's a quick copy-and-paste of it:


Ext.define('Savory.form.field.ReCaptcha', {
alias: 'widget.recaptchafield',
extend: 'Ext.form.field.Base',

fieldSubTpl: [
'<div id="{id}" style="height: 129px;"',
'<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
'class="{fieldCls}"></div>',
{
compiled: true,
disableFormats: true
}
],

constructor: function(config) {
this.callParent([config]);
this.theme = this.theme || 'blackglass';
this.on('render', function() {
this.up('form').getForm().on('actionfailed', function(form, action) {
if (action.type == 'submit') {
this.renderReCaptcha();
}
}, this);
this.renderReCaptcha();
});
},

renderReCaptcha: function() {
Recaptcha.create(this.code, this.inputEl.id, {
theme: this.theme,
callback: Recaptcha.focus_response_field
});
},

getRawValue: function() {
var me = this,
v = (me.inputEl ? me.inputEl.down('input[name=recaptcha_response_field]').getValue() : Ext.value(me.rawValue, ''));
me.rawValue = v;
return v;
}
});

Ext.define('Savory.form.field.ReCaptchaChallenge', {
alias: 'widget.recaptchachallengefield',
extend: 'Ext.form.field.Hidden',

getRawValue: function() {
var me = this,
v = this.up('form').getForm().findField('recaptcha_response_field').inputEl.down('input[name=recaptcha_challenge_field]').getValue();
me.rawValue = v;
return v;
}
});
You'll notice that there are two fields that you need to include in your form, one for the response and one for the challenge.

Also note that the reCAPTCHA is re-rendered upon form submission failure: this is necessary, because a reCAPTCHA challenge can only be checked once.

An example of a form that uses this (with some alignment tricks):


var fields = [
{
"name": "username",
"fieldLabel": "Username",
"allowBlank": false
},
{
"name": "password",
"fieldLabel": "Password",
"inputType": "password",
"allowBlank": false
},
{
"name": "recaptcha_response_field",
"fieldLabel": "Humanity test",
"xtype": "recaptchafield",
"code": "<insert your recaptcha public key here>",
"allowBlank": false
},
{
"name": "recaptcha_challenge_field",
"fieldLabel": "recaptcha_challenge_field",
"xtype": "recaptchachallengefield",
"allowBlank": false
}
];

Ext.create('Ext.window.Window', {
title: 'Login',
items: {
xtype: 'form',
border: false,
bodyCls: 'x-border-layout-ct', // Uses the neutral background color
bodyPadding: 10,
defaults: {
width: 468, // The reCAPTCHA width is 318 (labelWidth + labelPad + 318 = width)
labelWidth: 145,
labelPad: 5
},
defaultType: 'textfield',
items: fields,
buttons: [{
text: 'Submit',
disabled: true,
formBind: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
this.up('window').destroy();
Ext.Msg.alert('Success!', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failure!', action.result.msg);
},
this
});
}
}
}]
}
}).show();

galdaka
10 Aug 2012, 3:03 AM
It´s not render with Extjs 4.1.

galdaka
10 Aug 2012, 3:13 AM
It´s not render with ExtJS 4.1. I atacch image.37848