79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
|
import { ScrollView, Text, View, Image , } from "react-native";
|
|||
|
|
import tw from "twrnc";
|
|||
|
|
import InputField from "@/components/InputField";
|
|||
|
|
import { images,icons } from "@/constants";
|
|||
|
|
import { useCallback, useState } from "react";
|
|||
|
|
import CustomButton from "@/components/CustomButton";
|
|||
|
|
import { Link ,useRouter } from "expo-router";
|
|||
|
|
import OAuth from "@/components/OAuth";
|
|||
|
|
import { useSignIn } from "@clerk/clerk-expo";
|
|||
|
|
const SignIn = () => {
|
|||
|
|
const { signIn, setActive, isLoaded } = useSignIn();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const [form,setForm]= useState({
|
|||
|
|
email:"",
|
|||
|
|
password:"",
|
|||
|
|
});
|
|||
|
|
const onSignInPress =useCallback( async () => {
|
|||
|
|
if (!isLoaded) {
|
|||
|
|
console.log("Clerk is not loaded yet.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
console.log("signIn object:", signIn);
|
|||
|
|
try {
|
|||
|
|
const signInAttempt = await signIn.create({
|
|||
|
|
identifier: form.email,
|
|||
|
|
password :form.password ,
|
|||
|
|
})
|
|||
|
|
if (signInAttempt.status === "complete") {
|
|||
|
|
await setActive({ session: signInAttempt.createdSessionId })
|
|||
|
|
console.log("Successfully signed in! Navigating to home...");
|
|||
|
|
router.push("/(root)/(tabs)/home")
|
|||
|
|
} else {
|
|||
|
|
console.error(JSON.stringify(signInAttempt, null, 2))
|
|||
|
|
}
|
|||
|
|
} catch (err:any) {
|
|||
|
|
console.error("Sign-in attempt did not complete:", JSON.stringify(err, null, 2))
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
[isLoaded,form.email,form.password]
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
<ScrollView style={tw`"flex-1 bg-white `}>
|
|||
|
|
<View style={tw`flex-1 bg-white`}>
|
|||
|
|
<View style={tw`relative w-full h-[250px]`}>
|
|||
|
|
<Image
|
|||
|
|
source={images.signUpCar}
|
|||
|
|
style={tw`z-0 w-full h-[250px]`}
|
|||
|
|
/>
|
|||
|
|
<Text style={tw`text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5`}>Welcome☺️</Text>
|
|||
|
|
</View>
|
|||
|
|
<View style={tw`p-5`}>
|
|||
|
|
<InputField
|
|||
|
|
label="Email"
|
|||
|
|
placeholder="Enter your Email"
|
|||
|
|
icon={icons.email}
|
|||
|
|
value={form.email}
|
|||
|
|
onChangeText={(value)=>setForm({... form, email:value})}
|
|||
|
|
/>
|
|||
|
|
<InputField
|
|||
|
|
label="Password"
|
|||
|
|
placeholder="Enter your Password"
|
|||
|
|
icon={icons.lock}
|
|||
|
|
secureTextEntry={true}
|
|||
|
|
value={form.password}
|
|||
|
|
onChangeText={(value)=>setForm({... form, password:value})}
|
|||
|
|
/>
|
|||
|
|
<CustomButton title="Sign In" onPress={onSignInPress} style={tw`mt-10`} />
|
|||
|
|
<OAuth />
|
|||
|
|
<Link href="/sign-up" style={tw`text-lg text-center text-general-200 mt-10`}>
|
|||
|
|
<Text style={tw.style("text-black")}>Don't Have an Account? </Text>
|
|||
|
|
<Text style={tw.style("text-primary-500")}>Sign Up</Text>
|
|||
|
|
</Link>
|
|||
|
|
{ /* Verification Modal */ }
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
</ScrollView>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
export default SignIn;
|