Infrastructure/verdaccio
0
Fork 0
mirror of https://github.com/verdaccio/verdaccio.git synced 2025-01-20 22:52:46 -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 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 isString from 'lodash/isString';
import isNumber from 'lodash/isNumber'; import isNumber from 'lodash/isNumber';
import {Link} from 'react-router-dom'; 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 === '') { if (this.state.username === '' || this.state.password === '') {
return this.setState({loginError: { return this.setState({loginError: {
title: 'Unable to login', title: 'Unable to login',
@ -161,26 +163,28 @@ export default class Header extends React.Component {
visible={ this.state.showLogin } visible={ this.state.showLogin }
onCancel={ () => this.toggleLoginModal() } onCancel={ () => this.toggleLoginModal() }
> >
<Dialog.Body> <Form className="login-form">
{ this.state.loginError && <Dialog.Body>
<Alert { this.state.loginError &&
title={this.state.loginError.title} type={this.state.loginError.type} <Alert
description={this.state.loginError.description} showIcon={true} closable={false}> title={this.state.loginError.title} type={this.state.loginError.type}
</Alert> description={this.state.loginError.description} showIcon={true} closable={false}>
} </Alert>
<br/> }
<Input name="username" placeholder="Username" onChange={this.handleInput.bind(this, 'username')} /> <br/>
<br/><br/> <Input name="username" placeholder="Username" onChange={this.handleInput.bind(this, 'username')} />
<Input name="password" type="password" placeholder="Type your password" onChange={this.handleInput.bind(this, 'password')} /> <br/><br/>
</Dialog.Body> <Input name="password" type="password" placeholder="Type your password" onChange={this.handleInput.bind(this, 'password')} />
<Dialog.Footer className="dialog-footer"> </Dialog.Body>
<Button onClick={ () => this.toggleLoginModal() } className="cancel-login-button"> <Dialog.Footer className="dialog-footer">
Cancel <Button onClick={ () => this.toggleLoginModal() } className="cancel-login-button">
</Button> Cancel
<Button type="primary" className="login-button" onClick={ this.handleSubmit }> </Button>
Login <Button nativeType="submit" className="login-button" onClick={ this.handleSubmit }>
</Button> Login
</Dialog.Footer> </Button>
</Dialog.Footer>
</Form>
</Dialog> </Dialog>
</header> </header>
); );

2
test/webui/components/__snapshots__/header.spec.js.snap
View file

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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', title: 'Unable to login',
type: 'error' type: 'error'
}; };
expect(handleSubmit()).toBeDefined(); expect(handleSubmit({ preventDefault: () => {} })).toBeDefined();
expect(HeaderWrapper.state('loginError')).toEqual(error); expect(HeaderWrapper.state('loginError')).toEqual(error);
}); });