update change password

AppNavigation.js

@@ -40,12 +40,17 @@ import RegisterScreen from './screens/Public/RegisterScreen';
 import RegisterSuccess from './screens/Public/RegisterSuccess';
 import SendEmailScreen from './screens/Public/SendEmailScreen';
 import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen';
+import ChangePasswordScreen from './screens/Private/ProfileScreen/ChangePasswordScreen';
 
 const defaultNavigationOptions = {
 	headerStyle: [
 		{
 			backgroundColor: color.primary,
 			borderColor: 'transparent',
+			borderBottomWidth: 0,
+			shadowOffset: { height: 0, width: 0 },
+			shadowOpacity: 0,
+			elevation: 0,
 		},
 		Platform.OS === 'ios' && { height: 80 },
 	],
@@ -72,6 +77,7 @@ const HomeStack = createStackNavigator(
 const ProfileStack = createStackNavigator(
 	{
 		Profile: ProfileScreen,
+		ChangePassword: ChangePasswordScreen,
 	},
 	{
 		headerLayoutPreset: 'center',

components/Form/ChangePasswordForm.js

+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import { Text, StyleSheet, View } from 'react-native';
+import Input from './Input';
+import { theme, color } from '../../constants/Styles';
+import { Button } from 'native-base';
+
+// validaition
+const required = value => (value ? undefined : 'This is a required field.');
+const minChar = value => (value && !/(?=.{8,})/i.test(value) ? 'At least 8 characters' : undefined);
+const lowercase = value =>
+	value && !/^(?=.*[a-z])/i.test(value) ? 'Password must contain at least 1 lowercase character' : undefined;
+const uppercase = value =>
+	value && !/^(?=.*[A-Z])/i.test(value) ? 'Password must contain at least 1 uppercase character' : undefined;
+const number = value =>
+	value && !/^(?=.*[0-9])/i.test(value) ? 'Password must contain at least 1 numeric character' : undefined;
+const special = value =>
+	value && !/^(?=.*[!@#\$%\^&\*])/i.test(value) ? 'Password must contain at least 1 special character' : undefined;
+const cfpassword = (value, allValues) => (value !== allValues.newPass ? 'Password not match' : undefined);
+
+class ChangePassword extends React.Component {
+	state = {
+		passVisible: false,
+	};
+
+	render() {
+		return (
+			<View style={theme.container}>
+				<View style={styles.container}>
+					<Text style={theme.description}>Current Password</Text>
+					<Field
+						forwardRef
+						ref={c => (this.currentPass = c)}
+						refField="currentPass"
+						returnKeyType="next"
+						onSubmitEditing={() => this.newPass.getRenderedComponent().ref.newPass.focus()}
+						name="currentPass"
+						keyboardType="default"
+						component={Input}
+						validate={[required]}
+						placeholder="Current Password"
+					/>
+				</View>
+
+				<View style={styles.container}>
+					<Text style={theme.description}>New Password</Text>
+					<Field
+						forwardRef
+						ref={c => (this.newPass = c)}
+						refField="newPass"
+						returnKeyType="next"
+						onSubmitEditing={() => this.cfNewPass.getRenderedComponent().ref.cfNewPass.focus()}
+						name="newPass"
+						keyboardType="default"
+						component={Input}
+						validate={[required, minChar, lowercase, uppercase, number, special]}
+						placeholder="New Password"
+					/>
+					<Text style={[theme.description, theme.mt2]}>Confirm New Password</Text>
+					<Field
+						forwardRef
+						ref={c => (this.cfNewPass = c)}
+						refField="cfNewPass"
+						returnKeyType="next"
+						name="cfNewPass"
+						keyboardType="default"
+						component={Input}
+						validate={[required, cfpassword]}
+						placeholder="Confirm New Password"
+					/>
+				</View>
+				<Button full style={styles.saveBtn} onPress={this.props.handleSubmit}>
+					<Text style={{ ...theme.smallTitle, ...theme.textWhite }}>SAVE</Text>
+				</Button>
+			</View>
+		);
+	}
+}
+const styles = StyleSheet.create({
+	container: {
+		...theme.mt2,
+		backgroundColor: color.white,
+		padding: 20,
+	},
+	seperator: {
+		marginVertical: 10,
+		height: StyleSheet.hairlineWidth,
+		backgroundColor: '#d0d0d6',
+	},
+	inputStyle: {
+		...theme.smallTitle,
+		...theme.mt1,
+	},
+	saveBtn: {
+		...theme.mt2,
+		backgroundColor: color.primary,
+		marginHorizontal: 20,
+		borderRadius: 100,
+	},
+});
+
+const ChangePasswordForm = reduxForm({
+	form: 'changePassword',
+})(ChangePassword);
+
+export default ChangePasswordForm;

screens/Private/ProfileScreen/ChangePasswordScreen.js

+import React from 'react';
+import { HeaderButtons, Item } from 'react-navigation-header-buttons';
+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';
+
+export default class ChangePasswordScreen extends React.Component {
+	static navigationOptions = ({ navigation }) => {
+		return {
+			title: 'Profile',
+			headerLeft: (
+				<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
+					<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} />
+				</HeaderButtons>
+			),
+		};
+	};
+
+	reauthenticate = currentPassword => {
+		var user = app.auth().currentUser;
+		var cred = firebase.auth.EmailAuthProvider.credential(user.email, currentPassword);
+		return user.reauthenticateWithCredential(cred);
+	};
+	changePassword = async (currentPassword, newPassword) => {
+		this.reauthenticate(currentPassword)
+			.then(() => {
+				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();
+							},
+						},
+					]);
+				} catch (error) {
+					console.log(error);
+				}
+			})
+			.catch(error => {
+				console.log(error);
+			});
+	};
+	handleSave = values => {
+		try {
+			this.changePassword(values.currentPass, values.newPass);
+		} catch (error) {
+			console.log(error);
+		}
+	};
+	render() {
+		return <ChangePasswordForm onSubmit={this.handleSave} />;
+	}
+}

screens/Private/ProfileScreen/ProfileScreen.js

 import React from 'react';
 import { Text, Card, Icon, Button, ActionSheet } from 'native-base';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { HeaderButtons, Item } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
 import { theme, color } from '../../../constants/Styles';
@@ -27,13 +27,12 @@ class ProfileScreen extends React.Component {
 				style={{ color: color.white, fontSize: 20, marginRight: 15 }}
 			/>
 		),
-		headerStyle: styles.headerStyle,
 	});
 	render() {
 		const { email, phoneNumber, firstName, lastName, profileImg } = this.props;
 		return (
 			<View style={theme.container}>
-				<View style={styles.headerStyle2}>
+				<View style={styles.headerStyle}>
 					<Card style={styles.imgProfileContainer}>
 						{profileImg ? (
 							<></>
@@ -56,12 +55,13 @@ class ProfileScreen extends React.Component {
 					<Text style={theme.description}>Phone No.</Text>
 					<Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
 				</View>
-				<View
+				<TouchableOpacity
 					style={[styles.infoContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]}
+					onPress={() => this.props.navigation.navigate('ChangePassword')}
 				>
-					<Text style={styles.textInfo}>Change Password</Text>
+					<Text style={[styles.textInfo, { marginTop: 0 }]}>Change Password</Text>
 					<Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
-				</View>
+				</TouchableOpacity>
 				<Button
 					full
 					rounded
@@ -93,34 +93,27 @@ class ProfileScreen extends React.Component {
 const styles = StyleSheet.create({
 	headerStyle: {
 		backgroundColor: color.primary,
-		borderColor: 'transparent',
-		borderBottomWidth: 0,
-		shadowOffset: { height: 0, width: 0 },
-		shadowOpacity: 0,
-		elevation: 0,
-	},
-	headerStyle2: {
-		backgroundColor: color.primary,
 		height: 100,
 		borderBottomLeftRadius: 60,
 	},
 	imgProfileContainer: {
 		borderRadius: 100,
-		width: 120,
-		height: 120,
+		width: 130,
+		height: 130,
 		alignSelf: 'center',
-		bottom: -35,
+		bottom: -20,
 		alignItems: 'center',
 		justifyContent: 'center',
 	},
 	infoContainer: {
 		backgroundColor: color.white,
-		marginTop: 90,
+		marginTop: 80,
 		padding: 20,
 	},
 	textInfo: {
-		...theme.normalText,
+		...theme.smallTitle,
 		...theme.textDark,
+		...theme.mt1,
 	},
 	seperator: {
 		marginVertical: 10,
@@ -132,7 +125,7 @@ const styles = StyleSheet.create({
 		width: width - 40,
 		alignSelf: 'center',
 		paddingVertical: 15,
-		bottom: isIphoneX() ? 45 : 10,
+		bottom: isIphoneX() ? 45 : 15,
 		position: 'absolute',
 	},
 });

screens/Private/SmartMeterScreen/SmartMeterScreen.js

@@ -140,7 +140,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		display: 'flex',
 		backgroundColor: 'transparent',
-		height: 40,
+		height: 35,
 		padding: 0,
 		borderTopWidth: 0,
 		borderBottomWidth: 0,
@@ -154,7 +154,7 @@ const styles = StyleSheet.create({
 		borderBottomWidth: 1,
 		backgroundColor: 'transparent',
 		minHeight: 10,
-		height: 40,
+		height: 35,
 		borderColor: '#c7cad1',
 	},
 });