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

e2e/e2eUtils.js

@@ -43,6 +43,17 @@ export const testInput = async (inputId, inputText) => {
 	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) => {
 	await waitFor(element(by.id(buttonId)))
 		.toBeVisible()
@@ -52,6 +63,5 @@ export const testScrollAndTap = async (buttonId, screenId) => {
 };
 
 export const testUnlockPin = async pinCode => {
-	await testInput(IdentityPin.unlockPinInput, pinCode);
-	await testTap(IdentityPin.unlockPinButton);
+	await testInputWithDone(IdentityPin.unlockPinInput, pinCode);
 };

e2e/identityManipulation.spec.js

@@ -21,6 +21,7 @@ import {
 	tapBack,
 	testExist,
 	testInput,
+	testInputWithDone,
 	testNotExist,
 	testNotVisible,
 	testScrollAndTap,
@@ -55,8 +56,7 @@ const mockSeedPhrase =
 
 const testSetUpDefaultPath = async () => {
 	await testInput(IdentityPin.setPin, pinCode);
-	await testInput(IdentityPin.confirmPin, pinCode);
-	await testTap(IdentityPin.submitButton);
+	await testInputWithDone(IdentityPin.confirmPin, pinCode);
 	await testVisible(AccountNetworkChooser.chooserScreen);
 	await testScrollAndTap(
 		substrateNetworkButtonIndex,
@@ -87,17 +87,16 @@ describe('Load test', async () => {
 	it('recover a identity with seed phrase', async () => {
 		await testTap(AccountNetworkChooser.recoverButton);
 		await testVisible(IdentityNew.seedInput);
-		await element(by.id(IdentityNew.seedInput)).typeText(mockSeedPhrase);
 		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();
 	});
 
 	it('derive a new key', async () => {
 		await testTap(PathsList.deriveButton);
-		await testInput(PathDerivation.nameInput, 'first one');
 		await testInput(PathDerivation.pathInput, defaultPath);
-		await testTap(PathDerivation.deriveButton);
+		await testInput(PathDerivation.nameInput, 'first one');
 		await testUnlockPin(pinCode);
 		await testExist(PathsList.pathCard + `//kusama${defaultPath}`);
 	});
@@ -128,9 +127,8 @@ describe('Load test', async () => {
 			testIDs.AccountNetworkChooser.addCustomNetworkButton,
 			testIDs.AccountNetworkChooser.chooserScreen
 		);
-		await testInput(PathDerivation.nameInput, 'custom network');
 		await testInput(PathDerivation.pathInput, customPath);
-		await testTap(PathDerivation.deriveButton);
+		await testInput(PathDerivation.nameInput, 'custom network');
 		await testUnlockPin(pinCode);
 		await testExist(PathsList.pathCard + customPath);
 	});

src/screens/IdentityNew.js

@@ -104,8 +104,10 @@ function IdentityNew({ accounts, navigation }) {
 		<>
 			<AccountSeed
 				testID={testIDs.IdentityNew.seedInput}
-				valid={isSeedValid.valid}
 				onChangeText={onSeedTextInput}
+				onSubmitEditing={onRecoverConfirm}
+				returnKeyType="done"
+				valid={isSeedValid.valid}
 				value={seedPhrase}
 			/>
 			<View style={styles.btnBox}>

src/screens/IdentityPin.js

@@ -81,11 +81,13 @@ function IdentityPin({ navigation, accounts }) {
 
 	const showHintOrError = () => {
 		if (state.pinTooShort) {
-			return ' Your pin must be at least 6 digits long!';
+			return t.pinTooShortHint;
 		} 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) => {
@@ -102,20 +104,21 @@ function IdentityPin({ navigation, accounts }) {
 		isUnlock ? (
 			<>
 				<ScreenHeading
-					title={'Unlock Identity'}
+					title={t.title.pinUnlock}
 					error={state.pinMismatch || state.pinTooShort}
 					subtitle={showHintOrError()}
 				/>
 				<PinInput
-					label="PIN"
+					label={t.pinLabel}
 					autoFocus
 					testID={testIDs.IdentityPin.unlockPinInput}
 					returnKeyType="done"
 					onChangeText={pin => onPinInputChange('pin', pin)}
+					onSubmitEditing={testPin}
 					value={state.pin}
 				/>
 				<ButtonMainAction
-					title={'Done'}
+					title={t.doneButton.pinUnlock}
 					bottom={false}
 					onPress={testPin}
 					testID={testIDs.IdentityPin.unlockPinButton}
@@ -124,13 +127,13 @@ function IdentityPin({ navigation, accounts }) {
 		) : (
 			<>
 				<ScreenHeading
-					title={'Set Identity PIN'}
+					title={t.title.pinCreation}
 					subtitle={showHintOrError()}
 					error={state.pinMismatch || state.pinTooShort}
 				/>
 
 				<PinInput
-					label="PIN"
+					label={t.pinLabel}
 					autoFocus
 					testID={testIDs.IdentityPin.setPin}
 					returnKeyType="next"
@@ -142,7 +145,7 @@ function IdentityPin({ navigation, accounts }) {
 					value={state.pin}
 				/>
 				<PinInput
-					label="Confirm PIN"
+					label={t.pinConfirmLabel}
 					returnKeyType="done"
 					testID={testIDs.IdentityPin.confirmPin}
 					focus={state.focusConfirmation}
@@ -150,9 +153,10 @@ function IdentityPin({ navigation, accounts }) {
 						onPinInputChange('confirmation', confirmation)
 					}
 					value={state.confirmation}
+					onSubmitEditing={submit}
 				/>
 				<ButtonMainAction
-					title={'Done'}
+					title={t.doneButton.pinCreation}
 					bottom={false}
 					onPress={submit}
 					testID={testIDs.IdentityPin.submitButton}
@@ -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({
 	body: {
 		backgroundColor: colors.bg,

src/screens/PathDerivation.js

@@ -16,7 +16,7 @@
 
 'use strict';
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { withNavigation } from 'react-navigation';
 import { withAccountStore } from '../util/HOC';
 import { Platform, StyleSheet, Text, View } from 'react-native';
@@ -43,6 +43,7 @@ function PathDerivation({ accounts, navigation }) {
 	const [derivationPath, setDerivationPath] = useState('');
 	const [keyPairsName, setKeyPairsName] = useState('');
 	const [isPathValid, setIsPathValid] = useState(true);
+	const pathNameInput = useRef(null);
 	const inheritNetworkKey = navigation.getParam('networkKey');
 	const isCustomPath = inheritNetworkKey === undefined;
 	const networkKey = inheritNetworkKey || getNetworkKeyByPath(derivationPath);
@@ -80,21 +81,26 @@ function PathDerivation({ accounts, navigation }) {
 			<KeyboardScrollView extraHeight={Platform.OS === 'ios' ? 250 : 180}>
 				{!isPathValid && <Text>Invalid Path</Text>}
 				<TextInput
-					autoCorrect={false}
 					autoCompleteType="off"
+					autoCorrect={false}
 					label="Path"
+					onChangeText={setDerivationPath}
+					onSubmitEditing={() => pathNameInput.current.focus()}
 					placeholder="//hard/soft"
-					value={derivationPath}
+					returnKeyType="next"
 					testID={testIDs.PathDerivation.pathInput}
-					onChangeText={setDerivationPath}
+					value={derivationPath}
 				/>
 				<TextInput
-					autoCorrect={false}
 					autoCompleteType="off"
+					autoCorrect={false}
 					label="Display Name"
+					onChangeText={keyParisName => setKeyPairsName(keyParisName)}
+					onSubmitEditing={onPathDerivation}
+					ref={pathNameInput}
+					returnKeyType="done"
 					testID={testIDs.PathDerivation.nameInput}
 					value={keyPairsName}
-					onChangeText={keyParisName => setKeyPairsName(keyParisName)}
 				/>
 				<Separator style={{ height: 0 }} />
 				<PathCard
@@ -108,7 +114,7 @@ function PathDerivation({ accounts, navigation }) {
 					style={{ marginTop: 8 }}
 					title="Derive Address"
 					testID={testIDs.PathDerivation.deriveButton}
-					onPress={() => onPathDerivation()}
+					onPress={onPathDerivation}
 				/>
 			</KeyboardScrollView>
 		</View>