update feature forgot password

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

+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

+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

+import React from 'react';
+
+import ProfileView from './ProfileView';
+
+const Profile = (props) => {
+  return <ProfileView />;
+};
+
+export default Profile;

src/Screens/Menu/Profile/ProfileView.js

+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

+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

+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

-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}