From fc76fa9252b7741c4c3e1e2eeebbf5f4fc578424 Mon Sep 17 00:00:00 2001
From: Jannis R <mail@jannisr.de>
Date: Thu, 3 Nov 2016 18:13:45 +0100
Subject: [PATCH] sms verification: basic stepper

---
 .../modals/SMSVerification/SMSVerification.js | 71 +++++++++++++++----
 js/src/views/Account/account.js               |  5 +-
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/js/src/modals/SMSVerification/SMSVerification.js b/js/src/modals/SMSVerification/SMSVerification.js
index d68b25291..75330bd21 100644
--- a/js/src/modals/SMSVerification/SMSVerification.js
+++ b/js/src/modals/SMSVerification/SMSVerification.js
@@ -33,7 +33,6 @@ export default class SMSVerification extends Component {
   }
 
   static propTypes = {
-    isTest: PropTypes.bool,
     account: PropTypes.string,
     onClose: PropTypes.func.isRequired
   }
@@ -54,36 +53,82 @@ export default class SMSVerification extends Component {
   }
 
   render () {
+    const { step } = this.state;
+
     return (
       <Modal
         actions={ this.renderDialogActions() }
         title='verify your account via SMS'
-        waiting={ [4] }
         visible scroll
+        current={ step }
+        steps={ ['first step', 'second step'] }
       >
-        <span>foo</span>
+        { this.renderStep() }
       </Modal>
     );
   }
 
   renderDialogActions () {
     const { onClose, account } = this.props;
+    const { step } = this.state;
+
+    const cancel = (
+      <Button
+        key='cancel' label='Cancel'
+        icon={ <ContentClear /> }
+        onClick={ onClose }
+      />
+    );
+
+    if (step === 1) {
+      return (
+        <div>
+          { cancel }
+          <Button
+            key='done' label='Done'
+            icon={ <ActionDoneAll /> }
+            onClick={ onClose }
+          />
+        </div>
+      );
+    }
 
     return (
       <div>
+        { cancel }
         <Button
-          key='cancel'
-          label='Cancel'
-          icon={ <ContentClear /> }
-          onClick={ onClose }
-        />
-        <Button
-          key='close'
-          label='Done'
-          icon={ <ActionDoneAll /> }
-          onClick={ onClose }
+          key='next' label='Next'
+          icon={ <IdentityIcon address={ account } button /> }
+          onClick={ this.next }
         />
       </div>
     );
   }
+
+  renderStep () {
+    const { step } = this.state;
+    if (step === 1) {
+      return this.renderSecondStep();
+    } else {
+      return this.renderFirstStep();
+    }
+  }
+
+  next = () => {
+    this.setState({
+      step: this.state.step + 1
+    });
+  }
+
+  renderFirstStep () {
+    return (
+      <span>first step</span>
+    );
+  }
+
+  renderSecondStep () {
+    return (
+      <span>second step</span>
+    );
+  }
 }
diff --git a/js/src/views/Account/account.js b/js/src/views/Account/account.js
index 2e0759242..8ddd2d989 100644
--- a/js/src/views/Account/account.js
+++ b/js/src/views/Account/account.js
@@ -166,7 +166,10 @@ class Account extends Component {
 
     // TODO: pass props
     return (
-      <SMSVerification onClose={ this.onVerificationClose } />
+      <SMSVerification
+        account={ address }
+        onClose={ this.onVerificationClose }
+      />
     );
   }