Results 1 to 4 of 4

Thread: Ajax login form with showing "Remember password" popup of the browser

  1. #1

    Default Ajax login form with showing "Remember password" popup of the browser

    The problem - how to make the browser's "Remember password" dilog popup, after submitting a form with a password.
    The easiest solution would be to make a regular html page with a simple form.
    I couldn't find a javascript/ExtJS solution on the net, so here is what I came up with. It seems to work.
    Just a little detour for those who are ok with multi-page and standard submit - it is not working, because Basic form submits the inputs (password in particular) as hidden. Browsers seem to show "Remember password" dialog, when a form containing a password field is submitted.


    Here is my suggestion:
    1. Generate a starter ExtJS app (I called it MyApp) and add a Login view.
    Code:
    D:\ext-4.2.2>sencha generate app MyApp D:\AjaxLogin
    ...
    D:\ext-4.2.2>cd \AjaxLogin
    D:\AjaxLogin>sencha generate view Login
    2. Make the login form

    Code:
    Ext.define("MyApp.view.Login", {
        extend: 'Ext.window.Window',
        requires: ['Ext.form.Panel'],
    
    
        title: 'Login',
        closable: false,
        modal: true,
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [{
                    xtype: 'form',
    
    
                    autoEl: {
                        tag: 'form',
                        method: 'POST',
                        action: 'blank.html',
                        target: 'submitTarget'
                    },
    
    
                    items: [{
                        xtype: 'textfield',
                        name: 'username',
                        fieldLabel: 'Username',
                        allowBlank: false,
                        'inputAttrTpl': [
                            'autocomplete="on"'
                        ]
                    }, {
                        xtype: 'textfield',
                        inputType: 'password',
                        name: 'password',
                        fieldLabel: 'Password',
                        allowBlank: false,
                        'inputAttrTpl': [
                            'autocomplete="on"'
                        ]
                    }, {
                        xtype: 'component',
                        html: '<iframe id="submitTarget" name="submitTarget" style="display:none"></iframe>'
                    }, {
                        xtype: 'component',
                        html: '<input type="submit" id="submitButton" style="display:none">'
                    }],
    
    
                    buttons: [{
                        itemId: 'loginButton',
                        type: 'submit',
                        text: 'Login',
                        formBind: true
                    }, {
                        itemId: 'resetButton',
                        text: 'Reset'
                    }]
                }]
            });
    
    
            me.callParent(arguments);
        }
    });

    In the example the login form is in a window, but any other container would do. The important parts are:
    - The inputs of a FormPanel are not inside a form tag. So create a form tag with autoEl. Method should be post. Action should point to some other page, I call it blank.html. Ironically it cannot be blank, but should contain something. Content is not important, it won't show. The form should have a target. The target is an invisible iframe - submitTarget.
    - The inputs should have autocomplete on.
    - There should be an invisible iframe for the form to submit into. It will be reloaded with form's action. It shouldn't be necessarily in the form.
    - There should be an invisible submit button within the form

    Don't forget to create the blank.html, containing some text.

    3. I'm using the Main controller in the example, but for a real application the logic would probably be in a separate controller. Anyway don't forget to add the controller's name in Application.js.

    Code:
    Ext.define('MyApp.Application', {
        name: 'MyApp',
    
    
        extend: 'Ext.app.Application',
    
    
        views: [
            'Main', 'Login'
        ],
    
    
        controllers: [
            'Main'
        ],
    
    
        stores: [
            // TODO: add stores here
        ]
    });

    To make the "Remember password" dialog appear, just click (programmatically) the hidden submit button. Calling form.submit() won't work for some browsers.

    Code:
    Ext.define('MyApp.controller.Main', {
        extend: 'Ext.app.Controller',
    
    
        init: function(application) {
            if (!this.isUserAuthenticated()) {
                this.showLoginForm();
            }
    
    
            this.control({
                "#loginButton": {
                    click: this.login
                },
                "#resetButton": {
                    click: this.resetForm
                }
    
    
            });
        },
    
    
        isUserAuthenticated: function() {
            return false;
        },
    
    
        showLoginForm: function() {
            Ext.create('MyApp.view.Login').show();
        },
    
    
        login: function() {
            // make ajax request, do authentication ...
            // submit the hidden form to trigger browser's Remember password dialog
            Ext.getElementById('submitButton').click();
        },
    
    
        resetForm: function(resetButton) {
            resetButton.up('form').getForm().reset();
        }
    });


    That's it. Comments and improvements are very welcome.

  2. #2

    Default

    AjaxLogin example
    Attached Files Attached Files

  3. #3

    Default AjaxSubmit or Form standardSubmit don't work with FF and IE autofill save password

    Hi good people&nbsp;<img src="images/smilies/1.gif" border="0" alt="" title="Smile" smilieid="74" class="inlineimg"><br><br>I've been trying to make "browser save password" work with ExtJS 4.2.1 and i've tried every solution i found on the net but can't fix it.<br><br>The last thing I tried are these two:<br><br>http://stackoverflow.com/questions/11965919/browser-does-not-remember-password-during-login<br><br>http://stackoverflow.com/questions/10893947/extjs-how-submit-form-without-ajax<br><br>but i cant still make it work.<br><br>Is there anybody who has any more tested solution for this issue?<br><br>Any help would be greatly appreciated.<br><br>Many thanks!<br><br>

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2011
    Location
    NL
    Posts
    253

    Default

    Discussion continues in the Ext JS 5 Q&A forum:
    How to get an Ext JS Login Form that is browser autocomplete compatible?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •