login complete

2025-09-10 16:28:58 +05:30
parent bb937d5314
commit adf6ed9730
9 changed files with 3728 additions and 34 deletions
@@ -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,
+  },
+});