connect api fogot password

src/Screens/Authen/ConfirmEmail.js

@@ -5,32 +5,51 @@ import {
   TextInput,
   StyleSheet,
   TouchableOpacity,
+  Platform,
+  Alert,
 } from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
-
+import {connect} from 'react-redux';
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import {useNavigation} from '@react-navigation/native';
 import {CONFIRMOTP} from '../../routers/ScreenNames';
+import {getOTPApi} from '../../apis/Functions/users';
+import {showLoading, hideLoading} from '../../actions/loadingAction';
 
 const ConfirmEmail = (props) => {
   const [value, setValue] = useState('');
 
   const navigate = useNavigation();
 
+  const getOTP = async () => {
+    if (value) {
+      props.showLoading();
+      const res = await getOTPApi({
+        platform: Platform.OS,
+        otp_by: value,
+      });
+      props.hideLoading();
+      if (res.data.code == 200) {
+        navigate.navigate(CONFIRMOTP, {email: value});
+      } else {
+        Alert.alert(res.data.message);
+      }
+    } else {
+      Alert.alert('Vui lòng nhập email!');
+    }
+  };
+
   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>
+            <Text style={styles.txtTitle}>Vui lòng nhập email:</Text>
             <TextInput
               style={styles.txtInput}
-              placeholder="Nhập Email hoặc số điện thoại"
+              placeholder="Nhập email"
               value={value}
               onChangeText={(val) => setValue(val)}
             />
@@ -39,9 +58,7 @@ const ConfirmEmail = (props) => {
       </View>
 
       <View style={styles.footer}>
-        <TouchableOpacity
-          onPress={() => navigate.navigate(CONFIRMOTP)}
-          style={styles.btn}>
+        <TouchableOpacity onPress={getOTP} style={styles.btn}>
           <Text style={styles.txtBtn}>Lấy mã xác thực</Text>
         </TouchableOpacity>
         <TouchableOpacity onPress={() => navigate.goBack()}>
@@ -115,4 +132,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ConfirmEmail;
+const mapStateToProps = (state) => {
+  return {};
+};
+
+export default connect(mapStateToProps, {showLoading, hideLoading})(
+  ConfirmEmail,
+);

src/Screens/Authen/ConfirmOTP.js

@@ -5,6 +5,8 @@ import {
   TextInput,
   StyleSheet,
   TouchableOpacity,
+  Platform,
+  Alert,
 } from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
 
@@ -17,16 +19,19 @@ import {
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
 import {NEWPASSWORD} from '../../routers/ScreenNames';
-
+import {verifyOTPApi} from '../../apis/Functions/users';
 import {useNavigation} from '@react-navigation/native';
 
+import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {connect} from 'react-redux';
+
 const CELL_COUNT = 4;
 
 const ConfirmOTP = (propsa) => {
   const [value, setValue] = useState('');
 
   const navigate = useNavigation();
-  console.log('test');
+  console.log(propsa.route.params.email);
 
   const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
@@ -34,9 +39,35 @@ const ConfirmOTP = (propsa) => {
     setValue,
   });
 
+  const confirm = async () => {
+    if (!value) {
+      Alert.alert('Vui long nhập mã OTP');
+    } else if (value.length != 4) {
+      Alert.alert('Mã OTP không đúng định dạng');
+    } else {
+      propsa.showLoading();
+      const res = await verifyOTPApi({
+        platform: Platform.OS,
+        receiver_name: propsa.route.params.email,
+        otp: value,
+      });
+
+      propsa.hideLoading();
+
+      if (res.data.code == 200) {
+        navigate.navigate(NEWPASSWORD, {
+          otp: value,
+          email: propsa.route.params.email,
+        });
+      } else {
+        Alert(res.data.message);
+      }
+    }
+  };
+
   return (
     <View style={{flex: 1}}>
-      <HeaderBack title={'Quên mật khẩu'} />
+      <HeaderBack title={'Xác thưc OTP'} />
 
       <View style={styles.container}>
         <View style={{height: 20}} />
@@ -68,9 +99,7 @@ const ConfirmOTP = (propsa) => {
         </View>
       </View>
       <View style={styles.footer}>
-        <TouchableOpacity
-          onPress={() => navigate.navigate(NEWPASSWORD)}
-          style={styles.btn}>
+        <TouchableOpacity onPress={confirm} style={styles.btn}>
           <Text style={styles.txtBtn}>Tiếp tục</Text>
         </TouchableOpacity>
         <TouchableOpacity onPress={() => console.log('Hello')}>
@@ -155,4 +184,8 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ConfirmOTP;
+const mapStateToProps = (state) => {
+  return {};
+};
+
+export default connect(mapStateToProps, {showLoading, hideLoading})(ConfirmOTP);

src/Screens/Authen/Login.js

@@ -29,8 +29,8 @@ import {connect} from 'react-redux';
 const Login = (props) => {
   const {navigation} = props;
 
-  const [email, setEmail] = useState('Tdgiang@dcv.vn');
-  const [pass, setPass] = useState('123456');
+  const [email, setEmail] = useState('');
+  const [pass, setPass] = useState('');
 
   const navigate = useNavigation();
 
@@ -61,10 +61,10 @@ const Login = (props) => {
           routes: [{name: TABNAVIGATOR}],
         });
       } else {
-        Alert.alert('Thông báo!', res.data.message);
+        Alert.alert(res.data.message);
       }
     } else {
-      Alert.alert('Thông báo!', 'Vui lòng điền ' + titles[index]);
+      Alert.alert('Vui lòng điền ' + titles[index]);
     }
   };
 

src/Screens/Authen/NewPassWord.js

@@ -5,16 +5,54 @@ import {
   TextInput,
   StyleSheet,
   TouchableOpacity,
+  Alert,
+  Platform,
 } from 'react-native';
 import HeaderBack from '../../components/Header/HeaderBack';
+import {forgotPasswordApi} from '../../apis/Functions/users';
+import {useNavigation} from '@react-navigation/native';
 
 import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
 import R from '../../assets/R';
+import {AUTHEN} from '../../routers/ScreenNames';
+
+import {showLoading, hideLoading} from '../../actions/loadingAction';
+import {connect} from 'react-redux';
 
 const NewPassword = (props) => {
   const [password, setPassword] = useState('');
   const [cfPassword, setcfPassword] = useState('');
 
+  const navigate = useNavigation();
+  const {email, otp} = props.route.params;
+
+  const changePass = async () => {
+    if (!password || !cfPassword) {
+      Alert.alert('Vui lòng điền đầy đủ thông tin!');
+    } else {
+      props.showLoading();
+      const res = await forgotPasswordApi({
+        receiver_name: email,
+        otp,
+        password,
+        password_confirmation: cfPassword,
+        platform: Platform.OS,
+      });
+      props.hideLoading();
+
+      console.log(res.data);
+
+      if (res.data.code == 200) {
+        navigate.reset({
+          index: 1,
+          routes: [{name: AUTHEN}],
+        });
+      } else {
+        Alert.alert(res.data.message);
+      }
+    }
+  };
+
   return (
     <View style={{flex: 1}}>
       <HeaderBack title={'Thay đổi mật khẩu mới'} />
@@ -45,9 +83,7 @@ const NewPassword = (props) => {
       </View>
 
       <View style={styles.footer}>
-        <TouchableOpacity
-          onPress={() => console.log('Hello')}
-          style={styles.btn}>
+        <TouchableOpacity onPress={changePass} style={styles.btn}>
           <Text style={styles.txtBtn}>Cập nhật</Text>
         </TouchableOpacity>
       </View>
@@ -123,4 +159,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default NewPassword;
+const mapStateToProps = (state) => {
+  return {};
+};
+
+export default connect(mapStateToProps, {showLoading, hideLoading})(
+  NewPassword,
+);

src/Screens/Setting/SettingView.js

-import React from 'react';
-import {View, Text} from 'react-native';
+import React, {useState} from 'react';
+import {View, Text, Switch} from 'react-native';
+import HeaderBack from '../../components/Header/HeaderBack';
 
 const SettingView = (props) => {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);
+
   return (
-    <View>
-      <Text>SettingView screen</Text>
+    <View style={{flex: 1}}>
+      <HeaderBack title={'Cài đặt'} />
+      <View style={{flexDirection: 'row'}}></View>
+
+      <Switch
+        trackColor={{false: '#767577', true: '#1C6AF6'}}
+        // thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
+        ios_backgroundColor="#767577"
+        onValueChange={toggleSwitch}
+        value={isEnabled}
+      />
+      <Text>SettingView 1 screen</Text>
     </View>
   );
 };

src/apis/Functions/users.js

@@ -16,3 +16,18 @@ export const logoutApi = async (body) =>
   PostData('http://api.dcvinvest.com/api/auth/logout', body)
     .then((res) => res)
     .catch((err) => err);
+
+export const getOTPApi = async (body) =>
+  PostLogin(url.urlGetOTP, body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const verifyOTPApi = async (body) =>
+  PostLogin(url.urlVerifyOTP, body)
+    .then((res) => res)
+    .catch((err) => err);
+
+export const forgotPasswordApi = async (body) =>
+  PostLogin(url.urlForgotPassword, body)
+    .then((res) => res)
+    .catch((err) => err);

src/apis/url.js

 const root = 'http://api.dcvinvest.com/';
 export default {
-  urllogin: root + '/api/auth/customer-login',
+  urllogin: root + 'api/auth/customer-login',
   urlRegistor: root + 'api/auth/customer-register',
   urlGetListMethod: root + 'api/v1/payments/get-list-deposit-method',
+  urlGetOTP: root + 'api/auth/customer-get-otp',
+  urlVerifyOTP: root + 'api/auth/customer-verify-otp',
+  urlForgotPassword: root + 'api/auth/customer-forgot-password',
 };