From 55620cd7e0a606680a7b6a92c413668593aad729 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Thu, 28 Jun 2018 11:31:51 +0200
Subject: [PATCH] Add back buttons in account creation

---
 .../AccountCopyPhrase/AccountCopyPhrase.js         |  8 +++++++-
 .../CreateAccount/AccountName/AccountName.js       |  8 +++++++-
 .../AccountPassword/AccountPassword.js             | 12 ++++++++++--
 .../AccountRewritePhrase/AccountRewritePhrase.js   | 14 ++++++++++++--
 .../src/assets/sass/components/_form-nav.scss      |  4 ++++
 5 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js b/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
index c5653b12..27363524 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountCopyPhrase/AccountCopyPhrase.js
@@ -14,6 +14,7 @@ class AccountCopyPhrase extends Component {
   render () {
     const {
       createAccountStore: { address, name, phrase },
+      history,
       location: { pathname }
     } = this.props;
     const currentStep = pathname.slice(-1);
@@ -43,7 +44,12 @@ class AccountCopyPhrase extends Component {
                 </ul>
               </div>
             </div>
-            <nav className='form-nav'>
+            <nav className='form-nav -space-around'>
+              {currentStep > 1 && (
+                <button className='button -cancel' onClick={history.goBack}>
+                  Back
+                </button>
+              )}
               <Link to={`/accounts/new/${+currentStep + 1}`}>
                 <button className='button'>Next</button>
               </Link>
diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
index 61fa9e20..1659aee9 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountName/AccountName.js
@@ -69,6 +69,7 @@ class AccountName extends Component {
   renderDrawer = () => {
     const {
       createAccountStore: { name },
+      history,
       location: { pathname }
     } = this.props;
     const currentStep = pathname.slice(-1);
@@ -85,7 +86,12 @@ class AccountName extends Component {
           type='text'
           value={name}
         />
-        <nav className='form-nav'>
+        <nav className='form-nav -space-around'>
+          {currentStep > 1 && (
+            <button className='button -cancel' onClick={history.goBack}>
+              Back
+            </button>
+          )}
           {name ? (
             <Link to={`/accounts/new/${+currentStep + 1}`}>
               <button className='button'>Next</button>
diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
index 668e67e9..6870f8c9 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountPassword/AccountPassword.js
@@ -38,9 +38,12 @@ class AccountPassword extends Component {
 
   render () {
     const {
-      createAccountStore: { address, name }
+      createAccountStore: { address, name },
+      history,
+      location: { pathname }
     } = this.props;
     const { confirm, password } = this.state;
+    const currentStep = pathname.slice(-1);
 
     return (
       <AccountCard
@@ -68,7 +71,12 @@ class AccountPassword extends Component {
               value={confirm}
             />
 
-            <nav className='form-nav'>
+            <nav className='form-nav -space-around'>
+              {currentStep > 1 && (
+                <button className='button -cancel' onClick={history.goBack}>
+                  Back
+                </button>
+              )}
               <button
                 className='button'
                 disabled={!password || confirm !== password}
diff --git a/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js b/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
index e56fae42..e50ea6ef 100644
--- a/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
+++ b/packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js
@@ -54,9 +54,12 @@ class AccountRewritePhrase extends Component {
 
   render () {
     const {
-      createAccountStore: { address, isImport, name }
+      createAccountStore: { address, isImport, name },
+      history,
+      location: { pathname }
     } = this.props;
     const { value } = this.state;
+    const currentStep = pathname.slice(-1);
 
     return (
       <AccountCard
@@ -81,7 +84,14 @@ class AccountRewritePhrase extends Component {
               label='Recovery phrase'
             />
 
-            <nav className='form-nav'>{this.renderButton()}</nav>
+            <nav className='form-nav -space-around'>
+              {currentStep > 1 && (
+                <button className='button -cancel' onClick={history.goBack}>
+                  Back
+                </button>
+              )}
+              {this.renderButton()}
+            </nav>
           </div>
         ]}
       />
diff --git a/packages/fether-react/src/assets/sass/components/_form-nav.scss b/packages/fether-react/src/assets/sass/components/_form-nav.scss
index 9758a30d..aa7ef3e2 100644
--- a/packages/fether-react/src/assets/sass/components/_form-nav.scss
+++ b/packages/fether-react/src/assets/sass/components/_form-nav.scss
@@ -6,4 +6,8 @@
   &.-binary {
     justify-content: space-between;
   }
+
+  &.-space-around {
+    justify-content: space-around;
+  }
 }
-- 
GitLab