94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { getStyles } from './loginScreen.styles';
|
|
import { CustomInput, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { useLoginScreen } from './hooks/useLoginScreen';
|
|
import { RootState, useAppSelector } from '@store';
|
|
|
|
export const LoginScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const { mobileNumber, error, onChangeMobileNumber, handleLogin } =
|
|
useLoginScreen();
|
|
|
|
const { isLoading } = useAppSelector((state: RootState) => state.auth);
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView
|
|
contentContainerStyle={styles.scrollContainer}
|
|
showsVerticalScrollIndicator={false}
|
|
bounces={false}
|
|
>
|
|
{/* Hero / branding */}
|
|
<View style={styles.hero}>
|
|
<View style={styles.heroDecoCircleLg} />
|
|
<View style={styles.heroDecoCircleSm} />
|
|
<View style={styles.logoBadge}>
|
|
<Text style={styles.logoEmoji}>🛵</Text>
|
|
</View>
|
|
<Text style={styles.brandName}>QuickCart</Text>
|
|
<Text style={styles.brandTagline}>Delivered fast, every time</Text>
|
|
</View>
|
|
|
|
{/* Form card */}
|
|
<View style={styles.formCard}>
|
|
<View style={styles.headerContainer}>
|
|
<Text style={styles.title}>Welcome back</Text>
|
|
<Text style={styles.subtitle}>Login to continue</Text>
|
|
</View>
|
|
|
|
<View style={styles.formContainer}>
|
|
<CustomInput
|
|
label="Mobile number"
|
|
placeholder="98765 43210"
|
|
keyboardType="phone-pad"
|
|
maxLength={10}
|
|
value={mobileNumber}
|
|
onChangeText={onChangeMobileNumber}
|
|
error={error}
|
|
leftElement={
|
|
<View style={styles.prefixChip}>
|
|
<Text style={styles.prefixFlag}>🇮🇳</Text>
|
|
<Text style={styles.prefixText}>+91</Text>
|
|
</View>
|
|
}
|
|
/>
|
|
{!error && (
|
|
<Text style={styles.helperText}>
|
|
We'll send a one-time password to verify this number
|
|
</Text>
|
|
)}
|
|
|
|
<PrimaryButton
|
|
title={isLoading ? 'Loading...' : 'Get OTP'}
|
|
onPress={handleLogin}
|
|
style={{ marginTop: 12 }}
|
|
disabled={isLoading}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.footerSpacer} />
|
|
|
|
<Text style={styles.termsText}>
|
|
By continuing, you agree to our{' '}
|
|
<Text style={styles.termsLink}>Terms of Service</Text> and{' '}
|
|
<Text style={styles.termsLink}>Privacy Policy</Text>
|
|
</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
};
|