Ui 2 move to packages/* (#6113)
* Move secureApi to shell
* Extract isTestnet test
* Use mobx + subscriptions for status
* Re-add status indicator
* Add lerna
* Move intial packages to js/packages
* Move 3rdparty/{email,sms}-verification to correct location
* Move package.json & README to library src
* Move tests for library packages
* Move views & dapps to packages
* Move i18n to root
* Move shell to actual src (main app)
* Remove ~ references
* Change ~ to root (explicit imports)
* Finalise convert of ~
* Move views into dapps as well
* Move dapps to packages/
* Fix references
* Update css
* Update test spec locations
* Update tests
* Case fix
* Skip flakey tests
* Update enzyme
* Skip previously ignored tests
* Allow empty api for hw
* Re-add theme for embed
This commit is contained in:
Jaco Greeff
GitHub
133
js/src/Connection/connection.css
Normal file
133
js/src/Connection/connection.css
Normal file
@@ -0,0 +1,133 @@
|
||||
/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
/* This file is part of Parity.
|
||||
/*
|
||||
/* Parity is free software: you can redistribute it and/or modify
|
||||
/* it under the terms of the GNU General Public License as published by
|
||||
/* the Free Software Foundation; either version 3 of the License; or
|
||||
/* (at your option) any later version.
|
||||
/*
|
||||
/* Parity is distributed in the hope that it will be useful;
|
||||
/* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
/* GNU General Public License for more details.
|
||||
/*
|
||||
/* You should have received a copy of the GNU General Public License
|
||||
/* along with Parity. If not; see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
z-index: 20000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: 0 auto;
|
||||
padding: 2em 4em;
|
||||
text-align: center;
|
||||
max-width: 40em;
|
||||
background: rgba(25, 25, 25, 0.75);
|
||||
color: rgb(208, 208, 208);
|
||||
box-shadow: rgba(0, 0, 0, 0.25) 0 14px 45px, rgba(0, 0, 0, 0.22) 0 10px 18px;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 1em;
|
||||
line-height: 1.618em;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 0.75em;
|
||||
padding: 0 4em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 0.75em 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.btnrow {
|
||||
text-align: right;
|
||||
padding: 0 4em;
|
||||
}
|
||||
|
||||
.icons {
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.iconSmall {
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
padding-bottom: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.icon i {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
.iconSmall i {
|
||||
font-size: 3em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.console {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
font-size: 16px;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
fill: rgb(0, 200, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
fill: rgb(150, 200, 150);
|
||||
}
|
||||
|
||||
100% {
|
||||
fill: rgb(0, 200, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
fill: red;
|
||||
animation-name: pulse;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.inputLabel {
|
||||
color: rgb(208, 208, 208);
|
||||
}
|
||||
|
||||
.formInput input {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.formInput input:focus {
|
||||
background: rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
202
js/src/Connection/connection.js
Normal file
202
js/src/Connection/connection.js
Normal file
@@ -0,0 +1,202 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Input } from '@parity/ui';
|
||||
import { CompareIcon, ComputerIcon, DashboardIcon, VpnIcon } from '@parity/ui/Icons';
|
||||
|
||||
import styles from './connection.css';
|
||||
|
||||
class Connection extends Component {
|
||||
static contextTypes = {
|
||||
api: PropTypes.object.isRequired
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
isConnected: PropTypes.bool,
|
||||
isConnecting: PropTypes.bool,
|
||||
needsToken: PropTypes.bool
|
||||
}
|
||||
|
||||
state = {
|
||||
loading: false,
|
||||
token: '',
|
||||
validToken: false
|
||||
}
|
||||
|
||||
render () {
|
||||
const { isConnecting, isConnected, needsToken } = this.props;
|
||||
|
||||
if (!isConnecting && isConnected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={ styles.overlay } />
|
||||
<div className={ styles.modal }>
|
||||
<div className={ styles.body }>
|
||||
<div className={ styles.icons }>
|
||||
<div className={ styles.icon }>
|
||||
<ComputerIcon className={ styles.svg } />
|
||||
</div>
|
||||
<div className={ styles.iconSmall }>
|
||||
<CompareIcon className={ `${styles.svg} ${styles.pulse}` } />
|
||||
</div>
|
||||
<div className={ styles.icon }>
|
||||
{
|
||||
needsToken
|
||||
? <VpnIcon className={ styles.svg } />
|
||||
: <DashboardIcon className={ styles.svg } />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
needsToken
|
||||
? this.renderSigner()
|
||||
: this.renderPing()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderSigner () {
|
||||
const { loading, token, validToken } = this.state;
|
||||
const { isConnecting, needsToken } = this.props;
|
||||
|
||||
if (needsToken && !isConnecting) {
|
||||
return (
|
||||
<div className={ styles.info }>
|
||||
<div>
|
||||
<FormattedMessage
|
||||
id='connection.noConnection'
|
||||
defaultMessage='Unable to make a connection to the Parity Secure API. To update your secure token or to generate a new one, run: {newToken} and paste the generated token into the space below.'
|
||||
values={ {
|
||||
newToken: <div className={ styles.console }>parity signer new-token</div>
|
||||
} }
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.timestamp }>
|
||||
<FormattedMessage
|
||||
id='connection.timestamp'
|
||||
defaultMessage='Ensure that both the Parity node and this machine connecting have computer clocks in-sync with each other and with a timestamp server, ensuring both successful token validation and block operations.'
|
||||
/>
|
||||
</div>
|
||||
<div className={ styles.form }>
|
||||
<Input
|
||||
className={ styles.formInput }
|
||||
autoFocus
|
||||
disabled={ loading }
|
||||
error={
|
||||
validToken || (!token || !token.length)
|
||||
? null
|
||||
: (
|
||||
<FormattedMessage
|
||||
id='connection.invalidToken'
|
||||
defaultMessage='invalid signer token'
|
||||
/>
|
||||
)
|
||||
}
|
||||
hint={
|
||||
<FormattedMessage
|
||||
id='connection.token.hint'
|
||||
defaultMessage='Insert the generated token here'
|
||||
/>
|
||||
}
|
||||
onChange={ this.onChangeToken }
|
||||
value={ token }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={ styles.info }>
|
||||
<FormattedMessage
|
||||
id='connection.connectingAPI'
|
||||
defaultMessage='Connecting to the Parity Secure API.'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderPing () {
|
||||
return (
|
||||
<div className={ styles.info }>
|
||||
<FormattedMessage
|
||||
id='connection.connectingNode'
|
||||
defaultMessage='Connecting to the Parity Node. If this informational message persists, please ensure that your Parity node is running and reachable on the network.'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
validateToken = (_token) => {
|
||||
const token = _token.trim();
|
||||
const validToken = /^[a-zA-Z0-9]{4}(-)?[a-zA-Z0-9]{4}(-)?[a-zA-Z0-9]{4}(-)?[a-zA-Z0-9]{4}$/.test(token);
|
||||
|
||||
return {
|
||||
token,
|
||||
validToken
|
||||
};
|
||||
}
|
||||
|
||||
onChangeToken = (event, _token) => {
|
||||
const { token, validToken } = this.validateToken(_token || event.target.value);
|
||||
|
||||
this.setState({ token, validToken }, () => {
|
||||
validToken && this.setToken();
|
||||
});
|
||||
}
|
||||
|
||||
setToken = () => {
|
||||
const { api } = this.context;
|
||||
const { token } = this.state;
|
||||
|
||||
this.setState({ loading: true });
|
||||
|
||||
return api
|
||||
.updateToken(token, 0)
|
||||
.then((isValid) => {
|
||||
this.setState({
|
||||
loading: isValid || false,
|
||||
validToken: isValid
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps (state) {
|
||||
const { isConnected, isConnecting, needsToken } = state.nodeStatus;
|
||||
|
||||
return {
|
||||
isConnected,
|
||||
isConnecting,
|
||||
needsToken
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
null
|
||||
)(Connection);
|
||||
156
js/src/Connection/connection.spec.js
Normal file
156
js/src/Connection/connection.spec.js
Normal file
@@ -0,0 +1,156 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
|
||||
import Connection from './';
|
||||
|
||||
let api;
|
||||
let component;
|
||||
let instance;
|
||||
|
||||
function createApi () {
|
||||
return {
|
||||
updateToken: sinon.stub().resolves()
|
||||
};
|
||||
}
|
||||
|
||||
function createRedux (isConnected = true, isConnecting = false, needsToken = false) {
|
||||
return {
|
||||
dispatch: sinon.stub(),
|
||||
subscribe: sinon.stub(),
|
||||
getState: () => {
|
||||
return {
|
||||
nodeStatus: {
|
||||
isConnected,
|
||||
isConnecting,
|
||||
needsToken
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function render (store) {
|
||||
api = createApi();
|
||||
component = shallow(
|
||||
<Connection />,
|
||||
{ context: { store: store || createRedux() } }
|
||||
).find('Connection').shallow({ context: { api } });
|
||||
instance = component.instance();
|
||||
|
||||
return component;
|
||||
}
|
||||
|
||||
describe('Connection', () => {
|
||||
it('renders defaults', () => {
|
||||
expect(render()).to.be.ok;
|
||||
});
|
||||
|
||||
it('does not render when connected', () => {
|
||||
expect(render(createRedux(true)).find('div')).to.have.length(0);
|
||||
});
|
||||
|
||||
describe('renderPing', () => {
|
||||
it('renders the connecting to node message', () => {
|
||||
render();
|
||||
const ping = shallow(instance.renderPing());
|
||||
|
||||
expect(ping.find('FormattedMessage').props().id).to.equal('connection.connectingNode');
|
||||
});
|
||||
});
|
||||
|
||||
describe('renderSigner', () => {
|
||||
it('renders the connecting to api message when isConnecting === true', () => {
|
||||
render(createRedux(false, true));
|
||||
const signer = shallow(instance.renderSigner());
|
||||
|
||||
expect(signer.find('FormattedMessage').props().id).to.equal('connection.connectingAPI');
|
||||
});
|
||||
|
||||
it('renders token input when needsToken == true & isConnecting === false', () => {
|
||||
render(createRedux(false, false, true));
|
||||
const signer = shallow(instance.renderSigner());
|
||||
|
||||
expect(signer.find('FormattedMessage').first().props().id).to.equal('connection.noConnection');
|
||||
});
|
||||
});
|
||||
|
||||
describe('validateToken', () => {
|
||||
beforeEach(() => {
|
||||
render();
|
||||
});
|
||||
|
||||
it('trims whitespace from passed tokens', () => {
|
||||
expect(instance.validateToken(' \t test ing\t ').token).to.equal('test ing');
|
||||
});
|
||||
|
||||
it('validates 4-4-4-4 format', () => {
|
||||
expect(instance.validateToken('1234-5678-90ab-cdef').validToken).to.be.true;
|
||||
});
|
||||
|
||||
it('validates 4-4-4-4 format (with trimmable whitespace)', () => {
|
||||
expect(instance.validateToken(' \t 1234-5678-90ab-cdef \t ').validToken).to.be.true;
|
||||
});
|
||||
|
||||
it('validates 4444 format', () => {
|
||||
expect(instance.validateToken('1234567890abcdef').validToken).to.be.true;
|
||||
});
|
||||
|
||||
it('validates 4444 format (with trimmable whitespace)', () => {
|
||||
expect(instance.validateToken(' \t 1234567890abcdef \t ').validToken).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
describe('onChangeToken', () => {
|
||||
beforeEach(() => {
|
||||
render();
|
||||
sinon.spy(instance, 'setToken');
|
||||
sinon.spy(instance, 'validateToken');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
instance.setToken.restore();
|
||||
instance.validateToken.restore();
|
||||
});
|
||||
|
||||
it('validates tokens passed', () => {
|
||||
instance.onChangeToken({ target: { value: 'testing' } });
|
||||
expect(instance.validateToken).to.have.been.calledWith('testing');
|
||||
});
|
||||
|
||||
it('sets the token on the api when valid', () => {
|
||||
instance.onChangeToken({ target: { value: '1234-5678-90ab-cdef' } });
|
||||
expect(instance.setToken).to.have.been.called;
|
||||
});
|
||||
});
|
||||
|
||||
describe('setToken', () => {
|
||||
beforeEach(() => {
|
||||
render();
|
||||
});
|
||||
|
||||
it('calls the api.updateToken', () => {
|
||||
component.setState({ token: 'testing' });
|
||||
|
||||
return instance.setToken().then(() => {
|
||||
expect(api.updateToken).to.have.been.calledWith('testing');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
17
js/src/Connection/index.js
Normal file
17
js/src/Connection/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
|
||||
// This file is part of Parity.
|
||||
|
||||
// Parity is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
|
||||
// Parity is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export default from './connection';
|
||||
Reference in New Issue
Block a user