diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 54d4f197..d0117251 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -39,13 +39,16 @@ let Form = React.createClass({
// You can use the form for inline requests, like the submit click on a button.
// For the form to then not display the error on top, you need to enable this option.
// It will make use of the GlobalNotification
- isInline: React.PropTypes.bool
+ isInline: React.PropTypes.bool,
+
+ autoComplete: React.PropTypes.string
},
getDefaultProps() {
return {
method: 'post',
- buttonSubmitText: 'SAVE'
+ buttonSubmitText: 'SAVE',
+ autoComplete: 'off'
};
},
@@ -217,6 +220,25 @@ let Form = React.createClass({
});
},
+ /**
+ * All webkit-based browsers are ignoring the attribute autoComplete="off",
+ * as stated here: http://stackoverflow.com/questions/15738259/disabling-chrome-autofill/15917221#15917221
+ * So what we actually have to do is depended on whether or not this.props.autoComplete is set to "on" or "off"
+ * insert two fake hidden inputs that mock password and username so that chrome/safari is filling those
+ */
+ getFakeAutocompletableInputs() {
+ if(this.props.autoComplete === 'off') {
+ return (
+
+
+
+
+ );
+ } else {
+ return null;
+ }
+ },
+
render() {
let className = 'ascribe-form';
@@ -229,7 +251,8 @@ let Form = React.createClass({
role="form"
className={className}
onSubmit={this.submit}
- autoComplete="on">
+ autoComplete={this.props.autoComplete}>
+ {this.getFakeAutocompletableInputs()}
{this.getErrors()}
{this.renderChildren()}
{this.getButtons()}
diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
index a3fd4d33..86a20119 100644
--- a/js/components/ascribe_forms/form_login.js
+++ b/js/components/ascribe_forms/form_login.js
@@ -101,6 +101,7 @@ let LoginForm = React.createClass({
ref="loginForm"
url={ApiUrls.users_login}
handleSuccess={this.handleSuccess}
+ autoComplete="on"
buttons={
@@ -131,7 +131,6 @@ let LoginForm = React.createClass({