Unverified Commit cda2c04e authored by Hanwen Cheng's avatar Hanwen Cheng Committed by GitHub
Browse files

fix: pin input text and return button (#520)

* fix: update pin hint text

* add activities on return button pressed for input

* update e2e test

* update e2e test
parent 9d89d6e3
Pipeline #74029 passed with stages
in 24 minutes and 27 seconds
...@@ -43,6 +43,17 @@ export const testInput = async (inputId, inputText) => { ...@@ -43,6 +43,17 @@ export const testInput = async (inputId, inputText) => {
await element(by.id(inputId)).tapReturnKey(); await element(by.id(inputId)).tapReturnKey();
}; };
export const testInputWithDone = async (inputId, inputText) => {
await element(by.id(inputId)).typeText(inputText);
if (device.getPlatform() === 'ios') {
await element(by.label('Done'))
.atIndex(0)
.tap();
} else {
await element(by.id(inputId)).tapReturnKey();
}
};
export const testScrollAndTap = async (buttonId, screenId) => { export const testScrollAndTap = async (buttonId, screenId) => {
await waitFor(element(by.id(buttonId))) await waitFor(element(by.id(buttonId)))
.toBeVisible() .toBeVisible()
...@@ -52,6 +63,5 @@ export const testScrollAndTap = async (buttonId, screenId) => { ...@@ -52,6 +63,5 @@ export const testScrollAndTap = async (buttonId, screenId) => {
}; };
export const testUnlockPin = async pinCode => { export const testUnlockPin = async pinCode => {
await testInput(IdentityPin.unlockPinInput, pinCode); await testInputWithDone(IdentityPin.unlockPinInput, pinCode);
await testTap(IdentityPin.unlockPinButton);
}; };
...@@ -21,6 +21,7 @@ import { ...@@ -21,6 +21,7 @@ import {
tapBack, tapBack,
testExist, testExist,
testInput, testInput,
testInputWithDone,
testNotExist, testNotExist,
testNotVisible, testNotVisible,
testScrollAndTap, testScrollAndTap,
...@@ -55,8 +56,7 @@ const mockSeedPhrase = ...@@ -55,8 +56,7 @@ const mockSeedPhrase =
const testSetUpDefaultPath = async () => { const testSetUpDefaultPath = async () => {
await testInput(IdentityPin.setPin, pinCode); await testInput(IdentityPin.setPin, pinCode);
await testInput(IdentityPin.confirmPin, pinCode); await testInputWithDone(IdentityPin.confirmPin, pinCode);
await testTap(IdentityPin.submitButton);
await testVisible(AccountNetworkChooser.chooserScreen); await testVisible(AccountNetworkChooser.chooserScreen);
await testScrollAndTap( await testScrollAndTap(
substrateNetworkButtonIndex, substrateNetworkButtonIndex,
...@@ -87,17 +87,16 @@ describe('Load test', async () => { ...@@ -87,17 +87,16 @@ describe('Load test', async () => {
it('recover a identity with seed phrase', async () => { it('recover a identity with seed phrase', async () => {
await testTap(AccountNetworkChooser.recoverButton); await testTap(AccountNetworkChooser.recoverButton);
await testVisible(IdentityNew.seedInput); await testVisible(IdentityNew.seedInput);
await element(by.id(IdentityNew.seedInput)).typeText(mockSeedPhrase);
await testInput(IdentityNew.nameInput, mockIdentityName); await testInput(IdentityNew.nameInput, mockIdentityName);
await testTap(IdentityNew.recoverButton); await element(by.id(IdentityNew.seedInput)).typeText(mockSeedPhrase);
await element(by.id(IdentityNew.seedInput)).tapReturnKey();
await testSetUpDefaultPath(); await testSetUpDefaultPath();
}); });
it('derive a new key', async () => { it('derive a new key', async () => {
await testTap(PathsList.deriveButton); await testTap(PathsList.deriveButton);
await testInput(PathDerivation.nameInput, 'first one');
await testInput(PathDerivation.pathInput, defaultPath); await testInput(PathDerivation.pathInput, defaultPath);
await testTap(PathDerivation.deriveButton); await testInput(PathDerivation.nameInput, 'first one');
await testUnlockPin(pinCode); await testUnlockPin(pinCode);
await testExist(PathsList.pathCard + `//kusama${defaultPath}`); await testExist(PathsList.pathCard + `//kusama${defaultPath}`);
}); });
...@@ -128,9 +127,8 @@ describe('Load test', async () => { ...@@ -128,9 +127,8 @@ describe('Load test', async () => {
testIDs.AccountNetworkChooser.addCustomNetworkButton, testIDs.AccountNetworkChooser.addCustomNetworkButton,
testIDs.AccountNetworkChooser.chooserScreen testIDs.AccountNetworkChooser.chooserScreen
); );
await testInput(PathDerivation.nameInput, 'custom network');
await testInput(PathDerivation.pathInput, customPath); await testInput(PathDerivation.pathInput, customPath);
await testTap(PathDerivation.deriveButton); await testInput(PathDerivation.nameInput, 'custom network');
await testUnlockPin(pinCode); await testUnlockPin(pinCode);
await testExist(PathsList.pathCard + customPath); await testExist(PathsList.pathCard + customPath);
}); });
......
...@@ -104,8 +104,10 @@ function IdentityNew({ accounts, navigation }) { ...@@ -104,8 +104,10 @@ function IdentityNew({ accounts, navigation }) {
<> <>
<AccountSeed <AccountSeed
testID={testIDs.IdentityNew.seedInput} testID={testIDs.IdentityNew.seedInput}
valid={isSeedValid.valid}
onChangeText={onSeedTextInput} onChangeText={onSeedTextInput}
onSubmitEditing={onRecoverConfirm}
returnKeyType="done"
valid={isSeedValid.valid}
value={seedPhrase} value={seedPhrase}
/> />
<View style={styles.btnBox}> <View style={styles.btnBox}>
......
...@@ -81,11 +81,13 @@ function IdentityPin({ navigation, accounts }) { ...@@ -81,11 +81,13 @@ function IdentityPin({ navigation, accounts }) {
const showHintOrError = () => { const showHintOrError = () => {
if (state.pinTooShort) { if (state.pinTooShort) {
return ' Your pin must be at least 6 digits long!'; return t.pinTooShortHint;
} else if (state.pinMismatch) { } else if (state.pinMismatch) {
return isUnlock ? ' Pin code is wrong!' : " Pin codes don't match!"; return isUnlock
? t.pinMisMatchHint.pinUnlock
: t.pinMisMatchHint.pinCreation;
} }
return ' Choose a PIN code with 6 or more digits'; return isUnlock ? t.subtitle.pinUnlock : t.subtitle.pinCreation;
}; };
const onPinInputChange = (stateName, pinInput) => { const onPinInputChange = (stateName, pinInput) => {
...@@ -102,20 +104,21 @@ function IdentityPin({ navigation, accounts }) { ...@@ -102,20 +104,21 @@ function IdentityPin({ navigation, accounts }) {
isUnlock ? ( isUnlock ? (
<> <>
<ScreenHeading <ScreenHeading
title={'Unlock Identity'} title={t.title.pinUnlock}
error={state.pinMismatch || state.pinTooShort} error={state.pinMismatch || state.pinTooShort}
subtitle={showHintOrError()} subtitle={showHintOrError()}
/> />
<PinInput <PinInput
label="PIN" label={t.pinLabel}
autoFocus autoFocus
testID={testIDs.IdentityPin.unlockPinInput} testID={testIDs.IdentityPin.unlockPinInput}
returnKeyType="done" returnKeyType="done"
onChangeText={pin => onPinInputChange('pin', pin)} onChangeText={pin => onPinInputChange('pin', pin)}
onSubmitEditing={testPin}
value={state.pin} value={state.pin}
/> />
<ButtonMainAction <ButtonMainAction
title={'Done'} title={t.doneButton.pinUnlock}
bottom={false} bottom={false}
onPress={testPin} onPress={testPin}
testID={testIDs.IdentityPin.unlockPinButton} testID={testIDs.IdentityPin.unlockPinButton}
...@@ -124,13 +127,13 @@ function IdentityPin({ navigation, accounts }) { ...@@ -124,13 +127,13 @@ function IdentityPin({ navigation, accounts }) {
) : ( ) : (
<> <>
<ScreenHeading <ScreenHeading
title={'Set Identity PIN'} title={t.title.pinCreation}
subtitle={showHintOrError()} subtitle={showHintOrError()}
error={state.pinMismatch || state.pinTooShort} error={state.pinMismatch || state.pinTooShort}
/> />
<PinInput <PinInput
label="PIN" label={t.pinLabel}
autoFocus autoFocus
testID={testIDs.IdentityPin.setPin} testID={testIDs.IdentityPin.setPin}
returnKeyType="next" returnKeyType="next"
...@@ -142,7 +145,7 @@ function IdentityPin({ navigation, accounts }) { ...@@ -142,7 +145,7 @@ function IdentityPin({ navigation, accounts }) {
value={state.pin} value={state.pin}
/> />
<PinInput <PinInput
label="Confirm PIN" label={t.pinConfirmLabel}
returnKeyType="done" returnKeyType="done"
testID={testIDs.IdentityPin.confirmPin} testID={testIDs.IdentityPin.confirmPin}
focus={state.focusConfirmation} focus={state.focusConfirmation}
...@@ -150,9 +153,10 @@ function IdentityPin({ navigation, accounts }) { ...@@ -150,9 +153,10 @@ function IdentityPin({ navigation, accounts }) {
onPinInputChange('confirmation', confirmation) onPinInputChange('confirmation', confirmation)
} }
value={state.confirmation} value={state.confirmation}
onSubmitEditing={submit}
/> />
<ButtonMainAction <ButtonMainAction
title={'Done'} title={t.doneButton.pinCreation}
bottom={false} bottom={false}
onPress={submit} onPress={submit}
testID={testIDs.IdentityPin.submitButton} testID={testIDs.IdentityPin.submitButton}
...@@ -191,6 +195,28 @@ function PinInput(props) { ...@@ -191,6 +195,28 @@ function PinInput(props) {
); );
} }
const t = {
doneButton: {
pinCreation: 'DONE',
pinUnlock: 'UNLOCK'
},
pinConfirmLabel: 'Confirm PIN',
pinLabel: 'PIN',
pinMisMatchHint: {
pinCreation: "Pin codes don't match!",
pinUnlock: 'Pin code is wrong!'
},
pinTooShortHint: 'Your pin must be at least 6 digits long!',
subtitle: {
pinCreation: 'Choose a PIN code with 6 or more digits',
pinUnlock: 'Unlock the identity to use the seed'
},
title: {
pinCreation: 'Set Identity PIN',
pinUnlock: 'Unlock Identity'
}
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
body: { body: {
backgroundColor: colors.bg, backgroundColor: colors.bg,
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
'use strict'; 'use strict';
import React, { useState } from 'react'; import React, { useRef, useState } from 'react';
import { withNavigation } from 'react-navigation'; import { withNavigation } from 'react-navigation';
import { withAccountStore } from '../util/HOC'; import { withAccountStore } from '../util/HOC';
import { Platform, StyleSheet, Text, View } from 'react-native'; import { Platform, StyleSheet, Text, View } from 'react-native';
...@@ -43,6 +43,7 @@ function PathDerivation({ accounts, navigation }) { ...@@ -43,6 +43,7 @@ function PathDerivation({ accounts, navigation }) {
const [derivationPath, setDerivationPath] = useState(''); const [derivationPath, setDerivationPath] = useState('');
const [keyPairsName, setKeyPairsName] = useState(''); const [keyPairsName, setKeyPairsName] = useState('');
const [isPathValid, setIsPathValid] = useState(true); const [isPathValid, setIsPathValid] = useState(true);
const pathNameInput = useRef(null);
const inheritNetworkKey = navigation.getParam('networkKey'); const inheritNetworkKey = navigation.getParam('networkKey');
const isCustomPath = inheritNetworkKey === undefined; const isCustomPath = inheritNetworkKey === undefined;
const networkKey = inheritNetworkKey || getNetworkKeyByPath(derivationPath); const networkKey = inheritNetworkKey || getNetworkKeyByPath(derivationPath);
...@@ -80,21 +81,26 @@ function PathDerivation({ accounts, navigation }) { ...@@ -80,21 +81,26 @@ function PathDerivation({ accounts, navigation }) {
<KeyboardScrollView extraHeight={Platform.OS === 'ios' ? 250 : 180}> <KeyboardScrollView extraHeight={Platform.OS === 'ios' ? 250 : 180}>
{!isPathValid && <Text>Invalid Path</Text>} {!isPathValid && <Text>Invalid Path</Text>}
<TextInput <TextInput
autoCorrect={false}
autoCompleteType="off" autoCompleteType="off"
autoCorrect={false}
label="Path" label="Path"
onChangeText={setDerivationPath}
onSubmitEditing={() => pathNameInput.current.focus()}
placeholder="//hard/soft" placeholder="//hard/soft"
value={derivationPath} returnKeyType="next"
testID={testIDs.PathDerivation.pathInput} testID={testIDs.PathDerivation.pathInput}
onChangeText={setDerivationPath} value={derivationPath}
/> />
<TextInput <TextInput
autoCorrect={false}
autoCompleteType="off" autoCompleteType="off"
autoCorrect={false}
label="Display Name" label="Display Name"
onChangeText={keyParisName => setKeyPairsName(keyParisName)}
onSubmitEditing={onPathDerivation}
ref={pathNameInput}
returnKeyType="done"
testID={testIDs.PathDerivation.nameInput} testID={testIDs.PathDerivation.nameInput}
value={keyPairsName} value={keyPairsName}
onChangeText={keyParisName => setKeyPairsName(keyParisName)}
/> />
<Separator style={{ height: 0 }} /> <Separator style={{ height: 0 }} />
<PathCard <PathCard
...@@ -108,7 +114,7 @@ function PathDerivation({ accounts, navigation }) { ...@@ -108,7 +114,7 @@ function PathDerivation({ accounts, navigation }) {
style={{ marginTop: 8 }} style={{ marginTop: 8 }}
title="Derive Address" title="Derive Address"
testID={testIDs.PathDerivation.deriveButton} testID={testIDs.PathDerivation.deriveButton}
onPress={() => onPathDerivation()} onPress={onPathDerivation}
/> />
</KeyboardScrollView> </KeyboardScrollView>
</View> </View>
......
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