Skip to content

S
safetcut-app
Commit cf4ced4f by Tonk
Options

update change password

parent 4559e129
Showing with 186 additions and 22 deletions
AppNavigation.js
...@@ -40,12 +40,17 @@ import RegisterScreen from './screens/Public/RegisterScreen'; ...@@ -40,12 +40,17 @@ import RegisterScreen from './screens/Public/RegisterScreen';
import RegisterSuccess from './screens/Public/RegisterSuccess'; import RegisterSuccess from './screens/Public/RegisterSuccess';
import SendEmailScreen from './screens/Public/SendEmailScreen'; import SendEmailScreen from './screens/Public/SendEmailScreen';
import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen'; import ProfileScreen from './screens/Private/ProfileScreen/ProfileScreen';
import ChangePasswordScreen from './screens/Private/ProfileScreen/ChangePasswordScreen';
const defaultNavigationOptions = { const defaultNavigationOptions = {
headerStyle: [ headerStyle: [
{ {
backgroundColor: color.primary, backgroundColor: color.primary,
borderColor: 'transparent', borderColor: 'transparent',
borderBottomWidth: 0,
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0,
elevation: 0,
}, },
Platform.OS === 'ios' && { height: 80 }, Platform.OS === 'ios' && { height: 80 },
], ],
...@@ -72,6 +77,7 @@ const HomeStack = createStackNavigator( ...@@ -72,6 +77,7 @@ const HomeStack = createStackNavigator(
const ProfileStack = createStackNavigator( const ProfileStack = createStackNavigator(
{ {
Profile: ProfileScreen, Profile: ProfileScreen,
ChangePassword: ChangePasswordScreen,
}, },
{ {
headerLayoutPreset: 'center', headerLayoutPreset: 'center',
......
components/Form/ChangePasswordForm.js 0 → 100644
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 0 → 100644
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 React from 'react';
import { Text, Card, Icon, Button, ActionSheet } from 'native-base'; 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 { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { theme, color } from '../../../constants/Styles'; import { theme, color } from '../../../constants/Styles';
...@@ -27,13 +27,12 @@ class ProfileScreen extends React.Component { ...@@ -27,13 +27,12 @@ class ProfileScreen extends React.Component {
style={{ color: color.white, fontSize: 20, marginRight: 15 }} style={{ color: color.white, fontSize: 20, marginRight: 15 }}
/> />
), ),
headerStyle: styles.headerStyle,
}); });
render() { render() {
const { email, phoneNumber, firstName, lastName, profileImg } = this.props; const { email, phoneNumber, firstName, lastName, profileImg } = this.props;
return ( return (
<View style={theme.container}> <View style={theme.container}>
<View style={styles.headerStyle2}> <View style={styles.headerStyle}>
<Card style={styles.imgProfileContainer}> <Card style={styles.imgProfileContainer}>
{profileImg ? ( {profileImg ? (
<></> <></>
...@@ -56,12 +55,13 @@ class ProfileScreen extends React.Component { ...@@ -56,12 +55,13 @@ class ProfileScreen extends React.Component {
<Text style={theme.description}>Phone No.</Text> <Text style={theme.description}>Phone No.</Text>
<Text style={styles.textInfo}>{phoneNumber || '-'}</Text> <Text style={styles.textInfo}>{phoneNumber || '-'}</Text>
</View> </View>
<View <TouchableOpacity
style={[styles.infoContainer, theme.mt2, theme.rowContainer, { justifyContent: 'space-between' }]} 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 }} /> <Icon name="chevron-thin-right" type="Entypo" style={{ fontSize: 20, color: color.grey }} />
</View> </TouchableOpacity>
<Button <Button
full full
rounded rounded
...@@ -93,34 +93,27 @@ class ProfileScreen extends React.Component { ...@@ -93,34 +93,27 @@ class ProfileScreen extends React.Component {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
headerStyle: { headerStyle: {
backgroundColor: color.primary, backgroundColor: color.primary,
borderColor: 'transparent',
borderBottomWidth: 0,
shadowOffset: { height: 0, width: 0 },
shadowOpacity: 0,
elevation: 0,
},
headerStyle2: {
backgroundColor: color.primary,
height: 100, height: 100,
borderBottomLeftRadius: 60, borderBottomLeftRadius: 60,
}, },
imgProfileContainer: { imgProfileContainer: {
borderRadius: 100, borderRadius: 100,
width: 120, width: 130,
height: 120, height: 130,
alignSelf: 'center', alignSelf: 'center',
bottom: -35, bottom: -20,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
infoContainer: { infoContainer: {
backgroundColor: color.white, backgroundColor: color.white,
marginTop: 90, marginTop: 80,
padding: 20, padding: 20,
}, },
textInfo: { textInfo: {
...theme.normalText, ...theme.smallTitle,
...theme.textDark, ...theme.textDark,
...theme.mt1,
}, },
seperator: { seperator: {
marginVertical: 10, marginVertical: 10,
...@@ -132,7 +125,7 @@ const styles = StyleSheet.create({ ...@@ -132,7 +125,7 @@ const styles = StyleSheet.create({
width: width - 40, width: width - 40,
alignSelf: 'center', alignSelf: 'center',
paddingVertical: 15, paddingVertical: 15,
bottom: isIphoneX() ? 45 : 10, bottom: isIphoneX() ? 45 : 15,
position: 'absolute', position: 'absolute',
}, },
}); });
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
...@@ -140,7 +140,7 @@ const styles = StyleSheet.create({ ...@@ -140,7 +140,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
display: 'flex', display: 'flex',
backgroundColor: 'transparent', backgroundColor: 'transparent',
height: 40, height: 35,
padding: 0, padding: 0,
borderTopWidth: 0, borderTopWidth: 0,
borderBottomWidth: 0, borderBottomWidth: 0,
...@@ -154,7 +154,7 @@ const styles = StyleSheet.create({ ...@@ -154,7 +154,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
backgroundColor: 'transparent', backgroundColor: 'transparent',
minHeight: 10, minHeight: 10,
height: 40, height: 35,
borderColor: '#c7cad1', borderColor: '#c7cad1',
}, },
}); });
......
Markdown is supported
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