Provide error feedback without actually submitting

My earlier idea of keeping the login button locked is just going to be confusing to users. We should provide feedback and keep the button enabled. But! We're still not attempting to Unlock for real, which I think is ultimately what we want here.

app/components/Views/Login/index.js

@@ -79,7 +79,8 @@ const styles = StyleSheet.create({
 	},
 	errorMsg: {
 		color: colors.red,
-		...fontStyles.normal
+		...fontStyles.normal,
+		lineHeight: 20
 	},
 	goBack: {
 		color: colors.fontSecondary,
@@ -184,10 +185,11 @@ class Login extends PureComponent {
 		this.mounted = false;
 	}
 
-	onLogin = async disabled => {
-		if (this.state.loading || disabled) return;
+	onLogin = async locked => {
+		if (locked) this.setState({ error: strings('login.invalid_password') });
+		if (this.state.loading || locked) return;
 		try {
-			this.setState({ loading: true });
+			this.setState({ loading: true, error: null });
 			const { KeyringController } = Engine.context;
 
 			// Restore vault with user entered password
@@ -332,7 +334,7 @@ class Login extends PureComponent {
 
 	render = () => {
 		const { password } = this.state;
-		const disabled = !passwordRequirementsMet(password);
+		const locked = !passwordRequirementsMet(password);
 
 		return (
 			<SafeAreaView style={styles.mainWrapper}>
@@ -363,7 +365,7 @@ class Login extends PureComponent {
 								value={this.state.password}
 								baseColor={colors.grey500}
 								tintColor={colors.blue}
-								onSubmitEditing={() => this.onLogin(disabled)}
+								onSubmitEditing={() => this.onLogin(locked)}
 								renderRightAccessory={() => (
 									<BiometryButton
 										onPress={this.tryBiometric}
@@ -389,7 +391,7 @@ class Login extends PureComponent {
 						)}
 
 						<View style={styles.ctaWrapper} testID={'log-in-button'}>
-							<StyledButton disabled={disabled} type={'confirm'} onPress={() => this.onLogin(disabled)}>
+							<StyledButton type={'confirm'} onPress={() => this.onLogin(locked)}>
 								{this.state.loading ? (
 									<ActivityIndicator size="small" color="white" />
 								) : (

app/components/Views/Root/index.js

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import propTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/lib/integration/react';
 
@@ -14,9 +15,17 @@ import EntryScriptWeb3 from '../../../core/EntryScriptWeb3';
  * App component is wrapped by the provider from react-redux
  */
 export default class Root extends PureComponent {
+	static propTypes = {
+		foxCode: propTypes.string
+	};
+
+	static defaultProps = {
+		foxCode: 'null'
+	};
+
 	constructor(props) {
 		super(props);
-		SecureKeychain.init(props.foxCode); // eslint-disable-line
+		SecureKeychain.init(props.foxCode);
 		// Init EntryScriptWeb3 asynchronously on the background
 		EntryScriptWeb3.init();
 		SplashScreen.hide();