142 lines
4.1 KiB
TypeScript
142 lines
4.1 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 { ShieldCheck } from "@/lib/icons";
|
|
import { api } from "@/lib/api";
|
|
import { usePinStore } from "@/lib/pin-store";
|
|
import { toast } from "@/lib/toast-store";
|
|
import { useColorScheme } from "nativewind";
|
|
|
|
type Step = "create" | "confirm";
|
|
|
|
export default function SetPinScreen() {
|
|
const nav = useSirouRouter<AppRoutes>();
|
|
const { colorScheme } = useColorScheme();
|
|
const isDark = colorScheme === "dark";
|
|
const setHasPin = usePinStore((s) => s.setHasPin);
|
|
const unlock = usePinStore((s) => s.unlock);
|
|
const mounted = useRef(true);
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
mounted.current = false;
|
|
};
|
|
}, []);
|
|
|
|
const [step, setStep] = useState<Step>("create");
|
|
const [pin, setPin] = useState("");
|
|
const [confirmPin, setConfirmPin] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const currentPin = step === "create" ? pin : confirmPin;
|
|
const setCurrentPin = step === "create" ? setPin : setConfirmPin;
|
|
|
|
useEffect(() => {
|
|
if (currentPin.length === 6 && !loading) {
|
|
if (step === "create") {
|
|
setTimeout(() => {
|
|
setStep("confirm");
|
|
setConfirmPin("");
|
|
}, 200);
|
|
} else {
|
|
handleSave();
|
|
}
|
|
}
|
|
}, [currentPin]);
|
|
|
|
const handleSave = async () => {
|
|
if (confirmPin !== pin) {
|
|
toast.error("Mismatch", "PINs do not match");
|
|
setStep("create");
|
|
setPin("");
|
|
setConfirmPin("");
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await api.auth.setPin({ body: { pin } });
|
|
setHasPin(true);
|
|
unlock();
|
|
toast.success("PIN Set", "Your security PIN has been saved.");
|
|
nav.go("(tabs)");
|
|
} catch (err: any) {
|
|
toast.error("Failed", err.message || "Could not set PIN");
|
|
} finally {
|
|
if (mounted.current) setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePress = useCallback(
|
|
(key: string) => {
|
|
setCurrentPin((prev) => (prev + key).slice(0, 6));
|
|
},
|
|
[step],
|
|
);
|
|
|
|
const handleDelete = useCallback(() => {
|
|
setCurrentPin((prev) => prev.slice(0, -1));
|
|
}, [step]);
|
|
|
|
const arr = currentPin.split("");
|
|
const iconColor = isDark ? "#f1f5f9" : "#251615";
|
|
|
|
return (
|
|
<ScreenWrapper className="bg-background" withSafeArea={false}>
|
|
<Stack.Screen options={{ headerShown: false }} />
|
|
|
|
<View className="items-center pt-12 pb-2">
|
|
<Text variant="small" className="text-muted-foreground">
|
|
{step === "create" ? "Step 1 of 2" : "Step 2 of 2"}
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex-1 items-center pt-10">
|
|
<Text
|
|
variant="h4"
|
|
className="font-sans-bold text-foreground text-center mb-1"
|
|
>
|
|
{step === "create" ? "Create a PIN" : "Confirm your PIN"}
|
|
</Text>
|
|
<Text variant="muted" className="text-center mb-8 leading-5">
|
|
{step === "create"
|
|
? "Set a 6-digit PIN to secure your account"
|
|
: "Enter the same PIN again to confirm"}
|
|
</Text>
|
|
|
|
<View className="flex-row justify-center gap-2 mb-6">
|
|
{[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" />}
|
|
</View>
|
|
|
|
<Keypad
|
|
onPress={handlePress}
|
|
onDelete={handleDelete}
|
|
disabled={loading}
|
|
/>
|
|
</ScreenWrapper>
|
|
);
|
|
}
|