Skip to content

I
InvestCustomer
Commit 08a2aff7 by Giang Tran
Options

update feature forgot password

parent 120bc9a8
Showing with 576 additions and 35 deletions
src/Screens/Account/AccountView.js
......@@ -11,6 +11,7 @@ import {
BONUSTEAM,
MYGROUP,
AccountVerification,
PROFILE,
} from '../../routers/ScreenNames';
const AccountView = (props) => {
......@@ -21,7 +22,7 @@ const AccountView = (props) => {
<HeaderDrawer />
<View style={styles.container}>
<TouchableOpacity
onPress={() => navigate.navigate(USERINFOR)}
onPress={() => navigate.navigate(PROFILE)}
style={styles.containerItem}>
<Image source={R.images.iconUser} style={styles.imgIcon} />
<Text>Thông tin cá nhân</Text>
......
src/Screens/Authen/ConfirmEmail.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
TextInput,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {useNavigation} from '@react-navigation/native';
import {CONFIRMOTP} from '../../routers/ScreenNames';
const ConfirmEmail = (props) => {
const [value, setValue] = useState('');
const navigate = useNavigation();
return (
<View style={{flex: 1}}>
<HeaderBack title={'Quên mật khẩu'} />
<View style={styles.container}>
<View style={styles.wrap}>
<View style={styles.containerCode}>
<Text style={styles.txtTitle}>
Vui lòng nhập email hoặc số điện thoại
</Text>
<TextInput
style={styles.txtInput}
placeholder="Nhập Email hoặc số điện thoại"
value={value}
onChangeText={(val) => setValue(val)}
/>
</View>
</View>
</View>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => navigate.navigate(CONFIRMOTP)}
style={styles.btn}>
<Text style={styles.txtBtn}>Lấy mã xác thực</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigate.goBack()}>
<Text style={styles.txtSend}>Quay lại đăng nhập</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 20,
},
footer: {
height: 200,
justifyContent: 'center',
alignItems: 'center',
},
wrap: {
flex: 1,
paddingTop: 10,
alignItems: 'center',
width: '100%',
paddingHorizontal: 50,
},
containerCode: {
height: 50,
width: '100%',
marginTop: 10,
},
codeFieldRoot: {
marginTop: 20,
},
txtTitle: {
fontSize: getFontXD(48),
color: '#141414',
marginBottom: 12,
},
txtInput: {
height: HEIGHTXD(99),
borderBottomWidth: 2,
borderBottomColor: '#DBEBFF',
fontSize: getFontXD(46),
paddingVertical: 2,
color: 'black',
},
btn: {
width: WIDTHXD(550),
height: HEIGHTXD(120),
borderRadius: 22,
backgroundColor: '#1C6AF6',
justifyContent: 'center',
alignItems: 'center',
},
txtBtn: {
color: R.colors.white,
fontSize: getFontXD(52),
textTransform: 'uppercase',
},
txtSend: {
marginTop: 30,
fontSize: getFontXD(42),
color: '#1C6AF6',
},
});
export default ConfirmEmail;
src/Screens/Authen/ConfirmOTP.js
......@@ -16,11 +16,17 @@ import {
} from 'react-native-confirmation-code-field';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {NEWPASSWORD} from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native';
const CELL_COUNT = 4;
const ConfirmOTP = (propsa) => {
const [value, setValue] = useState('');
const navigate = useNavigation();
const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
value,
......@@ -62,7 +68,7 @@ const ConfirmOTP = (propsa) => {
</View>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => console.log('Hello', value)}
onPress={() => navigate.navigate(NEWPASSWORD)}
style={styles.btn}>
<Text style={styles.txtBtn}>Tiếp tục</Text>
</TouchableOpacity>
......@@ -103,22 +109,13 @@ const styles = StyleSheet.create({
codeFieldRoot: {
marginTop: 20,
},
cell: {
width: 50,
height: 50,
lineHeight: 50,
fontSize: 24,
borderBottomColor: 'black',
borderBottomWidth: 1,
backgroundColor: 'red',
textAlign: 'center',
},
focusCell: {
borderColor: '#000',
},
cellRoot: {
width: 60,
height: 60,
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
borderBottomColor: '#ccc',
......
src/Screens/Authen/Login.js
......@@ -13,7 +13,11 @@ import InputIcon from '../../components/Input/InputIcon';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {useNavigation} from '@react-navigation/native';
import {TABNAVIGATOR, FORGOTPASSWORD} from '../../routers/ScreenNames';
import {
TABNAVIGATOR,
FORGOTPASSWORD,
CONFIRMEMAIL,
} from '../../routers/ScreenNames';
import {checkFormatArray} from '../../Config/Functions';
import {loginApi} from '../../apis/Functions/users';
import KEY from '../../assets/AsynStorage';
......@@ -88,7 +92,7 @@ const Login = (props) => {
value={pass}
/>
<TouchableOpacity
onPress={() => navigate.navigate(FORGOTPASSWORD)}
onPress={() => navigate.navigate(CONFIRMEMAIL)}
style={styles.forgotView}>
<Text style={styles.txtTitle}>Quên mật khẩu ?</Text>
</TouchableOpacity>
......
src/Screens/Authen/NewPassWord.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
TextInput,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
const NewPassword = (props) => {
const [password, setPassword] = useState('');
const [cfPassword, setcfPassword] = useState('');
return (
<View style={{flex: 1}}>
<HeaderBack title={'Thay đổi mật khẩu mới'} />
<View style={styles.container}>
<View style={styles.wrap}>
<View style={styles.containerCode1}>
<Text style={styles.txtTitle}>Vui lòng nhập mật khẩu mới</Text>
<TextInput
style={styles.txtInput}
placeholder="Nhập Email hoặc số điện thoại"
value={password}
secureTextEntry={true}
onChangeText={(val) => setPassword(val)}
/>
</View>
<View style={styles.containerCode2}>
<Text style={styles.txtTitle}>Nhập lại mật khẩu</Text>
<TextInput
style={styles.txtInput}
placeholder="Nhập Email hoặc số điện thoại"
value={cfPassword}
secureTextEntry={true}
onChangeText={(val) => setcfPassword(val)}
/>
</View>
</View>
</View>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => console.log('Hello')}
style={styles.btn}>
<Text style={styles.txtBtn}>Cập nhật</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 10,
paddingHorizontal: 10,
},
footer: {
height: 200,
justifyContent: 'center',
alignItems: 'center',
},
wrap: {
flex: 1,
paddingTop: 10,
alignItems: 'center',
width: '100%',
},
containerCode1: {
height: 50,
width: '100%',
marginTop: 10,
},
containerCode2: {
height: 50,
width: '100%',
marginTop: 30,
},
codeFieldRoot: {
marginTop: 20,
},
txtTitle: {
fontSize: getFontXD(48),
color: '#141414',
marginBottom: 12,
},
txtInput: {
height: HEIGHTXD(99),
borderBottomWidth: 2,
borderBottomColor: '#DBEBFF',
fontSize: getFontXD(46),
paddingVertical: 2,
color: 'black',
},
btn: {
width: WIDTHXD(550),
height: HEIGHTXD(120),
borderRadius: 22,
backgroundColor: '#1C6AF6',
justifyContent: 'center',
alignItems: 'center',
},
txtBtn: {
color: R.colors.white,
fontSize: getFontXD(52),
textTransform: 'uppercase',
},
txtSend: {
marginTop: 30,
fontSize: getFontXD(42),
color: '#1C6AF6',
},
});
export default NewPassword;
src/Screens/Menu/Profile/Profile.js 0 → 100644
import React from 'react';
import ProfileView from './ProfileView';
const Profile = (props) => {
return <ProfileView />;
};
export default Profile;
src/Screens/Menu/Profile/ProfileView.js 0 → 100644
import React from 'react';
import {
View,
Text,
KeyboardAvoidingView,
ScrollView,
Platform,
} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import GeneralInfor from './Tab/GeneralInfor';
import CQG from './Tab/CQG';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {getFontXD} from '../../../Config/Functions';
const Tab = createMaterialTopTabNavigator();
const ProfileView = (props) => {
return (
<KeyboardAvoidingView
behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
style={{flex: 1}}
keyboardVerticalOffset={-50}>
<ScrollView style={{flex: 1}} showsVerticalScrollIndicator={false}>
<View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'Thông tin cá nhân'} />
<View>
<Tab.Navigator
initialRouteName="GeneralInfor"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
}}>
<Tab.Screen
name="GeneralInfor"
component={GeneralInfor}
options={{tabBarLabel: 'Thông tin chung'}}
/>
<Tab.Screen
name="CQG"
component={CQG}
options={{tabBarLabel: 'Tài khoản CQG'}}
/>
</Tab.Navigator>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
);
};
export default ProfileView;
src/Screens/Menu/Profile/Tab/CQG.js 0 → 100644
import React from 'react';
import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
import R from '../../../../assets/R';
import {getFontXD} from '../../../../Config/Functions';
const Profile = (props) => {
return (
<View style={styles.container}>
<View style={styles.item}>
<Text style={styles.txtTitle}>Mã hợp đồng</Text>
<Text style={styles.txtBig}>Network & internet</Text>
</View>
<View style={styles.item}>
<Text style={styles.txtTitle}>Tên tài khoản giao dịch</Text>
<Text style={styles.txtBig}>Network & internet</Text>
</View>
<View style={styles.item}>
<Text style={styles.txtTitle}>Số tài khoản giao dịch</Text>
<Text style={styles.txtBig}>0202020202</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 10,
},
item: {
paddingBottom: 15,
borderBottomWidth: 1,
borderBottomColor: '#DBDBDB',
marginTop: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
paddingTop: 5,
},
txtBig: {
fontSize: getFontXD(46),
},
});
export default Profile;
src/Screens/Menu/Profile/Tab/GeneralInfor.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
Touchable,
TouchableOpacityBase,
Dimensions,
} from 'react-native';
import R from '../../../../assets/R';
const dataTest = [
{
value: '1',
name: '2020',
},
{
value: '2',
name: '2021',
},
];
const {width} = Dimensions.get('window');
import TextField from '../../../../components/Input/TextField';
import PickerItem from '../../../../components/Picker/PickerItem';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../../../Config/Functions';
import Icon from 'react-native-vector-icons/Ionicons';
const GeneralInfor = (props) => {
const [Select, setSelect] = useState('ABC');
const [bank, setBank] = useState();
return (
<View style={styles.container}>
<TextField title={'Họ và tên'} onChangeText={(val) => console.log(val)} />
<TextField
title={'Điện thoại'}
onChangeText={(val) => console.log(val)}
/>
<TextField title={'Email'} onChangeText={(val) => console.log(val)} />
{/*
<TextInput
style={styles.customTxt}
onChangeText={(val) => console.log(val)}
placeholder="0000"
/> */}
<View style={styles.status}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<View style={styles.customAdd}>
<Text style={{fontSize: getFontXD(42), color: '#929292'}}>+</Text>
</View>
<Text style={styles.txtTitle}>Trạng thái</Text>
</View>
<Text style={{color: '#4FCD8D', fontSize: getFontXD(42)}}>
Đã xác minh
</Text>
</View>
<View
style={{
borderTopWidth: 1,
borderTopColor: '#DBDBDB',
marginTop: 20,
paddingTop: 10,
}}>
<TextField
title={'Số tài khoản ngân hàng'}
onChangeText={(val) => console.log(val)}
placeHolder="Nhập số tài khoản ngân hàng"
/>
<Text style={styles.txtTitle}>Tên ngân hàng</Text>
<PickerItem
width={width - 20}
data={dataTest}
onValueChange={(value, items) => {
setBank(items);
}}
/>
</View>
<View style={styles.footer}>
<TouchableOpacity
onPress={() => console.log('Hello')}
style={styles.btn}>
<Text style={styles.txtBtn}>Cập nhật</Text>
</TouchableOpacity>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: 10,
paddingVertical: 10,
},
customTxt: {
height: HEIGHTXD(110),
color: 'black',
borderRadius: 7,
borderWidth: 0.7,
borderColor: '#DBDBDB',
fontSize: getFontXD(42),
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: 'white',
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
marginTop: 50,
marginBottom: 20,
},
status: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
alignItems: 'center',
},
footer: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 30,
},
btn: {
width: WIDTHXD(521),
height: HEIGHTXD(120),
borderRadius: 15,
backgroundColor: '#1C6AF6',
justifyContent: 'center',
alignItems: 'center',
},
txtBtn: {
color: R.colors.white,
fontSize: getFontXD(52),
textTransform: 'uppercase',
},
customAdd: {
borderWidth: 1,
borderColor: '#929292',
paddingHorizontal: 5,
borderRadius: 5,
marginRight: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.color777,
marginBottom: 5,
paddingTop: 5,
},
});
export default GeneralInfor;
src/Screens/Menu/UserInfor/UserInfor.js deleted 100644 → 0
import React from 'react';
import {View, Text} from 'react-native';
const UserInfor = (props) => {
return (
<View>
<Text>UserInfor screen</Text>
</View>
);
};
export default UserInfor;
src/components/Picker/PickerItem.js
......@@ -234,16 +234,28 @@ const styles = StyleSheet.create({
},
pickerStyle: {
width: WIDTHXD(960),
height: HEIGHTXD(99),
height: HEIGHTXD(109),
flexDirection: 'row',
paddingHorizontal: WIDTHXD(30),
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'center',
borderWidth: 0.3,
borderColor: R.colors.iconGray,
borderRadius: WIDTHXD(20),
backgroundColor: 'white',
// marginTop: HEIGHTXD(10)
marginTop: 5,
borderRadius: 7,
borderWidth: 0.7,
borderColor: '#DBDBDB',
fontSize: getFontXD(42),
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: 'white',
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
});
src/routers/ScreenNames.js
......@@ -30,6 +30,9 @@ export const ROSE = 'ROSE';
export const BONUSTEAM = 'BONUSTEAM';
export const MYGROUP = 'MYGROUP';
//
export const PROFILE = 'PROFILE';
export const DEPOSIT = 'DEPOSIT';
export const TRANSFER = 'TRANSFER';
export const HISTORY = 'HISTORY';
......@@ -37,3 +40,7 @@ export const HISTORY = 'HISTORY';
export const CONFIRMOTP = 'CONFIRMOTP';
export const CHOOSEMETHOD = 'CHOOSEMETHOD';
export const NEWPASSWORD = 'NEWPASSWORD';
export const CONFIRMEMAIL = 'CONFIRMEMAIL';
src/routers/StackNavigation.js
......@@ -16,7 +16,7 @@ import BonusTeam from '../Screens/Menu/BonusTeam/BonusTeam';
import MyGroup from '../Screens/Menu/MyGroup/MyGroup';
import Payments from '../Screens/Menu/Payments/Payments';
import Rose from '../Screens/Menu/Rose/Rose';
import UserInfor from '../Screens/Menu/UserInfor/UserInfor';
import Profile from '../Screens/Menu/Profile/Profile';
import Withdraw from '../Screens/Action/Withdraw/Withdraw';
import Transfer from '../Screens/Action/Transfer/Transfer';
......@@ -27,6 +27,9 @@ import ForgotPassWord from '../Screens/Authen/ForgotPassword';
import ConfirmOTP from '../Screens/Authen/ConfirmOTP';
import ChooseMethod from '../Screens/Action/Deposit/ChooseMethod';
import NewPassWord from '../Screens/Authen/NewPassWord';
import ConfirmEmail from '../Screens/Authen/ConfirmEmail';
import * as ScreenName from './ScreenNames';
const Stack = createStackNavigator();
......@@ -59,13 +62,17 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.MYGROUP} component={MyGroup} />
<Stack.Screen name={ScreenName.PAYMENTS} component={Payments} />
<Stack.Screen name={ScreenName.ROSE} component={Rose} />
<Stack.Screen name={ScreenName.USERINFOR} component={UserInfor} />
<Stack.Screen name={ScreenName.SETTING} component={Setting} />
<Stack.Screen name={ScreenName.PROFILE} component={Profile} />
<Stack.Screen name={ScreenName.WITHDRAW} component={Withdraw} />
<Stack.Screen name={ScreenName.DEPOSIT} component={Deposit} />
<Stack.Screen name={ScreenName.TRANSFER} component={Transfer} />
<Stack.Screen name={ScreenName.HISTORY} component={History} />
<Stack.Screen name={ScreenName.CONFIRMEMAIL} component={ConfirmEmail} />
<Stack.Screen name={ScreenName.NEWPASSWORD} component={NewPassWord} />
<Stack.Screen
name={ScreenName.FORGOTPASSWORD}
component={ForgotPassWord}
......
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