Il browser non ricorda la password durante l'accesso

Question

Un earlier question ha menzionato un metodo utilizzando la configurazione el per fare in modo che il browser ricordi le password. In ogni caso, la configurazione el non esiste più in ExtJS 4.1.

Ora, che cosa dovrei fare?

Answer 1

Credo che dovrebbe essere contentEl anziché el ma lo faccio in un altro modo. Puoi costruire l'intera cosa direttamente con ExtJS. L'unica differenza è che i campi Ext verranno creati con l'attributo autocompleto = off per impostazione predefinita, quindi uso una classe derivata per sovrascriverlo.

Ext.define('ACField', { 
    extend: 'Ext.form.field.Text', 

    initComponent: function() { 
     Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) { 
      if (Ext.isString(oneTpl)) { 
       allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"'); 
      } 
     }); 
     this.callParent(arguments); 
    } 
}); 

Ext.onReady(function() { 
    new Ext.panel.Panel({ 
     renderTo: Ext.getBody(), 
     width: 300, 
     height: 100, 
     autoEl: { 
      tag: 'form', 
      action: 'login.php', 
      method: 'post' 
     }, 
     items: [ 
      new ACField({ 
       xtype: 'textfield', 
       name: 'username', 
       fieldLabel: 'Username' 
      }), 
      new ACField({ 
       xtype: 'textfield', 
       name: 'password', 
       fieldLabel: 'Password', 
       inputType: 'password' 
      }), 
     ], 
     buttons: [{ 
      xtype: 'button', 
      text: 'Log in', 
      type: 'submit', 
      preventDefault: false 
     }] 
    }); 
}); 

Answer 2

Si consiglia di utilizzare la funzionalità Cookie incorporata di ExtJS.

• È possibile leggere un cookie utilizzando: readCookie ('password);
• È possibile creare un cookie utilizzando: createCookie ('password', "pass123", 30); // salva per 30 giorni

Quindi è possibile utilizzare la business logic di base per compilare automaticamente il campo modulo con la password memorizzata.

Ha senso?

Answer 3

Esiste la proprietà autoRender che consente di applicare il campo Extjs a un elemento già esistente nella pagina. Quindi, se si imposta il modulo di base in html, il browser dovrebbe riconoscere i campi del modulo come informazioni di accesso, quindi Extjs si sovrapporrà a quel modulo se si utilizza l'autoRender con un riferimento ai campi corretti (e anche il pulsante sul modulo per un pulsante di tipo submit nel tuo modulo html di base) dovrebbe funzionare correttamente. Inoltre, tieni presente che il browser probabilmente non riconoscerà una chiamata ajax per l'accesso e potrebbe essere necessario utilizzare l'invio del modulo di base. Ho un esempio funzionante nella mia applicazione, ma avrei difficoltà a cercare di estrarre codice specifico per le applicazioni, quindi ho un esempio per questo. Per favore commenta se hai bisogno dell'esempio e potrei essere in grado di risponderti entro lunedì.

Answer 4

La risposta da lagnat era per lo più corretto, per ottenere questo anche lavorando su Chrome e Firefox è richiesta la seguente:

1) Ignora impostazione predefinita il comportamento ExtJS Textfield per il completamento automatico (copiato da lagnat):

Ext.define('ACField', { 
    extend: 'Ext.form.field.Text', 

    initComponent: function() { 
     Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) { 
      if (Ext.isString(oneTpl)) { 
       allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"'); 
      } 
     }); 
     this.callParent(arguments); 
    } 
}); 

2) assicurarsi che i campi di testo sono all'interno di un tag <form>: (vedi risposta da lagnat), dal momento che ExtJS 4 tag <form> non è più presente in un FormPanel.

autoEl: { 
     tag: 'form', 
     action: '/j_spring_security_check', 
     method: 'post' 
    }, 

3) Assicurarsi che vi sia un <form> presente nel codice HTML, con gli stessi <input> nomi:

  items:[ 
       Ext.create('ACField',{ 
        fieldLabel: 'Username', 
        name:'j_username', 
        inputId: 'username', 
        allowBlank:false, 
        selectOnFocus:true 
       }), 
       Ext.create('ACField',{ 
        fieldLabel:'Password', 
        name:'j_password', 
        inputId: 'password', 
        xtype:'textfield', 
        allowBlank:false, 
        inputType:'password' 
       }) 
      ], 

e all'interno del codice HTML della forma regolare con gli stessi nomi di ingresso:

<body> 
<div id="login-panel"> 
    <form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post"> 
     <input class="x-hidden" type="text" id="username" name="j_username"/> 
     <input class="x-hidden" type="password" id="password" name="j_password"/> 
    </form> 
</div> 
<noscript>Please enable JavaScript</noscript> 
</body> 

Con tutti questi cambiamenti in atto, il salvataggio di nome utente/password funziona in IE, Chrome e Firefox.

Answer 5

La risposta di @Lagnat non funziona con ExtJS 4.2.1 e 4.2.2. Potrebbe essere dovuto alla rimozione della configurazione type dal pulsante. Quello di cui abbiamo bisogno è il pulsante di invio standard <input type="submit"> per il pulsante. Quindi l'ho aggiunto al pulsante con opacity: 0. Qui di seguito è il mio codice di lavoro (testato a lavorare su Firefox 27, Chrome 33, Safari 5.1.7, IE 11. Riempimento automatico/Salvataggio automatico password deve essere abilitata per il browser):

Ext.create('Ext.FormPanel', { 
    width: 400, 
    height: 500, 
    padding: '45 0 0 25', 
    autoEl: { 
     tag: 'form', 
     action: 'login.php', 
     method: 'post' 
    }, 
    renderTo: Ext.getBody(), 
    items: [{ 
     xtype: 'textfield', 
     fieldLabel: 'Username', 
     name: 'username', 
     listeners: { 
      afterrender: function() { 
       this.inputEl.set({ 
        'autocomplete': 'on' 
       }); 
      } 
     } 
    }, { 
     xtype: 'textfield', 
     fieldLabel: 'Password', 
     inputType: 'password', 
     name: 'username', 
     listeners: { 
      afterrender: function() { 
       this.inputEl.set({ 
        'autocomplete': 'on' 
       }); 
      } 
     } 
    }, { 
     xtype: 'button', 
     text: 'LOG IN', 
     width: 100, 
     height: 35, 
     preventDefault: false, 
     clickEvent: 'click', 
     listeners: { 
      afterrender: function() { 
       this.el.createChild({ 
        tag: 'input', 
        type: 'submit', 
        value: 'LOG IN', 
        style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;' 
       }); 
      } 
     } 
    }] 
});