Add error messages when wrong pin is entered

src/screens/AccountPin.js

@@ -46,7 +46,9 @@ class AccountPinView extends React.PureComponent {
   state = {
     pin: '',
     confirmation: '',
-    focusConfirmation: false
+    focusConfirmation: false,
+    pinTooShort: false,
+    pinMismatch: false
   };
 
   async submit() {
@@ -80,19 +82,30 @@ class AccountPinView extends React.PureComponent {
           accountId: accountId(account)
         });
       }
+    } else {
+      if (this.state.pin.length < 6) {
+        this.setState({ pinTooShort: true });
+      } else if (this.state.pin !== this.state.confirmation)
+        this.setState({ pinMismatch: true });
     }
   }
 
+  showHintOrError = () => {
+    if (this.state.pinTooShort) {
+      return <Text style={styles.errorText}>Your pin must be at least 6 digits long!</Text>
+    } else if (this.state.pinMismatch) {
+      return <Text style={styles.errorText}>Pin codes don't match!</Text>
+    }
+    return (<Text style={styles.hintText}>Choose a PIN code with 6 or more digits</Text>)
+  }
+
   render() {
-    const { accounts, type, navigation } = this.props;
     const title = 'ACCOUNT PIN';
     return (
       <View style={styles.body}>
         <Background />
         <Text style={styles.titleTop}>{title}</Text>
-        <Text style={styles.hintText}>
-          Please make your PIN 6 or more digits
-        </Text>
+        {this.showHintOrError()}
         <Text style={styles.title}>PIN</Text>
         <PinInput
           autoFocus
@@ -101,14 +114,14 @@ class AccountPinView extends React.PureComponent {
           onSubmitEditing={() => {
             this.setState({ focusConfirmation: true });
           }}
-          onChangeText={pin => this.setState({ pin })}
+          onChangeText={pin => this.setState({ pin: pin, pinMismatch: false, pinTooShort: false })}
           value={this.state.pin}
         />
         <Text style={styles.title}>CONFIRM PIN</Text>
         <PinInput
           returnKeyType="done"
           focus={this.state.focusConfirmation}
-          onChangeText={confirmation => this.setState({ confirmation })}
+          onChangeText={confirmation => this.setState({ confirmation: confirmation, pinMismatch: false, pinTooShort: false })}
           value={this.state.confirmation}
           onSubmitEditing={this.submit}
         />
@@ -151,18 +164,6 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden'
   },
-  bodyContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between'
-  },
-  top: {
-    flex: 1
-  },
-  bottom: {
-    flexBasis: 50,
-    paddingBottom: 15
-  },
   title: {
     fontFamily: 'Manifold CF',
     color: colors.bg_text_sec,
@@ -186,10 +187,15 @@ const styles = StyleSheet.create({
     fontSize: 12,
     paddingBottom: 20
   },
+  errorText: {
+    fontFamily: 'Manifold CF',
+    textAlign: 'center',
+    color: colors.bg_alert,
+    fontWeight: '700',
+    fontSize: 12,
+    paddingBottom: 20
+  },
   pinInput: {
     marginBottom: 20
-  },
-  nextStep: {
-    marginTop: 20
   }
 });

src/screens/AccountUnlock.js

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import {
   View,
   Text,
-  StyleSheet,
+  StyleSheet
 } from 'react-native';
 import debounce from 'debounce';
 import { StackActions, NavigationActions } from 'react-navigation';
@@ -40,11 +40,17 @@ export class AccountUnlockAndSign extends React.PureComponent {
           <AccountUnlockView
             {...this.props}
             accounts={accounts}
-            nextButtonTitle="Sign"
-            onChange={async pin => {
+            checkPin={async (pin) => {
               try {
-                const txRequest = scannerStore.getTXRequest();
-                let res = await scannerStore.signData(pin);
+                scannerStore.getTXRequest();
+                await scannerStore.signData(pin);
+                return true
+              } catch (e) {
+                return false
+              }
+            }}
+            navigate={
+              () => {
                 const resetAction = StackActions.reset({
                   index: 2,
                   actions: [
@@ -54,8 +60,8 @@ export class AccountUnlockAndSign extends React.PureComponent {
                   ]
                 });
                 this.props.navigation.dispatch(resetAction);
-              } catch (e) { }
-            }}
+              }
+            }
           />
         )}
       </Subscribe>
@@ -70,21 +76,22 @@ export class AccountUnlock extends React.Component {
         {accounts => (
           <AccountUnlockView
             {...this.props}
-            onChange={async pin => {
-              if (await accounts.unlockAccount(accounts.getSelected(), pin)) {
-                const resetAction = StackActions.reset({
-                  index: 3,
-                  actions: [
-                    NavigationActions.navigate({ routeName: 'AccountList' }),
-                    NavigationActions.navigate({ routeName: 'AccountDetails' }),
-                    NavigationActions.navigate({ routeName: 'AccountEdit' }),
-                    NavigationActions.navigate({ routeName: 'AccountBackup' })
-                  ]
-                });
-                this.props.navigation.dispatch(resetAction);
-              }
+            checkPin={async (pin) => {
+              console.log('checkPin')
+              return await accounts.unlockAccount(accounts.getSelected(), pin)
+            }}
+            navigate={() => {
+              const resetAction = StackActions.reset({
+                index: 3,
+                actions: [
+                  NavigationActions.navigate({ routeName: 'AccountList' }),
+                  NavigationActions.navigate({ routeName: 'AccountDetails' }),
+                  NavigationActions.navigate({ routeName: 'AccountEdit' }),
+                  NavigationActions.navigate({ routeName: 'AccountBackup' })
+                ]
+              });
+              this.props.navigation.dispatch(resetAction);
             }}
-            accounts={accounts}
           />
         )}
       </Subscribe>
@@ -93,29 +100,42 @@ export class AccountUnlock extends React.Component {
 }
 
 class AccountUnlockView extends React.PureComponent {
-  state = {
-    pin: ''
-  };
 
   static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    nextButtonTitle: PropTypes.string
+    checkPin: PropTypes.func.isRequired,
+    hasWrongPin: PropTypes.bool
   };
 
+  state = {
+    pin: '',
+    hasWrongPin: false
+  };
+
+
+  showErrorMessage = () => {
+    return this.state.hasWrongPin ? 'Wrong pin, please try again' : '';
+  }
+
   render() {
     return (
       <View style={styles.body}>
         <Background />
         <Text style={styles.titleTop}>UNLOCK ACCOUNT</Text>
+        <Text style={styles.errorText}>{this.showErrorMessage()}</Text>
         <Text style={styles.title}>PIN</Text>
         <PinInput
-          onChangeText={pin => {
-            this.setState({ pin });
-            if (pin.length < 1) {
+          onChangeText={async (pin) => {
+            this.setState({ pin: pin })
+            if (pin.length < 4) {
               return;
             }
-            debounce(this.props.onChange, 200)(pin);
+            if (await this.props.checkPin(pin)) {
+              this.props.navigate()
+            } else if (pin.length > 5) {
+              this.setState({ hasWrongPin: true })
+            }
           }}
+
           value={this.state.pin}
         />
       </View>
@@ -150,18 +170,6 @@ const styles = StyleSheet.create({
     flex: 1,
     overflow: 'hidden'
   },
-  bodyContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'space-between'
-  },
-  top: {
-    flex: 1
-  },
-  bottom: {
-    flexBasis: 50,
-    paddingBottom: 15
-  },
   title: {
     fontFamily: 'Manifold CF',
     color: colors.bg_text_sec,
@@ -177,18 +185,15 @@ const styles = StyleSheet.create({
     paddingBottom: 20,
     textAlign: 'center'
   },
-  hintText: {
+  errorText: {
     fontFamily: 'Manifold CF',
     textAlign: 'center',
-    color: colors.bg_text_sec,
+    color: colors.bg_alert,
     fontWeight: '700',
     fontSize: 12,
     paddingBottom: 20
   },
   pinInput: {
     marginBottom: 20
-  },
-  nextStep: {
-    marginTop: 20
   }
 });