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