Commit 34671962 authored by Thibaut Sardan's avatar Thibaut Sardan Committed by Alexey
Browse files

Add error messages when wrong pin is entered (#195)

* fix(test): start

* fix(pin): add error messages

* fix(pin): add error message on account unlock

* fix(pin): fix crash on signing & cleanup of unused components and functions

* fix(): error message at signing

* fix(): move message to state and add support for iphone (no keyboard send button)

* fix(): add support for iphone (no keyboard send button) for signing

* fix(): refactor
parent 52ac5455
......@@ -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
}
});
......@@ -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
}
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment