From 1f8c8a7d9eab737a2e6db81e29b6e042bbf34ba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 26 Aug 2015 15:41:59 +0200
Subject: [PATCH] (hopefully) fix auto-fill bug for safari/chrome

---
 js/components/ascribe_forms/form.js       | 29 ++++++++++++++++++++---
 js/components/ascribe_forms/form_login.js |  3 +--
 2 files changed, 27 insertions(+), 5 deletions(-)

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 (
+                <span>
+                    <input style={{display: 'none'}} type="text" name="fakeusernameremembered"/>
+                    <input style={{display: 'none'}} type="password" name="fakepasswordremembered"/>
+                </span>
+            );
+        } 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={
                     <button
                         type="submit"
@@ -121,7 +122,6 @@ let LoginForm = React.createClass({
                     <input
                         type="email"
                         placeholder={getLangText('Enter your email')}
-                        autoComplete="on"
                         name="username"
                         required/>
                 </Property>
@@ -131,7 +131,6 @@ let LoginForm = React.createClass({
                     <input
                         type="password"
                         placeholder={getLangText('Enter your password')}
-                        autoComplete="on"
                         name="password"
                         required/>
                 </Property>