From 737c3a486eb65ba03d58f13241bc08435c09b486 Mon Sep 17 00:00:00 2001 From: Jaanu423 Date: Mon, 15 Sep 2025 11:18:39 +0530 Subject: [PATCH] update login and verify otp --- src/screens/LoginScreen.tsx | 23 +- src/screens/OtpVarificationScreen.tsx | 17 +- src/screens/profile/Profile.tsx | 682 ++++++++++++++++++++------ src/utils/ApiUrls.tsx | 2 +- 4 files changed, 545 insertions(+), 179 deletions(-) diff --git a/src/screens/LoginScreen.tsx b/src/screens/LoginScreen.tsx index baab763..048ca04 100644 --- a/src/screens/LoginScreen.tsx +++ b/src/screens/LoginScreen.tsx @@ -27,9 +27,10 @@ const theme = { }; export default function LoginScreen() { + + const navigation = useNavigation>(); const [mobile, setMobile] = useState(""); - const navigation = useNavigation>(); - + const [loading, setLoading] = useState(false); // animations const fade = useRef(new Animated.Value(0)).current; @@ -43,17 +44,21 @@ export default function LoginScreen() { ]).start(); }, []); - const handleContinue = async () => { + const handleContinue = async () => { if (mobile.length === 10) { - console.log("Mobile submitted:", mobile); + setLoading(true); try { - const res = await axios.get(LOGIN_URL+mobile) - console.log('loginres',res.data) - if(res.data.statusCode === 200){ - navigation.navigate('OtpVarify', { mobile: mobile }) + console.log("Mobile submitted:", mobile); + 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) { - + console.error("Login error:", error); + Alert.alert("Error", "Failed to send OTP. Please try again."); + }finally { + setLoading(false); } } else { Alert.alert("Please enter a valid 10-digit mobile number"); diff --git a/src/screens/OtpVarificationScreen.tsx b/src/screens/OtpVarificationScreen.tsx index 83bca20..994433b 100644 --- a/src/screens/OtpVarificationScreen.tsx +++ b/src/screens/OtpVarificationScreen.tsx @@ -14,10 +14,11 @@ import { KeyboardAvoidingView, StatusBar, Alert, + ToastAndroid, } from "react-native"; import { RootStackParamList } from "../navigation/AppNavigator"; import * as Keychain from "react-native-keychain"; -import { LOGIN_URL } from "../utils/ApiUrls"; +import { base_URL, LOGIN_URL } from "../utils/ApiUrls"; import { StackNavigationProp } from "@react-navigation/stack"; const theme = { @@ -76,7 +77,7 @@ export default function OtpVerificationScreen() { try { const payload = { mobile, otp }; const res = await axios.post( - "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/otp/verify", + `${base_URL}user/otp/verify`, payload, { headers: { "Content-Type": "application/json", Accept: "*/*" } } ); @@ -85,11 +86,10 @@ export default function OtpVerificationScreen() { if (res.data.statusCode === 200) { saveToken(res.data.data); navigation.navigate('Home') - - } + ToastAndroid.show("OTP Verified Successfully!", ToastAndroid.SHORT);} } catch (err: any) { console.error("❌ OTP Verification Error:", err?.response?.data || err.message); - Alert.alert("Error", "Failed to verify OTP. Please try again."); + ToastAndroid.show(err.message || "Invalid OTP. Please try again.", ToastAndroid.SHORT); } }; @@ -104,11 +104,12 @@ export default function OtpVerificationScreen() { ); console.log("📩 OTP Resent:", res.data); - - Alert.alert("OTP Sent", "A new OTP has been sent to your mobile."); + setCode(Array(CELL_COUNT).fill("")); + inputs.current[0]?.focus(); + ToastAndroid.show("OTP Sent", ToastAndroid.SHORT); } catch (err: any) { console.error("❌ Resend OTP Error:", err?.response?.data || err.message); - Alert.alert("Error", "Failed to resend OTP. Try again later."); + ToastAndroid.show("Failed to resend OTP. Try again later.", ToastAndroid.SHORT); } finally { setIsResending(false); } diff --git a/src/screens/profile/Profile.tsx b/src/screens/profile/Profile.tsx index 790a7b6..f04da5b 100644 --- a/src/screens/profile/Profile.tsx +++ b/src/screens/profile/Profile.tsx @@ -7,16 +7,116 @@ import { Image, TouchableOpacity, Alert, - TextInput, ActivityIndicator, + StatusBar, + TextInput, } from "react-native"; import * as Keychain from "react-native-keychain"; -import Ionicons from "react-native-vector-icons/Ionicons"; +import {Ionicons} from "@react-native-vector-icons/ionicons"; import { launchImageLibrary } from "react-native-image-picker"; -import { CustomButton, CustomInput } from "../../common/Custom"; +import { IconProps } from "react-native-elements"; +import { base_URL } from "../../utils/ApiUrls"; -// ✅ Reusable Custom Input +type CustomButtonProps = { + title: string; + onPress: () => void; + type?: "primary" | "secondary" | "danger" | "outline"; + icon?: React.ComponentProps['name']; + style?: any; +}; + +const CustomButton = ({ + title, + onPress, + type = "primary", + icon, + style +}: CustomButtonProps) => { + const getButtonStyle = () => { + switch (type) { + case "secondary": + return [styles.button, styles.buttonSecondary]; + case "danger": + return [styles.button, styles.buttonDanger]; + case "outline": + return [styles.button, styles.buttonOutline]; + default: + return styles.button; + } + }; + + const getTextStyle = () => { + switch (type) { + case "secondary": + return [styles.buttonText, styles.buttonTextSecondary]; + case "danger": + return [styles.buttonText, styles.buttonTextDanger]; + case "outline": + return [styles.buttonText, styles.buttonTextOutline]; + default: + return styles.buttonText; + } + }; + + return ( + + {icon && ( + s && typeof s === "object" && "color" in s)?.color || "#fff" + : (getTextStyle() as any).color || "#fff" + } + style={styles.buttonIcon} + /> + )} + {title} + + ); +}; + +// Custom Input Component +type CustomInputProps = { + label?: string; + placeholder?: string; + value?: string; + onChangeText?: (text: string) => void; + icon?: React.ComponentProps['name']; + [key: string]: any; +}; + +const CustomInput = ({ + label, + placeholder, + value, + onChangeText, + icon, + ...props +}: CustomInputProps) => { + return ( + + {label && {label}} + + {icon && } + + + + ); +}; type UserProfile = { id: string; @@ -41,6 +141,7 @@ const Profile = () => { const [user, setUser] = useState(null); const [fetching, setFetching] = useState(true); const [editing, setEditing] = useState(false); + const [imageUpdating, setImageUpdating] = useState(false); const fetchUserProfile = async () => { try { @@ -53,7 +154,7 @@ const Profile = () => { setFetching(true); const response = await fetch( - "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/view", + `${base_URL}user/profile/view`, { method: "GET", headers: { @@ -87,7 +188,7 @@ const Profile = () => { const token = credentials.password; const response = await fetch( - "https://exotic-humpback-mistakenly.ngrok-free.app/api/user/profile/update", + `${base_URL}user/profile/update`, { method: "PUT", headers: { @@ -135,230 +236,489 @@ const Profile = () => { }; 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"); + 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; + } + + setImageUpdating(true); + + const formData = new FormData(); + formData.append("file", { + uri: user.filePath, + type: "image/jpeg", + name: "profile.jpg", + } as any); + + const response = await fetch( + `${base_URL}user/update/userImg`, + { + method: "PUT", + headers: { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }, + body: formData, + } + ); + + const result = await response.json(); + if (result.status === "success") { + Alert.alert("Success", "Profile image updated successfully"); + + // If API returns updated image, set it + if (result.data?.imageBlob) { + setUser((prev) => prev ? { ...prev, imageBlob: result.data.imageBlob, filePath: null } : prev); + } else { + // Otherwise, keep the local filePath until next fetch + setUser((prev) => prev ? { ...prev, filePath: user.filePath } : prev); + } + + // Refresh profile from API as well + fetchUserProfile(); + } else { + Alert.alert("Error", result.message || "Failed to update profile image"); + } + } catch (error) { + console.error("❌ Error updating profile image:", error); + Alert.alert("Error", "Could not update profile image"); + } finally { + setImageUpdating(false); + } +}; + 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"; - }; + console.log("user image :", user?.filePath); +const getProfileImage = () => { + if (user?.imageBlob) { + return `data:image/jpeg;base64,${user.imageBlob}`; + } + if (user?.filePath) { + return user.filePath; + } + return "https://randomuser.me/api/portraits/men/1.jpg"; +}; + if (fetching || !user) { return ( - + Loading profile... ); } return ( - <> + + + + {/* Header */} User Profile - - + + - + + {/* Profile Card */} - - - - - + {/* Profile Image Section */} + + + console.log("Error loading image")} + /> + + + + + + - - {!editing ? ( <> - 👤 {user.firstName} {user.lastName} - 📧 {user.email} - 📱 {user.mobile} - 🔑 {user.username} - 🏠 {user.address} - ⚧ {user.gender} - 🛡 Role: {user.role} + {/* Profile Details */} + + Personal Information + + + Become Organizer + - setEditing(true)} /> + + + + Name + {user.firstName} {user.lastName} + + + + + + + Email + {user.email || "Not provided"} + + + + + + + Mobile + {user.mobile || "Not provided"} + + + + + + + Username + {user.username} + + + + + + + Address + {user.address || "Not provided"} + + + + + + + Gender + {user.gender || "Not specified"} + + + + + + + Role + {user.role || "User"} + + + + + setEditing(true)} + icon="create" + style={styles.editButton} + /> ) : ( <> - setUser({ ...user, firstName: text })} - /> - setUser({ ...user, lastName: text })} - /> - setUser({ ...user, email: text })} - /> - setUser({ ...user, username: text })} - /> - setUser({ ...user, address: text })} - /> - setUser({ ...user, gender: text })} - /> + {/* Edit Form */} + + Edit Profile + + setUser({ ...user, firstName: text })} + icon="person" + /> + + setUser({ ...user, lastName: text })} + icon="person" + /> + + setUser({ ...user, email: text })} + icon="mail" + keyboardType="email-address" + /> + + setUser({ ...user, username: text })} + icon="at" + /> + + setUser({ ...user, address: text })} + icon="location" + multiline + /> + + setUser({ ...user, gender: text })} + icon="male-female" + /> + - - setEditing(false)} - /> + + + setEditing(false)} + icon="close" + style={styles.cancelButton} + /> + )} - + ); }; const styles = StyleSheet.create({ - container: { flex: 1, backgroundColor: "#f5f7fb" }, - loadingContainer: { flex: 1, justifyContent: "center", alignItems: "center" }, - loadingText: { marginTop: 10, fontSize: 16, color: "#007AFF" }, + container: { + flex: 1, + backgroundColor: "#f8fafc" + }, + loadingContainer: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#f8fafc" + }, + loadingText: { + marginTop: 10, + fontSize: 16, + color: "#64748b" + }, header: { flexDirection: "row", justifyContent: "space-between", - padding: 16, - paddingTop: 40, - backgroundColor: "#fff", alignItems: "center", - borderBottomWidth: 1, - borderColor: "#eee", + padding: 16, + paddingTop: 50, + backgroundColor: "#6366f1", + borderBottomLeftRadius: 20, + borderBottomRightRadius: 20, + elevation: 4, + shadowColor: "#000", + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.2, + shadowRadius: 4, + }, + headerTitle: { + fontSize: 22, + fontWeight: "700", + color: "#fff" + }, + refreshButton: { + padding: 4, + }, + scrollContainer: { + flex: 1, }, - headerTitle: { fontSize: 20, fontWeight: "600", color: "#333" }, profileCard: { - borderRadius: 16, + borderRadius: 20, margin: 16, backgroundColor: "#fff", padding: 20, shadowColor: "#000", shadowOpacity: 0.1, - shadowRadius: 6, - elevation: 4, + shadowRadius: 10, + shadowOffset: { width: 0, height: 4 }, + elevation: 5, + }, + profileImageSection: { + alignItems: "center", + marginBottom: 24, + paddingBottom: 20, + borderBottomWidth: 1, + borderBottomColor: "#f1f5f9", + }, + avatarContainer: { + position: "relative", + marginBottom: 16, + }, + avatar: { + width: 120, + height: 120, + borderRadius: 60, + borderWidth: 4, + borderColor: "#e2e8f0", }, - 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, + right: 0, + bottom: 0, + backgroundColor: "#6366f1", + borderRadius: 20, + width: 40, + height: 40, justifyContent: "center", alignItems: "center", + borderWidth: 3, + borderColor: "#fff", + elevation: 2, }, - detail: { + updateImageButton: { + width: "80%", + }, + detailsSection: { + marginBottom: 24, + }, + sectionTitle: { + fontSize: 18, + fontWeight: "700", + color: "#1e293b", + marginBottom: 16, + paddingBottom: 8, + borderBottomWidth: 1, + borderBottomColor: "#f1f5f9", + }, + detailRow: { + flexDirection: "row", + alignItems: "center", + marginBottom: 16, + paddingHorizontal: 8, + }, + detailIcon: { + marginRight: 12, + }, + detailLabel: { + fontSize: 12, + color: "#64748b", + marginBottom: 2, + }, + detailText: { fontSize: 16, - marginBottom: 10, - color: "#444", - paddingLeft: 4, + color: "#334155", + fontWeight: "500", + }, + editButton: { + marginTop: 8, + }, + editSection: { + marginBottom: 20, + }, + editButtons: { + gap: 12, + }, + saveButton: { + marginTop: 8, + }, + cancelButton: { + marginTop: 4, + }, + inputContainer: { + marginBottom: 16, + }, + inputLabel: { + fontSize: 14, + fontWeight: "600", + color: "#374151", + marginBottom: 6, + }, + inputWrapper: { + flexDirection: "row", + alignItems: "center", + position: "relative", + }, + inputIcon: { + position: "absolute", + left: 12, + zIndex: 1, }, - inputContainer: { marginBottom: 12 }, - inputLabel: { fontSize: 14, fontWeight: "500", color: "#555", marginBottom: 6 }, input: { borderWidth: 1, - borderColor: "#ddd", - borderRadius: 10, + borderColor: "#d1d5db", + borderRadius: 12, padding: 12, - backgroundColor: "#fdfdfd", - color: "#000", - fontSize: 15, + backgroundColor: "#fff", + color: "#1f2937", + fontSize: 16, + flex: 1, + }, + inputWithIcon: { + paddingLeft: 40, }, button: { - backgroundColor: "#007AFF", - paddingVertical: 12, + backgroundColor: "#6366f1", + paddingVertical: 14, borderRadius: 12, alignItems: "center", - marginVertical: 6, - shadowColor: "#007AFF", - shadowOpacity: 0.2, - shadowRadius: 4, - elevation: 3, + justifyContent: "center", + flexDirection: "row", + shadowColor: "#6366f1", + shadowOpacity: 0.3, + shadowRadius: 6, + shadowOffset: { width: 0, height: 3 }, + elevation: 4, }, buttonSecondary: { - backgroundColor: "#e5e5ea", + backgroundColor: "#f1f5f9", }, buttonDanger: { - backgroundColor: "#ff3b30", + backgroundColor: "#ef4444", + }, + buttonOutline: { + backgroundColor: "transparent", + borderWidth: 1, + borderColor: "#6366f1", + }, + buttonText: { + color: "#fff", + fontSize: 16, + fontWeight: "600", + }, + buttonTextSecondary: { + color: "#334155", + }, + buttonTextDanger: { + color: "#fff", + }, + buttonTextOutline: { + color: "#6366f1", + }, + buttonIcon: { + marginRight: 8, }, - buttonText: { color: "#fff", fontSize: 16, fontWeight: "600" }, - buttonTextSecondary: { color: "#333" }, - buttonTextDanger: { color: "#fff" }, }); -export default Profile; +export default Profile; \ No newline at end of file diff --git a/src/utils/ApiUrls.tsx b/src/utils/ApiUrls.tsx index 46771f4..6241a2b 100644 --- a/src/utils/ApiUrls.tsx +++ b/src/utils/ApiUrls.tsx @@ -1,3 +1,3 @@ -export const base_URL = "https://exotic-humpback-mistakenly.ngrok-free.app/api/" +export const base_URL = "https://api.godemo.in/FundCollect/api/" export const LOGIN_URL = `${base_URL}user/generate/otp?mobile=` export const VARIFY_OTP_URL = `${base_URL}user/otp/verify` \ No newline at end of file