pin views

src/actions/accounts.js

-import { ADD_ACCOUNT, SELECT_ACCOUNT, DELETE_ACCOUNT } from '../constants/AccountActions'
+import { ADD_ACCOUNT, SELECT_ACCOUNT, DELETE_ACCOUNT, SET_PIN, CONFIRM_PIN } from '../constants/AccountActions'
 
 export function addAccount(account) {
   return {
@@ -20,3 +20,10 @@ export function deleteAccount(account) {
     account,
   }
 }
+
+export function setPin(pin) {
+  return {
+    type: SET_PIN,
+    pin,
+  }
+}

src/components/App.js

@@ -8,9 +8,12 @@ import TabIcon from './TabIcon'
 import QrScanner from '../containers/QrScanner'
 import Signer from '../containers/Signer'
 import Accounts from '../containers/Accounts'
+import SelectAccount from '../containers/SelectAccount'
 import NewAccount from '../containers/NewAccount'
 import Send from '../components/Send'
 import Account from '../containers/Account'
+import ConfirmTransaction from '../containers/ConfirmTransaction'
+import { EnterPin, SetPin, ConfirmPin } from '../containers/Pin'
 
 const ConnectedRouter = connect()(Router)
 const store = createStore(reducers)
@@ -30,14 +33,18 @@ const styles = StyleSheet.create({
 const scenes = Actions.create(
   <Scene key='root'>
     <Scene key='tabs' tabs style={styles.tabbar}>
-      <Scene key='mid' title='Scan QR' initial icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
-        <Scene key='scan' component={QrScanner} title='Scan QR'/>
-        <Scene key='signer' component={Signer} title='Sign Tx'/>
+      <Scene key='left' title='Scan QR' initial icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
+        <Scene key='scan' component={QrScanner} title='Scan QR' rightTitle="Scanned" onRight={() => Actions.confirm()} rightButtonTextStyle={styles.navibarTitle}/>
+        <Scene key='confirm' component={ConfirmTransaction} title='Sign Tx'/>
+        <Scene key='select' title='Select Account' component={SelectAccount}/>
+        <Scene key='enterPin' title='Enter Pin' component={EnterPin}/>
       </Scene>
-      <Scene key='accounts' title='Accounts' icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
-        <Scene key='accountsList' title='Accounts' component={Accounts} rightTitle="Add" onRight={() => Actions.add()}
+      <Scene key='right' title='Accounts' icon={TabIcon} navigationBarStyle={styles.navibar} titleStyle={styles.navibarTitle}>
+        <Scene key='accounts' title='Accounts' component={Accounts} rightTitle="Add" onRight={() => Actions.add()}
           rightButtonTextStyle={styles.navibarTitle}/>
         <Scene key='add' component={NewAccount} title='Add Account'/>
+        <Scene key='setPin' title='Set Pin' component={SetPin}/>
+        <Scene key='confirmPin' title='Confirm Pin' component={ConfirmPin}/>
         <Scene key='details' component={Account} title='Account Details'/>
         <Scene key='send' component={Send} title='Send TX'/>
       </Scene>

src/components/Pin.js

+'use strict'
+
+import React, { Component, PropTypes } from 'react'
+import { Text, TextInput, View, StyleSheet } from 'react-native'
+
+export default class Pin extends Component {
+  static propTypes = {
+    onNextPressed: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      text: '',
+    }
+  }
+
+  render() {
+    return (
+      <View style={styles.view}>
+        <TextInput
+          style={styles.input}
+          placeholder='enter pin here'
+          editable={true}
+          multiline={false}
+          autoFocus={true}
+          returnKeyType='next'
+          numberOfLines={1}
+          fontSize={24}
+          onChangeText={(text) => {this.setState({text: text})}}
+          value={this.state.text}
+          onEndEditing={() => { this.props.onNextPressed(this.state.text, this.props.account) }}
+        />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    marginTop: 60,
+    marginBottom: 300,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    height: 20,
+    textAlign: 'center'
+  }
+})

src/components/Send.js

@@ -4,6 +4,12 @@ import React, { Component, PropTypes } from 'react'
 import { StyleSheet, View, Text, TextInput, Button } from 'react-native'
 
 export default class Send extends Component {
+  static propTypes = {
+    nextButtonTitle: PropTypes.string.isRequired,
+    nextButtonDescription: PropTypes.string.isRequired,
+    nextButtonAction: PropTypes.func.isRequired,
+  }
+
   render() {
     return (
       <View style={styles.view}>
@@ -41,10 +47,10 @@ export default class Send extends Component {
           fontSize={16}
         />
         <Button
-          onPress={() => {}}
-          title="Generate QR Code"
+          onPress={() => this.props.nextButtonAction()}
+          title={this.props.nextButtonTitle}
           color="green"
-          accessibilityLabel="Press to generate QR Code"
+          accessibilityLabel={this.props.nextButtonDescription}
         />
       </View>
     )

src/constants/AccountActions.js

 export const ADD_ACCOUNT = 'ACCOUNT_ACTION_ADD_ACCOUNT'
 export const SELECT_ACCOUNT = 'ACCOUNT_ACTION_SELECT_ACCOUNT'
 export const DELETE_ACCOUNT = 'ACCOUNT_ACTION_DELETE_ACCOUNT'
+export const SET_PIN = 'ACCOUNT_ACTION_SET_PIN'

src/containers/ConfirmTransaction.js

+'use strict'
+
+import React from 'react'
+import { connect } from 'react-redux'
+import { Actions } from 'react-native-router-flux'
+import Send from '../components/Send'
+
+const mapStateToProps = (state, ownProps) => ({
+  nextButtonTitle: 'Next',
+  nextButtonDescription: 'Choose account',
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  nextButtonAction: () => {
+    Actions.select()
+  }
+})
+
+const ConfirmTransaction = connect(mapStateToProps, mapDispatchToProps)(Send)
+
+export default ConfirmTransaction

src/containers/NewAccount.js

@@ -6,17 +6,17 @@ import debounce from 'debounce'
 import NewAccountInput from '../components/NewAccountInput'
 import { words } from '../actions/random'
 import { keypairFromPhrase, toAddress } from '../actions/crypto'
-import { addAccount } from '../actions/accounts'
+import { selectAccount }  from '../actions/accounts'
 
 const mapDispatchToProps = (dispatch) => {
   return {
     addAccount: (account) => {
       const address = toAddress(account.keypair)
-      dispatch(addAccount({
+      dispatch(selectAccount({
         address: address,
         name: account.name,
       }))
-      Actions.pop()
+      Actions.setPin()
     }
   }
 }

src/containers/Pin.js

+import React from 'react'
+import { Alert } from 'react-native'
+import { connect } from 'react-redux'
+import { Actions } from 'react-native-router-flux'
+import Pin from '../components/Pin'
+import { addAccount, setPin } from '../actions/accounts'
+
+const mapStateToPropsEnterPin = (state, ownProps) => ({
+  account: state.accounts.selected,
+})
+
+const mapDispatchToPropsEnterPin = (dispatch, ownProps) => ({
+  onNextPressed: (pin, account) => {
+    if (pin === account.pin) {
+    } else {
+      Alert.alert('Invalid pin')
+    }
+  },
+})
+
+const mapDispatchToPropsSetPin = (dispatch, ownProps) => ({
+  onNextPressed: (pin) => {
+    dispatch(setPin(pin))
+    Actions.confirmPin()
+  }
+})
+
+const mapStateToPropsConfirmPin = (state, ownProps) => ({
+  account: state.accounts.selected,
+})
+
+const mapDispatchToPropsConfirmPin = (dispatch, ownProps) => ({
+  onNextPressed: (pin, account) => {
+    if (pin === account.pin) {
+      dispatch(addAccount(account))
+      Actions.popTo('accounts')
+    } else {
+      Alert.alert('Invalid pin')
+    }
+  }
+})
+
+export const EnterPin = connect(mapStateToPropsEnterPin, mapDispatchToPropsEnterPin)(Pin)
+
+export const SetPin = connect(undefined, mapDispatchToPropsSetPin)(Pin)
+
+export const ConfirmPin = connect(mapStateToPropsConfirmPin, mapDispatchToPropsConfirmPin)(Pin)
+
+
+

src/containers/QrScanner.js

@@ -9,7 +9,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   onBarCodeRead: (scanned) => {
     dispatch(newScannedTx(scanned.data))
     Vibration.vibrate()
-    Actions.signer()
+    Actions.confirm()
   }
 })
 

src/containers/SelectAccount.js

+import React from 'react'
+import { connect } from 'react-redux'
+import { Actions } from 'react-native-router-flux'
+import AccountsList from '../components/AccountsList'
+import { selectAccount } from '../actions/accounts'
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  onAccountSelected: (address) => {
+    dispatch(selectAccount({address}))
+    Actions.enterPin()
+  }
+})
+
+const SelectAccount = connect(state => ({
+  accounts: state.accounts.all
+}), mapDispatchToProps)(AccountsList)
+
+export default SelectAccount

src/reducers/accounts.js

-import { ADD_ACCOUNT, SELECT_ACCOUNT, DELETE_ACCOUNT } from '../constants/AccountActions'
+import { ADD_ACCOUNT, SELECT_ACCOUNT, DELETE_ACCOUNT, SET_PIN } from '../constants/AccountActions'
 
 const initialAccounts = {
   all: [{
@@ -31,6 +31,13 @@ export default function accounts(state = initialAccounts, action) {
         all: state.all.filter((account) => { return action.account != account })
       })
 
+    case SET_PIN:
+      return Object.assign({}, state, {
+        selected: Object.assign({}, state.selected, {
+          pin: action.pin
+        })
+      })
+
     default:
       return state
   }