81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, SafeAreaView, Alert } from 'react-native';
|
|
import { InputField, Button, InlineButton } from '@components';
|
|
import { styles } from './forgotPassword.styles';
|
|
|
|
interface ForgotPasswordScreenProps {
|
|
onSendCode: (emailOrPhone: string) => void;
|
|
onSignInPress: () => void;
|
|
}
|
|
|
|
export function ForgotPasswordScreen({
|
|
onSendCode,
|
|
onSignInPress,
|
|
}: ForgotPasswordScreenProps) {
|
|
const [emailOrPhone, setEmailOrPhone] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSendCode = async () => {
|
|
if (!emailOrPhone.trim()) {
|
|
Alert.alert('Error', 'Please enter your email or phone number');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
// Simulating verification code API call
|
|
await new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve('');
|
|
}, 1000);
|
|
});
|
|
Alert.alert('Success', `Verification code sent to ${emailOrPhone}`);
|
|
onSendCode(emailOrPhone);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
<View style={styles.card}>
|
|
{/* Header */}
|
|
<View style={styles.headerContainer}>
|
|
<Text style={styles.title}>Forgot Password</Text>
|
|
<Text style={styles.subtitle}>
|
|
Enter your registered email address or phone number to reset your password.
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Email or Phone Input */}
|
|
<InputField
|
|
label="EMAIL OR PHONE NUMBER"
|
|
placeholder="email@example.com or phone number"
|
|
value={emailOrPhone}
|
|
onChangeText={setEmailOrPhone}
|
|
keyboardType="email-address"
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
/>
|
|
|
|
{/* Send Verification Code Button */}
|
|
<Button
|
|
title="SEND VERIFICATION CODE"
|
|
onPress={handleSendCode}
|
|
loading={loading}
|
|
/>
|
|
|
|
{/* Remember your password? Sign In */}
|
|
<View style={styles.footerContainer}>
|
|
<InlineButton
|
|
onPress={onSignInPress}
|
|
text="Remember your password?"
|
|
highlightedText="Sign In"
|
|
/>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|