add change password success and error modal

components/Form/Input.js

@@ -7,7 +7,7 @@ import { Icon } from 'native-base';
 const styles = StyleSheet.create({
 	container: {
 		borderBottomWidth: 1,
-		borderBottomColor: color.lightGrey,
+		borderBottomColor: '#d0d0d6',
 	},
 	icon: {
 		fontSize: 20,

components/Form/LoginForm.js

@@ -20,12 +20,12 @@ class Login extends Component {
 					<Field
 						hideCheckmark
 						forwardRef
-						ref={c => (this.username = c)}
-						refField="username"
+						ref={c => (this.email = c)}
+						refField="email"
 						returnKeyType="next"
 						onSubmitEditing={() => this.password.getRenderedComponent().refs.password.focus()}
-						name="username"
-						keyboardType="default"
+						name="email"
+						keyboardType="email-address"
 						component={Input}
 						validate={[required]}
 						placeholder={'E-mail'}

screens/Private/ProfileScreen/ChangePasswordScreen.js

@@ -4,7 +4,11 @@ import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import ChangePasswordForm from '../../../components/Form/ChangePasswordForm';
 import app from '../../../firebase';
 import firebase from 'firebase/app';
-import { Alert } from 'react-native';
+import Modal from 'react-native-modalbox';
+import { Button, Text, View } from 'native-base';
+import { width, height } from '../../../constants/Layout';
+import { theme, color } from '../../../constants/Styles';
+import { StyleSheet } from 'react-native';
 
 export default class ChangePasswordScreen extends React.Component {
 	static navigationOptions = ({ navigation }) => {
@@ -18,6 +22,11 @@ export default class ChangePasswordScreen extends React.Component {
 		};
 	};
 
+	state = {
+		changeSuccessModal: false,
+		errorModal: false,
+	};
+
 	reauthenticate = currentPassword => {
 		var user = app.auth().currentUser;
 		var cred = firebase.auth.EmailAuthProvider.credential(user.email, currentPassword);
@@ -29,20 +38,16 @@ export default class ChangePasswordScreen extends React.Component {
 				var user = app.auth().currentUser;
 				try {
 					user.updatePassword(newPassword);
-					Alert.alert('Password Changed', 'Go back to login', [
-						{
-							text: 'OK',
-							onPress: async () => {
-								this.props.navigation.navigate('Login');
-								await AsyncStorage.clear();
-							},
-						},
-					]);
+					this.setState({
+						changeSuccessModal: true,
+					});
 				} catch (error) {
+					this.setState({ errorModal: true });
 					console.log(error);
 				}
 			})
 			.catch(error => {
+				this.setState({ errorModal: true });
 				console.log(error);
 			});
 	};
@@ -53,7 +58,62 @@ export default class ChangePasswordScreen extends React.Component {
 			console.log(error);
 		}
 	};
+	logout = async () => {
+		this.setState({ changeSuccessModal: false });
+		this.props.navigation.navigate('Login');
+		await AsyncStorage.clear();
+	};
 	render() {
-		return <ChangePasswordForm onSubmit={this.handleSave} />;
+		const { changeSuccessModal, errorModal } = this.state;
+		return (
+			<>
+				<ChangePasswordForm onSubmit={this.handleSave} />
+				<Modal
+					isOpen={changeSuccessModal}
+					style={styles.modalContainer}
+					swipeToClose={false}
+					backdropPressToClose={false}
+					coverScreen
+				>
+					<View style={{ alignItems: 'center' }}>
+						<Text style={[theme.smallTitle, theme.textDark]}>Password Changed!</Text>
+						<Text style={[theme.normalText, theme.mt1]}>Go back to Login</Text>
+					</View>
+					<Button full style={styles.btn} onPress={this.logout}>
+						<Text>OK</Text>
+					</Button>
+				</Modal>
+				<Modal
+					isOpen={errorModal}
+					style={styles.modalContainer}
+					swipeToClose={false}
+					backdropPressToClose={false}
+					coverScreen
+				>
+					<View style={{ alignItems: 'center' }}>
+						<Text style={[theme.smallTitle, theme.textDark]}>Password Incorrect!</Text>
+						<Text style={[theme.normalText, theme.mt1]}>Please check your current password</Text>
+					</View>
+					<Button full style={styles.btn} onPress={() => this.setState({ errorModal: false })}>
+						<Text>OK</Text>
+					</Button>
+				</Modal>
+			</>
+		);
 	}
 }
+
+const styles = StyleSheet.create({
+	modalContainer: {
+		width: width * 0.9,
+		height: height / 4,
+		borderRadius: 20,
+		alignItems: 'center',
+		justifyContent: 'space-evenly',
+	},
+	btn: {
+		backgroundColor: color.primary,
+		marginHorizontal: 20,
+		borderRadius: 100,
+	},
+});

screens/Public/LoginScreen.js

 import React, { Component } from 'react';
-import { Text, Left, Right, Row, CheckBox } from 'native-base';
+import { Text, CheckBox } from 'native-base';
 import { theme, color } from '../../constants/Styles';
 import AsyncStorage from '@react-native-community/async-storage';
 import LoginForm from '../../components/Form/LoginForm';
@@ -18,9 +18,9 @@ export default class LoginScreen extends Component {
 	};
 
 	handleSignIn = async values => {
-		const { username, password } = values;
+		const { email, password } = values;
 		try {
-			await app.auth().signInWithEmailAndPassword(username, password);
+			await app.auth().signInWithEmailAndPassword(email, password);
 			await this.success();
 		} catch (error) {
 			alert(error);