Merge branch 'development' into 486-toaster

features/forging.feature

@@ -1,5 +1,4 @@
 Feature: Forging tab
-  @ignore
   Scenario: should allow to view forging center if account is delegate
     Given I'm logged in as "delegate"
     When I click tab number 3

features/login.feature

@@ -1,20 +1,17 @@
 Feature: Login page
-  @ignore
   Scenario: should allow to login
     Given I'm on login page
     When I fill in "wagon stock borrow episode laundry kitten salute link globe zero feed marble" to "passphrase" field
     And I click "login button"
     Then I should be logged in
 
-  @ignore
   Scenario: should allow to login to Mainnet 
     Given I'm on login page
     When I fill in "wagon stock borrow episode laundry kitten salute link globe zero feed marble" to "passphrase" field
     And I select option no. 1 from "network" select
     And I click "login button"
     Then I should be logged in
 
-  @ignore
   Scenario: should allow to change network
     Given I'm on login page
     When I select option no. 2 from "network" select

features/menu.feature

@@ -64,7 +64,6 @@ Feature: Top right menu
     Then I should see "Not enough LSK to pay 25 LSK fee" error message
     And "register button" should be disabled
 
-  @ignore
   Scenario: should allow to sign message
     Given I'm logged in as "any account"
     When I click "sign message" in main menu
@@ -82,29 +81,25 @@ Feature: Top right menu
          -----END LISK SIGNED MESSAGE-----
          """
 
-  @ignore
-  Scenario: should allow to exit sign message dialog
+  Scenario: should allow to exit sign message dialog with "cancel button"
     Given I'm logged in as "any account"
     When I click "sign message" in main menu
     And I click "cancel button"
     Then I should see no "modal dialog"
 
-  @ignore
-  Scenario: should allow to exit sign message dialog
+  Scenario: should allow to exit sign message dialog with "x button"
     Given I'm logged in as "any account"
     When I click "sign message" in main menu
     And I click "x button"
     Then I should see no "modal dialog"
 
-  @ignore
   Scenario: should allow to verify message
     Given I'm logged in as "any account"
     When I click "verify message" in main menu
     And  I fill in "c094ebee7ec0c50ebee32918655e089f6e1a604b83bcaa760293c61e0f18ab6f" to "public key" field
     And  I fill in "079331d868678fd5f272f09d6dc8792fb21335aec42af7f11caadbfbc17d4707e7d7f343854b0c619b647b81ba3f29b23edb4eaf382a47c534746bad4529560b48656c6c6f20776f726c64" to "signature" field
     Then I should see "Hello world" in "result" field
 
-  @ignore
   Scenario: should allow to exit verify message dialog
     Given I'm logged in as "any account"
     When I click "verify message" in main menu

features/step_definitions/forging.step.js

@@ -4,7 +4,7 @@ const { waitForElemAndCheckItsText } = require('../support/util.js');
 
 defineSupportCode(({ Then }) => {
   Then('I should see forging center', (callback) => {
-    waitForElemAndCheckItsText('forging .delegate-name', 'genesis_17', callback);
-    waitForElemAndCheckItsText('forging md-card.forged-blocks md-card-title .md-title', 'Forged Blocks', callback);
+    waitForElemAndCheckItsText('.delegate-name', 'genesis_17', callback);
+    waitForElemAndCheckItsText('.forged-blocks h5', 'Forged Blocks', callback);
   });
 });

features/step_definitions/generic.step.js

@@ -42,7 +42,7 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   });
 
   When('I click tab number {index}', (index, callback) => {
-    waitForElemAndClickIt(`main md-tab-item:nth-child(${index})`, callback);
+    waitForElemAndClickIt(`.main-tabs *:nth-child(${index})`, callback);
   });
 
   When('I click "{elementName}" in "{menuName}" menu', (elementName, menuName, callback) => {
@@ -52,14 +52,16 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   });
 
   When('I select option no. {index} from "{selectName}" select', (index, selectName, callback) => {
-    waitForElemAndClickIt(`md-select.${selectName}`);
-    const optionElem = element.all(by.css('md-select-menu md-option')).get(index - 1);
+    waitForElemAndClickIt(`.${selectName}`);
+    const optionElem = element.all(by.css(`.${selectName} ul li`)).get(index - 1);
     browser.wait(EC.presenceOf(optionElem), waitTime);
     optionElem.click().then(callback);
   });
 
   Then('the option "{optionText}" is selected in "{selectName}" select', (optionText, selectName, callback) => {
-    waitForElemAndCheckItsText(`.${selectName} md-select-value .md-text`, optionText, callback);
+    const elem = element(by.css(`.${selectName} input`));
+    expect(elem.getAttribute('value')).to.eventually.equal(optionText)
+      .and.notify(callback);
   });
 
   Then('I should see alert dialog with title "{title}" and text "{text}"', (title, text, callback) => {
@@ -72,11 +74,6 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
       .and.notify(callback);
   });
 
-  Then('I should see "{elementName}"', (elementName, callback) => {
-    expect(element.all(by.css(`.${elementName.replace(/ /g, '-')}`)).count()).to.eventually.equal(1)
-      .and.notify(callback);
-  });
-
   Then('I should see no "{elementName}"', (elementName, callback) => {
     browser.sleep(1000);
     expect(element.all(by.css(`.${elementName.replace(/ /g, '-')}`)).count()).to.eventually.equal(0)
@@ -101,13 +98,11 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   Given('I\'m logged in as "{accountName}"', (accountName, callback) => {
     browser.ignoreSynchronization = true;
     browser.driver.manage().window().setSize(1000, 1000);
-    browser.driver.get('about:blank');
-    // TODO: remove this after login is implemented
-    browser.get('http://localhost:8080/#/?peerStack=localhost').then(callback);
-    // TODO: Uncomment these after login is implemented
-    // browser.get('http://localhost:8080/#/?peerStack=localhost');
-    // waitForElemAndSendKeys('.passphrase', accounts[accountName].passphrase);
-    // waitForElemAndClickIt('.md-button.md-primary.md-raised', callback);
+    browser.get('http://localhost:8080/');
+    browser.manage().addCookie({ name: 'address', value: 'http://localhost:4000' });
+    browser.get('http://localhost:8080/');
+    waitForElemAndSendKeys('.passphrase input', accounts[accountName].passphrase);
+    waitForElemAndClickIt('.login-button', callback);
   });
 
   When('I {iterations} times move mouse randomly', (iterations, callback) => {

features/top.feature

@@ -5,18 +5,15 @@ Feature: Main page top area
     When I click "logout button"
     Then I should be on login page
 
-  @ignore
   Scenario: should show peer
     Given I'm logged in as "any account"
-    Then I should see "peer"
+    Then I should see text "localhost : 4000" in "peer" element
 
-  @ignore
   Scenario: should show address
-    Given I'm logged in as "any account"
-    Then I should see "address"
+    Given I'm logged in as "genesis"
+    Then I should see text "16313739661670634666L" in "address" element
 
-  @ignore
   Scenario: should show balance
-    Given I'm logged in as "any account"
-    Then I should see "balance"
+    Given I'm logged in as "empty account"
+    Then I should see text "0 LSK" in "balance" element
 

features/transactions.feature

@@ -1,5 +1,4 @@
 Feature: Transactions tab
-  @ignore
   Scenario: should show transactions
     Given I'm logged in as "genesis"
     When I click tab number 1

src/actions/dialog.js

@@ -1,4 +1,5 @@
 import actionTypes from '../constants/actions';
+import Alert from '../components/dialog/alert';
 
 /**
  * An action to dispatch to display a dialog
@@ -9,6 +10,39 @@ export const dialogDisplayed = data => ({
   type: actionTypes.dialogDisplayed,
 });
 
+/**
+ * An action to dispatch to display an alert dialog
+ *
+ */
+export const alertDialogDisplayed = data => dialogDisplayed({
+  title: data.title,
+  type: data.type,
+  childComponent: Alert,
+  childComponentProps: {
+    text: data.text,
+  },
+});
+
+/**
+ * An action to dispatch to display a success alert dialog
+ *
+ */
+export const successAlertDialogDisplayed = data => alertDialogDisplayed({
+  title: 'Success',
+  text: data.text,
+  type: 'success',
+});
+
+/**
+ * An action to dispatch to display a error alert dialog
+ *
+ */
+export const errorAlertDialogDisplayed = data => alertDialogDisplayed({
+  title: 'Error',
+  text: data.text,
+  type: 'error',
+});
+
 /**
  * An action to dispatch to hide a dialog
  *

src/actions/dialog.test.js

@@ -1,6 +1,14 @@
 import { expect } from 'chai';
 import actionTypes from '../constants/actions';
-import { dialogDisplayed, dialogHidden } from './dialog';
+import {
+  dialogDisplayed,
+  alertDialogDisplayed,
+  successAlertDialogDisplayed,
+  errorAlertDialogDisplayed,
+  dialogHidden,
+} from './dialog';
+import Alert from '../components/dialog/alert';
+
 
 describe('actions: dialog', () => {
   describe('dialogDisplayed', () => {
@@ -18,6 +26,70 @@ describe('actions: dialog', () => {
     });
   });
 
+  describe('alertDialogDisplayed', () => {
+    it('should create an action to show alert dialog', () => {
+      const data = {
+        title: 'success',
+        text: 'some text',
+      };
+
+      const expectedAction = {
+        data: {
+          title: data.title,
+          type: undefined,
+          childComponent: Alert,
+          childComponentProps: {
+            text: data.text,
+          },
+        },
+        type: actionTypes.dialogDisplayed,
+      };
+      expect(alertDialogDisplayed(data)).to.be.deep.equal(expectedAction);
+    });
+  });
+
+  describe('successAlertDialogDisplayed', () => {
+    it('should create an action to show alert dialog', () => {
+      const data = {
+        text: 'some text',
+      };
+
+      const expectedAction = {
+        data: {
+          title: 'Success',
+          type: 'success',
+          childComponent: Alert,
+          childComponentProps: {
+            text: data.text,
+          },
+        },
+        type: actionTypes.dialogDisplayed,
+      };
+      expect(successAlertDialogDisplayed(data)).to.be.deep.equal(expectedAction);
+    });
+  });
+
+  describe('errorAlertDialogDisplayed', () => {
+    it('should create an action to show alert dialog', () => {
+      const data = {
+        text: 'some text',
+      };
+
+      const expectedAction = {
+        data: {
+          title: 'Error',
+          type: 'error',
+          childComponent: Alert,
+          childComponentProps: {
+            text: data.text,
+          },
+        },
+        type: actionTypes.dialogDisplayed,
+      };
+      expect(errorAlertDialogDisplayed(data)).to.be.deep.equal(expectedAction);
+    });
+  });
+
   describe('dialogHidden', () => {
     it('should create an action to hide dialog', () => {
       const expectedAction = {

src/components/account/accountComponent.js

@@ -44,7 +44,7 @@ class AccountComponent extends React.Component {
               <p className="inner primary">
                 {this.props.peers.data.options.name}
               </p>
-              <p className="inner secondary">
+              <p className="inner secondary peer">
                 {this.props.peers.data.currentPeer}
                 <span> : {this.props.peers.data.port}</span>
               </p>
@@ -55,7 +55,7 @@ class AccountComponent extends React.Component {
           <div className="box">
             <h3 className={styles.title}>Balance</h3>
             <div className={styles['value-wrapper']}>
-              <p className="inner primary full hasTip">
+              <p className="inner primary full hasTip balance">
                 <LiskAmount val={this.props.account.balance} /> LSK
               </p>
               <p className="inner secondary tooltip">

src/components/account/address.js

@@ -8,11 +8,11 @@ const Address = (props) => {
       <p className="inner primary">
         {props.delegate.username}
       </p>
-      <p className="inner secondary">
+      <p className="inner secondary address">
         <span>{props.address}</span>
       </p>
     </div>)
-    : (<p className="inner primary full">
+    : (<p className="inner primary full address">
       {props.address}
     </p>);
 

src/components/app/app.css

@@ -33,4 +33,10 @@ body{
   background-color: #fff;
   padding: 16px;
   box-sizing: border-box;
+  &.noPaddingBox{
+    padding: 16px 0;
+  }
+}
+:global .hasPaddingRow{
+  padding: 0 16px;
 }

src/components/app/index.js

@@ -24,9 +24,11 @@ const App = () => (
       <PrivateRoutes path='/main' render={ ({ match }) => (
         <main>
           <Account />
-          <Link to={`${match.url}/transactions`}>Transactions</Link>
-          <Link to={`${match.url}/voting`}>Voting</Link>
-          <Link to={`${match.url}/forging`}>Forging</Link>
+          <section className='main-tabs'>
+            <Link to={`${match.url}/transactions`}>Transactions</Link>
+            <Link to={`${match.url}/voting`}>Voting</Link>
+            <Link to={`${match.url}/forging`}>Forging</Link>
+          </section>
 
           <Route path={`${match.url}/transactions`} component={Transactions} />
           <Route path={`${match.url}/voting`} component={Voting} />

src/components/dialog/alert.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Button from 'react-toolbox/lib/button';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
+
+const Alert = props => (
+  <div>
+    <p>{props.text}</p>
+    <br />
+    <section className={`${grid.row} ${grid['between-xs']}`}>
+      <span />
+      <Button label='Ok' onClick={props.closeDialog}/>
+    </section>
+  </div>
+);
+
+export default Alert;