Repository: couchdb-fauxton Updated Branches: refs/heads/master 3c4fa9568 -> b29ad53cf
Update the CSS and some controls for the CORS page: - the 'update' input field for editing a domain name, now automatically resizes and no longer overlaps the pencil/trashcan buttons - users can hit 'enter' to validate and submit the 'Update' domain and 'Add' domain fields - page does not return an empty origin, if "specific origins" is set, but there are no domains on that list closes COUCHDB-2569 Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b29ad53c Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b29ad53c Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b29ad53c Branch: refs/heads/master Commit: b29ad53cfc3df39dd91412ec01c54d75be6ceab6 Parents: 3c4fa95 Author: [email protected] <[email protected]> Authored: Fri Feb 6 15:47:56 2015 -0500 Committer: Robert Kowalski <[email protected]> Committed: Fri Feb 27 11:12:46 2015 +0100 ---------------------------------------------------------------------- app/addons/cors/assets/less/cors.less | 14 ++++++++++ app/addons/cors/components.react.jsx | 30 ++++++++++++++++----- app/addons/cors/resources.js | 16 ++++++----- app/addons/cors/tests/componentsSpec.react.jsx | 11 ++++++-- app/addons/cors/tests/resourcesSpec.js | 16 +++++++---- app/addons/cors/views.js | 2 +- 6 files changed, 67 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b29ad53c/app/addons/cors/assets/less/cors.less ---------------------------------------------------------------------- diff --git a/app/addons/cors/assets/less/cors.less b/app/addons/cors/assets/less/cors.less index ce6dc7e..0d48352 100644 --- a/app/addons/cors/assets/less/cors.less +++ b/app/addons/cors/assets/less/cors.less @@ -86,6 +86,20 @@ input[type='text'] { width: 100%; } + + .input-append.edit-domain-section { + width : 100%; + margin-bottom: 0px; + + input { + width: calc(100% ~"-" 82px); + /* + the 'update' button is 76 px wide, + so 82px gives it a little room + compatible browsers: http://caniuse.com/#feat=calc + */ + } + } } #origin-domain-table { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b29ad53c/app/addons/cors/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/cors/components.react.jsx b/app/addons/cors/components.react.jsx index 583c8c0..65d7cfc 100644 --- a/app/addons/cors/components.react.jsx +++ b/app/addons/cors/components.react.jsx @@ -69,11 +69,17 @@ define([ this.setState({updatedOrigin: event.target.value}); }, + onKeyUp: function (e) { + if (e.keyCode === 13) { //enter key + return this.updateOrigin(e); + } + }, + createOriginDisplay: function () { if (this.state.edit) { return ( <div className="input-append edit-domain-section"> - <input type="text" name="update_origin_domain" onChange={this.onInputChange} value={this.state.updatedOrigin} /> + <input type="text" name="update_origin_domain" onChange={this.onInputChange} onKeyUp={this.onKeyUp} value={this.state.updatedOrigin} /> <button onClick={this.updateOrigin} className="btn btn-primary update-origin"> Update </button> </div> ); @@ -152,6 +158,12 @@ define([ this.setState({origin: ''}); }, + onKeyUp: function (e) { + if (e.keyCode == 13) { //enter key + return this.addOrigin(e); + } + }, + render: function () { if (!this.props.isVisible) { return null; @@ -161,7 +173,7 @@ define([ <div id= "origin-domains-container"> <div className= "origin-domains"> <div className="input-append"> - <input type="text" name="new_origin_domain" onChange={this.onInputChange} value={this.state.origin} placeholder="e.g., https://site.com"/> + <input type="text" name="new_origin_domain" onChange={this.onInputChange} onKeyUp={this.onKeyUp} value={this.state.origin} placeholder="e.g., https://site.com"/> <button onClick={this.addOrigin} className="btn btn-primary add-domain"> Add </button> </div> </div> @@ -174,6 +186,13 @@ define([ var Origins = React.createClass({ onOriginChange: function (event) { + if (event.target.value === 'all' && this.props.isAllOrigins) { + return; // do nothing if all origins is already selected + } + if (event.target.value === 'selected' && !this.props.isAllOrigins) { + return; // do nothing if specific origins is already selected + } + this.props.originChange(event.target.value === 'all'); }, @@ -188,10 +207,10 @@ define([ <p><strong> Origin Domains </strong> </p> <p>Databases will accept requests from these domains: </p> <label className="radio"> - <input type="radio" checked={this.props.isAllOrigins} value="all" onChange={this.onOriginChange} name="all-domains"/> All origin domains ( * ) + <input type="radio" checked={this.props.isAllOrigins} value="all" onChange={this.onOriginChange} name="all-domains"/> All domains ( * ) </label> <label className="radio"> - <input type="radio" checked={!this.props.isAllOrigins} value="selected" onChange={this.onOriginChange} name="selected-domains"/> Restrict to specific origin domains + <input type="radio" checked={!this.props.isAllOrigins} value="selected" onChange={this.onOriginChange} name="selected-domains"/> Restrict to specific domains </label> </div> ); @@ -309,9 +328,6 @@ define([ <OriginInput addOrigin={this.addOrigin} isVisible={isVisible} /> </div> - <div className="form-actions"> - </div> - </form> </div> ); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b29ad53c/app/addons/cors/resources.js ---------------------------------------------------------------------- diff --git a/app/addons/cors/resources.js b/app/addons/cors/resources.js index 4cf4f10..867c356 100644 --- a/app/addons/cors/resources.js +++ b/app/addons/cors/resources.js @@ -24,13 +24,15 @@ function (app, FauxtonAPI) { return app.host + '/_config/cors'; }, - getOrigins: function () { - var origins = this.get('origins'); - if (_.isUndefined(origins)) { - return []; - } - - return origins.split(','); + parse: function (resp) { + var origins = !resp.origins ? [] : resp.origins.split(','); + + return { + origins: origins, + methods: resp.methods, + credentials: resp.credentials, + headers: resp.headers + }; } }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b29ad53c/app/addons/cors/tests/componentsSpec.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/cors/tests/componentsSpec.react.jsx b/app/addons/cors/tests/componentsSpec.react.jsx index 5880257..20d84c3 100644 --- a/app/addons/cors/tests/componentsSpec.react.jsx +++ b/app/addons/cors/tests/componentsSpec.react.jsx @@ -108,7 +108,7 @@ define([ assert.ok(spy.calledWith(newOrigin)); }); - it('calls addOrogin AddOrigin on add click with valid domain', function () { + it('calls addOrigin on add click with valid domain', function () { TestUtils.Simulate.change($(inputEl.getDOMNode()).find('input')[0],{target: {value: newOrigin}}); TestUtils.Simulate.click($(inputEl.getDOMNode()).find('.btn')[0]); assert.ok(addOrigin.calledWith(newOrigin)); @@ -140,7 +140,14 @@ define([ assert.ok(changeOrigin.calledWith(true)); }); - it('calls change Origin on selected origins selected', function () { + it('calls changeOrigin() when you switch from "Allow All Origins" to "Select List of Origins"', function () { + //changeOrigin(true) = sets origins to ['*'] + //changeOrigin(false) = sets origins to [] (an empty array which user can populate with URLs) + + //this test begins with 'select origins' checked, + //1. render radio buttons with 'all origins' + originEl = TestUtils.renderIntoDocument(<Views.Origins corsEnabled={true} isAllOrigins={true} originChange={changeOrigin}/>, container); + //2. switch back to 'select origins' TestUtils.Simulate.change($(originEl.getDOMNode()).find('input[value="selected"]')[0]); assert.ok(changeOrigin.calledWith(false)); }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b29ad53c/app/addons/cors/tests/resourcesSpec.js ---------------------------------------------------------------------- diff --git a/app/addons/cors/tests/resourcesSpec.js b/app/addons/cors/tests/resourcesSpec.js index 2d2c8d0..2d61846 100644 --- a/app/addons/cors/tests/resourcesSpec.js +++ b/app/addons/cors/tests/resourcesSpec.js @@ -25,16 +25,22 @@ define([ it('Splits up origins into array', function () { var origins = ['http://hello.com', 'http://another.co.a']; - cors.set({origins: origins.join(',')}); - - assert.deepEqual(cors.getOrigins(), origins); + cors.set(cors.parse({origins: origins.join(',')})); + assert.deepEqual(cors.get('origins'), origins); }); it('returns empty array for undefined', function () { - - assert.deepEqual(cors.getOrigins(), []); + var origins = { origins : undefined }; + cors.set(cors.parse(origins)); + assert.deepEqual(cors.get('origins'), []); }); + it('does not return an empty string (empty origin), when "specific origins" is set, but there are no domains on that list', function () { + var emptyOrigins = {origins: ''}; + cors.set(cors.parse(emptyOrigins)); + assert.deepEqual(cors.get('origins') , []); + }); + }); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b29ad53c/app/addons/cors/views.js ---------------------------------------------------------------------- diff --git a/app/addons/cors/views.js b/app/addons/cors/views.js index 341b427..66e2f94 100644 --- a/app/addons/cors/views.js +++ b/app/addons/cors/views.js @@ -35,7 +35,7 @@ function (app, FauxtonAPI, CORS, Components, Actions) { afterRender: function () { Actions.editCors({ - origins: this.cors.getOrigins(), + origins: this.cors.get('origins'), isEnabled: this.httpd.corsEnabled() }); Components.renderCORS(this.el);
