Merge pull request #3141 from hypothesis/csp-violation-form-onfocus

CSP Violation: form input onfocus

h/static/scripts/form-select-onfocus-controller.js

+'use strict';
+
+function FormSelectOnFocusController(root) {
+  this._elements = root.querySelectorAll('.js-select-onfocus');
+
+  for (var i = 0; i < this._elements.length; i++) {
+    var element = this._elements[i];
+
+    // In case the `focus` event has already been fired, select the element
+    if (element === document.activeElement) {
+      element.select();
+    }
+
+    element.addEventListener('focus', function(event) {
+      event.target.select();
+    });
+  }
+}
+
+module.exports = FormSelectOnFocusController;

h/static/scripts/site.js

+'use strict';
+
 // configure error reporting
 var settings = require('./settings')(document);
 if (settings.raven) {
@@ -9,6 +11,7 @@ var page = require('page');
 var CreateGroupFormController = require('./create-group-form');
 var DropdownMenuController = require('./dropdown-menu');
 var InstallerController = require('./installer-controller');
+var FormSelectOnFocusController = require('./form-select-onfocus-controller');
 
 // setup components
 new DropdownMenuController(document);
@@ -24,6 +27,18 @@ page('/groups/new', function () {
   new CreateGroupFormController(document.body);
 });
 
+page('/login', function() {
+  new FormSelectOnFocusController(document.body);
+});
+
+page('/register', function() {
+  new FormSelectOnFocusController(document.body);
+});
+
+page('/forgot_password', function() {
+  new FormSelectOnFocusController(document.body);
+});
+
 document.addEventListener('DOMContentLoaded', function () {
-  page.start();
+  page.start({click: false});
 });

h/static/scripts/test/form-select-onfocus-controller-test.js

+'use strict';
+
+var FormSelectOnFocusController = require('../form-select-onfocus-controller');
+
+// helper to dispatch a native event to an element
+function sendEvent(element, eventType) {
+  // createEvent() used instead of Event constructor
+  // for PhantomJS compatibility
+  var event = document.createEvent('Event');
+  event.initEvent(eventType, true /* bubbles */, true /* cancelable */);
+  element.dispatchEvent(event);
+}
+
+describe('FormSelectOnFocusController', function() {
+  var root;
+
+  beforeEach(function() {
+    root = document.createElement('div');
+    root.innerHTML = '<form id="js-users-delete-form">' +
+                     '<input type="text" class="js-select-onfocus" value="some-test-value">';
+    document.body.appendChild(root);
+  });
+
+  afterEach(function() {
+    root.parentNode.removeChild(root);
+  });
+
+  it('it selects the element on focus event', function() {
+    new FormSelectOnFocusController(root);
+    var input = root.querySelector('input');
+    sendEvent(input, 'focus');
+    assert.strictEqual(input.selectionStart, 0);
+    assert.strictEqual(input.selectionEnd, input.value.length);
+  });
+
+  it('it selects the element without focus event when it is the active element', function() {
+    // Focus element before instantiating the controller
+    var input = root.querySelector('input');
+    input.focus();
+
+    new FormSelectOnFocusController(document.body);
+    assert.strictEqual(input.selectionStart, 0);
+    assert.strictEqual(input.selectionEnd, input.value.length);
+  });
+});