273 lines
14 KiB
JavaScript
273 lines
14 KiB
JavaScript
import * as React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
TextInput,
|
|
StyleSheet,
|
|
Alert,
|
|
Dimensions
|
|
} from 'react-native';
|
|
import { Container } from 'native-base';
|
|
import { connect } from "react-redux";
|
|
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
|
|
import Crypto from '../../components/crypto.js';
|
|
import Elements from '../../components/elements.js';
|
|
import NetInfo from "../../components/netstatus";
|
|
import REQUEST from '../../components/api/';
|
|
import Theme from '../../components/theme.style.js';
|
|
import DB from '../../components/storage';
|
|
import Icon from './../../components/icons.js';
|
|
import CustomSafeArea from '../../components/safeArea.component';
|
|
|
|
|
|
class Setnewmpin extends React.Component {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
mpin: "",
|
|
confirmMpin: "",
|
|
valid: "",
|
|
activeInput: -1
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
checkValidMpin = () => {
|
|
if(this.state.mpin.length < 4 || this.state.mpin == null) return false
|
|
return this.state.mpin == this.state.confirmMpin
|
|
}
|
|
|
|
setAppMpin = () => {
|
|
if(this.checkValidMpin()) {
|
|
NetInfo.netstatus(async isConnected => {
|
|
if(isConnected) {
|
|
this.setState({ loading: true })
|
|
this.requestSetMpin(success => {
|
|
this.getUserInfo(onSuccess => {
|
|
this.setState({ loading: false })
|
|
this.props.navigation.navigate('SuccessUpdateMpin')
|
|
}, onError => {
|
|
this.setState({ loading: false })
|
|
})
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("New Mpin.", "Failed to set mpin. Please try again.")
|
|
}, 300) : Alert.alert("New Mpin.", "Failed to set mpin. Please try again.")
|
|
})
|
|
} else {
|
|
this.setState({ loading: false })
|
|
Elements.nointernet2()
|
|
}
|
|
})
|
|
} else {
|
|
Platform.OS == 'ios' ? setTimeout(() => {
|
|
Alert.alert("Mpin.", "Please ensure that your MPIN is matched")
|
|
}, 300) : Alert.alert("Mpin.", "Please ensure that your MPIN is matched")
|
|
}
|
|
}
|
|
|
|
requestSetMpin = async (successCallback, errorCallback) => {
|
|
const { mpin } = this.state
|
|
this.getCurrentUserInfo(async (onSuccess) => {
|
|
let hash = onSuccess.data.customer_number.substring(0, 8)
|
|
let ciphermpin = Crypto.encrypt(mpin, hash)
|
|
const params = {
|
|
lcard_uuid: this.props.route.params.sessiondata.lcard_uuid,
|
|
mpin: ciphermpin
|
|
}
|
|
await REQUEST("setup_mpin", "post", {}, {}, params, function(data){
|
|
console.log(data)
|
|
successCallback(data)
|
|
}, function(error){
|
|
console.log(error)
|
|
errorCallback(error)
|
|
})
|
|
}, (onError) => {
|
|
errorCallback(onError)
|
|
})
|
|
}
|
|
|
|
getCurrentUserInfo = async (successCallback, errorCallback) => {
|
|
const SESSION = await DB.session()
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(data => {
|
|
if(data.status == 1) {
|
|
successCallback(data)
|
|
} else {
|
|
errorCallback({})
|
|
}
|
|
})
|
|
.catch(error => errorCallback(error))
|
|
}
|
|
|
|
getUserInfo = async (successCallback, errorCallback) => {
|
|
const SESSION = await DB.session()
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(data => {
|
|
if(data.status == 1) {
|
|
DB.updateProfile(data, res => {
|
|
this.setState({ loading: false })
|
|
successCallback(data)
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
})
|
|
.catch(error => errorCallback(error))
|
|
}
|
|
|
|
onInputFocus = (x) => {
|
|
this.setState({ activeInput: x })
|
|
}
|
|
|
|
onBackToPrevious = () => {
|
|
Alert.alert(
|
|
'',
|
|
'Are you sure you want to cancel?',
|
|
[
|
|
{
|
|
textStyle: 'cancel',
|
|
text: 'Cancel'
|
|
},
|
|
{
|
|
text: 'Ok',
|
|
onPress: async () => {
|
|
this.props.navigation.navigate('Mpin')
|
|
},
|
|
},
|
|
],
|
|
{cancelable: true},
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return(
|
|
<CustomSafeArea>
|
|
<View>
|
|
<View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
|
|
<TouchableOpacity
|
|
style={{ alignSelf: 'center', padding: 15}}
|
|
onPress={() => this.onBackToPrevious()}>
|
|
<Icon.AntDesign name='arrowleft' size={20} style={{color: "#FFF"}} />
|
|
</TouchableOpacity>
|
|
<View style={{flex:5, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={{textAlign:'center', fontSize: 17, color: '#fff'}}>Account Recovery</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={{ alignSelf: 'center', padding: 15}}
|
|
onPress={() => {}}>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<Elements.loaderView
|
|
title="Validating"
|
|
message="Please wait..."
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
visible={this.state.loading} />
|
|
<Container style={{flex: 1}}>
|
|
<ScrollView style={{ flex: 1 }}>
|
|
<View style={{ flex: 1, marginTop: 25, }}>
|
|
<Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 20, marginBottom: 10, marginHorizontal: 30, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>Set new MPIN</Text>
|
|
<Text style={{ padding: 5, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 35, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>In order to protect your account, make sure your password:</Text>
|
|
<Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Is not weak and easy to guess.</Text>
|
|
<Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Do not use MPIN such as 1234.</Text>
|
|
<Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginBottom: 30, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Do not use your birthdate.</Text>
|
|
<View style={{ flex: 1, alignItems: 'center' }}>
|
|
<Text style={{ padding: 10, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 35, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, marginBottom: 15 }}>New MPIN</Text>
|
|
<TextInput
|
|
returnKeyType='done'
|
|
keyboardType="numeric"
|
|
placeholder="Enter new MPIN"
|
|
placeholderTextColor="gray"
|
|
secureTextEntry={true}
|
|
maxLength={4}
|
|
value={this.state.mpin}
|
|
onFocus={() => this.onInputFocus(1)}
|
|
onBlur={() => {
|
|
this.setState({ activeInput: -1 })
|
|
}}
|
|
onChangeText={(v) => {
|
|
let value = v.includes(".") ? v.replace(".", "") : v
|
|
this.setState({ mpin: value, valid: value.length == 4 ? true : false })
|
|
}}
|
|
style={{flex: 1, width: '75%', fontSize: 17 ,borderBottomColor: this.state.activeInput == 1 ? Theme.colors.accent : "gray", borderBottomWidth: this.state.activeInput == 1 ? 1.5 : 1, marginBottom: 40, paddingBottom: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}
|
|
/>
|
|
{/* <CustomOTPInput
|
|
containerStyle={{ marginBottom: 30 }}
|
|
containerStyle={{ marginBottom: 30 }}
|
|
containerStyle={{ marginBottom: 30 }}
|
|
secureTextEntry={true}
|
|
onChangeText={(v) => {
|
|
this.setState({ mpin: v, valid: v.length == 4 ? true : false })
|
|
}}/> */}
|
|
<Text style={{ padding: 10, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 35, color: Theme.colors.black, marginBottom: 30, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>Verify MPIN</Text>
|
|
{/* <CustomOTPInput
|
|
{/* <CustomOTPInput
|
|
{/* <CustomOTPInput
|
|
secureTextEntry={true}
|
|
onChangeText={(v) => {
|
|
this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
|
|
}}/> */}
|
|
<TextInput
|
|
returnKeyType='done'
|
|
keyboardType="numeric"
|
|
placeholder="Verify your new MPIN"
|
|
placeholderTextColor="gray"
|
|
secureTextEntry={true}
|
|
maxLength={4}
|
|
value={this.state.confirmMpin}
|
|
onFocus={() => this.onInputFocus(2)}
|
|
onBlur={() => {
|
|
this.setState({ activeInput: -1 })
|
|
}}
|
|
onChangeText={(v) => {
|
|
let value = v.includes(".") ? v.replace(".", "") : v
|
|
this.setState({ confirmMpin: value, valid: value.length == 4 ? true : false })
|
|
}}
|
|
style={{flex: 1, width: '75%', fontSize: 17, borderBottomColor: this.state.activeInput == 2 ? Theme.colors.accent : "gray", borderBottomWidth: this.state.activeInput == 2 ? 1.5 : 1, paddingBottom: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}
|
|
/>
|
|
{(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
|
|
<Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
<TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginTop: Dimensions.get('screen').height / 3.5, marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}>
|
|
<Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white }}>Submit</Text>
|
|
</TouchableOpacity>
|
|
</Container>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo,
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Setnewmpin)
|
|
|
|
export const styles = StyleSheet.create({
|
|
|
|
}) |