couchdb-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From benk...@apache.org
Subject fauxton commit: updated refs/heads/master to 191ef07
Date Tue, 06 Oct 2015 16:12:40 GMT
Repository: couchdb-fauxton
Updated Branches:
  refs/heads/master 604f5346e -> 191ef07dd


Fix for Safari not recognizing autofill on login form

Safari doesn't trigger change events for form field autofills,
so the state of the login component doesn't updated, triggering
the rather irritating "you didn't fill in all the fields" error
when visually you sure did.

Since existing polyfill options don't work (see ticket), this fix
explicitly checks for the condition of a mismatch of
username-password form values and component state. It's a little
inelegant, but justifiable I think.

Closes COUCHDB-2829


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/191ef07d
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/191ef07d
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/191ef07d

Branch: refs/heads/master
Commit: 191ef07dd760c2bad19f6ae6da92e2008af6d22b
Parents: 604f534
Author: Ben Keen <ben.keen@gmail.com>
Authored: Fri Oct 2 10:09:17 2015 -0700
Committer: Ben Keen <ben.keen@gmail.com>
Committed: Tue Oct 6 09:12:15 2015 -0700

----------------------------------------------------------------------
 app/addons/auth/components.react.jsx            | 35 +++++++++++++++++---
 .../auth/test/auth.componentsSpec.react.jsx     | 29 +++++++++++++---
 2 files changed, 55 insertions(+), 9 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/191ef07d/app/addons/auth/components.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/auth/components.react.jsx b/app/addons/auth/components.react.jsx
index 5fd5c4c..5fe87ca 100644
--- a/app/addons/auth/components.react.jsx
+++ b/app/addons/auth/components.react.jsx
@@ -37,7 +37,11 @@ define([
 
     getDefaultProps: function () {
       return {
-        urlBack: ''
+        urlBack: '',
+
+        // for testing purposes only
+        testBlankUsername: null,
+        testBlankPassword: null
       };
     },
 
@@ -46,9 +50,30 @@ define([
       this.setState(change);
     },
 
-    login: function (e) {
+    submit: function (e) {
       e.preventDefault();
-      AuthActions.login(this.state.username, this.state.password, this.props.urlBack);
+
+      if (!this.checkUnrecognizedAutoFill()) {
+        this.login(this.state.username, this.state.password);
+      }
+    },
+
+    // Safari has a bug where autofill doesn't trigger a change event. This checks for the
condition where the state
+    // and form fields have a mismatch. See: https://issues.apache.org/jira/browse/COUCHDB-2829
+    checkUnrecognizedAutoFill: function () {
+      if (this.state.username !== '' || this.state.password !== '') {
+        return false;
+      }
+      var username = (this.props.testBlankUsername) ? this.props.testBlankUsername : this.refs.username.getDOMNode().value;
+      var password = (this.props.testBlankPassword) ? this.props.testBlankPassword : this.refs.password.getDOMNode().value;
+      this.setState({ username: username, password: password }); // doesn't set immediately,
hence separate login() call
+      this.login(username, password);
+
+      return true;
+    },
+
+    login: function (username, password) {
+      AuthActions.login(username, password, this.props.urlBack);
     },
 
     componentDidMount: function () {
@@ -59,14 +84,14 @@ define([
       return (
         <div className="row-fluid">
           <div className="span12">
-            <form id="login" onSubmit={this.login}>
+            <form id="login" onSubmit={this.submit}>
               <p className="help-block">
                 Login with your username and password
               </p>
               <input id="username" type="text" name="name" ref="username" placeholder="Username"
size="24"
                 onChange={this.onInputChange} value={this.state.username} />
               <br/>
-              <input id="password" type="password" name="password" placeholder="Password"
size="24"
+              <input id="password" type="password" name="password" ref="password" placeholder="Password"
size="24"
                 onChange={this.onInputChange} value={this.state.password} />
               <br/>
               <button id="submit" className="btn" type="submit">Login</button>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/191ef07d/app/addons/auth/test/auth.componentsSpec.react.jsx
----------------------------------------------------------------------
diff --git a/app/addons/auth/test/auth.componentsSpec.react.jsx b/app/addons/auth/test/auth.componentsSpec.react.jsx
index 937ea78..5113147 100644
--- a/app/addons/auth/test/auth.componentsSpec.react.jsx
+++ b/app/addons/auth/test/auth.componentsSpec.react.jsx
@@ -26,22 +26,43 @@ define([
   describe('Auth -- Components', function () {
 
     describe('LoginForm', function () {
-      var container, loginForm;
+      var container, loginForm, stub;
 
       beforeEach(function () {
+        stub = sinon.stub(Actions, 'login');
         container = document.createElement('div');
-        loginForm = TestUtils.renderIntoDocument(<Components.LoginForm />, container);
       });
 
       afterEach(function () {
         React.unmountComponentAtNode(container);
+        createAdminSidebarStore.reset();
+        Actions.login.restore();
       });
 
       it('should trigger login event when form submitted', function () {
-        var spy = sinon.spy(Actions, 'login');
+        loginForm = TestUtils.renderIntoDocument(<Components.LoginForm />, container);
         TestUtils.Simulate.submit($(loginForm.getDOMNode()).find('#login')[0]);
-        assert.ok(spy.calledOnce);
+        assert.ok(stub.calledOnce);
       });
+
+      it('in case of nothing in state, should pass actual values to Actions.login()', function
() {
+        var username = 'bob';
+        var password = 'smith';
+
+        loginForm = TestUtils.renderIntoDocument(
+          <Components.LoginForm
+            testBlankUsername={username}
+            testBlankPassword={password}
+          />, container);
+
+        TestUtils.Simulate.submit($(loginForm.getDOMNode()).find('#login')[0]);
+        assert.ok(stub.calledOnce);
+
+        // confirm Actions.login() received the values that weren't in the DOM
+        assert.equal(stub.args[0][0], username);
+        assert.equal(stub.args[0][1], password);
+      });
+
     });
 
     describe('ChangePasswordForm', function () {


Mime
View raw message