Hi, I encountered an error when Chrome doesn’t offer to remember user IDs and passwords.
I tried the solution in the link below, but I could not get it to work. Has anyone decided this for React? http://code.google.com/p/chromium/issues/detail?id=43219
I implemented the solution in the link above, but did nothing when using the reaction.
Many thanks!
Sample code on request: The original workaround is described in the link above - I included here: This is a Chrome bug, and a workaround is recommended here: http://code.google.com/p/chromium/issues/detail?id=43219
As a comment to comment No. 5, a more complete explanation of the workaround I tested is given. On the login page, enter a form with two input elements. Set the name and identifier of one to "userid" and the other to "password". For instance.
<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 an empty html page served from the same domain, say blank.html. Set the onsubmit handler to the JavaScript function:
<form name="login" id="login" method="POST" action="blank.html" onsubmit="return do_login();">
Above the form, include the hidden iframe element, for example:
<iframe src="login.html" style="width:0px;height:0px;border:0px;" id="hidden" name="hidden"> </iframe>
The login.html file must also be sent from the same domain and must contain an identical form (the same names and identifiers, the same action and method) as in the real login form. In the do_login JavaScript handler, authenticate as you like. To force Chrome to ask the user for a password for storage, ask the JavaScript code to copy the values from the real form to the hidden form, and then send the hidden form, for example:
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 an "empty form" and configured the nginx rule:
A dummy login form is included, which is displayed and hidden: Note. I am using the frame-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; }
});
module.exports = DummyLoginForm;
In real modality mode I do this: I use the reaction method-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(); } },
_OnSubmit :() function in DummyLoginForm not starting