0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-01-06 22:40:26 -05:00

Merge pull request #677 from jharris4/master

Fix search input autofill and allow pressing enter in login inputs to login
This commit is contained in:
Juan Picado @jotadeveloper 2018-05-07 22:19:43 +02:00 committed by GitHub
commit a19170423a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 31 deletions

View file

@ -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,6 +163,7 @@ export default class Header extends React.Component {
visible={ this.state.showLogin }
onCancel={ () => this.toggleLoginModal() }
>
<Form className="login-form">
<Dialog.Body>
{ this.state.loginError &&
<Alert
@ -177,10 +180,11 @@ export default class Header extends React.Component {
<Button onClick={ () => this.toggleLoginModal() } className="cancel-login-button">
Cancel
</Button>
<Button type="primary" className="login-button" onClick={ this.handleSubmit }>
<Button nativeType="submit" className="login-button" onClick={ this.handleSubmit }>
Login
</Button>
</Dialog.Footer>
</Form>
</Dialog>
</header>
);

View file

@ -4,14 +4,22 @@ import PropTypes from 'prop-types';
import classes from './search.scss';
const noSubmit = (e) => {
e.preventDefault();
};
const Search = (props) => {
return (
<form autoComplete="off" onSubmit={noSubmit}>
<input
name="search-box"
type="text"
placeholder={props.placeHolder}
className={classes.searchBox}
onChange={props.handleSearchInput}
autoComplete="off"
/>
</form>
);
};

View file

@ -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>"`;

View file

@ -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>"`;

View file

@ -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);
});