rersistesiion integraytion api impolement
This commit is contained in:
Jaanu423
@@ -11,31 +11,18 @@ import {
|
||||
SafeAreaProvider,
|
||||
useSafeAreaInsets,
|
||||
} from 'react-native-safe-area-context';
|
||||
import AppNavigator from './src/navigation/AppNavigator';
|
||||
|
||||
function App() {
|
||||
const isDarkMode = useColorScheme() === 'dark';
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
||||
<AppContent />
|
||||
<AppNavigator />
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function AppContent() {
|
||||
const safeAreaInsets = useSafeAreaInsets();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<NewAppScreen
|
||||
templateFileName="App.tsx"
|
||||
safeAreaInsets={safeAreaInsets}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
|
||||
Generated
+2944
-16
File diff suppressed because it is too large
Load Diff
+12
-1
@@ -10,13 +10,24 @@
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "^2.2.0",
|
||||
"@react-native-vector-icons/ionicons": "^12.3.0",
|
||||
"@react-native/new-app-screen": "0.81.1",
|
||||
"@react-navigation/bottom-tabs": "^7.4.7",
|
||||
"@react-navigation/elements": "^2.6.4",
|
||||
"@react-navigation/native": "^7.1.17",
|
||||
"@react-navigation/native-stack": "^7.3.26",
|
||||
"@react-navigation/stack": "^7.4.8",
|
||||
"axios": "^1.11.0",
|
||||
"install": "^0.13.0",
|
||||
"npm": "^11.6.0",
|
||||
"react": "19.1.0",
|
||||
"react-native": "0.81.1",
|
||||
"react-native-elements": "^3.4.3",
|
||||
"react-native-image-picker": "^8.2.1",
|
||||
"react-native-safe-area-context": "^5.5.2"
|
||||
"react-native-keychain": "^10.0.0",
|
||||
"react-native-safe-area-context": "^5.6.1",
|
||||
"react-native-screens": "^4.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import React from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
} from "react-native";
|
||||
|
||||
type CustomInputProps = {
|
||||
label: string;
|
||||
value: string;
|
||||
placeholder: string;
|
||||
onChangeText: (text: string) => void;
|
||||
};
|
||||
|
||||
const CustomInput: React.FC<CustomInputProps> = ({
|
||||
label,
|
||||
value,
|
||||
placeholder,
|
||||
onChangeText,
|
||||
}) => (
|
||||
<View style={styles.inputContainer}>
|
||||
<Text style={styles.inputLabel}>{label}</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
placeholderTextColor="#999"
|
||||
onChangeText={onChangeText}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
||||
type CustomButtonProps = {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
type?: "primary" | "secondary" | "danger";
|
||||
};
|
||||
|
||||
const CustomButton: React.FC<CustomButtonProps> = ({
|
||||
title,
|
||||
onPress,
|
||||
type = "primary",
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.button,
|
||||
type === "secondary" && styles.buttonSecondary,
|
||||
type === "danger" && styles.buttonDanger,
|
||||
]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.buttonText,
|
||||
type === "secondary" && styles.buttonTextSecondary,
|
||||
type === "danger" && styles.buttonTextDanger,
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: "#f5f7fb" },
|
||||
loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#eee",
|
||||
},
|
||||
headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
|
||||
profileCard: {
|
||||
borderRadius: 16,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
profileHeader: { alignItems: "center", marginBottom: 16 },
|
||||
avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 110,
|
||||
bottom: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 15,
|
||||
width: 32,
|
||||
height: 32,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
color: "#444",
|
||||
paddingLeft: 4,
|
||||
},
|
||||
inputContainer: { marginBottom: 12 },
|
||||
inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
backgroundColor: "#fdfdfd",
|
||||
color: "#000",
|
||||
fontSize: 15,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#007AFF",
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginVertical: 6,
|
||||
shadowColor: "#007AFF",
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#e5e5ea",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ff3b30",
|
||||
},
|
||||
buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
|
||||
buttonTextSecondary: { color: "#333" },
|
||||
buttonTextDanger: { color: "#fff" },
|
||||
});
|
||||
|
||||
export { CustomInput, CustomButton, styles };
|
||||
@@ -0,0 +1,46 @@
|
||||
import * as React from "react";
|
||||
import { NavigationContainer } from "@react-navigation/native";
|
||||
import { createNativeStackNavigator } from "@react-navigation/native-stack";
|
||||
import { View, Text, Button } from "react-native";
|
||||
import LoginScreen from "../screens/LoginScreen";
|
||||
import OtpVerificationScreen from "../screens/OtpVarificationScreen";
|
||||
import BottomTabs from "./BottomTabs";
|
||||
import SplashScreen from "../screens/SplashScreen";
|
||||
import Profile from "../screens/profile/Profile";
|
||||
|
||||
const Stack = createNativeStackNavigator();
|
||||
export type RootStackParamList = {
|
||||
Login: undefined;
|
||||
OtpVarify: { mobile: string };
|
||||
Home: undefined
|
||||
HomeTabs: undefined
|
||||
splash: undefined
|
||||
|
||||
};
|
||||
|
||||
function HomeScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
|
||||
<Text>Home Screen</Text>
|
||||
<Button
|
||||
title="Go to Profile"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function AppNavigator() {
|
||||
return (
|
||||
<NavigationContainer>
|
||||
<Stack.Navigator initialRouteName="Splash">
|
||||
<Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Home" component={BottomTabs} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="OtpVarify" component={OtpVerificationScreen} options={{ headerShown: false }} />
|
||||
<Stack.Screen name="Profile" component={Profile} />
|
||||
</Stack.Navigator>
|
||||
</NavigationContainer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
|
||||
import { View, Text } from "react-native";
|
||||
import {Ionicons} from '@react-native-vector-icons/ionicons';
|
||||
import Profile from "../screens/profile/Profile";
|
||||
|
||||
const Tab = createBottomTabNavigator();
|
||||
|
||||
// Dummy screens for now
|
||||
function HomeScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>🏠 Home</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function SettingsScreen() {
|
||||
return (
|
||||
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
|
||||
<Text>⚙️ Settings</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BottomTabs() {
|
||||
return (
|
||||
<Tab.Navigator
|
||||
screenOptions={({ route }) => ({
|
||||
headerShown: false,
|
||||
tabBarShowLabel: true,
|
||||
tabBarStyle: { backgroundColor: "#111", paddingBottom: 5, height: 60 },
|
||||
tabBarActiveTintColor: "#FF7A00",
|
||||
tabBarInactiveTintColor: "gray",
|
||||
tabBarIcon: ({ color, size }) => {
|
||||
let iconName: React.ComponentProps<typeof Ionicons>['name'] = "home-outline";
|
||||
|
||||
if (route.name === "Home") iconName = "home-outline";
|
||||
else if (route.name === "Profile") iconName = "person-outline";
|
||||
else if (route.name === "Settings") iconName = "settings-outline";
|
||||
|
||||
return <Ionicons name={iconName} size={size} color={color} />;
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Tab.Screen name="Home" component={HomeScreen} />
|
||||
<Tab.Screen name="Profile" component={Profile} />
|
||||
<Tab.Screen name="Settings" component={SettingsScreen} />
|
||||
</Tab.Navigator>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
StyleSheet,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Animated,
|
||||
StatusBar,
|
||||
} from "react-native";
|
||||
import { LOGIN_URL } from "../utils/ApiUrls";
|
||||
import axios from "axios";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import type { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { RootStackParamList } from "../navigation/AppNavigator";
|
||||
|
||||
const theme = {
|
||||
primary: "#111111",
|
||||
accent: "#FF7A00",
|
||||
background: "#F9F9F9",
|
||||
text: "#1A1A1A",
|
||||
subText: "#6B6B6B",
|
||||
outline: "#E5E5E5",
|
||||
};
|
||||
|
||||
export default function LoginScreen() {
|
||||
const [mobile, setMobile] = useState("");
|
||||
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();
|
||||
}, []);
|
||||
|
||||
const handleContinue = async () => {
|
||||
if (mobile.length === 10) {
|
||||
console.log("Mobile submitted:", mobile);
|
||||
try {
|
||||
const res = await axios.get(LOGIN_URL+mobile)
|
||||
console.log('loginres',res.data)
|
||||
if(res.data.statusCode === 200){
|
||||
navigation.navigate('OtpVarify', { mobile: mobile })
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
} else {
|
||||
Alert.alert("Please enter a valid 10-digit mobile number");
|
||||
}
|
||||
};
|
||||
|
||||
const onPressIn = () =>
|
||||
Animated.spring(ctaScale, {
|
||||
toValue: 0.97,
|
||||
useNativeDriver: true,
|
||||
speed: 20,
|
||||
bounciness: 0,
|
||||
}).start();
|
||||
|
||||
const onPressOut = () =>
|
||||
Animated.spring(ctaScale, {
|
||||
toValue: 1,
|
||||
useNativeDriver: true,
|
||||
speed: 20,
|
||||
bounciness: 6,
|
||||
}).start();
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
>
|
||||
<StatusBar barStyle="dark-content" backgroundColor={theme.background} />
|
||||
|
||||
{/* Top content */}
|
||||
<View style={styles.topSection}>
|
||||
<Text style={styles.brand}>CircleCollect</Text>
|
||||
<Text style={styles.title}>Welcome Back 👋</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Enter your mobile number to sign in and continue.
|
||||
</Text>
|
||||
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.inputWrapper,
|
||||
{ opacity: fade, transform: [{ translateY: slide }] },
|
||||
]}
|
||||
>
|
||||
<Text style={styles.inputLabel}>Mobile Number</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter Mobile Number"
|
||||
placeholderTextColor={theme.subText}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
value={mobile}
|
||||
onChangeText={setMobile}
|
||||
/>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Bottom Button */}
|
||||
<Animated.View
|
||||
style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.button}
|
||||
onPress={handleContinue}
|
||||
onPressIn={onPressIn}
|
||||
onPressOut={onPressOut}
|
||||
>
|
||||
<Text style={styles.buttonText}>Continue</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.footerText}>
|
||||
By continuing, you agree to our{" "}
|
||||
<Text style={{ color: theme.accent, fontWeight: "600" }}>
|
||||
Terms & Privacy
|
||||
</Text>
|
||||
</Text>
|
||||
</Animated.View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: theme.background, padding: 20 },
|
||||
topSection: { flex: 1, justifyContent: "center" },
|
||||
brand: {
|
||||
fontSize: 20,
|
||||
fontWeight: "700",
|
||||
color: theme.accent,
|
||||
marginBottom: 24,
|
||||
},
|
||||
title: {
|
||||
fontSize: 26,
|
||||
fontWeight: "800",
|
||||
color: theme.text,
|
||||
marginBottom: 6,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: theme.subText,
|
||||
marginBottom: 30,
|
||||
lineHeight: 22,
|
||||
},
|
||||
inputWrapper: { gap: 8 },
|
||||
inputLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
color: theme.text,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 14,
|
||||
padding: 14,
|
||||
fontSize: 16,
|
||||
color: theme.text,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.outline,
|
||||
},
|
||||
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: 12,
|
||||
marginTop: 14,
|
||||
},
|
||||
});
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import { StackNavigationProp } from "@react-navigation/stack";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { RootStackParamList } from "../navigation/AppNavigator"; // adjust path
|
||||
|
||||
const SplashScreen = () => {
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
|
||||
useEffect(() => {
|
||||
const checkLogin = async () => {
|
||||
try {
|
||||
const creds = await Keychain.getGenericPassword();
|
||||
if (creds) {
|
||||
console.log("🔑 Found token:", creds.password);
|
||||
navigation.replace("Home"); // go to bottom tabs if logged in
|
||||
} else {
|
||||
navigation.replace("Login"); // go to login if not logged in
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error checking login:", error);
|
||||
navigation.replace("Login");
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(checkLogin, 1500); // show splash for 1.5s
|
||||
}, [navigation]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Circle Collect</Text>
|
||||
<ActivityIndicator size="large" color="#FF7A00" style={{ marginTop: 20 }} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default SplashScreen;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#111111",
|
||||
},
|
||||
title: {
|
||||
fontSize: 28,
|
||||
fontWeight: "800",
|
||||
color: "#FF7A00",
|
||||
letterSpacing: 1,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,364 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
TextInput,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import * as Keychain from "react-native-keychain";
|
||||
import Ionicons from "react-native-vector-icons/Ionicons";
|
||||
import { launchImageLibrary } from "react-native-image-picker";
|
||||
import { CustomButton, CustomInput } from "../../common/Custom";
|
||||
|
||||
// ✅ Reusable Custom Input
|
||||
|
||||
|
||||
type UserProfile = {
|
||||
id: string;
|
||||
userId: number;
|
||||
firstName: string | null;
|
||||
lastName: string | null;
|
||||
mobile: string | null;
|
||||
gender: string | null;
|
||||
email: string | null;
|
||||
username: string | null;
|
||||
address: string | null;
|
||||
bankName: string | null;
|
||||
branchCode: string | null;
|
||||
filePath: string | null;
|
||||
bankAccountNumber: string | null;
|
||||
imageBlob: string | null;
|
||||
organizerStatus?: string;
|
||||
role?: string;
|
||||
};
|
||||
|
||||
const Profile = () => {
|
||||
const [user, setUser] = useState<UserProfile | null>(null);
|
||||
const [fetching, setFetching] = useState(true);
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
setFetching(true);
|
||||
const response = await fetch(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/view",
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
setUser(result.data);
|
||||
} else {
|
||||
Alert.alert("Error", "Failed to fetch user profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error fetching profile:", error);
|
||||
Alert.alert("Error", "Could not connect to server");
|
||||
} finally {
|
||||
setFetching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateProfile = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
const response = await fetch(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/update",
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
address: user?.address || null,
|
||||
email: user?.email || null,
|
||||
firstName: user?.firstName || null,
|
||||
gender: user?.gender || null,
|
||||
lastName: user?.lastName || null,
|
||||
username: user?.username || null,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile updated successfully");
|
||||
setEditing(false);
|
||||
fetchUserProfile(); // reload updated data
|
||||
} else {
|
||||
Alert.alert("Error", "Failed to update profile");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile:", error);
|
||||
Alert.alert("Error", "Could not update profile");
|
||||
}
|
||||
};
|
||||
|
||||
const pickImage = () => {
|
||||
launchImageLibrary({ mediaType: "photo", quality: 0.5 }, (response) => {
|
||||
if (response.didCancel) return;
|
||||
if (response.errorCode) {
|
||||
Alert.alert("Error", response.errorMessage || "Something went wrong");
|
||||
} else if (response.assets && response.assets.length > 0) {
|
||||
const selectedImage = response.assets[0];
|
||||
setUser((prev) =>
|
||||
prev ? { ...prev, filePath: selectedImage.uri ?? null } : prev
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateImage = async () => {
|
||||
try {
|
||||
const credentials = await Keychain.getGenericPassword();
|
||||
if (!credentials) {
|
||||
Alert.alert("Error", "You are not logged in");
|
||||
return;
|
||||
}
|
||||
const token = credentials.password;
|
||||
|
||||
if (!user?.filePath) {
|
||||
Alert.alert("Error", "Please select an image first");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", {
|
||||
uri: user.filePath,
|
||||
type: "image/jpeg",
|
||||
name: "profile.jpg",
|
||||
} as any);
|
||||
|
||||
const response = await fetch(
|
||||
"https://exotic-humpback-mistakenly.ngrok-free.app/api/user/update/userImg",
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Accept: "*/*",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
if (result.status === "success") {
|
||||
Alert.alert("Success", "Profile image updated successfully");
|
||||
fetchUserProfile();
|
||||
} else {
|
||||
Alert.alert("Error", "Failed to update profile image");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Error updating profile image:", error);
|
||||
Alert.alert("Error", "Could not update profile image");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile();
|
||||
}, []);
|
||||
|
||||
const getProfileImage = () => {
|
||||
if (user?.filePath) return user.filePath;
|
||||
if (user?.imageBlob) return `data:image/jpeg;base64,${user.imageBlob}`;
|
||||
return "https://randomuser.me/api/portraits/men/1.jpg";
|
||||
};
|
||||
|
||||
if (fetching || !user) {
|
||||
return (
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#007AFF" />
|
||||
<Text style={styles.loadingText}>Loading profile...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>User Profile</Text>
|
||||
<TouchableOpacity onPress={fetchUserProfile}>
|
||||
<Ionicons name="refresh" size={24} color="#007AFF" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.profileCard}>
|
||||
<View style={styles.profileHeader}>
|
||||
<Image source={{ uri: getProfileImage() }} style={styles.avatar} />
|
||||
<TouchableOpacity style={styles.cameraIcon} onPress={pickImage}>
|
||||
<Ionicons name="camera" size={18} color="white" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<CustomButton title="Update Image" onPress={handleUpdateImage} />
|
||||
|
||||
{!editing ? (
|
||||
<>
|
||||
<Text style={styles.detail}>👤 {user.firstName} {user.lastName}</Text>
|
||||
<Text style={styles.detail}>📧 {user.email}</Text>
|
||||
<Text style={styles.detail}>📱 {user.mobile}</Text>
|
||||
<Text style={styles.detail}>🔑 {user.username}</Text>
|
||||
<Text style={styles.detail}>🏠 {user.address}</Text>
|
||||
<Text style={styles.detail}>⚧ {user.gender}</Text>
|
||||
<Text style={styles.detail}>🛡 Role: {user.role}</Text>
|
||||
|
||||
<CustomButton title="Edit Profile" onPress={() => setEditing(true)} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CustomInput
|
||||
label="First Name"
|
||||
placeholder="Enter first name"
|
||||
value={user.firstName ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, firstName: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Last Name"
|
||||
placeholder="Enter last name"
|
||||
value={user.lastName ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, lastName: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Email"
|
||||
placeholder="Enter email"
|
||||
value={user.email ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, email: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Username"
|
||||
placeholder="Enter username"
|
||||
value={user.username ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, username: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Address"
|
||||
placeholder="Enter address"
|
||||
value={user.address ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, address: text })}
|
||||
/>
|
||||
<CustomInput
|
||||
label="Gender"
|
||||
placeholder="Enter gender"
|
||||
value={user.gender ?? ""}
|
||||
onChangeText={(text: any) => setUser({ ...user, gender: text })}
|
||||
/>
|
||||
|
||||
<CustomButton title="Save Changes" onPress={updateProfile} />
|
||||
<CustomButton
|
||||
title="Cancel"
|
||||
type="danger"
|
||||
onPress={() => setEditing(false)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: "#f5f7fb" },
|
||||
loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" },
|
||||
loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" },
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 16,
|
||||
paddingTop: 40,
|
||||
backgroundColor: "#fff",
|
||||
alignItems: "center",
|
||||
borderBottomWidth: 1,
|
||||
borderColor: "#eee",
|
||||
},
|
||||
headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" },
|
||||
profileCard: {
|
||||
borderRadius: 16,
|
||||
margin: 16,
|
||||
backgroundColor: "#fff",
|
||||
padding: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 4,
|
||||
},
|
||||
profileHeader: { alignItems: "center", marginBottom: 16 },
|
||||
avatar: { width: 100, height: 100, borderRadius: 50, marginBottom: 8 },
|
||||
cameraIcon: {
|
||||
position: "absolute",
|
||||
right: 110,
|
||||
bottom: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 15,
|
||||
width: 32,
|
||||
height: 32,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
marginBottom: 10,
|
||||
color: "#444",
|
||||
paddingLeft: 4,
|
||||
},
|
||||
inputContainer: { marginBottom: 12 },
|
||||
inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 },
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 10,
|
||||
padding: 12,
|
||||
backgroundColor: "#fdfdfd",
|
||||
color: "#000",
|
||||
fontSize: 15,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: "#007AFF",
|
||||
paddingVertical: 12,
|
||||
borderRadius: 12,
|
||||
alignItems: "center",
|
||||
marginVertical: 6,
|
||||
shadowColor: "#007AFF",
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
buttonSecondary: {
|
||||
backgroundColor: "#e5e5ea",
|
||||
},
|
||||
buttonDanger: {
|
||||
backgroundColor: "#ff3b30",
|
||||
},
|
||||
buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" },
|
||||
buttonTextSecondary: { color: "#333" },
|
||||
buttonTextDanger: { color: "#fff" },
|
||||
});
|
||||
|
||||
export default Profile;
|
||||
@@ -0,0 +1,3 @@
|
||||
export const base_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/"
|
||||
export const LOGIN_URL = `${base_URL}user/generate/otp?mobile=`
|
||||
export const VARIFY_OTP_URL = `${base_URL}user/otp/verify`
|
||||
Reference in New Issue
Block a user