Using reactjs and javascript - Chrome does not offer to remember passwords

Question

Hi I ran into the bug where Chrome does not offer to remember userid & passwords.

I tried the solution in link below but I could not get it to work. Has anybody solved this for React? http://code.google.com/p/chromium/issues/detail?id=43219

I implemented the solution in the above link but it did nothing when using react.

Many Thanks!

Sample Code as requested: The original workaround is described in the link above - I have included here: This is a Chrome bug and here is the recommended workaround: http://code.google.com/p/chromium/issues/detail?id=43219

As a followup to comment #5, here is a fuller explanation of a workaround that I have tested. On your login page, include a form with two input elements. Set the name and id of one to "userid" and the other to "password". E.g.,

<input value type="text" id="userid" name="userid" autocomplete="on">
<input value type="password" id="password" name="password" autocomplete="on">

Give the form a POST action to a blank html page served from the same domain, say blank.html. Set the onsubmit handler to a JavaScript function:

<form name="login" id="login" method="POST" action="blank.html" onsubmit="return do_login();">

Above the form, include a hidden iframe element, like so:

<iframe src="login.html" style="width:0px;height:0px;border:0px;" id="hidden" name="hidden">          </iframe>

The login.html file must also be served from the same domain, and it should contain an identical form (same names and ids, same action and method) as the one on the real login form. In your JavaScript do_login handler, perform the authentication however you like. To get Chrome to prompt the user to store the password, have the JavaScript code copy the values from the real form to the hidden form, then submit the hidden form, like so:

var userid = document.getElementById("userid").value;
var password = document.getElementById("password").value; 
var iframe = document.getElementById("hidden");
var iframedoc = iframe.contentWindow ? iframe.contentWindow.document : iframe.contentDocument;
var fake_login_form = iframedoc.getElementById("login");
var fake_userid = iframedoc.getElementById("userid");
fake_userid.value = userid;
fake_password.value = password;
fake_login_form.submit();

Tested with Chrome 10.0.648.204.

Here is what I did for React:

I created a 'blank form' and configured an nginx rule:

Included a dummy login form which is rendered and hidden: Note: I am using react-frame-component /** * @jsx React.DOM */

'use strict';

var React = require('react/addons');
var Frame = require('react-frame-component');
var Input = require('react-bootstrap/Input');


var DummyLoginForm = React.createClass({

    _onChange: function(){
        console.log('DummyLoginForm onChange called')
    },

    _onSubmit: function() {
        console.log('DummyLoginForm onsubmit called');

        var email = this.refs.userid.getValue();
        var password = this.refs.password.getValue();

        console.log(email);
        console.log(password);
    },

    render: function () {
        var content = ( 
        <div>
            <Frame id="hidden" width="0" height="0" name="hidden">
               <form role="form" name="dummylogin" id="dummylogin" ref="dummylogin" method="POST" action="/login/index.html" onsubmit="return _onSubmit();">
                    <input value type="text" id="userid" name="userid" ref="userid" autoComplete="on" onChange={this._onChange}/>
                    <input value type="password" id="password" name="password" autoComplete="on" onChange={this._onChange}/>
                </form>
            </Frame>
        </div>

        );

        return content;
    }

  /*jshint ignore:end */

});

module.exports = DummyLoginForm;

In the real login modal I do this: I am using react-bootstrap modal

onSubmit: function(e) {
    if(e && typeof e !== 'undefined') {
        e.stopPropagation();
        e.preventDefault();
        }
        var email = this.refs.email.getValue();
        var password = this.refs.password.getValue();

    MyUtils.login(email, password);

    // workaround to force chrome to prompt to save password details 
    if(BrowserUtils.isChrome()) {

        console.log("Chrome");

        var iframe = document.getElementById("hidden");
        var iframedoc = iframe.contentWindow ? iframe.contentWindow.document :  iframe.contentDocument;
        var fake_login_form = iframedoc.getElementById("dummylogin");
        var fake_userid = iframedoc.getElementById("userid");
        var fake_password = iframedoc.getElementById("password");
        fake_userid.value = email;
        fake_password.value = password;
        fake_login_form.submit();
    }

},

The _onSubmit: function() in DummyLoginForm does not get triggered