Merge pull request #771 from lightninglabs/password-mobile

Password mobile

Author: tanx

mobile/main.js

@@ -8,6 +8,8 @@ import SetPasswordConfirmView from '../src/view/set-password-confirm-mobile';
 import SeedSuccessView from '../src/view/seed-success';
 import NewAddressView from '../src/view/new-address';
 
+import PasswordView from '../src/view/password-mobile';
+import WaitView from '../src/view/wait-mobile';
 import HomeView from '../src/view/home';
 import SettingView from '../src/view/setting';
 import SettingUnitView from '../src/view/setting-unit';
@@ -45,7 +47,6 @@ const wallet = new WalletAction(store, grpc, db, nav, notify);
 const setting = new SettingAction(store, wallet, db, ipc);
 sinon.stub(wallet, 'update');
 sinon.stub(wallet, 'checkSeed');
-sinon.stub(wallet, 'checkPassword');
 sinon.stub(wallet, 'getExchangeRate');
 const transaction = new TransactionAction(store, grpc, nav, notify);
 sinon.stub(transaction, 'update');
@@ -78,6 +79,10 @@ const NewAddress = () => (
   />
 );
 
+const Password = () => <PasswordView store={store} wallet={wallet} />;
+
+const Wait = () => <WaitView />;
+
 const Home = () => (
   <HomeView
     store={store}
@@ -112,20 +117,14 @@ const InvoiceQR = () => (
 
 const Pay = () => <PaymentView store={store} payment={payment} nav={nav} />;
 
-const SetupStack = createStackNavigator(
+const MainStack = createStackNavigator(
   {
     SetPassword,
     SetPasswordConfirm,
     SeedSuccess,
     NewAddress,
-  },
-  {
-    headerMode: 'none',
-  }
-);
-
-const MainStack = createStackNavigator(
-  {
+    Password,
+    Wait,
     Home,
     Settings,
     SettingsUnit,
@@ -158,7 +157,6 @@ const PayStack = createStackNavigator(
 
 const RootStack = createStackNavigator(
   {
-    Setup: SetupStack,
     Main: MainStack,
     Invoice: InvoiceStack,
     Pay: PayStack,

src/component/pin-entry.js

@@ -17,8 +17,8 @@ const pinEntryStyles = StyleSheet.create({
   },
 });
 
-export const PinBubbles = ({ pin }) => (
-  <View style={pinEntryStyles.wrapper}>
+export const PinBubbles = ({ pin, style }) => (
+  <View style={[pinEntryStyles.wrapper, style]}>
     <PinBubble char={pin[0]} />
     <PinBubble char={pin[1]} />
     <PinBubble char={pin[2]} />
@@ -30,6 +30,7 @@ export const PinBubbles = ({ pin }) => (
 
 PinBubbles.propTypes = {
   pin: PropTypes.string.isRequired,
+  style: View.propTypes.style,
 };
 
 //

src/view/password-mobile.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { View, StyleSheet } 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 BoltIcon from '../asset/icon/lightning-bolt';
+import LightningWord from '../asset/icon/lightning-word';
+import { Text } from '../component/text';
+import { FormStretcher } from '../component/form';
+import { PinBubbles, PinKeyboard } from '../component/pin-entry';
+
+//
+// Password View (Mobile)
+//
+
+const styles = StyleSheet.create({
+  content: {
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  boltWrapper: {
+    marginTop: 50,
+  },
+  wordWrapper: {
+    marginTop: 35,
+  },
+  bubbles: {
+    marginTop: 10,
+  },
+});
+
+const PasswordView = ({ store, wallet }) => (
+  <Background image="purple-gradient-bg">
+    <MainContent style={styles.content}>
+      <View style={styles.boltWrapper}>
+        <BoltIcon height={64 * 1.3} width={126 * 1.3} />
+      </View>
+      <View style={styles.wordWrapper}>
+        <LightningWord height={31.2} width={245.7} />
+      </View>
+      <FormStretcher>
+        <Text>Unlock with your pin</Text>
+        <PinBubbles pin={store.wallet.password} style={styles.bubbles} />
+      </FormStretcher>
+      <PinKeyboard
+        onInput={digit => wallet.pushPinDigit({ digit, param: 'password' })}
+        onBackspace={() => wallet.popPinDigit({ param: 'password' })}
+      />
+    </MainContent>
+  </Background>
+);
+
+PasswordView.propTypes = {
+  store: PropTypes.object.isRequired,
+  wallet: PropTypes.object.isRequired,
+};
+
+export default observer(PasswordView);

stories/screen-story.js

@@ -50,6 +50,7 @@ import SetPasswordMobile from '../src/view/set-password-mobile';
 import SetPasswordConfirm from '../src/view/set-password-confirm';
 import SetPasswordConfirmMobile from '../src/view/set-password-confirm-mobile';
 import Password from '../src/view/password';
+import PasswordMobile from '../src/view/password-mobile';
 import RestorePassword from '../src/view/restore-password';
 import ResetPasswordCurrent from '../src/view/reset-password-current';
 import ResetPasswordNew from '../src/view/reset-password-new';
@@ -115,6 +116,9 @@ storiesOf('Screens', module)
     <SetPasswordConfirmMobile store={store} wallet={wallet} />
   ))
   .add('Password', () => <Password store={store} wallet={wallet} />)
+  .add('Password (Mobile)', () => (
+    <PasswordMobile store={store} wallet={wallet} />
+  ))
   .add('Restore Wallet: Password', () => (
     <RestorePassword store={store} wallet={wallet} nav={nav} />
   ))