notifi
This commit is contained in:
Abin Toppo
+188
-162
@@ -1,6 +1,4 @@
|
||||
// src/screens/LoginScreen.tsx
|
||||
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -12,27 +10,34 @@ import {
|
||||
Animated,
|
||||
StatusBar,
|
||||
ActivityIndicator,
|
||||
} 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";
|
||||
import LinearGradient from "react-native-linear-gradient";
|
||||
Dimensions,
|
||||
} 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';
|
||||
import LinearGradient from 'react-native-linear-gradient';
|
||||
import Ionicons from '@react-native-vector-icons/ionicons';
|
||||
import CustomAlert from "../components/CostomAlart";
|
||||
import colors from "../components/colors"; // Centralized colors from your file
|
||||
import MaterialRipple from 'react-native-material-ripple'; // For the button ripple effect
|
||||
import CustomAlert from '../components/CostomAlart';
|
||||
import colors from '../components/colors';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const BLOCK_SIZE = width / 3;
|
||||
|
||||
// Note: You will need to install react-native-material-ripple
|
||||
// npm install react-native-material-ripple
|
||||
|
||||
export default function LoginScreen() {
|
||||
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
|
||||
const [mobile, setMobile] = useState("");
|
||||
const [mobile, setMobile] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [alertInfo, setAlertInfo] = useState({
|
||||
visible: false,
|
||||
title: "",
|
||||
message: "",
|
||||
buttons: [] as { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[],
|
||||
title: '',
|
||||
message: '',
|
||||
buttons: [] as { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
|
||||
alertType: 'info' as 'info' | 'success' | 'error',
|
||||
});
|
||||
|
||||
@@ -50,12 +55,12 @@ export default function LoginScreen() {
|
||||
const showAlert = (
|
||||
title: string,
|
||||
message: string,
|
||||
buttons: { text: string; onPress: () => void; style?: "cancel" | "destructive" | "default" }[],
|
||||
alertType: 'info' | 'success' | 'error' = 'info'
|
||||
buttons: { text: string; onPress: () => void; style?: 'cancel' | 'destructive' | 'default' }[],
|
||||
alertType: 'info' | 'success' | 'error' = 'info',
|
||||
) => {
|
||||
setAlertInfo({ visible: true, title, message, buttons, alertType });
|
||||
};
|
||||
|
||||
|
||||
const hideAlert = () => {
|
||||
setAlertInfo({ ...alertInfo, visible: false });
|
||||
};
|
||||
@@ -64,68 +69,70 @@ export default function LoginScreen() {
|
||||
if (mobile.length === 10) {
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log("Login api call:");
|
||||
// FIX: Used the imported LOGIN_URL constant instead of a string literal
|
||||
const res = await axios.get(LOGIN_URL, { params: { mobile } });
|
||||
console.log("Login response:", res.data);
|
||||
if (res.data.statusCode === 200) {
|
||||
navigation.navigate("OtpVarify", { mobile });
|
||||
navigation.navigate('OtpVarify', { mobile });
|
||||
} else {
|
||||
showAlert(
|
||||
"Login Failed",
|
||||
res.data.message || "Could not send OTP.",
|
||||
[{ text: "Try Again", onPress: hideAlert }],
|
||||
'error'
|
||||
);
|
||||
|
||||
showAlert('Login Failed', res.data.message || 'Could not send OTP.', [{ text: 'Try Again', onPress: hideAlert }], 'error');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Login error:", error);
|
||||
showAlert(
|
||||
"An Error Occurred",
|
||||
"Failed to send OTP. Please check your connection and try again.",
|
||||
[{ text: "OK", onPress: hideAlert }],
|
||||
'error'
|
||||
);
|
||||
showAlert('An Error Occurred', 'Failed to send OTP. Please check your connection and try again.', [{ text: 'OK', onPress: hideAlert }], 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} else {
|
||||
showAlert(
|
||||
"Invalid Number",
|
||||
"Please enter a valid 10-digit mobile number.",
|
||||
[{ text: "Got it", onPress: hideAlert }],
|
||||
'info'
|
||||
);
|
||||
showAlert('Invalid Number', 'Please enter a valid 10-digit mobile number.', [{ text: 'Got it', onPress: hideAlert }], 'info');
|
||||
}
|
||||
};
|
||||
|
||||
const colorsBlocks = [
|
||||
colors.pastelPink,
|
||||
colors.pastelBlue,
|
||||
colors.pastelGreen,
|
||||
colors.pastelOrange,
|
||||
colors.pastelBlue,
|
||||
colors.pastelPink,
|
||||
colors.pastelGreen,
|
||||
colors.pastelOrange,
|
||||
colors.pastelPink,
|
||||
];
|
||||
|
||||
return (
|
||||
<LinearGradient colors={[colors.pastelBlue, colors.pastelGreen, colors.pastelOrange]} style={styles.gradientContainer}>
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="dark-content" backgroundColor={colors.pastelOrange} />
|
||||
|
||||
{/* Funky grid blocks background (Unchanged) */}
|
||||
<View style={styles.gridContainer}>
|
||||
{colorsBlocks.map((bgColor, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.gridBlock,
|
||||
{ backgroundColor: bgColor },
|
||||
index % 2 === 0 ? styles.elevatedBlock : {},
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<KeyboardAvoidingView
|
||||
style={styles.container}
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={styles.keyboardAvoidingContainer}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
>
|
||||
<StatusBar barStyle="dark-content" />
|
||||
|
||||
<View style={[styles.shape, styles.shape1]} />
|
||||
<View style={[styles.shape, styles.shape2]} />
|
||||
<View style={[styles.shape, styles.shape3]} />
|
||||
<View style={styles.contentContainer}>
|
||||
<View style={styles.topSection}>
|
||||
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
|
||||
<Text style={styles.brand}>CircleCollect</Text>
|
||||
<Text style={styles.title}>Welcome Back!</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Let's get you signed in to your community.
|
||||
</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
<View style={styles.topSection}>
|
||||
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
|
||||
<Text style={styles.brand}>CircleCollect</Text>
|
||||
<Text style={styles.title}>Welcome!</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Glad to see you again. Let's get you signed in to your community.
|
||||
</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
<View style={styles.formSection}>
|
||||
<Animated.View style={{ opacity: fade, transform: [{ translateY: slide }] }}>
|
||||
<View style={styles.inputContainer}>
|
||||
<Ionicons name="call-outline" size={22} color={colors.textLight} style={styles.inputIcon} />
|
||||
<View style={styles.inputWrapper}>
|
||||
<Ionicons name="call-outline" size={24} color={colors.textLight} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Enter your mobile number"
|
||||
@@ -134,24 +141,41 @@ export default function LoginScreen() {
|
||||
onChangeText={setMobile}
|
||||
keyboardType="phone-pad"
|
||||
maxLength={10}
|
||||
selectionColor={colors.textLight}
|
||||
/>
|
||||
</View>
|
||||
</Animated.View>
|
||||
|
||||
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
|
||||
<MaterialRipple
|
||||
onPress={handleContinue}
|
||||
disabled={loading}
|
||||
rippleColor={colors.white}
|
||||
style={styles.button}
|
||||
rippleCentered
|
||||
rippleContainerBorderRadius={30}
|
||||
>
|
||||
<LinearGradient
|
||||
colors={[colors.pastelPink, colors.pastelOrange]}
|
||||
style={styles.buttonGradient}
|
||||
start={{x: 0, y: 0}}
|
||||
end={{x: 1, y: 1}}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.white} />
|
||||
) : (
|
||||
<View style={styles.buttonContent}>
|
||||
<Text style={styles.buttonText}>Continue</Text>
|
||||
<Ionicons name="arrow-forward-circle-outline" size={22} color={colors.white} style={{marginLeft: 8}} />
|
||||
</View>
|
||||
)}
|
||||
</LinearGradient>
|
||||
</MaterialRipple>
|
||||
<Text style={styles.footerText}>
|
||||
Your privacy is our priority. Your information is always secure.
|
||||
</Text>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
<Animated.View style={[styles.bottomSection, { transform: [{ scale: ctaScale }] }]}>
|
||||
<TouchableOpacity onPress={handleContinue} disabled={loading} activeOpacity={0.8} style={styles.button}>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.white} />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>Continue with Mobile</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.footerText}>
|
||||
Your privacy is our priority. Your information is always secure.
|
||||
</Text>
|
||||
</Animated.View>
|
||||
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
<CustomAlert
|
||||
@@ -161,127 +185,129 @@ export default function LoginScreen() {
|
||||
buttons={alertInfo.buttons}
|
||||
alertType={alertInfo.alertType}
|
||||
/>
|
||||
</LinearGradient>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
gradientContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
gridContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
gridBlock: {
|
||||
width: BLOCK_SIZE,
|
||||
height: BLOCK_SIZE,
|
||||
margin: 2,
|
||||
borderRadius: 16,
|
||||
},
|
||||
elevatedBlock: {
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 5 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 10,
|
||||
elevation: 7,
|
||||
},
|
||||
keyboardAvoidingContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
contentContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
padding: 24,
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
shape: {
|
||||
position: 'absolute',
|
||||
borderRadius: 1000,
|
||||
opacity: 0.6,
|
||||
},
|
||||
shape1: {
|
||||
width: 400,
|
||||
height: 400,
|
||||
backgroundColor: colors.pastelPink,
|
||||
top: -150,
|
||||
left: -100,
|
||||
},
|
||||
shape2: {
|
||||
width: 300,
|
||||
height: 300,
|
||||
backgroundColor: colors.pastelBlue,
|
||||
bottom: -100,
|
||||
right: -120,
|
||||
},
|
||||
shape3: {
|
||||
width: 200,
|
||||
height: 200,
|
||||
backgroundColor: colors.pastelGreen,
|
||||
bottom: '40%',
|
||||
left: -80,
|
||||
opacity: 0.5
|
||||
},
|
||||
topSection: {
|
||||
flex: 0.8,
|
||||
justifyContent: "center",
|
||||
alignItems: 'center'
|
||||
},
|
||||
formSection: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-start'
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
brand: {
|
||||
fontSize: 24,
|
||||
fontWeight: "600",
|
||||
fontSize: 28,
|
||||
fontWeight: '700',
|
||||
color: colors.primary,
|
||||
textAlign: "center",
|
||||
letterSpacing: 1.5,
|
||||
textAlign: 'center',
|
||||
letterSpacing: 2,
|
||||
marginBottom: 16,
|
||||
textShadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 2,
|
||||
},
|
||||
title: {
|
||||
fontSize: 38,
|
||||
fontWeight: "bold",
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold',
|
||||
color: colors.textDark,
|
||||
textAlign: "center",
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
marginBottom: 14,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
color: colors.textLight,
|
||||
textAlign: "center",
|
||||
lineHeight: 24,
|
||||
color: colors.textDark,
|
||||
textAlign: 'center',
|
||||
lineHeight: 26,
|
||||
maxWidth: 320,
|
||||
},
|
||||
inputContainer: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: colors.white,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.inputBorder,
|
||||
paddingHorizontal: 16,
|
||||
marginTop: 32,
|
||||
shadowColor: colors.black,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 10,
|
||||
elevation: 3,
|
||||
inputWrapper: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.85)',
|
||||
borderRadius: 36,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.pastelPink,
|
||||
paddingHorizontal: 20,
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 14,
|
||||
elevation: 8,
|
||||
},
|
||||
inputIcon: {
|
||||
marginRight: 12,
|
||||
marginRight: 16,
|
||||
},
|
||||
input: {
|
||||
flex: 1,
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: colors.textLight,
|
||||
height: 58,
|
||||
fontSize: 16,
|
||||
color: colors.textDark,
|
||||
},
|
||||
bottomSection: {
|
||||
paddingBottom: Platform.OS === "ios" ? 20 : 10,
|
||||
paddingHorizontal: 10
|
||||
alignItems: 'center',
|
||||
paddingBottom: Platform.OS === 'ios' ? 20 : 10,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 18,
|
||||
width: '100%',
|
||||
borderRadius: 30,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
shadowColor: colors.primary,
|
||||
shadowOffset: { width: 0, height: 8 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 15,
|
||||
elevation: 8,
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 20,
|
||||
elevation: 14,
|
||||
marginTop: 20,
|
||||
},
|
||||
buttonGradient: {
|
||||
borderRadius: 30,
|
||||
paddingVertical: 18,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonContent: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
buttonText: {
|
||||
color: colors.white,
|
||||
fontWeight: "700",
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
fontSize: 18,
|
||||
},
|
||||
footerText: {
|
||||
textAlign: "center",
|
||||
color: colors.textLight,
|
||||
fontSize: 12,
|
||||
marginTop: 20,
|
||||
fontSize: 14,
|
||||
color: 'rgba(0,0,0,0.5)',
|
||||
marginTop: 28,
|
||||
textAlign: 'center',
|
||||
maxWidth: 300,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user