162 lines
4.1 KiB
TypeScript
162 lines
4.1 KiB
TypeScript
import { useSignUp } from "@clerk/clerk-expo";
|
|
import { Link } from "expo-router";
|
|
import { useState } from "react";
|
|
import { Image, ScrollView, Text, View } from "react-native";
|
|
|
|
import { CustomButton } from "@/components/custom-button";
|
|
import { InputField } from "@/components/input-field";
|
|
import { OAuth } from "@/components/oauth";
|
|
import { icons, images } from "@/constants";
|
|
|
|
const SignUp = () => {
|
|
const { isLoaded, signUp, setActive } = useSignUp();
|
|
|
|
const [form, setForm] = useState({
|
|
name: "",
|
|
email: "",
|
|
password: "",
|
|
});
|
|
|
|
const [verification, setVerification] = useState({
|
|
state: "default",
|
|
error: "",
|
|
code: "",
|
|
});
|
|
|
|
const onSignUpPress = async () => {
|
|
if (!isLoaded) return;
|
|
|
|
try {
|
|
await signUp.create({
|
|
emailAddress: form.email,
|
|
password: form.password,
|
|
firstName: form.name,
|
|
});
|
|
|
|
await signUp.prepareEmailAddressVerification({ strategy: "email_code" });
|
|
|
|
setVerification((prevVerification) => ({
|
|
...prevVerification,
|
|
state: "pending",
|
|
}));
|
|
} catch (err: any) {
|
|
console.error(JSON.stringify(err, null, 2));
|
|
}
|
|
};
|
|
|
|
const onPressVerify = async () => {
|
|
if (!isLoaded) return;
|
|
|
|
try {
|
|
const completeSignUp = await signUp.attemptEmailAddressVerification({
|
|
code: verification.code,
|
|
});
|
|
|
|
if (completeSignUp.status === "complete") {
|
|
// TODO: Create a database user
|
|
|
|
await setActive({ session: completeSignUp.createdSessionId });
|
|
setVerification((prevVerification) => ({
|
|
...prevVerification,
|
|
state: "success",
|
|
}));
|
|
} else {
|
|
setVerification((prevVerification) => ({
|
|
...prevVerification,
|
|
error: "Verification failed.",
|
|
state: "failed",
|
|
}));
|
|
console.error(JSON.stringify(completeSignUp, null, 2));
|
|
}
|
|
} catch (err: any) {
|
|
console.error(JSON.stringify(err, null, 2));
|
|
setVerification((prevVerification) => ({
|
|
...prevVerification,
|
|
error: err?.errors[0]?.longMessage,
|
|
state: "failed",
|
|
}));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScrollView className="flex-1 bg-white">
|
|
<View className="flex-1 bg-white">
|
|
<View className="relative w-full h-[250px]">
|
|
<Image
|
|
source={images.signUpCar}
|
|
alt="Car"
|
|
className="z-0 w-full h-[250px]"
|
|
resizeMode="contain"
|
|
/>
|
|
|
|
<Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
|
|
Create Your Account
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="p-5">
|
|
<InputField
|
|
label="Name"
|
|
placeholder="Enter your name"
|
|
icon={icons.person}
|
|
value={form.name}
|
|
onChangeText={(value) =>
|
|
setForm((prevForm) => ({
|
|
...prevForm,
|
|
name: value,
|
|
}))
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
label="Email"
|
|
placeholder="Enter your email"
|
|
icon={icons.email}
|
|
value={form.email}
|
|
onChangeText={(value) =>
|
|
setForm((prevForm) => ({
|
|
...prevForm,
|
|
email: value,
|
|
}))
|
|
}
|
|
/>
|
|
|
|
<InputField
|
|
label="Password"
|
|
placeholder="Enter your password"
|
|
icon={icons.lock}
|
|
secureTextEntry
|
|
value={form.password}
|
|
onChangeText={(value) =>
|
|
setForm((prevForm) => ({
|
|
...prevForm,
|
|
password: value,
|
|
}))
|
|
}
|
|
/>
|
|
|
|
<CustomButton
|
|
title="Sign Up"
|
|
onPress={onSignUpPress}
|
|
className="mt-6"
|
|
/>
|
|
|
|
<OAuth title="Sign up with Google" />
|
|
|
|
<Link
|
|
href="/sign-in"
|
|
className="text-lg text-center text-general-200 mt-10"
|
|
>
|
|
<Text>Already have an account? </Text>
|
|
<Text className="text-primary-500">Sign in</Text>
|
|
</Link>
|
|
</View>
|
|
|
|
{/* Verification Modal */}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
export default SignUp;
|