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

fix: make enter key submit the login modal form

Browse source
This commit is contained in:
jharris4 2018-05-06 11:50:17 -04:00
parent 2e41d9f460
commit f89b4985ab
3 changed files with 28 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/webui/src/components/Header/index.js
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,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>
);

2
test/webui/components/__snapshots__/header.spec.js.snap
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>"`;

2
test/webui/components/header.spec.js
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);
});