478 lines
13 KiB
JavaScript
478 lines
13 KiB
JavaScript
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import {
|
|
TextInput,
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import {
|
|
get_user_token,
|
|
register_user,
|
|
user_login,
|
|
} from "../../services/api/controllers/auth";
|
|
import { get_customer_login_id } from "../../services/api/controllers/customers";
|
|
import { update_order_item_by_reference_number } from "../../services/api/controllers/order";
|
|
import { create_transaction } from "../../services/obananapayApi/transaction_api";
|
|
import { update_payment } from "../../services/obananapayGatewayApi/controllers/payment_api";
|
|
|
|
const OTPAuth = ({
|
|
setotpCheck,
|
|
otp,
|
|
setstatus,
|
|
setsuccess,
|
|
setloading,
|
|
email,
|
|
password,
|
|
settoken,
|
|
setuid,
|
|
}) => {
|
|
const et1 = useRef();
|
|
const et2 = useRef();
|
|
const et3 = useRef();
|
|
const et4 = useRef();
|
|
const et5 = useRef();
|
|
const et6 = useRef();
|
|
const [f1, setF1] = useState("");
|
|
const [f2, setF2] = useState("");
|
|
const [f3, setF3] = useState("");
|
|
const [f4, setF4] = useState("");
|
|
const [f5, setF5] = useState("");
|
|
const [f6, setF6] = useState("");
|
|
const [errorOTP, seterrorOTP] = useState(false);
|
|
const [count, setCount] = useState(20);
|
|
const [error, seterror] = useState("");
|
|
const [tokenHere, settokenHere] = useState("");
|
|
|
|
// console.log("token:" + token);
|
|
// console.log("uid:" + uid);
|
|
const navigation = useNavigation();
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
if (count == 0) {
|
|
clearInterval(interval);
|
|
} else {
|
|
setCount(count - 1);
|
|
}
|
|
}, 1000);
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, [count]);
|
|
/* ---------------check if the sent otp and the entered otp is the same--------------- */
|
|
|
|
const otpValidate = () => {
|
|
let enteredOtp = f1 + f2 + f3 + f4 + f5 + f6;
|
|
if (enteredOtp == otp) {
|
|
console.log(otp);
|
|
setotpCheck(true);
|
|
register_user({
|
|
username: email.replace(/\s/g, "").toLowerCase(),
|
|
password: password,
|
|
})
|
|
.then((result) => {
|
|
if (result.status == 201) {
|
|
// setuserEmail(result.data.user.email);
|
|
// settoken(result.data.token);
|
|
// setuid(result.data.user._id);
|
|
// send_email();
|
|
user_login({
|
|
username: email.replace(/\s/g, "").toLowerCase(),
|
|
password: password,
|
|
})
|
|
.then((result) => {
|
|
if (result.status == 200) {
|
|
// setuserEmail(result.data.user.email);
|
|
// settoken(result.data.token);
|
|
// setuid(result.data.user._id);
|
|
// send_email();
|
|
settoken(result.data.token);
|
|
settokenHere(result.data.token);
|
|
get_user_token({
|
|
token: result.data.token,
|
|
})
|
|
.then((results) => {
|
|
if (results.status == 200) {
|
|
AsyncStorage.setItem(
|
|
"userId",
|
|
results.data.profile.userId
|
|
);
|
|
|
|
get_customer_login_id({
|
|
id: results.data.profile.userId,
|
|
})
|
|
.then((result1) => {
|
|
console.log(result1.data);
|
|
|
|
if (result1.error) {
|
|
seterror(result1.error);
|
|
} else {
|
|
AsyncStorage.setItem(
|
|
"userData",
|
|
JSON.stringify(result1.data)
|
|
);
|
|
setuid(results.data.profile.userId);
|
|
setstatus("customerCreate");
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
|
|
// setauth(true);
|
|
} else {
|
|
seterror(results.message);
|
|
console.log("login error" + results);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
seterror(err);
|
|
console.log(err);
|
|
console.log(err + "failed to login");
|
|
});
|
|
// setauth(true);
|
|
console.log("login success");
|
|
} else {
|
|
seterror(result.message);
|
|
console.log("login error" + result);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
seterror(err);
|
|
console.log(err);
|
|
console.log(err + "failed to login");
|
|
});
|
|
// setauth(true);
|
|
console.log("login success");
|
|
} else {
|
|
seterror(result.message);
|
|
console.log("login error" + result);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
seterror(err);
|
|
console.log(err);
|
|
console.log(err + "failed to login");
|
|
});
|
|
} else {
|
|
setotpError(true);
|
|
}
|
|
};
|
|
const phoneOTP = () => {
|
|
if (email) {
|
|
const min = 100000; // Minimum 6-digit number
|
|
const max = 999999; // Maximum 6-digit number
|
|
const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
// const email2 = "kramblooda@gmail.com";
|
|
|
|
send_email_api({
|
|
email: email.replace(/\s/g, "").toLowerCase(),
|
|
html: `<p>your OTP code to continue your obanana pay transaction is ${randomNumber} </p>`,
|
|
})
|
|
.then((result) => {
|
|
setotp(randomNumber);
|
|
if (result.status == 200) {
|
|
} else {
|
|
seterror(result.message);
|
|
}
|
|
|
|
console.log(result);
|
|
})
|
|
.catch((err) => {
|
|
seterror(err);
|
|
|
|
console.error(err);
|
|
console.log(err + "failed to send email");
|
|
});
|
|
} else {
|
|
// setotpError(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.wrap}>
|
|
<Text style={styles.title1}>OTP Verification</Text>
|
|
<Text style={styles.title}>
|
|
Please enter the verification code we just sent on your email address .
|
|
</Text>
|
|
<View style={styles.otpView}>
|
|
<TextInput
|
|
ref={et1}
|
|
style={[
|
|
styles.inputView,
|
|
{ borderColor: f1.length >= 1 ? "green" : "#f57f17" },
|
|
]}
|
|
keyboardType="number-pad"
|
|
maxLength={1}
|
|
value={f1}
|
|
onChangeText={(txt) => {
|
|
setF1(txt);
|
|
if (txt.length >= 1) {
|
|
et2.current.focus();
|
|
}
|
|
}}
|
|
/>
|
|
<TextInput
|
|
ref={et2}
|
|
style={[
|
|
styles.inputView,
|
|
{ borderColor: f2.length >= 1 ? "green" : "#f57f17" },
|
|
]}
|
|
keyboardType="number-pad"
|
|
maxLength={1}
|
|
value={f2}
|
|
onChangeText={(txt) => {
|
|
setF2(txt);
|
|
if (txt.length >= 1) {
|
|
et3.current.focus();
|
|
} else if (txt.length < 1) {
|
|
et1.current.focus();
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<TextInput
|
|
ref={et3}
|
|
style={[
|
|
styles.inputView,
|
|
{ borderColor: f3.length >= 1 ? "green" : "#f57f17" },
|
|
]}
|
|
keyboardType="number-pad"
|
|
maxLength={1}
|
|
value={f3}
|
|
onChangeText={(txt) => {
|
|
setF3(txt);
|
|
if (txt.length >= 1) {
|
|
et4.current.focus();
|
|
} else if (txt.length < 1) {
|
|
et2.current.focus();
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<TextInput
|
|
ref={et4}
|
|
style={[
|
|
styles.inputView,
|
|
{ borderColor: f4.length >= 1 ? "green" : "#f57f17" },
|
|
]}
|
|
keyboardType="number-pad"
|
|
maxLength={1}
|
|
value={f4}
|
|
onChangeText={(txt) => {
|
|
setF4(txt);
|
|
if (txt.length >= 1) {
|
|
et5.current.focus();
|
|
} else if (txt.length < 1) {
|
|
et3.current.focus();
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<TextInput
|
|
ref={et5}
|
|
style={[
|
|
styles.inputView,
|
|
{ borderColor: f5.length >= 1 ? "green" : "#f57f17" },
|
|
]}
|
|
keyboardType="number-pad"
|
|
maxLength={1}
|
|
value={f5}
|
|
onChangeText={(txt) => {
|
|
setF5(txt);
|
|
if (txt.length >= 1) {
|
|
et6.current.focus();
|
|
} else if (txt.length < 1) {
|
|
et4.current.focus();
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<TextInput
|
|
ref={et6}
|
|
style={[
|
|
styles.inputView,
|
|
{ borderColor: f6.length >= 1 ? "green" : "#f57f17" },
|
|
]}
|
|
keyboardType="number-pad"
|
|
maxLength={1}
|
|
value={f6}
|
|
onChangeText={(txt) => {
|
|
setF6(txt);
|
|
if (txt.length >= 1) {
|
|
et6.current.focus();
|
|
} else if (txt.length < 1) {
|
|
et5.current.focus();
|
|
}
|
|
}}
|
|
/>
|
|
</View>
|
|
|
|
{errorOTP ? (
|
|
<View style={{ width: "100%", marginBottom: 10 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 20,
|
|
fontWeight: "500",
|
|
color: "#ed0000",
|
|
alignSelf: "center",
|
|
textAlign: "center",
|
|
paddingTop: 10,
|
|
paddingLeft: 10,
|
|
}}
|
|
>
|
|
Wrong OTP!!
|
|
</Text>
|
|
</View>
|
|
) : null}
|
|
<TouchableOpacity
|
|
disabled={
|
|
f1 !== "" &&
|
|
f2 !== "" &&
|
|
f3 !== "" &&
|
|
f4 !== "" &&
|
|
f5 !== "" &&
|
|
f6 !== ""
|
|
? false
|
|
: true
|
|
}
|
|
style={[
|
|
styles.verifyOtpBtn,
|
|
{
|
|
backgroundColor:
|
|
f1 !== "" &&
|
|
f2 !== "" &&
|
|
f3 !== "" &&
|
|
f4 !== "" &&
|
|
f5 !== "" &&
|
|
f6 !== ""
|
|
? "#4caf50"
|
|
: "orange",
|
|
},
|
|
]}
|
|
onPress={() => otpValidate()}
|
|
>
|
|
<Text style={styles.btntxt}>Next</Text>
|
|
</TouchableOpacity>
|
|
<View style={styles.resendView}>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
alignSelf: "flex-start",
|
|
fontWeight: "700",
|
|
color: count == 0 ? "orange" : "#7b7b7b",
|
|
}}
|
|
onPress={() => {
|
|
phoneOTP();
|
|
}}
|
|
>
|
|
Resend Code
|
|
</Text>
|
|
{count !== 0 && (
|
|
<Text style={{ marginLeft: 20, fontSize: 18 }}>
|
|
{count + " seconds"}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
height: "100%",
|
|
bottom: 0,
|
|
},
|
|
wrap: {
|
|
backgroundColor: "#fff",
|
|
height: "86%",
|
|
bottom: 0,
|
|
marginTop: 30,
|
|
// borderWidth: 2,
|
|
// borderColor: "#eeeeee",
|
|
borderRadius: 25,
|
|
padding: 10,
|
|
},
|
|
wrapTop: {
|
|
height: "4%",
|
|
bottom: 0,
|
|
},
|
|
wrapHeader: {
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
},
|
|
wrapHeaderText: {
|
|
fontWeight: "600",
|
|
letterSpacing: 1,
|
|
fontSize: 16,
|
|
color: "#2e2e2e",
|
|
},
|
|
title: {
|
|
fontSize: 15,
|
|
fontWeight: "500",
|
|
marginTop: 5,
|
|
marginLeft: 35,
|
|
alignSelf: "flex-start",
|
|
textAlign: "center",
|
|
width: "83%",
|
|
color: "#969696",
|
|
},
|
|
title1: {
|
|
fontSize: 25,
|
|
fontWeight: "700",
|
|
marginTop: 10,
|
|
marginLeft: 25,
|
|
alignSelf: "center",
|
|
textAlign: "center",
|
|
width: "83%",
|
|
color: "#525252",
|
|
},
|
|
otpView: {
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
marginTop: 50,
|
|
},
|
|
inputView: {
|
|
width: 50,
|
|
height: 50,
|
|
borderWidth: 0.5,
|
|
borderRadius: 15,
|
|
marginLeft: 10,
|
|
textAlign: "center",
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
},
|
|
verifyOtpBtn: {
|
|
width: "40%",
|
|
height: 45,
|
|
backgroundColor: "orange",
|
|
borderRadius: 15,
|
|
alignSelf: "center",
|
|
marginTop: 20,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
btntxt: {
|
|
color: "#fff",
|
|
fontSize: 20,
|
|
fontWeight: "700",
|
|
},
|
|
resendView: {
|
|
flexDirection: "row",
|
|
alignSelf: "center",
|
|
marginTop: 10,
|
|
marginBottom: 30,
|
|
fontWeight: "200",
|
|
},
|
|
});
|
|
export default OTPAuth;
|