107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
TextInput,
|
|
ActivityIndicator,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
} from "react-native";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { useLocalSearchParams, Stack } from "expo-router";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { StandardHeader } from "@/components/StandardHeader";
|
|
import { Phone } from "@/lib/icons";
|
|
import { api } from "@/lib/api";
|
|
import { toast } from "@/lib/toast-store";
|
|
import { useColorScheme } from "nativewind";
|
|
import { getPlaceholderColor } from "@/lib/colors";
|
|
|
|
export default function ForgotPinScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
const params = useLocalSearchParams<{ phone?: string }>();
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
|
|
const [phone, setPhone] = useState(params.phone || "");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSendOtp = async () => {
|
|
if (!phone || phone.length < 9) {
|
|
toast.error("Required", "Please enter your phone number");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
const fullPhone = `+251${phone}`;
|
|
try {
|
|
const response = await api.auth.forgetPin({ body: { phone: fullPhone } });
|
|
toast.success("OTP Sent", response.message || "Verification code sent to your phone");
|
|
nav.go("forgot-pin-verify", { phone: fullPhone, verificationId: response.verificationId });
|
|
} catch (err: any) {
|
|
toast.error("Failed", err.message || "Could not send OTP");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background">
|
|
<Stack.Screen options={{ headerShown: false }} />
|
|
<StandardHeader title="Reset PIN" showBack />
|
|
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
className="flex-1"
|
|
>
|
|
<View className="flex-1 px-6 pt-10">
|
|
<View className="items-center mb-10">
|
|
<Text variant="h4" className="font-sans-bold text-foreground">
|
|
Forgot your PIN?
|
|
</Text>
|
|
<Text variant="muted" className="mt-2 text-center text-sm">
|
|
Enter your phone number to receive a verification code
|
|
</Text>
|
|
</View>
|
|
|
|
<View>
|
|
<Text variant="small" className="font-sans-semibold mb-2 ml-1">
|
|
Phone Number
|
|
</Text>
|
|
<View className="flex-row items-center rounded-xl px-4 border border-border h-12">
|
|
<Phone size={18} color={isDark ? "#94a3b8" : "#64748b"} />
|
|
<Text className="ml-2 text-foreground font-sans-bold">+251</Text>
|
|
<TextInput
|
|
className="flex-1 ml-2 text-foreground py-0"
|
|
placeholder="912345678"
|
|
placeholderTextColor={getPlaceholderColor(isDark)}
|
|
value={phone}
|
|
onChangeText={setPhone}
|
|
keyboardType="phone-pad"
|
|
maxLength={9}
|
|
style={{ textAlignVertical: "center" }}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<Button
|
|
className="h-12 bg-primary rounded-[10px] mt-6"
|
|
onPress={handleSendOtp}
|
|
disabled={loading || phone.length < 9}
|
|
>
|
|
{loading ? (
|
|
<ActivityIndicator color="white" />
|
|
) : (
|
|
<Text className="text-white font-sans-bold text-base">
|
|
Send Verification Code
|
|
</Text>
|
|
)}
|
|
</Button>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|