Waseel: driver app, dispatch, POI suggestions, map fixes
This commit is contained in:
Krikorios
+51
-49
@@ -18,11 +18,13 @@ import { OAuth } from "@/components/oauth";
|
||||
import { OtpField } from "@/components/otp-field";
|
||||
import { icons, images } from "@/constants";
|
||||
import { ApiError, fetchAPI } from "@/lib/fetch";
|
||||
import { useT } from "@/lib/i18n";
|
||||
import { getRememberedEmail, rememberEmail, useSession } from "@/lib/session";
|
||||
|
||||
const SignIn = () => {
|
||||
const router = useRouter();
|
||||
const { setSession } = useSession();
|
||||
const t = useT();
|
||||
const [form, setForm] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
@@ -84,7 +86,7 @@ const SignIn = () => {
|
||||
|
||||
const onRequestReset = async () => {
|
||||
if (!reset.email.trim()) {
|
||||
setReset((prev) => ({ ...prev, error: "Enter your email address." }));
|
||||
setReset((prev) => ({ ...prev, error: t("auth.signIn.errEmail") }));
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -112,14 +114,14 @@ const SignIn = () => {
|
||||
|
||||
const onSubmitReset = async () => {
|
||||
if (!/^\d{6}$/.test(reset.code)) {
|
||||
setReset((prev) => ({ ...prev, error: "Enter the 6-digit code." }));
|
||||
setReset((prev) => ({ ...prev, error: t("auth.signIn.errCode") }));
|
||||
return;
|
||||
}
|
||||
|
||||
if (reset.password.length < 8) {
|
||||
setReset((prev) => ({
|
||||
...prev,
|
||||
error: "Password must be at least 8 characters.",
|
||||
error: t("auth.signIn.errPassword"),
|
||||
}));
|
||||
return;
|
||||
}
|
||||
@@ -148,7 +150,7 @@ const SignIn = () => {
|
||||
error:
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Could not reset your password. Please try again.",
|
||||
: t("auth.signIn.errReset"),
|
||||
}));
|
||||
}
|
||||
};
|
||||
@@ -160,8 +162,8 @@ const SignIn = () => {
|
||||
// otherwise surfaces as a generic "could not sign in".
|
||||
if (!form.email.trim() || !form.password) {
|
||||
Alert.alert(
|
||||
"Missing information",
|
||||
"Enter both your email and your password.",
|
||||
t("auth.signIn.alertMissingTitle"),
|
||||
t("auth.signIn.alertMissingBody"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -186,9 +188,9 @@ const SignIn = () => {
|
||||
const message =
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Could not sign in. Please try again.";
|
||||
: t("auth.signIn.alertErrorFallback");
|
||||
|
||||
Alert.alert("Error", message);
|
||||
Alert.alert(t("auth.signIn.alertErrorTitle"), message);
|
||||
|
||||
// Only a rejected password is worth retyping. Clearing it after a
|
||||
// network blip or a 403 just makes the next attempt fail differently.
|
||||
@@ -198,38 +200,38 @@ const SignIn = () => {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}, [busy, form.email, form.password, remember, setSession, router]);
|
||||
}, [busy, form.email, form.password, remember, setSession, router, t]);
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
className="flex-1 bg-white dark:bg-neutral-950"
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
|
||||
>
|
||||
<ScrollView
|
||||
className="flex-1 bg-white"
|
||||
className="flex-1 bg-white dark:bg-neutral-950"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View className="flex-1 bg-white">
|
||||
<View className="flex-1 bg-white dark:bg-neutral-950">
|
||||
<View className="relative w-full h-[250px]">
|
||||
<Image
|
||||
source={images.signUpCar}
|
||||
alt="Car"
|
||||
alt={t("auth.signIn.carAlt")}
|
||||
className="z-0 w-full h-[250px]"
|
||||
resizeMode="contain"
|
||||
/>
|
||||
|
||||
<Text className="text-2xl text-black font-JakartaSemiBold absolute bottom-5 left-5">
|
||||
Welcome 👋
|
||||
<Text className="text-2xl text-black dark:text-white font-JakartaSemiBold absolute bottom-5 left-5">
|
||||
{t("auth.signIn.welcome")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="p-5">
|
||||
<InputField
|
||||
label="Email"
|
||||
placeholder="karim@email.com"
|
||||
label={t("auth.signIn.email")}
|
||||
placeholder={t("auth.signIn.emailPlaceholder")}
|
||||
icon={icons.email}
|
||||
value={form.email}
|
||||
onChangeText={(value) =>
|
||||
@@ -244,8 +246,8 @@ const SignIn = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Password"
|
||||
placeholder="••••••••"
|
||||
label={t("auth.signIn.password")}
|
||||
placeholder={t("auth.signIn.passwordPlaceholder")}
|
||||
icon={icons.lock}
|
||||
secureTextEntry
|
||||
value={form.password}
|
||||
@@ -270,7 +272,7 @@ const SignIn = () => {
|
||||
className={`h-6 w-6 rounded-md items-center justify-center border-2 ${
|
||||
remember
|
||||
? "bg-primary-500 border-primary-500"
|
||||
: "bg-white border-neutral-300"
|
||||
: "bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-700"
|
||||
}`}
|
||||
>
|
||||
{remember ? (
|
||||
@@ -278,13 +280,13 @@ const SignIn = () => {
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<Text className="ml-3 font-JakartaMedium text-[15px] text-black">
|
||||
Keep me signed in
|
||||
<Text className="ml-3 font-JakartaMedium text-[15px] text-black dark:text-white">
|
||||
{t("auth.signIn.keepSignedIn")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<CustomButton
|
||||
title={busy ? "Signing in…" : "Sign In"}
|
||||
title={busy ? t("auth.signIn.signingIn") : t("auth.signIn.signInBtn")}
|
||||
onPress={onSignInPress}
|
||||
disabled={busy}
|
||||
className="mt-6"
|
||||
@@ -292,18 +294,18 @@ const SignIn = () => {
|
||||
|
||||
<TouchableOpacity onPress={openReset} className="mt-4">
|
||||
<Text className="text-primary-500 text-center font-JakartaMedium">
|
||||
Forgot password?
|
||||
{t("auth.signIn.forgotPassword")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<OAuth title="Sign in with Google" />
|
||||
<OAuth title={t("auth.signIn.signInGoogle")} />
|
||||
|
||||
<Link
|
||||
href="/sign-up"
|
||||
className="text-base text-center text-general-200 mt-10"
|
||||
className="text-base text-center text-general-200 dark:text-neutral-400 mt-10"
|
||||
>
|
||||
<Text>Don't have an account? </Text>
|
||||
<Text className="text-primary-500">Sign up</Text>
|
||||
<Text className="text-black dark:text-white">{t("auth.signIn.noAccount")}</Text>
|
||||
<Text className="text-primary-500">{t("auth.signIn.signUpLink")}</Text>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
@@ -311,18 +313,18 @@ const SignIn = () => {
|
||||
isVisible={reset.state === "request"}
|
||||
onBackdropPress={closeReset}
|
||||
>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[280px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2">
|
||||
Reset password
|
||||
<View className="bg-white dark:bg-neutral-900 px-7 py-9 rounded-2xl min-h-[280px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2 text-black dark:text-white">
|
||||
{t("auth.signIn.reset.title")}
|
||||
</Text>
|
||||
|
||||
<Text className="font-Jakarta mb-5">
|
||||
Enter your email and we'll send you a 6-digit reset code.
|
||||
<Text className="font-Jakarta mb-5 text-black dark:text-white">
|
||||
{t("auth.signIn.reset.requestBody")}
|
||||
</Text>
|
||||
|
||||
<InputField
|
||||
label="Email"
|
||||
placeholder="karim@email.com"
|
||||
label={t("auth.signIn.email")}
|
||||
placeholder={t("auth.signIn.reset.emailPlaceholder")}
|
||||
icon={icons.email}
|
||||
value={reset.email}
|
||||
keyboardType="email-address"
|
||||
@@ -338,7 +340,7 @@ const SignIn = () => {
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title={reset.busy ? "Sending…" : "Send Code"}
|
||||
title={reset.busy ? t("auth.signIn.reset.sending") : t("auth.signIn.reset.sendCode")}
|
||||
onPress={onRequestReset}
|
||||
disabled={reset.busy}
|
||||
className="mt-5"
|
||||
@@ -350,20 +352,20 @@ const SignIn = () => {
|
||||
isVisible={reset.state === "reset"}
|
||||
onBackdropPress={closeReset}
|
||||
>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2">
|
||||
Enter new password
|
||||
<View className="bg-white dark:bg-neutral-900 px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2 text-black dark:text-white">
|
||||
{t("auth.signIn.reset.newPassTitle")}
|
||||
</Text>
|
||||
|
||||
<Text className="font-Jakarta mb-5">
|
||||
We've sent a reset code to {reset.email}
|
||||
<Text className="font-Jakarta mb-5 text-black dark:text-white">
|
||||
{t("auth.signIn.reset.resetBody", { email: reset.email })}
|
||||
</Text>
|
||||
|
||||
{reset.devCode ? (
|
||||
<View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 font-Jakarta">
|
||||
Email delivery is not configured on this server. Your reset
|
||||
code is <Text className="font-JakartaBold">{reset.devCode}</Text>
|
||||
<View className="bg-amber-50 dark:bg-amber-950/40 border border-amber-300 dark:border-amber-800 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 dark:text-amber-400 font-Jakarta">
|
||||
{t("auth.signIn.reset.devBanner")}
|
||||
<Text className="font-JakartaBold">{reset.devCode}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
@@ -376,9 +378,9 @@ const SignIn = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="New password"
|
||||
label={t("auth.signIn.reset.newPassLabel")}
|
||||
icon={icons.lock}
|
||||
placeholder="••••••••"
|
||||
placeholder={t("auth.signIn.reset.newPasswordPlaceholder")}
|
||||
secureTextEntry
|
||||
value={reset.password}
|
||||
onChangeText={(password) =>
|
||||
@@ -393,7 +395,7 @@ const SignIn = () => {
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title={reset.busy ? "Resetting…" : "Reset Password"}
|
||||
title={reset.busy ? t("auth.signIn.reset.resetting") : t("auth.signIn.reset.resetBtn")}
|
||||
onPress={onSubmitReset}
|
||||
disabled={reset.busy}
|
||||
className="mt-5 bg-emerald-500"
|
||||
@@ -406,4 +408,4 @@ const SignIn = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SignIn;
|
||||
export default SignIn;
|
||||
+61
-58
@@ -18,18 +18,21 @@ import { OAuth } from "@/components/oauth";
|
||||
import { OtpField } from "@/components/otp-field";
|
||||
import { icons, images } from "@/constants";
|
||||
import { ApiError, fetchAPI } from "@/lib/fetch";
|
||||
import { useT } from "@/lib/i18n";
|
||||
import { useSession } from "@/lib/session";
|
||||
|
||||
const ROLES = [
|
||||
{
|
||||
value: "rider",
|
||||
title: "I need a ride",
|
||||
description: "Book rides and get where you're going",
|
||||
titleKey: "auth.signUp.riderTitle",
|
||||
descKey: "auth.signUp.riderDesc",
|
||||
icon: "map" as const,
|
||||
},
|
||||
{
|
||||
value: "driver",
|
||||
title: "I want to drive",
|
||||
description: "Offer rides and earn money with your car",
|
||||
titleKey: "auth.signUp.driverTitle",
|
||||
descKey: "auth.signUp.driverDesc",
|
||||
icon: "dollar" as const,
|
||||
},
|
||||
] as const;
|
||||
|
||||
@@ -37,6 +40,7 @@ type Role = (typeof ROLES)[number]["value"];
|
||||
|
||||
const SignUp = () => {
|
||||
const { setSession } = useSession();
|
||||
const t = useT();
|
||||
|
||||
const [role, setRole] = useState<Role>("rider");
|
||||
const [form, setForm] = useState({
|
||||
@@ -59,16 +63,16 @@ const SignUp = () => {
|
||||
const onSignUpPress = async () => {
|
||||
if (!form.name.trim() || !form.email.trim() || !form.password) {
|
||||
Alert.alert(
|
||||
"Missing information",
|
||||
"Please fill in your name, email and password.",
|
||||
t("auth.signUp.alertMissingTitle"),
|
||||
t("auth.signUp.alertMissingBody"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (form.phone.trim() && !/^[0-9\s\-()+.]+$/.test(form.phone)) {
|
||||
Alert.alert(
|
||||
"Invalid phone number",
|
||||
"Enter a valid Lebanese number, e.g. 70 123 456.",
|
||||
t("auth.signUp.alertPhoneTitle"),
|
||||
t("auth.signUp.alertPhoneBody"),
|
||||
);
|
||||
return;
|
||||
}
|
||||
@@ -105,10 +109,10 @@ const SignUp = () => {
|
||||
password: "",
|
||||
}));
|
||||
Alert.alert(
|
||||
"Error",
|
||||
t("auth.signUp.alertErrorTitle"),
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Could not create your account.",
|
||||
: t("auth.signUp.alertErrorFallback"),
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -118,7 +122,7 @@ const SignUp = () => {
|
||||
if (!/^\d{6}$/.test(code)) {
|
||||
setVerification((prevVerification) => ({
|
||||
...prevVerification,
|
||||
error: "Enter the 6-digit code.",
|
||||
error: t("auth.signUp.errCode"),
|
||||
}));
|
||||
return;
|
||||
}
|
||||
@@ -153,42 +157,42 @@ const SignUp = () => {
|
||||
error:
|
||||
err instanceof ApiError && err.status < 500
|
||||
? err.message
|
||||
: "Verification failed. Please try again.",
|
||||
: t("auth.signUp.errVerify"),
|
||||
}));
|
||||
}
|
||||
},
|
||||
[form.email, setSession],
|
||||
[form.email, setSession, t],
|
||||
);
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
className="flex-1 bg-white"
|
||||
className="flex-1 bg-white dark:bg-neutral-950"
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
keyboardVerticalOffset={Platform.OS === "ios" ? 40 : 0}
|
||||
>
|
||||
<ScrollView
|
||||
className="flex-1 bg-white"
|
||||
className="flex-1 bg-white dark:bg-neutral-950"
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{ flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View className="flex-1 bg-white">
|
||||
<View className="flex-1 bg-white dark:bg-neutral-950">
|
||||
<View className="relative w-full h-[250px]">
|
||||
<Image
|
||||
source={images.signUpCar}
|
||||
alt="Car"
|
||||
alt={t("auth.signUp.carAlt")}
|
||||
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 className="text-2xl text-black dark:text-white font-JakartaSemiBold absolute bottom-5 left-5">
|
||||
{t("auth.signUp.createAccount")}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="p-5">
|
||||
<Text className="text-lg font-JakartaSemiBold mb-3">
|
||||
How will you use Waseel?
|
||||
<Text className="text-lg font-JakartaSemiBold mb-3 text-black dark:text-white">
|
||||
{t("auth.signUp.howUse")}
|
||||
</Text>
|
||||
<View className="flex-row gap-3 mb-4">
|
||||
{ROLES.map((option) => {
|
||||
@@ -201,24 +205,24 @@ const SignUp = () => {
|
||||
className={`flex-1 justify-center rounded-2xl border p-4 ${
|
||||
selected
|
||||
? "border-primary-500 bg-primary-500/10"
|
||||
: "border-neutral-100 bg-neutral-100"
|
||||
: "border-neutral-100 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
source={option.value === "driver" ? icons.dollar : icons.map}
|
||||
alt={`${option.title} icon`}
|
||||
alt={t(`auth.signUp.${option.value === "driver" ? "driverTitle" : "riderTitle"}`)}
|
||||
className="h-7 w-7 mb-2"
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text
|
||||
className={`text-[15px] font-JakartaBold ${
|
||||
selected ? "text-primary-500" : "text-black"
|
||||
selected ? "text-primary-500" : "text-black dark:text-white"
|
||||
}`}
|
||||
>
|
||||
{option.title}
|
||||
{t(option.titleKey)}
|
||||
</Text>
|
||||
<Text className="text-xs text-neutral-400 font-Jakarta mt-1">
|
||||
{option.description}
|
||||
<Text className="text-xs text-neutral-400 dark:text-neutral-500 font-Jakarta mt-1">
|
||||
{t(option.descKey)}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@@ -226,8 +230,8 @@ const SignUp = () => {
|
||||
</View>
|
||||
|
||||
<InputField
|
||||
label="Name"
|
||||
placeholder="Karim Haddad"
|
||||
label={t("auth.signUp.name")}
|
||||
placeholder={t("auth.signUp.namePlaceholder")}
|
||||
icon={icons.person}
|
||||
value={form.name}
|
||||
onChangeText={(value) =>
|
||||
@@ -240,8 +244,8 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Email"
|
||||
placeholder="karim@email.com"
|
||||
label={t("auth.signUp.email")}
|
||||
placeholder={t("auth.signUp.emailPlaceholder")}
|
||||
icon={icons.email}
|
||||
value={form.email}
|
||||
onChangeText={(value) =>
|
||||
@@ -254,8 +258,8 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Phone (optional)"
|
||||
placeholder="70 123 456"
|
||||
label={t("auth.signUp.phoneOptional")}
|
||||
placeholder={t("auth.signUp.phonePlaceholder")}
|
||||
icon={icons.chat}
|
||||
value={form.phone}
|
||||
onChangeText={(value) =>
|
||||
@@ -268,8 +272,8 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<InputField
|
||||
label="Password"
|
||||
placeholder="••••••••"
|
||||
label={t("auth.signUp.password")}
|
||||
placeholder={t("auth.signUp.passwordPlaceholder")}
|
||||
icon={icons.lock}
|
||||
secureTextEntry
|
||||
value={form.password}
|
||||
@@ -282,19 +286,19 @@ const SignUp = () => {
|
||||
/>
|
||||
|
||||
<CustomButton
|
||||
title="Sign Up"
|
||||
title={t("auth.signUp.signUpBtn")}
|
||||
onPress={onSignUpPress}
|
||||
className="mt-6"
|
||||
/>
|
||||
|
||||
<OAuth title="Sign up with Google" />
|
||||
<OAuth title={t("auth.signUp.signUpGoogle")} />
|
||||
|
||||
<Link
|
||||
href="/sign-in"
|
||||
className="text-base text-center text-general-200 mt-10"
|
||||
className="text-base text-center text-general-200 dark:text-neutral-400 mt-10"
|
||||
>
|
||||
<Text>Already have an account? </Text>
|
||||
<Text className="text-primary-500">Sign in</Text>
|
||||
<Text className="text-black dark:text-white">{t("auth.signUp.haveAccount")}</Text>
|
||||
<Text className="text-primary-500">{t("auth.signUp.signInLink")}</Text>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
@@ -308,20 +312,19 @@ const SignUp = () => {
|
||||
}
|
||||
isVisible={verification.state === "pending"}
|
||||
>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2">
|
||||
Verification
|
||||
<View className="bg-white dark:bg-neutral-900 px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Text className="text-2xl font-JakartaExtraBold mb-2 text-black dark:text-white">
|
||||
{t("auth.signUp.verify.title")}
|
||||
</Text>
|
||||
|
||||
<Text className="font-Jakarta mb-5">
|
||||
We've sent a verification code to {form.email}
|
||||
<Text className="font-Jakarta mb-5 text-black dark:text-white">
|
||||
{t("auth.signUp.verify.body", { email: form.email })}
|
||||
</Text>
|
||||
|
||||
{verification.devCode ? (
|
||||
<View className="bg-amber-50 border border-amber-300 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 font-Jakarta">
|
||||
Email delivery is not configured on this server. Your
|
||||
verification code is{" "}
|
||||
<View className="bg-amber-50 dark:bg-amber-950/40 border border-amber-300 dark:border-amber-800 rounded-xl p-3 mb-5">
|
||||
<Text className="text-sm text-amber-700 dark:text-amber-400 font-Jakarta">
|
||||
{t("auth.signUp.verify.devBanner")}
|
||||
<Text className="font-JakartaBold">{verification.devCode}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
@@ -346,7 +349,7 @@ const SignUp = () => {
|
||||
) : null}
|
||||
|
||||
<CustomButton
|
||||
title={verification.busy ? "Verifying…" : "Verify Email"}
|
||||
title={verification.busy ? t("auth.signUp.verify.verifying") : t("auth.signUp.verify.verifyBtn")}
|
||||
onPress={() => onPressVerify(verification.code)}
|
||||
disabled={verification.busy}
|
||||
className="mt-5 bg-emerald-500"
|
||||
@@ -354,23 +357,23 @@ const SignUp = () => {
|
||||
</View>
|
||||
</ReactNativeModal>
|
||||
<ReactNativeModal isVisible={verification.state === "success"}>
|
||||
<View className="bg-white px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<View className="bg-white dark:bg-neutral-900 px-7 py-9 rounded-2xl min-h-[300px]">
|
||||
<Image
|
||||
source={images.check}
|
||||
alt="Check"
|
||||
alt={t("auth.signUp.verify.checkAlt")}
|
||||
className="w-[110px] h-[110px] mx-auto my-5"
|
||||
/>
|
||||
|
||||
<Text className="text-3xl font-JakartaBold text-center">
|
||||
Verified
|
||||
<Text className="text-3xl font-JakartaBold text-center text-black dark:text-white">
|
||||
{t("auth.signUp.verified.title")}
|
||||
</Text>
|
||||
|
||||
<Text className="text-base text-gray-400 font-Jakarta text-center mt-2">
|
||||
You've succesfully verified your account.
|
||||
<Text className="text-base text-gray-400 dark:text-neutral-500 font-Jakarta text-center mt-2">
|
||||
{t("auth.signUp.verified.body")}
|
||||
</Text>
|
||||
|
||||
<CustomButton
|
||||
title="Browse Home"
|
||||
title={t("common.browseHome")}
|
||||
onPress={() => router.push("/")}
|
||||
className="mt-5"
|
||||
/>
|
||||
@@ -382,4 +385,4 @@ const SignUp = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUp;
|
||||
export default SignUp;
|
||||
+13
-9
@@ -6,25 +6,29 @@ import Swiper from "react-native-swiper";
|
||||
|
||||
import { CustomButton } from "@/components/custom-button";
|
||||
import { onboarding } from "@/constants";
|
||||
import { useT } from "@/lib/i18n";
|
||||
|
||||
const Welcome = () => {
|
||||
const swiperRef = useRef<Swiper>(null);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const isLastSlide = activeIndex === onboarding.length - 1;
|
||||
const t = useT();
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex h-full items-center justify-between bg-white">
|
||||
<SafeAreaView className="flex h-full items-center justify-between bg-white dark:bg-neutral-950">
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push("/(auth)/sign-up")}
|
||||
className="w-full flex justify-end items-end p-5"
|
||||
>
|
||||
<Text className="text-black text-base font-JakartaBold">Skip</Text>
|
||||
<Text className="text-black dark:text-white text-base font-JakartaBold">
|
||||
{t("onboarding.skip")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Swiper
|
||||
ref={swiperRef}
|
||||
loop={false}
|
||||
dot={<View className="w-8 h-1 mx-1 bg-[#E2E8F0] rounded-full" />}
|
||||
dot={<View className="w-8 h-1 mx-1 bg-[#E2E8F0] dark:bg-neutral-700 rounded-full" />}
|
||||
activeDot={<View className="w-8 h-1 mx-1 bg-[#0286FF] rounded-full" />}
|
||||
index={activeIndex}
|
||||
onIndexChanged={setActiveIndex}
|
||||
@@ -39,13 +43,13 @@ const Welcome = () => {
|
||||
/>
|
||||
|
||||
<View className="flex flex-row items-center justify-center w-full mt-10">
|
||||
<Text className="text-black text-3xl font-bold mx-10 text-center">
|
||||
{item.title}
|
||||
<Text className="text-black dark:text-white text-3xl font-bold mx-10 text-center">
|
||||
{t(item.titleKey)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text className="text-base font-JakartaSemiBold text-center text-[#858585] mx-10 mt-3">
|
||||
{item.description}
|
||||
<Text className="text-base font-JakartaSemiBold text-center text-[#858585] dark:text-neutral-400 mx-10 mt-3">
|
||||
{t(item.descKey)}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
@@ -57,11 +61,11 @@ const Welcome = () => {
|
||||
? router.push("/(auth)/sign-up")
|
||||
: swiperRef.current?.scrollBy(1)
|
||||
}
|
||||
title={isLastSlide ? "Get Started" : "Next"}
|
||||
title={isLastSlide ? t("onboarding.getStarted") : t("onboarding.next")}
|
||||
className="w-11/12 mt-10"
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default Welcome;
|
||||
export default Welcome;
|
||||
Reference in New Issue
Block a user