Add RestorePassword view for password entry during restore.

Author: valentinewallace

src/action/nav.js

@@ -27,6 +27,9 @@ class NavAction {
 
   goRestoreWallet() {
     // this._store.route = 'RestoreWallet';
+
+  goRestorePassword() {
+    this._store.route = 'RestorePassword';
   }
 
   goSeedSuccess() {

src/view/main.js

@@ -9,6 +9,7 @@ import Seed from './seed';
 import SeedVerify from './seed-verify';
 import SeedSuccess from './seed-success';
 import SetPassword from './set-password';
+import RestorePassword from './restore-password';
 import Password from './password';
 import NewAddress from './new-address';
 import LoaderSyncing from './loader-syncing';
@@ -68,6 +69,9 @@ class MainView extends Component {
         {route === 'SetPassword' && (
           <SetPassword store={store} wallet={wallet} />
         )}
+        {route === 'RestorePassword' && (
+          <RestorePassword store={store} wallet={wallet} nav={nav} />
+        )}
         {route === 'Password' && <Password store={store} wallet={wallet} />}
         {route === 'NewAddress' && (
           <NewAddress store={store} invoice={invoice} info={info} />

src/view/restore-password.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import Background from '../component/background';
+import MainContent from '../component/main-content';
+import { H1Text } from '../component/text';
+import { Header } from '../component/header';
+import { Button, BackButton, GlasButton } from '../component/button';
+import { InputField } from '../component/field';
+import Card from '../component/card';
+import { FormSubText, FormStretcher } from '../component/form';
+
+//
+// Restore Wallet Password View
+//
+
+const styles = StyleSheet.create({
+  content: {
+    justifyContent: 'flex-end',
+  },
+  title: {
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  card: {
+    maxHeight: 350,
+    maxWidth: 680,
+    paddingLeft: 45,
+    paddingRight: 45,
+    paddingBottom: 50,
+  },
+});
+
+const RestorePasswordView = ({ store, wallet, nav }) => (
+  <Background image="purple-gradient-bg">
+    <Header>
+      <BackButton onPress={() => nav.goSelectSeed()} />
+      <Button disabled onPress={() => {}} />
+    </Header>
+    <MainContent style={styles.content}>
+      <View>
+        <H1Text style={styles.title}>Restore wallet</H1Text>
+      </View>
+      <Card style={styles.card}>
+        <FormSubText>Please enter your password.</FormSubText>
+        <FormStretcher>
+          <InputField
+            style={styles.input}
+            placeholder="Password"
+            secureTextEntry={true}
+            autoFocus={true}
+            value={store.wallet.password}
+            onChangeText={password => wallet.setPassword({ password })}
+            onSubmitEditing={() => wallet.restoreWallet()}
+          />
+        </FormStretcher>
+      </Card>
+      <GlasButton onPress={() => wallet.restoreWallet()}>Restore</GlasButton>
+    </MainContent>
+  </Background>
+);
+
+RestorePasswordView.propTypes = {
+  store: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
+};
+
+export default observer(RestorePasswordView);

stories/screen-story.js

@@ -47,6 +47,7 @@ import Seed from '../src/view/seed';
 import SeedVerify from '../src/view/seed-verify';
 import SetPassword from '../src/view/set-password';
 import Password from '../src/view/password';
+import RestorePassword from '../src/view/restore-password';
 import NewAddress from '../src/view/new-address';
 import Wait from '../src/view/wait';
 import RestoreWallet from '../src/view/restore-wallet';
@@ -95,6 +96,9 @@ storiesOf('Screens', module)
   .add('Seed Success', () => <SeedSuccess wallet={wallet} />)
   .add('Set Password', () => <SetPassword store={store} wallet={wallet} />)
   .add('Password', () => <Password store={store} wallet={wallet} />)
+  .add('Restore Wallet: Password', () => (
+    <RestorePassword store={store} wallet={wallet} nav={nav} />
+  ))
   .add('New Address', () => (
     <NewAddress store={store} invoice={invoice} info={info} />
   ))

test/unit/action/nav.spec.js

@@ -74,6 +74,13 @@ describe('Action Nav Unit Tests', () => {
     });
   });
 
+  describe('goRestorePassword()', () => {
+    it('should set correct route', () => {
+      nav.goRestorePassword();
+      expect(store.route, 'to equal', 'RestorePassword');
+    });
+  });
+
   describe('goNewAddress()', () => {
     it('should set correct route', () => {
       nav.goNewAddress();