139 lines
4.2 KiB
TypeScript
139 lines
4.2 KiB
TypeScript
import React, { useState, useEffect, useCallback, useRef } from "react";
|
|
import { View, ActivityIndicator, Pressable } from "react-native";
|
|
import { useSirouRouter } from "@sirou/react-native";
|
|
import { AppRoutes } from "@/lib/routes";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Stack } from "expo-router";
|
|
import { ScreenWrapper } from "@/components/ScreenWrapper";
|
|
import { Keypad } from "@/components/Keypad";
|
|
import { api } from "@/lib/api";
|
|
import { usePinStore } from "@/lib/pin-store";
|
|
import { useAuthStore } from "@/lib/auth-store";
|
|
import { toast } from "@/lib/toast-store";
|
|
|
|
const LOCKOUT_THRESHOLD = 5;
|
|
|
|
export default function PinLockScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
const unlock = usePinStore((s) => s.unlock);
|
|
const user = useAuthStore((s) => s.user);
|
|
const mounted = useRef(true);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
mounted.current = false;
|
|
};
|
|
}, []);
|
|
|
|
const [pin, setPin] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [attempts, setAttempts] = useState(0);
|
|
|
|
const handleVerify = useCallback(
|
|
async (value: string) => {
|
|
if (loading || value.length < 6) return;
|
|
setLoading(true);
|
|
try {
|
|
await api.auth.verifyPin({ query: { pin: value } });
|
|
unlock();
|
|
nav.go("(tabs)");
|
|
} catch (err: any) {
|
|
const next = attempts + 1;
|
|
setAttempts(next);
|
|
setPin("");
|
|
if (next >= LOCKOUT_THRESHOLD) {
|
|
toast.error("Locked Out", "Too many failed attempts. Sign in again.");
|
|
useAuthStore.getState().logout();
|
|
nav.go("login");
|
|
} else {
|
|
toast.error(
|
|
"Wrong PIN",
|
|
`${LOCKOUT_THRESHOLD - next} attempt${LOCKOUT_THRESHOLD - next > 1 ? "s" : ""} remaining`,
|
|
);
|
|
}
|
|
} finally {
|
|
if (mounted.current) setLoading(false);
|
|
}
|
|
},
|
|
[attempts, loading, nav, unlock],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (pin.length === 6) handleVerify(pin);
|
|
}, [pin]);
|
|
|
|
const handlePress = useCallback((key: string) => {
|
|
setPin((prev) => (prev + key).slice(0, 6));
|
|
}, []);
|
|
|
|
const handleDelete = useCallback(() => {
|
|
setPin((prev) => prev.slice(0, -1));
|
|
}, []);
|
|
|
|
const initials = user
|
|
? `${user.firstName?.[0] ?? ""}${user.lastName?.[0] ?? ""}`
|
|
: "";
|
|
|
|
const arr = pin.split("");
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background" withSafeArea={false}>
|
|
<Stack.Screen options={{ headerShown: false }} />
|
|
<View className="flex-1">
|
|
<View className="flex-1 items-center pt-16">
|
|
<View className="items-center mb-6">
|
|
<View className="h-20 w-20 rounded-full bg-primary items-center justify-center mb-4">
|
|
<Text className="text-white text-2xl top-1 font-sans-bold">
|
|
{initials}
|
|
</Text>
|
|
</View>
|
|
<Text variant="h4" className="font-sans-bold text-foreground">
|
|
{user?.firstName ?? "User"}
|
|
</Text>
|
|
r
|
|
</View>
|
|
|
|
<Text variant="muted" className="text-center mb-8 px-4">
|
|
Enter your PIN to unlock
|
|
</Text>
|
|
|
|
<View className="flex-row justify-center" style={{ gap: 12 }}>
|
|
{[0, 1, 2, 3, 4, 5].map((i) => (
|
|
<View
|
|
key={i}
|
|
className={`w-[52px] h-[52px] rounded-xl items-center justify-center border ${
|
|
arr[i]
|
|
? "border-primary bg-primary/10"
|
|
: "border-border bg-card"
|
|
}`}
|
|
>
|
|
<View
|
|
className={`w-[10px] h-[10px] rounded-full ${
|
|
arr[i] ? "bg-primary" : "bg-border"
|
|
}`}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{loading && <ActivityIndicator color="#E46212" size="small" />}
|
|
|
|
{!loading && (
|
|
<Pressable onPress={() => nav.go("forgot-pin")}>
|
|
<Text className="text-primary font-sans-bold text-sm pt-6">
|
|
Forgot PIN?
|
|
</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
|
|
<Keypad
|
|
onPress={handlePress}
|
|
onDelete={handleDelete}
|
|
disabled={loading}
|
|
/>
|
|
</View>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|