402 lines
11 KiB
React
402 lines
11 KiB
React
|
import {
|
||
|
|
faArrowLeft,
|
||
|
|
faEye,
|
||
|
|
faEyeSlash,
|
||
|
|
} from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
||
|
|
import { useNavigation } from "@react-navigation/native";
|
||
|
|
import React, { useEffect, useState } from "react";
|
||
|
|
import {
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from "react-native";
|
||
|
|
import {
|
||
|
|
get_user_token,
|
||
|
|
register_user,
|
||
|
|
user_login,
|
||
|
|
} from "../../services/api/controllers/auth";
|
||
|
|
import {
|
||
|
|
create_customer,
|
||
|
|
get_customer_login_id,
|
||
|
|
search_customer,
|
||
|
|
} from "../../services/api/controllers/customers";
|
||
|
|
import OTPAuth from "./OTP";
|
||
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||
|
|
import { useToast } from "react-native-toast-notifications";
|
||
|
|
// import CryptoJS from 'crypto-js'
|
||
|
|
// import crypto from 'react-native-crypto';
|
||
|
|
|
||
|
|
const Login = () => {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const [status, setstatus] = useState("register");
|
||
|
|
const [email, setemail] = useState("");
|
||
|
|
const [error, seterror] = useState("");
|
||
|
|
const [uid, setuid] = useState("");
|
||
|
|
const toast = useToast();
|
||
|
|
|
||
|
|
const [token, settoken] = useState("");
|
||
|
|
const [tokenHere, settokenHere] = useState("");
|
||
|
|
const [loading, setloading] = useState("");
|
||
|
|
const [loggedIn, setloggedIn] = useState(false);
|
||
|
|
const [seePassword, setSeePassword] = useState(false);
|
||
|
|
|
||
|
|
const [emailDupe, setemailDupe] = useState(false);
|
||
|
|
|
||
|
|
const [password, setpassword] = useState("");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
/* ---------------Check for the user saved email--------------- */
|
||
|
|
|
||
|
|
AsyncStorage.getItem("AccessToken")
|
||
|
|
.then((pass) => {
|
||
|
|
console.log(pass);
|
||
|
|
pass !== null ? navigation.navigate("Home") : null;
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log(error + "weeewwww");
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
const handleLogin = (e) => {
|
||
|
|
/* ---------------Login Function --------------- */
|
||
|
|
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);
|
||
|
|
AsyncStorage.setItem("AccessToken", result.data.token);
|
||
|
|
AsyncStorage.setItem("email", email.replace(/\s/g, "").toLowerCase());
|
||
|
|
AsyncStorage.setItem("something", password);
|
||
|
|
get_user_token({
|
||
|
|
token: result.data.token,
|
||
|
|
})
|
||
|
|
.then((results) => {
|
||
|
|
if (results.status == 200) {
|
||
|
|
setuid(results.data.profile.userId);
|
||
|
|
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)
|
||
|
|
);
|
||
|
|
navigation.navigate("Home", { userLoggedin: true });
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
} 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 " + result.data.token);
|
||
|
|
} else {
|
||
|
|
seterror(result.message);
|
||
|
|
toast.show("Invalid Credentials!", {
|
||
|
|
type: "danger",
|
||
|
|
placement: "top",
|
||
|
|
duration: 4000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
console.log("login error" + result);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
seterror(err);
|
||
|
|
console.log(err);
|
||
|
|
console.log(err + "failed to login");
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const handleChange = (e) => {
|
||
|
|
search_customer({
|
||
|
|
searchData: e,
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
if (result.data?.results.length < 1) {
|
||
|
|
setemailDupe(false);
|
||
|
|
} else {
|
||
|
|
setemail(e);
|
||
|
|
setemailDupe(true);
|
||
|
|
console.log(result.data?.results.length + " " + emailDupe);
|
||
|
|
}
|
||
|
|
// console.log("length on search " + result.data?.results.length);
|
||
|
|
|
||
|
|
setloading(false);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
{/* <View style={styles.header}> */}
|
||
|
|
{/* <TouchableOpacity
|
||
|
|
onPress={() => navigation.navigate("Home")}
|
||
|
|
style={styles.backIcon}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
||
|
|
</TouchableOpacity> */}
|
||
|
|
{/* <Text style={styles.headerText}>Login</Text>
|
||
|
|
</View> */}
|
||
|
|
|
||
|
|
<View style={styles.wrapper}>
|
||
|
|
{status === "register" ? (
|
||
|
|
<View>
|
||
|
|
<View style={styles.wrap}>
|
||
|
|
<View style={styles.wrapTop}>
|
||
|
|
<Text style={styles.wrapTopHeader}>Login</Text>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddle}>
|
||
|
|
<View style={styles.wrapMiddleForm}>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>
|
||
|
|
Email Address{" "}
|
||
|
|
{!emailDupe && email !== "" ? (
|
||
|
|
<Text style={{ color: "red" }}>
|
||
|
|
Email does not exist
|
||
|
|
</Text>
|
||
|
|
) : (
|
||
|
|
""
|
||
|
|
)}
|
||
|
|
</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
handleChange(e);
|
||
|
|
}}
|
||
|
|
// value={email}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Password:</Text>
|
||
|
|
<View style={styles.input2}>
|
||
|
|
<TextInput
|
||
|
|
style={styles.inputPass}
|
||
|
|
placeholderTextColor="#003f5c"
|
||
|
|
secureTextEntry={!seePassword}
|
||
|
|
autoCapitalize="none"
|
||
|
|
value={password}
|
||
|
|
onChangeText={(text) => setpassword(text)}
|
||
|
|
/>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={{ color: "green", right: 10 }}
|
||
|
|
onPress={() => setSeePassword(!seePassword)}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={seePassword ? faEye : faEyeSlash}
|
||
|
|
size={18}
|
||
|
|
color="#003f5c"
|
||
|
|
/>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
{/* {error ? <Text>{error}</Text> : null} */}
|
||
|
|
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.btnReg}
|
||
|
|
// disabled={emailDupe ? false : true}
|
||
|
|
onPress={() => {
|
||
|
|
navigation.navigate("ForgotPassword");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={styles.btnTextReg}>Forgot Password?</Text>
|
||
|
|
{/* <Text style={styles.btnTextReg}>Register here</Text> */}
|
||
|
|
</TouchableOpacity>
|
||
|
|
<View style={styles.wrapBottom}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.btn}
|
||
|
|
// disabled={emailDupe ? false : true}
|
||
|
|
onPress={() => {
|
||
|
|
handleLogin();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={styles.btnText}>Login</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.btnReg}
|
||
|
|
// disabled={emailDupe ? false : true}
|
||
|
|
onPress={() => {
|
||
|
|
navigation.navigate("Register");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Text style={styles.btnTextReg}>No account yet?</Text>
|
||
|
|
<Text style={styles.btnTextReg}>Register here</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
) : null}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
backgroundColor: "#ffff",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
},
|
||
|
|
wrapper: {
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
alignItems: "center",
|
||
|
|
width: "100%",
|
||
|
|
top: 0,
|
||
|
|
paddingLeft: 15,
|
||
|
|
flexDirection: "row",
|
||
|
|
borderColor: "#ddd",
|
||
|
|
paddingBottom: 15,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
},
|
||
|
|
headerText: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: "600",
|
||
|
|
marginLeft: 25,
|
||
|
|
},
|
||
|
|
wrap: {
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
bottom: 0,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 25,
|
||
|
|
},
|
||
|
|
|
||
|
|
wrapTop: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
height: 130,
|
||
|
|
// backgroundColor:'#ffaa00',
|
||
|
|
marginVertical: 15,
|
||
|
|
},
|
||
|
|
wrapTopHeader: {
|
||
|
|
fontSize: 25,
|
||
|
|
fontWeight: "600",
|
||
|
|
color: "#ffaa00",
|
||
|
|
},
|
||
|
|
wrapMiddle: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
width: "100%",
|
||
|
|
},
|
||
|
|
wrapBottom: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
wrapMiddleForm: {},
|
||
|
|
wrapMiddleFormInput: {
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
height: 50,
|
||
|
|
width: 300,
|
||
|
|
margin: 12,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 10,
|
||
|
|
},
|
||
|
|
input2: {
|
||
|
|
height: 50,
|
||
|
|
width: 300,
|
||
|
|
margin: 12,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 10,
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
inputPass: {
|
||
|
|
height: 50,
|
||
|
|
width: 250,
|
||
|
|
// margin: 12,
|
||
|
|
// borderWidth: 1,
|
||
|
|
// padding: 10,
|
||
|
|
// borderColor: "#bebebe",
|
||
|
|
// borderRadius: 10,
|
||
|
|
},
|
||
|
|
inputText: {
|
||
|
|
marginLeft: 15,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
btn: {
|
||
|
|
backgroundColor: "#ffaa00",
|
||
|
|
paddingVertical: 15,
|
||
|
|
paddingHorizontal: 55,
|
||
|
|
marginTop: 30,
|
||
|
|
},
|
||
|
|
btnText: {
|
||
|
|
color: "#fff",
|
||
|
|
fontWeight: "600",
|
||
|
|
letterSpacing: 1,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
btnReg: {
|
||
|
|
// backgroundColor: "#333",
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignContent: "center",
|
||
|
|
paddingVertical: 15,
|
||
|
|
paddingHorizontal: 55,
|
||
|
|
marginTop: 30,
|
||
|
|
},
|
||
|
|
btnTextReg: {
|
||
|
|
color: "#ffaa00",
|
||
|
|
textAlign: "center",
|
||
|
|
fontWeight: "600",
|
||
|
|
letterSpacing: 1,
|
||
|
|
fontSize: 16,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default Login;
|