rersistesiion integraytion api impolement
This commit is contained in:
Jaanu423
@@ -0,0 +1,259 @@
|
||||
import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
|
||||
import axios from "axios";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
Pressable,
|
||||
Animated,
|
||||
Platform,
|
||||
NativeSyntheticEvent,
|
||||
TextInputKeyPressEventData,
|
||||
KeyboardAvoidingView,
|
||||
StatusBar,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { LOGIN_URL } from "../utils/ApiUrls";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
|
||||
const theme = {
|
||||
primary: "#111111",
|
||||
accent: "#FF7A00",
|
||||
background: "#F9F9F9",
|
||||
text: "#1A1A1A",
|
||||
subText: "#6B6B6B",
|
||||
outline: "#E5E5E5",
|
||||
};
|
||||
|
||||
const CELL_COUNT = 6;
|
||||
type OtpVerifyRouteProp = RouteProp<RootStackParamList, "OtpVarify">;
|
||||
|
||||
export default function OtpVerificationScreen() {
|
||||
const [code, setCode] = useState<string[]>(Array(CELL_COUNT).fill(""));
|
||||
const [timer, setTimer] = useState(30);
|
||||
const [isResending, setIsResending] = useState(false);
|
||||
const inputs = useRef<Array<TextInput | null>>([]);
|
||||
const route = useRoute<OtpVerifyRouteProp>();
|
||||
const { mobile } = route.params;
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
// animations
|
||||
const fade = useRef(new Animated.Value(0)).current;
|
||||
const slide = useRef(new Animated.Value(24)).current;
|
||||
const ctaScale = useRef(new Animated.Value(1)).current;
|
||||
|
||||
useEffect(() => {
|
||||
Animated.parallel([
|
||||
Animated.timing(fade, { toValue: 1, duration: 600, useNativeDriver: true }),
|
||||
Animated.timing(slide, { toValue: 0, duration: 600, useNativeDriver: true }),
|
||||
]).start();
|
||||
}, [fade, slide]);
|
||||
|
||||
// Countdown
|
||||
useEffect(() => {
|
||||
if (timer <= 0) return;
|
||||
const interval = setInterval(() => {
|
||||
setTimer((prev) => prev - 1);
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [timer]);
|
||||
|
||||
const saveToken = async (token: string) => {
|
||||
try {
|
||||
await Keychain.setGenericPassword("auth", token, {
|
||||
accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED,
|
||||
});
|
||||
console.log("✅ Token saved securely");
|
||||
} catch (error) {
|
||||
console.error("❌ Error saving token:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (otp: string, mobile: string) => {
|
||||
try {
|
||||
const payload = { mobile, otp };
|
||||
const res = await axios.post(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify",
|
||||
payload,
|
||||
{ headers: { "Content-Type": "application/json", Accept: "*/*" } }
|
||||
);
|
||||
|
||||
console.log("✅ OTP Verified:", res.data);
|
||||
if (res.data.statusCode === 200) {
|
||||
saveToken(res.data.data);
|
||||
navigation.navigate('Home')
|
||||
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("❌ OTP Verification Error:", err?.response?.data || err.message);
|
||||
Alert.alert("Error", "Failed to verify OTP. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
const resendOtp = async () => {
|
||||
try {
|
||||
setIsResending(true);
|
||||
setTimer(30); // reset timer
|
||||
|
||||
const res = await axios.get(
|
||||
LOGIN_URL + mobile,
|
||||
{ headers: { "Content-Type": "application/json", Accept: "*/*" } }
|
||||
);
|
||||
|
||||
console.log("📩 OTP Resent:", res.data);
|
||||
|
||||
Alert.alert("OTP Sent", "A new OTP has been sent to your mobile.");
|
||||
} catch (err: any) {
|
||||
console.error("❌ Resend OTP Error:", err?.response?.data || err.message);
|
||||
Alert.alert("Error", "Failed to resend OTP. Try again later.");
|
||||
} finally {
|
||||
setIsResending(false);
|
||||
}
|
||||
};
|
||||
|
||||
const submitIfComplete = (arr: string[]) => {
|
||||
const joined = arr.join("");
|
||||
if (joined.length === CELL_COUNT) {
|
||||
onSubmit(joined, mobile);
|
||||
}
|
||||
};
|
||||
|
||||
const updateIndex = (idx: number, val: string) => {
|
||||
const v = val.replace(/[^0-9]/g, "");
|
||||
const next = [...code];
|
||||
next[idx] = v.slice(-1);
|
||||
setCode(next);
|
||||
if (v && idx < CELL_COUNT - 1) inputs.current[idx + 1]?.focus();
|
||||
submitIfComplete(next);
|
||||
};
|
||||
|
||||
const handleFirstCellChange = (val: string) => {
|
||||
const digits = val.replace(/\D/g, "");
|
||||
if (digits.length <= 1) {
|
||||
updateIndex(0, digits);
|
||||
return;
|
||||
}
|
||||
const next = Array(CELL_COUNT)
|
||||
.fill("")
|
||||
.map((_, i) => digits[i] ?? "");
|
||||
setCode(next);
|
||||
const firstEmpty = next.findIndex((c) => !c);
|
||||
if (firstEmpty >= 0) inputs.current[firstEmpty]?.focus();
|
||||
else inputs.current[CELL_COUNT - 1]?.blur();
|
||||
submitIfComplete(next);
|
||||
};
|
||||
|
||||
const handleKeyPress = (idx: number, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
|
||||
if (e.nativeEvent.key === "Backspace" && !code[idx] && idx > 0) {
|
||||
inputs.current[idx - 1]?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<StatusBar barStyle="dark-content" backgroundColor={theme.background} />
|
||||
|
||||
{/* Top Section */}
|
||||
<View style={styles.topSection}>
|
||||
<Text style={styles.title}>Verify Code 🔒</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
We’ve sent a 6-digit verification code to {mobile}.
|
||||
</Text>
|
||||
|
||||
<Animated.View
|
||||
style={[styles.otpRow, { opacity: fade, transform: [{ translateY: slide }] }]}
|
||||
>
|
||||
{Array.from({ length: CELL_COUNT }).map((_, i) => (
|
||||
<TextInput
|
||||
key={`otp-${i}`}
|
||||
ref={(r) => {
|
||||
inputs.current[i] = r;
|
||||
}}
|
||||
style={[styles.cell, code[i] ? styles.cellFilled : null]}
|
||||
keyboardType="number-pad"
|
||||
maxLength={1}
|
||||
value={code[i]}
|
||||
onChangeText={(t) => (i === 0 ? handleFirstCellChange(t) : updateIndex(i, t))}
|
||||
onKeyPress={(e) => handleKeyPress(i, e)}
|
||||
placeholder="•"
|
||||
placeholderTextColor="#BDBDBD"
|
||||
textContentType="oneTimeCode"
|
||||
/>
|
||||
))}
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
|
||||
<Pressable
|
||||
onPressIn={() =>
|
||||
Animated.spring(ctaScale, { toValue: 0.97, useNativeDriver: true }).start()
|
||||
}
|
||||
onPressOut={() =>
|
||||
Animated.spring(ctaScale, { toValue: 1, useNativeDriver: true }).start()
|
||||
}
|
||||
onPress={() => onSubmit(code.join(""), mobile)}
|
||||
style={styles.button}
|
||||
>
|
||||
<Text style={styles.buttonText}>Continue</Text>
|
||||
</Pressable>
|
||||
|
||||
{timer > 0 ? (
|
||||
<Text style={styles.footerText}>Resend code in 00:{timer.toString().padStart(2, "0")}</Text>
|
||||
) : (
|
||||
<Pressable onPress={resendOtp} disabled={isResending}>
|
||||
<Text style={[styles.footerText, { color: theme.accent }]}>
|
||||
{isResending ? "Resending..." : "Resend Code"}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</Animated.View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: theme.background, padding: 20 },
|
||||
topSection: { flex: 1, justifyContent: "center" },
|
||||
title: { fontSize: 26, fontWeight: "800", color: theme.text, marginBottom: 8 },
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: theme.subText,
|
||||
marginBottom: 24,
|
||||
lineHeight: 22,
|
||||
},
|
||||
otpRow: { flexDirection: "row", justifyContent: "space-between" },
|
||||
cell: {
|
||||
width: 50,
|
||||
height: 58,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.outline,
|
||||
backgroundColor: "#fff",
|
||||
textAlign: "center",
|
||||
fontSize: 20,
|
||||
color: theme.text,
|
||||
},
|
||||
cellFilled: { borderColor: "#D1D1D1" },
|
||||
bottomSection: { marginBottom: 30 },
|
||||
button: {
|
||||
backgroundColor: theme.primary,
|
||||
paddingVertical: 18,
|
||||
borderRadius: 14,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
buttonText: { color: "#fff", fontWeight: "700", fontSize: 16 },
|
||||
footerText: {
|
||||
textAlign: "center",
|
||||
color: theme.subText,
|
||||
fontSize: 13,
|
||||
marginTop: 14,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user