Add a back button on lock screen to go back to init menu

6 files changed, 141 insertions, 43 deletions

diff --git a/app/scripts/lib/idStore.js b/app/scripts/lib/idStore.js
index 7ac71e409..0f36a520b 100644
--- a/app/scripts/lib/idStore.js
+++ b/app/scripts/lib/idStore.js
@@ -45,7 +45,11 @@ function IdentityStore (opts = {}) {
 
 IdentityStore.prototype.createNewVault = function (password, entropy, cb) {
   delete this._keyStore
+  var serializedKeystore = this.configManager.getWallet()
 
+  if (serializedKeystore) {
+    this.configManager.setData({})
+  }
   this._createIdmgmt(password, null, entropy, (err) => {
     if (err) return cb(err)
 
@@ -437,6 +441,7 @@ IdentityStore.prototype.tryPassword = function (password, cb) {
 
 IdentityStore.prototype._createIdmgmt = function (password, seed, entropy, cb) {
   const configManager = this.configManager
+
   var keyStore = null
   LightwalletKeyStore.deriveKeyFromPassword(password, (err, derivedKey) => {
     if (err) return cb(err)
diff --git a/ui/app/actions.js b/ui/app/actions.js
index c6c932296..c92138f68 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -137,6 +137,12 @@ var actions = {
   getQr: getQr,
   reshowQrCode: reshowQrCode,
   SHOW_QR_VIEW: 'SHOW_QR_VIEW',
+// FORGOT PASSWORD:
+  BACK_TO_INIT_MENU: 'BACK_TO_INIT_MENU',
+  goBackToInitView: goBackToInitView,
+  RECOVERY_IN_PROGRESS: 'RECOVERY_IN_PROGRESS',
+  BACK_TO_UNLOCK_VIEW: 'BACK_TO_UNLOCK_VIEW',
+  backToUnlockView: backToUnlockView,
 }
 
 module.exports = actions
@@ -370,6 +376,12 @@ function showNewVaultSeed (seed) {
   }
 }
 
+function backToUnlockView () {
+  return {
+    type: actions.BACK_TO_UNLOCK_VIEW,
+  }
+}
+
 //
 // unlock screen
 //
@@ -498,6 +510,12 @@ function showConfigPage (transitionForward = true) {
   }
 }
 
+function goBackToInitView () {
+  return {
+    type: actions.BACK_TO_INIT_MENU,
+  }
+}
+
 //
 // config
 //
diff --git a/ui/app/app.js b/ui/app/app.js
index 84ff16ec8..b1c258270 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -51,6 +51,7 @@ function mapStateToProps (state) {
     menuOpen: state.appState.menuOpen,
     network: state.metamask.network,
     provider: state.metamask.provider,
+    forgottenPassword: state.appState.forgottenPassword,
   }
 }
 
@@ -89,6 +90,7 @@ App.prototype.render = function () {
           transitionLeaveTimeout: 300,
         }, [
           this.renderPrimary(),
+          this.renderBackToInitButton(),
         ]),
       ]),
     ])
@@ -294,6 +296,61 @@ App.prototype.renderDropdown = function () {
   ])
 }
 
+App.prototype.renderBackToInitButton = function () {
+  var props = this.props
+  var button = null
+  var backButton = h('.flex-row', {
+    key: 'leftArrow',
+    transForward: false,
+    style: {
+      position: 'absolute',
+      bottom: '10px',
+      left: '8px',
+      fontSize: '21px',
+      fontFamily: 'Montserrat Light',
+      color: '#7F8082',
+      width: '71.969px',
+      alignItems: 'flex-end',
+    },
+  }, [
+    h('i.fa.fa-arrow-left.cursor-pointer'),
+    h('div.cursor-pointer', {
+      style: {
+        marginLeft: '3px',
+      },
+      onClick: () => props.dispatch(actions.goBackToInitView()),
+    }, 'Back'),
+  ])
+  if (!props.isUnlocked) {
+    if (props.currentView.name === 'InitMenu') {
+      button = props.forgottenPassword ? h('.flex-row', {
+        key: 'rightArrow',
+        style: {
+          position: 'absolute',
+          bottom: '10px',
+          right: '8px',
+          fontSize: '21px',
+          fontFamily: 'Montserrat Light',
+          color: '#7F8082',
+          width: '77.578px',
+          alignItems: 'flex-end',
+        },
+      }, [
+        h('div.cursor-pointer', {
+          style: {
+            marginRight: '3px',
+          },
+          onClick: () => props.dispatch(actions.backToUnlockView()),
+        }, 'Login'),
+        h('i.fa.fa-arrow-right.cursor-pointer'),
+      ]) : null
+    } else if (props.isInitialized) {
+      button = backButton
+    }
+  }
+  return button
+}
+
 App.prototype.renderPrimary = function () {
   var props = this.props
 
@@ -306,7 +363,7 @@ App.prototype.renderPrimary = function () {
   }
 
   // show initialize screen
-  if (!props.isInitialized) {
+  if (!props.isInitialized || props.forgottenPassword) {
     // show current view
     switch (props.currentView.name) {
 
diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js
index e63c30fc5..94a9d3df6 100644
--- a/ui/app/first-time/init-menu.js
+++ b/ui/app/first-time/init-menu.js
@@ -73,9 +73,7 @@ InitializeMenuScreen.prototype.renderMenu = function () {
           margin: 12,
         },
       }, 'Restore Existing Vault'),
-
     ])
-
   )
 }
 
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 8c2696877..f982cc0c8 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -123,6 +123,7 @@ function reduceApp (state, action) {
 
     case actions.UNLOCK_METAMASK:
       return extend(appState, {
+        forgottenPassword: appState.forgottenPassword ? !appState.forgottenPassword : null,
         detailView: {},
         transForward: true,
         isLoading: false,
@@ -136,6 +137,25 @@ function reduceApp (state, action) {
         warning: null,
       })
 
+    case actions.BACK_TO_INIT_MENU:
+      return extend(appState, {
+        warning: null,
+        transForward: false,
+        forgottenPassword: true,
+        currentView: {
+          name: 'InitMenu',
+        },
+      })
+
+    case actions.BACK_TO_UNLOCK_VIEW:
+      return extend(appState, {
+        warning: null,
+        transForward: true,
+        forgottenPassword: !appState.forgottenPassword,
+        currentView: {
+          name: 'UnlockScreen',
+        },
+      })
   // reveal seed words
 
     case actions.REVEAL_SEED_CONFIRMATION:
@@ -170,6 +190,7 @@ function reduceApp (state, action) {
 
     case actions.SHOW_ACCOUNT_DETAIL:
       return extend(appState, {
+        forgottenPassword: appState.forgottenPassword ? !appState.forgottenPassword : null,
         currentView: {
           name: 'accountDetail',
           context: action.value,
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index a7896d640..eeaedc434 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -25,47 +25,46 @@ UnlockScreen.prototype.render = function () {
   const state = this.props
   const warning = state.warning
   return (
-
-    h('.unlock-screen.flex-column.flex-center.flex-grow', [
-
-      h(Mascot, {
-        animationEventEmitter: this.animationEventEmitter,
-      }),
-
-      h('h1', {
-        style: {
-          fontSize: '1.4em',
-          textTransform: 'uppercase',
-          color: '#7F8082',
-        },
-      }, 'MetaMask'),
-
-      h('input.large-input', {
-        type: 'password',
-        id: 'password-box',
-        placeholder: 'enter password',
-        style: {
-
-        },
-        onKeyPress: this.onKeyPress.bind(this),
-        onInput: this.inputChanged.bind(this),
-      }),
-
-      h('.error', {
-        style: {
-          display: warning ? 'block' : 'none',
-        },
-      }, warning),
-
-      h('button.primary.cursor-pointer', {
-        onClick: this.onSubmit.bind(this),
-        style: {
-          margin: 10,
-        },
-      }, 'Unlock'),
-
+    h('.flex-column.hey-im-here', [
+      h('.unlock-screen.flex-column.flex-center.flex-grow', [
+
+        h(Mascot, {
+          animationEventEmitter: this.animationEventEmitter,
+        }),
+
+        h('h1', {
+          style: {
+            fontSize: '1.4em',
+            textTransform: 'uppercase',
+            color: '#7F8082',
+          },
+        }, 'MetaMask'),
+
+        h('input.large-input', {
+          type: 'password',
+          id: 'password-box',
+          placeholder: 'enter password',
+          style: {
+
+          },
+          onKeyPress: this.onKeyPress.bind(this),
+          onInput: this.inputChanged.bind(this),
+        }),
+
+        h('.error', {
+          style: {
+            display: warning ? 'block' : 'none',
+          },
+        }, warning),
+
+        h('button.primary.cursor-pointer', {
+          onClick: this.onSubmit.bind(this),
+          style: {
+            margin: 10,
+          },
+        }, 'Unlock'),
+      ]),
     ])
-
   )
 }