From 2e41d9f4601a54f549cd7fe1064172e513be8a77 Mon Sep 17 00:00:00 2001
From: jharris4 <harris.jb@gmail.com>
Date: Sun, 6 May 2018 10:40:44 -0400
Subject: [PATCH 1/2] fix: disable autocomplete on search so it doesn't default
 to username

---
 src/webui/src/components/Search/index.js      | 20 +++++++++++++------
 .../__snapshots__/search.spec.js.snap         |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/webui/src/components/Search/index.js b/src/webui/src/components/Search/index.js
index 709f5d106..7d78af044 100644
--- a/src/webui/src/components/Search/index.js
+++ b/src/webui/src/components/Search/index.js
@@ -4,14 +4,22 @@ import PropTypes from 'prop-types';
 
 import classes from './search.scss';
 
+const noSubmit = (e) => {
+  e.preventDefault();
+};
+
 const Search = (props) => {
     return (
-      <input
-        type="text"
-        placeholder={props.placeHolder}
-        className={ classes.searchBox }
-        onChange={ props.handleSearchInput }
-      />
+      <form autoComplete="off" onSubmit={noSubmit}>
+        <input
+          name="search-box"
+          type="text"
+          placeholder={props.placeHolder}
+          className={classes.searchBox}
+          onChange={props.handleSearchInput}
+          autoComplete="off"
+        />
+      </form>
     );
 };
 
diff --git a/test/webui/components/__snapshots__/search.spec.js.snap b/test/webui/components/__snapshots__/search.spec.js.snap
index db744e042..bfa984b61 100644
--- a/test/webui/components/__snapshots__/search.spec.js.snap
+++ b/test/webui/components/__snapshots__/search.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Search /> component should match the snapshot 1`] = `"<input type=\\"text\\" placeholder=\\"Type to search...\\" class=\\"searchBox\\"/>"`;
+exports[`<Search /> component should match the snapshot 1`] = `"<form autoComplete=\\"off\\"><input type=\\"text\\" name=\\"search-box\\" placeholder=\\"Type to search...\\" class=\\"searchBox\\" autoComplete=\\"off\\"/></form>"`;

From f89b4985ab7da0c1a6bdefb7e2d080390d48ae42 Mon Sep 17 00:00:00 2001
From: jharris4 <harris.jb@gmail.com>
Date: Sun, 6 May 2018 11:50:17 -0400
Subject: [PATCH 2/2] fix: make enter key submit the login modal form

---
 src/webui/src/components/Header/index.js      | 48 ++++++++++---------
 .../__snapshots__/header.spec.js.snap         |  2 +-
 test/webui/components/header.spec.js          |  2 +-
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/webui/src/components/Header/index.js b/src/webui/src/components/Header/index.js
index b149887f7..573c29290 100644
--- a/src/webui/src/components/Header/index.js
+++ b/src/webui/src/components/Header/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Dialog, Input, Alert} from 'element-react';
+import {Form, Button, Dialog, Input, Alert} from 'element-react';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import {Link} from 'react-router-dom';
@@ -50,7 +50,9 @@ export default class Header extends React.Component {
     });
   }
 
-  async handleSubmit() {
+  async handleSubmit(event) {
+    event.preventDefault();
+
     if (this.state.username === '' || this.state.password === '') {
       return this.setState({loginError: {
         title: 'Unable to login',
@@ -161,26 +163,28 @@ export default class Header extends React.Component {
           visible={ this.state.showLogin }
           onCancel={ () => this.toggleLoginModal() }
         >
-          <Dialog.Body>
-            { this.state.loginError &&
-            <Alert
-              title={this.state.loginError.title} type={this.state.loginError.type}
-              description={this.state.loginError.description} showIcon={true} closable={false}>
-            </Alert>
-            }
-            <br/>
-            <Input name="username" placeholder="Username" onChange={this.handleInput.bind(this, 'username')} />
-            <br/><br/>
-            <Input name="password" type="password" placeholder="Type your password" onChange={this.handleInput.bind(this, 'password')} />
-          </Dialog.Body>
-          <Dialog.Footer className="dialog-footer">
-            <Button onClick={ () => this.toggleLoginModal() } className="cancel-login-button">
-              Cancel
-            </Button>
-            <Button type="primary" className="login-button" onClick={ this.handleSubmit }>
-              Login
-            </Button>
-          </Dialog.Footer>
+          <Form className="login-form">
+            <Dialog.Body>
+              { this.state.loginError &&
+              <Alert
+                title={this.state.loginError.title} type={this.state.loginError.type}
+                description={this.state.loginError.description} showIcon={true} closable={false}>
+              </Alert>
+              }
+              <br/>
+              <Input name="username" placeholder="Username" onChange={this.handleInput.bind(this, 'username')} />
+              <br/><br/>
+              <Input name="password" type="password" placeholder="Type your password" onChange={this.handleInput.bind(this, 'password')} />
+            </Dialog.Body>
+            <Dialog.Footer className="dialog-footer">
+              <Button onClick={ () => this.toggleLoginModal() } className="cancel-login-button">
+                Cancel
+              </Button>
+              <Button nativeType="submit" className="login-button" onClick={ this.handleSubmit }>
+                Login
+              </Button>
+            </Dialog.Footer>
+          </Form>
         </Dialog>
       </header>
     );
diff --git a/test/webui/components/__snapshots__/header.spec.js.snap b/test/webui/components/__snapshots__/header.spec.js.snap
index 3b7b8105f..d7bff72e9 100644
--- a/test/webui/components/__snapshots__/header.spec.js.snap
+++ b/test/webui/components/__snapshots__/header.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><button style=\\"margin-left: auto;\\" class=\\"el-button el-button--danger header-button-login\\" type=\\"button\\"><span>Login</span></button></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--primary login-button\\" type=\\"button\\"><span>Login</span></button></div></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;
+exports[`<Header /> snapshot test shoud match snapshot 1`] = `"<header class=\\"header\\"><div class=\\"headerWrap\\"><a href=\\"/\\"><img src=\\"\\" class=\\"logo\\"></a><figure>npm set registry nullblank<br>npm adduser --registry nullblank</figure><button style=\\"margin-left: auto;\\" class=\\"el-button el-button--danger header-button-login\\" type=\\"button\\"><span>Login</span></button></div><div><div style=\\"z-index: 1013; display: none;\\" class=\\"el-dialog__wrapper\\"><div style=\\"top: 15%;\\" class=\\"el-dialog el-dialog--tiny\\"><div class=\\"el-dialog__header\\"><span class=\\"el-dialog__title\\">Login</span><button type=\\"button\\" class=\\"el-dialog__headerbtn\\"><i class=\\"el-dialog__close el-icon el-icon-close\\"></i></button></div><form class=\\"el-form el-form--label-right login-form\\"><div class=\\"el-dialog__body\\"><br><div class=\\"el-input\\"><input type=\\"text\\" name=\\"username\\" placeholder=\\"Username\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div><br><br><div class=\\"el-input\\"><input type=\\"password\\" name=\\"password\\" placeholder=\\"Type your password\\" class=\\"el-input__inner\\" autocomplete=\\"off\\"></div></div><div class=\\"el-dialog__footer dialog-footer\\"><button class=\\"el-button el-button--default cancel-login-button\\" type=\\"button\\"><span>Cancel</span></button><button class=\\"el-button el-button--default login-button\\" type=\\"submit\\"><span>Login</span></button></div></form></div></div><div class=\\"v-modal\\" style=\\"z-index: 1012; display: none;\\"></div></div></header>"`;
diff --git a/test/webui/components/header.spec.js b/test/webui/components/header.spec.js
index e567375cf..ee0f64ff5 100644
--- a/test/webui/components/header.spec.js
+++ b/test/webui/components/header.spec.js
@@ -61,7 +61,7 @@ describe('<Header /> component shallow', () => {
       title: 'Unable to login',
       type: 'error'
     };
-    expect(handleSubmit()).toBeDefined();
+    expect(handleSubmit({ preventDefault: () => {} })).toBeDefined();
     expect(HeaderWrapper.state('loginError')).toEqual(error);
   });