Mansi/demoapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add user registration component and authentication services

Browse Source 
- Implemented Register component for user sign-up with form validation and network status handling.
- Created authAPI service for handling user login and registration with online/offline support.
- Developed localStorage service for managing user data and sessions offline.
- Introduced networkService for detecting online/offline status and managing connectivity.
- Defined authentication types for requests and responses.
- Added TypeScript configuration for the project.
This commit is contained in:
Mansi
2025-12-11 23:33:43 +05:30
parent a7aa9e53a7
commit 801725edf3
75 changed files with 15734 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
Login.tsx Normal file
View File

@@ -0,0 +1,262 @@
import React from 'react';
import {
Image,
ScrollView,
StatusBar,
StyleSheet,
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
export function Login() {
const [isVisible, setIsVisible] = React.useState(false);
const [isChecked, setIsChecked] = React.useState(false);
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle={'dark-content'} />
<ScrollView
contentContainerStyle={styles.scrollContainer}
bounces={false}
showsVerticalScrollIndicator={false}
>
<View style={styles.logoContainer}>
<View style={styles.logoWrapper}>
<Image
source={require('./assets/img/logo.png')}
style={styles.logo}
/>
</View>
</View>
<View style={styles.formContainer}>
<Text style={styles.title}>Login</Text>
<Text style={styles.subtitle}>
Welcome back. Enter your credentials to{'\n'}access your account
</Text>
<Text style={styles.label}>Email Address*</Text>
<View style={styles.inputContainer}>
<TextInput
placeholder="Enter Email"
style={styles.input}
placeholderTextColor="#A0A0A0"
/>
</View>
<Text style={styles.label}>Password*</Text>
<View style={styles.passwordContainer}>
<TextInput
placeholder="Password"
style={styles.input}
placeholderTextColor="#A0A0A0"
secureTextEntry={!isVisible}
/>
<TouchableOpacity
onPress={() => setIsVisible(!isVisible)}
style={styles.eyeButton}
>
<Image
source={require('./assets/img/View_light.png')}
style={[
styles.eyeIcon,
{ tintColor: isVisible ? '#FDA913' : '#707070' },
]}
/>
</TouchableOpacity>
</View>
<View style={styles.rowBetween}>
<View style={styles.checkboxRow}>
<TouchableOpacity
onPress={() => setIsChecked(!isChecked)}
style={styles.checkboxBorder}
>
<View
style={[
styles.checkboxFill,
{ backgroundColor: isChecked ? '#02364E' : 'transparent' },
]}
>
<Image
source={require('./assets/img/check.png')}
style={styles.checkIcon}
/>
</View>
</TouchableOpacity>
<Text style={styles.checkLabel}>Keep me signed in</Text>
</View>
<Text style={styles.forgotText}>Forget Password?</Text>
</View>
<TouchableOpacity style={styles.loginButton}>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
);
}
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f5f5f5",
justifyContent: "center",
},
scrollContainer: {
flexGrow: 1,
},
logoContainer: {
paddingHorizontal: 15,
paddingTop: 20,
paddingBottom: 20,
},
logoWrapper: {
width: "100%",
height: 50,
},
logo: {
width: "50%",
height: "100%",
resizeMode: "contain",
},
formContainer: {
flex: 1,
paddingHorizontal: 15,
},
title: {
color: "#090A0A",
fontFamily: "Gilroy-SemiBold",
fontSize: 32,
fontWeight: "400",
marginBottom: 10,
},
subtitle: {
color: "#090A0A",
fontFamily: "Gilroy-Regular",
fontSize: 16,
fontWeight: "400",
marginBottom: 30,
lineHeight: 20,
},
label: {
color: "#111111",
fontFamily: "Gilroy-Regular",
fontSize: 14,
marginBottom: 7,
},
inputContainer: {
marginBottom: 20,
height: 50,
borderRadius: 16,
borderWidth: 1,
borderColor: "#CFCFCF",
},
input: {
flex: 1,
paddingHorizontal: 15,
fontSize: 14,
fontFamily: "Gilroy-Regular",
color: "#111111",
},
passwordContainer: {
flexDirection: "row",
marginBottom: 20,
height: 50,
borderRadius: 16,
borderWidth: 1,
borderColor: "#CFCFCF",
},
eyeButton: {
justifyContent: "center",
alignItems: "center",
paddingHorizontal: 15,
},
eyeIcon: {
width: 20,
height: 20,
resizeMode: "contain",
},
rowBetween: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 40,
},
checkboxRow: {
flexDirection: "row",
alignItems: "center",
},
checkboxBorder: {
width: 15,
height: 15,
borderRadius: 2,
borderWidth: 1,
borderColor: "#CFCFCF",
justifyContent: "center",
alignItems: "center",
marginRight: 8,
},
checkboxFill: {
width: 15,
height: 15,
borderRadius: 2,
alignItems: "center",
justifyContent: "center",
},
checkIcon: {
width: "70%",
height: "70%",
resizeMode: "contain",
tintColor: "#ffffff",
},
checkLabel: {
fontFamily: "Gilroy-Regular",
fontSize: 14,
color: "#191D23",
},
forgotText: {
textDecorationLine: "underline",
color: "#111111",
fontFamily: "Gilroy-Regular",
},
loginButton: {
height: 50,
borderRadius: 16,
backgroundColor: "#FDA913",
justifyContent: "center",
alignItems: "center",
marginBottom: 20,
},
loginText: {
color: "#FFFFFF",
fontFamily: "Gilroy-SemiBold",
fontSize: 18,
},
});