126 lines
3.6 KiB
TypeScript
126 lines
3.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, TouchableOpacity, SafeAreaView, Alert } from 'react-native';
|
|
import { InputField, CheckBox, Button, InlineButton } from '@components';
|
|
import { styles } from './login.styles';
|
|
import authService from '../../services/authService';
|
|
|
|
interface LoginScreenProps {
|
|
onLoginSuccess: (token: string) => void;
|
|
onCreateAccount?: () => void;
|
|
onForgotPassword?: () => void;
|
|
}
|
|
|
|
export function LoginScreen({
|
|
onLoginSuccess,
|
|
onCreateAccount,
|
|
onForgotPassword,
|
|
}: LoginScreenProps) {
|
|
const [emailOrPhone, setEmailOrPhone] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [secureTextEntry, setSecureTextEntry] = useState(true);
|
|
const [rememberMe, setRememberMe] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSignIn = async () => {
|
|
if (!emailOrPhone.trim() || !password.trim()) {
|
|
Alert.alert('Error', 'Please enter both email/phone number and password');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
const token = await authService.signIn(emailOrPhone, password);
|
|
onLoginSuccess(token);
|
|
} catch (error: any) {
|
|
Alert.alert('Login Failed', error.message || 'Something went wrong');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const toggleSecureEntry = () => {
|
|
setSecureTextEntry(prev => !prev);
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.card}>
|
|
{/* Header */}
|
|
<View style={styles.headerContainer}>
|
|
<Text style={styles.title}>Welcome Back</Text>
|
|
<Text style={styles.subtitle}>
|
|
Please enter your credentials to access your account.
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Email or Phone Input */}
|
|
<InputField
|
|
label="EMAIL OR PHONE NUMBER"
|
|
placeholder="ujjwal@sentientgeeks.com"
|
|
value={emailOrPhone}
|
|
onChangeText={setEmailOrPhone}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
|
|
{/* Password Input */}
|
|
<InputField
|
|
label="PASSWORD"
|
|
placeholder="••••••••"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry={secureTextEntry}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
renderRightAccessory={() => (
|
|
<TouchableOpacity
|
|
style={styles.eyeButton}
|
|
onPress={toggleSecureEntry}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.eyeText}>
|
|
{secureTextEntry ? '👁️' : '🙈'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
|
|
{/* Remember Me & Forgot Password */}
|
|
<View style={styles.rowContainer}>
|
|
<CheckBox
|
|
value={rememberMe}
|
|
onValueChange={setRememberMe}
|
|
label="Remember me"
|
|
/>
|
|
<InlineButton
|
|
onPress={onForgotPassword ?? (() => {})}
|
|
highlightedText="Forgot password?"
|
|
highlightedTextStyle={styles.forgotPasswordText}
|
|
/>
|
|
</View>
|
|
|
|
{/* Sign In Button */}
|
|
<Button
|
|
title="SIGN IN"
|
|
onPress={handleSignIn}
|
|
loading={loading}
|
|
/>
|
|
|
|
{/* Divider */}
|
|
<View style={styles.divider} />
|
|
|
|
{/* Create Account */}
|
|
<View style={styles.footerContainer}>
|
|
<InlineButton
|
|
onPress={onCreateAccount ?? (() => {})}
|
|
text="Don't have an account?"
|
|
highlightedText="Create one"
|
|
/>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|