ExtJS: Entrar con 'Recuérdame' funcionalidad

Question

Estoy intentando crear una ventana de conexión simple con la muy común 'Recuérdame' funcionalidad. La validación de inicio de sesión es de estilo AJAX hacerlo, por lo tanto el navegador no se acordará de mi entrada.

Mi enfoque es utilizar la funcionalidad integrada state, pero cómo usarlo me confunde.

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

...

{
    xtype: 'textfield',
    fieldLabel: 'User name',
    id: 'txt-username',
    stateful: true,
    stateId: 'username'
}, {
    xtype: 'textfield',
    fieldLabel: 'Password',
    id: 'txt-password',
    inputType: 'password',
    stateful: true,
    stateId: 'password'
}, {
    xtype: 'button',
    text: 'Validate',
    stateEvents: 'click'
}

Yo sé que tengo que poner en práctica el método getState, sino en lo que el componente (mi conjetura es en los dos campos de texto)? Otra cosa que no se dan cuenta es, cómo es mi en evento en el botón conectado a las propiedades del estado de mi campos de texto

Answer 1

No utilizar el estado. Va a almacenar la contraseña del usuario en texto plano en las cookies de tu navegador. Cualquier persona que tenga acceso al navegador puede leerlo y está siendo enviado de nuevo al servidor en cada petición.

Con suerte está utilizando algún tipo de sesiones del lado del servidor y no está en función de la información de autenticación del usuario que está presente en todas las solicitudes para mantener registrado en el estado. Si es así, entonces yo recomiendo tomar ventaja de la característica incorporada en la mayoría de los navegadores modernos para manejar recordar al usuario para la autenticación inicial en cada periodo de sesiones ahorro de contraseña.

En función de ahorro de trabajar la forma de autenticación debe estar presente en el documento cuando se carga por primera vez la página de la contraseña del navegador. Además, las credenciales deberán ser presentadas por esa forma en un tradicional (no AJAX) se someten que actualizar la página entera.

Se puede cumplir con estos requisitos al mismo tiempo que presenta la forma en la interfaz de usuario ExtJS por la prestación inicialmente la forma oculta en el documento y luego usando las capacidades de ExtJS a comandar los elementos HTML existentes.

En puso el cuerpo del documento:

<form id="auth-form" action="/url/of/your/login/action" method="POST">
    <input id="auth-username" type="text" name="username" class="x-hidden">
    <input id="auth-password" type="password" name="password" class="x-hidden">
    <input id="auth-submit" type="submit" class="x-hidden">
</form>

A continuación, en Ext.onReady o en el momento se está mostrando una forma de autenticación de construir un panel que hace uso de los elementos del formulario anteriores:

new Ext.Panel({
    el: 'auth-form',
    autoShow: true,
    layout: 'form',
    items: [
        {
            xtype: 'textfield',
            el: 'auth-username',
            autoShow: true,
            name: 'username',
            fieldLabel: 'Username',
            anchor: '100%'
        },
        {
            xtype: 'textfield',
            el: 'auth-password',
            autoShow: true,
            name: 'password',
            fieldLabel: 'Password',
            anchor: '100%'
        }
    ],
    buttons: [
        {
            text: 'Log in',
            handler: function() {
                Ext.get('auth-submit').dom.click();
            }
        }
    ]
});

La composición exacta de la forma puede variar. Puede ser incorporado en una instancia Ext.Window o cualquier otra cosa. Lo que es importante:

• Los campos de usuario y contraseña hacen uso de los campos de entrada existentes a través de la 'el' y las propiedades de configuración 'AUTOSHOW'.
• Uno de los paneles que contienen los campos hace lo mismo para el elemento de formulario existente.
• La presentación del formulario se realiza mediante un clic simulado en el botón de enviar existente.

Answer 2

Se utiliza con funcionalidad Ajax:

{
    xtype: 'form',
    autoEl: {
        //normal post for false submit
        tag: 'form', 
        action: "#", 
        method: 'post'
    },
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            listeners: {
                afterrender:function(cmp){
                    cmp.inputEl.set({
                        autocomplete:'on'
                    });
                }
            }
        },
        {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password', 
            fieldLabel: 'Password',
            listeners: {
                afterrender:function(cmp){
                    cmp.inputEl.set({
                        autocomplete:'on'
                    });
                },
            }
        },
        {
            xtype: 'button',
            text: 'Login',
            handler: function() {
                Ext.Ajax.request(); //login ajax request
                Ext.get('falsesubmit').dom.click(); //false submit
            },
        },
        {
            //button with submit input for false submit
            xtype: 'button',
            hidden:true,
            listeners: {
                afterrender: function() {
                    this.el.createChild({tag: 'input', type: 'submit', id: 'falsesubmit'});
                }
            }
        }
    ]
}

Answer 3

Esto no funciona con IE se produce error de ejecución 8. A. No sé si es porque estoy usando el marco de Google, pero me gustaría señalar que el es uno de los bienes de dominio público no es una opción de configuración, así que no creo que Ext fue diseñado para trabajar así. También en Google Chrome se puede seleccionar el nombre de usuario, pero la contraseña no se muestra. Creo que esto es parte del diseño de Google Chrome, pero también he visto que funcione correctamente en otros sitios con Google Chrome. No estoy usando AJAX para enviar el formulario, pero me gusta la forma en que la mirada Ext textfields y me gusta la información sobre herramientas también.

No veo cómo esta manera es más seguro que usar una cookie porque ahora importa cómo ponerlo en práctica la contraseña se almacena en la máquina cliente. Mañana voy a intentar una solución de almacenamiento del cliente HTML5.

Dejar que el control de explorador Web que este medio funcionalmente diferentes usuarios pueden tener diferentes experiencias basadas en el navegador que tienen acceso a (hablando principalmente en cómo Google Chrome asas guardar contraseñas).

En suma, una post muy bueno gracias.