Your Name
3 weeks ago
8 changed files with 1289 additions and 33 deletions
@ -0,0 +1,377 @@ |
|||||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
StyleSheet, |
||||||
|
TouchableOpacity, |
||||||
|
TextInput, |
||||||
|
Modal, |
||||||
|
ActivityIndicator, |
||||||
|
Platform, |
||||||
|
} from "react-native"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
import AsyncStorage from "@react-native-async-storage/async-storage"; |
||||||
|
import { VerificationCodeInput } from "./VerificationCodeInput"; |
||||||
|
|
||||||
|
type ForgotEmailPasswordProps = { |
||||||
|
visible?: boolean; |
||||||
|
onClose?: () => void; |
||||||
|
email?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export const ForgotEmailPassword = ({
|
||||||
|
visible = true,
|
||||||
|
onClose = () => {},
|
||||||
|
email = "" |
||||||
|
}: ForgotEmailPasswordProps) => { |
||||||
|
const { t } = useTranslation(); |
||||||
|
|
||||||
|
// States
|
||||||
|
const [userEmail, setUserEmail] = useState(email); |
||||||
|
const [emailError, setEmailError] = useState(false); |
||||||
|
const [loading, setLoading] = useState(false); |
||||||
|
const [error, setError] = useState<string | null>(null); |
||||||
|
const [showVerificationModal, setShowVerificationModal] = useState(false); |
||||||
|
|
||||||
|
// Refs
|
||||||
|
const emailInputRef = useRef<TextInput>(null); |
||||||
|
|
||||||
|
// Focus email input when modal opens
|
||||||
|
useEffect(() => { |
||||||
|
if (visible && !email) { |
||||||
|
const timer = setTimeout(() => { |
||||||
|
if (emailInputRef.current) { |
||||||
|
emailInputRef.current.focus(); |
||||||
|
} |
||||||
|
}, 300); |
||||||
|
|
||||||
|
return () => clearTimeout(timer); |
||||||
|
} |
||||||
|
}, [visible, email]); |
||||||
|
|
||||||
|
// Set initial email value if provided
|
||||||
|
useEffect(() => { |
||||||
|
if (email) { |
||||||
|
setUserEmail(email); |
||||||
|
} |
||||||
|
}, [email]); |
||||||
|
|
||||||
|
// Validate email
|
||||||
|
const validateEmail = (email: string): boolean => { |
||||||
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
||||||
|
return emailRegex.test(email); |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle email change
|
||||||
|
const handleEmailChange = (text: string) => { |
||||||
|
setUserEmail(text); |
||||||
|
if (text) { |
||||||
|
setEmailError(!validateEmail(text)); |
||||||
|
} else { |
||||||
|
setEmailError(false); |
||||||
|
} |
||||||
|
setError(null); |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle submit
|
||||||
|
const handleSubmit = async () => { |
||||||
|
if (!validateEmail(userEmail)) { |
||||||
|
setEmailError(true); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
try { |
||||||
|
setLoading(true); |
||||||
|
// TODO: Replace with actual API call to send reset code
|
||||||
|
// For example: await userApi.sendEmailPasswordResetCode({ email: userEmail });
|
||||||
|
|
||||||
|
// Log reset method
|
||||||
|
console.log("Password reset method: Email"); |
||||||
|
try { |
||||||
|
// Store reset method in AsyncStorage or other storage
|
||||||
|
await AsyncStorage.setItem("@password_reset_method", "email"); |
||||||
|
} catch (storageError) { |
||||||
|
console.error("Failed to store reset method:", storageError); |
||||||
|
} |
||||||
|
|
||||||
|
// Simulate API call success
|
||||||
|
setTimeout(() => { |
||||||
|
setLoading(false); |
||||||
|
setShowVerificationModal(true); |
||||||
|
}, 1500); |
||||||
|
} catch (error) { |
||||||
|
setLoading(false); |
||||||
|
setError('Failed to send reset code. Please try again.'); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle verification code submission
|
||||||
|
const handleVerifyCode = async (code: string): Promise<boolean> => { |
||||||
|
// TODO: Replace with actual API call to verify code
|
||||||
|
// For example: return await userApi.verifyEmailPasswordResetCode({
|
||||||
|
// email: userEmail,
|
||||||
|
// code: code
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Simulate verification for demo
|
||||||
|
return new Promise((resolve) => { |
||||||
|
setTimeout(() => { |
||||||
|
// For demo: code "123456" is valid, others are invalid
|
||||||
|
resolve(code === "123456"); |
||||||
|
}, 1500); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle resend code
|
||||||
|
const handleResendCode = async (): Promise<void> => { |
||||||
|
// TODO: Replace with actual API call to resend code
|
||||||
|
// For example: await userApi.sendEmailPasswordResetCode({
|
||||||
|
// email: userEmail
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Simulate resend for demo
|
||||||
|
return new Promise((resolve) => { |
||||||
|
setTimeout(() => { |
||||||
|
resolve(); |
||||||
|
}, 1500); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle reset password
|
||||||
|
const handleResetPassword = async (password: string): Promise<boolean> => { |
||||||
|
// TODO: Replace with actual API call to reset password
|
||||||
|
// For example: return await userApi.resetEmailPassword({
|
||||||
|
// email: userEmail,
|
||||||
|
// password: password
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Simulate API call for demo
|
||||||
|
return new Promise((resolve) => { |
||||||
|
setTimeout(() => { |
||||||
|
// On success, close this modal too
|
||||||
|
if (onClose) onClose(); |
||||||
|
resolve(true); // Always succeed for demo
|
||||||
|
}, 1500); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
visible={visible} |
||||||
|
animationType="slide" |
||||||
|
transparent={true} |
||||||
|
onRequestClose={onClose} |
||||||
|
statusBarTranslucent={true} |
||||||
|
> |
||||||
|
<View style={styles.modalContainer}> |
||||||
|
<View style={styles.forgotPasswordContainer}> |
||||||
|
<View style={styles.forgotPasswordHeader}> |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.forgotPasswordCloseButton} |
||||||
|
onPress={onClose} |
||||||
|
activeOpacity={0.7} |
||||||
|
> |
||||||
|
<Text style={styles.forgotPasswordCloseButtonText}>✕</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<Text style={styles.forgotPasswordTitle}>{t("login.forgotPassword.title")}</Text> |
||||||
|
</View> |
||||||
|
|
||||||
|
<View style={styles.forgotPasswordContent}> |
||||||
|
<Text style={styles.forgotPasswordDescription}> |
||||||
|
{t("login.forgotPassword.emailDescription")} |
||||||
|
</Text> |
||||||
|
|
||||||
|
<View style={styles.emailInputContainer}> |
||||||
|
<TextInput |
||||||
|
ref={emailInputRef} |
||||||
|
style={styles.emailInput} |
||||||
|
placeholder={t("email")} |
||||||
|
value={userEmail} |
||||||
|
onChangeText={handleEmailChange} |
||||||
|
keyboardType="email-address" |
||||||
|
autoCapitalize="none" |
||||||
|
autoCorrect={false} |
||||||
|
autoFocus={!email} |
||||||
|
/> |
||||||
|
|
||||||
|
{userEmail.length > 0 && ( |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.emailClearButton} |
||||||
|
onPress={() => { |
||||||
|
setUserEmail(""); |
||||||
|
setEmailError(false); |
||||||
|
setError(null); |
||||||
|
}} |
||||||
|
activeOpacity={0.7} |
||||||
|
> |
||||||
|
<Text style={styles.emailClearButtonText}>✕</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
)} |
||||||
|
</View> |
||||||
|
|
||||||
|
{emailError && ( |
||||||
|
<Text style={styles.emailErrorText}> |
||||||
|
{t("login.forgotPassword.invalidEmail")} |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
|
||||||
|
{error && ( |
||||||
|
<Text style={styles.errorText}> |
||||||
|
{error} |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
|
||||||
|
<TouchableOpacity |
||||||
|
style={[ |
||||||
|
styles.submitButton, |
||||||
|
(!userEmail.trim() || emailError) && styles.disabledButton, |
||||||
|
]} |
||||||
|
onPress={handleSubmit} |
||||||
|
disabled={!userEmail.trim() || emailError || loading} |
||||||
|
activeOpacity={0.7} |
||||||
|
> |
||||||
|
{loading ? ( |
||||||
|
<ActivityIndicator size="small" color="#fff" /> |
||||||
|
) : ( |
||||||
|
<Text style={styles.submitButtonText}> |
||||||
|
{t("login.forgotPassword.submit")} |
||||||
|
</Text> |
||||||
|
)} |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* Verification Code Modal */} |
||||||
|
<VerificationCodeInput
|
||||||
|
visible={showVerificationModal} |
||||||
|
onClose={() => setShowVerificationModal(false)} |
||||||
|
phoneNumber={userEmail} // We're using phoneNumber prop for email too
|
||||||
|
onVerify={handleVerifyCode} |
||||||
|
onResend={handleResendCode} |
||||||
|
onResetPassword={handleResetPassword} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
modalContainer: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: "rgba(0,0,0,0.5)", |
||||||
|
justifyContent: "flex-end", |
||||||
|
zIndex: 9999, |
||||||
|
}, |
||||||
|
forgotPasswordContainer: { |
||||||
|
backgroundColor: "#fff", |
||||||
|
borderTopLeftRadius: 20, |
||||||
|
borderTopRightRadius: 20, |
||||||
|
height: "80%", |
||||||
|
shadowColor: "#000", |
||||||
|
shadowOffset: { width: 0, height: -2 }, |
||||||
|
shadowOpacity: 0.1, |
||||||
|
shadowRadius: 5, |
||||||
|
elevation: 5, |
||||||
|
}, |
||||||
|
forgotPasswordHeader: { |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
paddingTop: 20, |
||||||
|
paddingHorizontal: 16, |
||||||
|
paddingBottom: 15, |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderBottomColor: "#f0f0f0", |
||||||
|
}, |
||||||
|
forgotPasswordCloseButton: { |
||||||
|
padding: 8, |
||||||
|
width: 36, |
||||||
|
height: 36, |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
}, |
||||||
|
forgotPasswordCloseButtonText: { |
||||||
|
fontSize: 18, |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
forgotPasswordTitle: { |
||||||
|
flex: 1, |
||||||
|
fontSize: 18, |
||||||
|
fontWeight: "600", |
||||||
|
color: "#000", |
||||||
|
textAlign: "center", |
||||||
|
marginRight: 36, |
||||||
|
}, |
||||||
|
forgotPasswordContent: { |
||||||
|
padding: 20, |
||||||
|
paddingBottom: Platform.OS === "ios" ? 50 : 30, |
||||||
|
}, |
||||||
|
forgotPasswordDescription: { |
||||||
|
fontSize: 14, |
||||||
|
color: "#333", |
||||||
|
marginBottom: 20, |
||||||
|
lineHeight: 20, |
||||||
|
}, |
||||||
|
emailInputContainer: { |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: "#E1E1E1", |
||||||
|
borderRadius: 25, |
||||||
|
height: 50, |
||||||
|
marginBottom: 20, |
||||||
|
position: "relative", |
||||||
|
}, |
||||||
|
emailInput: { |
||||||
|
flex: 1, |
||||||
|
height: "100%", |
||||||
|
paddingHorizontal: 16, |
||||||
|
fontSize: 16, |
||||||
|
paddingRight: 36, |
||||||
|
}, |
||||||
|
emailClearButton: { |
||||||
|
position: "absolute", |
||||||
|
right: 12, |
||||||
|
top: "50%", |
||||||
|
transform: [{ translateY: -12 }], |
||||||
|
height: 24, |
||||||
|
width: 24, |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
}, |
||||||
|
emailClearButtonText: { |
||||||
|
fontSize: 16, |
||||||
|
color: "#999", |
||||||
|
fontWeight: "500", |
||||||
|
textAlign: "center", |
||||||
|
}, |
||||||
|
emailErrorText: { |
||||||
|
color: "#FF3B30", |
||||||
|
fontSize: 14, |
||||||
|
marginTop: -12, |
||||||
|
marginBottom: 16, |
||||||
|
paddingHorizontal: 5, |
||||||
|
}, |
||||||
|
errorText: { |
||||||
|
color: "#FF3B30", |
||||||
|
fontSize: 14, |
||||||
|
marginTop: -12, |
||||||
|
marginBottom: 16, |
||||||
|
paddingHorizontal: 5, |
||||||
|
}, |
||||||
|
submitButton: { |
||||||
|
height: 50, |
||||||
|
backgroundColor: "#0039CB", |
||||||
|
borderRadius: 25, |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
marginTop: 20, |
||||||
|
}, |
||||||
|
disabledButton: { |
||||||
|
backgroundColor: "#CCCCCC", |
||||||
|
}, |
||||||
|
submitButtonText: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: "600", |
||||||
|
}, |
||||||
|
});
|
||||||
@ -0,0 +1,248 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
StyleSheet, |
||||||
|
TouchableOpacity, |
||||||
|
TextInput, |
||||||
|
Modal, |
||||||
|
ActivityIndicator, |
||||||
|
Platform, |
||||||
|
} from "react-native"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
|
||||||
|
type ResetPasswordModalProps = { |
||||||
|
visible: boolean; |
||||||
|
onClose: () => void; |
||||||
|
onSubmit: (password: string) => Promise<boolean>; |
||||||
|
}; |
||||||
|
|
||||||
|
export const ResetPasswordModal = ({ |
||||||
|
visible, |
||||||
|
onClose, |
||||||
|
onSubmit, |
||||||
|
}: ResetPasswordModalProps) => { |
||||||
|
const { t } = useTranslation(); |
||||||
|
|
||||||
|
const [password, setPassword] = useState(""); |
||||||
|
const [confirmPassword, setConfirmPassword] = useState(""); |
||||||
|
const [passwordError, setPasswordError] = useState(""); |
||||||
|
const [confirmError, setConfirmError] = useState(""); |
||||||
|
const [loading, setLoading] = useState(false); |
||||||
|
|
||||||
|
const validatePassword = () => { |
||||||
|
let isValid = true; |
||||||
|
|
||||||
|
// Reset errors
|
||||||
|
setPasswordError(""); |
||||||
|
setConfirmError(""); |
||||||
|
|
||||||
|
// Validate password
|
||||||
|
if (!password) { |
||||||
|
setPasswordError(t("login.resetPassword.required")); |
||||||
|
isValid = false; |
||||||
|
} else if (password.length < 6) { |
||||||
|
setPasswordError(t("login.resetPassword.minLength")); |
||||||
|
isValid = false; |
||||||
|
} |
||||||
|
|
||||||
|
// Validate password confirmation
|
||||||
|
if (!confirmPassword) { |
||||||
|
setConfirmError(t("login.resetPassword.confirmRequired")); |
||||||
|
isValid = false; |
||||||
|
} else if (password !== confirmPassword) { |
||||||
|
setConfirmError(t("login.resetPassword.mismatch")); |
||||||
|
isValid = false; |
||||||
|
} |
||||||
|
|
||||||
|
return isValid; |
||||||
|
}; |
||||||
|
|
||||||
|
const handleSubmit = async () => { |
||||||
|
if (!validatePassword()) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setLoading(true); |
||||||
|
try { |
||||||
|
const success = await onSubmit(password); |
||||||
|
if (success) { |
||||||
|
// Password was reset successfully
|
||||||
|
setPassword(""); |
||||||
|
setConfirmPassword(""); |
||||||
|
onClose(); |
||||||
|
} else { |
||||||
|
// Handle failed submission
|
||||||
|
setPasswordError(t("login.resetPassword.failed")); |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
setPasswordError(t("login.resetPassword.error")); |
||||||
|
} finally { |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
visible={visible} |
||||||
|
animationType="slide" |
||||||
|
transparent={true} |
||||||
|
onRequestClose={onClose} |
||||||
|
statusBarTranslucent={true} |
||||||
|
presentationStyle="overFullScreen" |
||||||
|
> |
||||||
|
<View style={styles.modalContainer}> |
||||||
|
<View style={styles.passwordContainer}> |
||||||
|
<View style={styles.passwordHeader}> |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.closeButton} |
||||||
|
onPress={onClose} |
||||||
|
activeOpacity={0.7} |
||||||
|
> |
||||||
|
<Text style={styles.closeButtonText}>✕</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<Text style={styles.headerTitle}>{t("login.resetPassword.title")}</Text> |
||||||
|
</View> |
||||||
|
|
||||||
|
<View style={styles.passwordContent}> |
||||||
|
{/* Password input */} |
||||||
|
<View style={styles.inputContainer}> |
||||||
|
<TextInput |
||||||
|
style={[styles.input, passwordError ? styles.inputError : null]} |
||||||
|
placeholder={t("login.resetPassword.enterPassword")} |
||||||
|
value={password} |
||||||
|
onChangeText={(text) => { |
||||||
|
setPassword(text); |
||||||
|
if (passwordError) setPasswordError(""); |
||||||
|
}} |
||||||
|
secureTextEntry={true} |
||||||
|
autoCapitalize="none" |
||||||
|
/> |
||||||
|
{passwordError ? ( |
||||||
|
<Text style={styles.errorText}>{passwordError}</Text> |
||||||
|
) : null} |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* Confirm password input */} |
||||||
|
<View style={styles.inputContainer}> |
||||||
|
<TextInput |
||||||
|
style={[styles.input, confirmError ? styles.inputError : null]} |
||||||
|
placeholder={t("login.resetPassword.confirmPassword")} |
||||||
|
value={confirmPassword} |
||||||
|
onChangeText={(text) => { |
||||||
|
setConfirmPassword(text); |
||||||
|
if (confirmError) setConfirmError(""); |
||||||
|
}} |
||||||
|
secureTextEntry={true} |
||||||
|
autoCapitalize="none" |
||||||
|
/> |
||||||
|
{confirmError ? ( |
||||||
|
<Text style={styles.errorText}>{confirmError}</Text> |
||||||
|
) : null} |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* Submit button */} |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.submitButton} |
||||||
|
onPress={handleSubmit} |
||||||
|
disabled={loading} |
||||||
|
activeOpacity={0.7} |
||||||
|
> |
||||||
|
{loading ? ( |
||||||
|
<ActivityIndicator size="small" color="#fff" /> |
||||||
|
) : ( |
||||||
|
<Text style={styles.submitButtonText}>{t("login.resetPassword.submit")}</Text> |
||||||
|
)} |
||||||
|
</TouchableOpacity> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
modalContainer: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: "rgba(0,0,0,0.5)", |
||||||
|
justifyContent: "flex-end", |
||||||
|
zIndex: 9999, |
||||||
|
}, |
||||||
|
passwordContainer: { |
||||||
|
backgroundColor: "#fff", |
||||||
|
borderTopLeftRadius: 20, |
||||||
|
borderTopRightRadius: 20, |
||||||
|
height: "80%", |
||||||
|
shadowColor: "#000", |
||||||
|
shadowOffset: { width: 0, height: -2 }, |
||||||
|
shadowOpacity: 0.1, |
||||||
|
shadowRadius: 5, |
||||||
|
elevation: 5, |
||||||
|
}, |
||||||
|
passwordHeader: { |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
paddingTop: 20, |
||||||
|
paddingHorizontal: 16, |
||||||
|
paddingBottom: 15, |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderBottomColor: "#f0f0f0", |
||||||
|
}, |
||||||
|
closeButton: { |
||||||
|
padding: 8, |
||||||
|
width: 36, |
||||||
|
height: 36, |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
}, |
||||||
|
closeButtonText: { |
||||||
|
fontSize: 18, |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
headerTitle: { |
||||||
|
flex: 1, |
||||||
|
fontSize: 18, |
||||||
|
fontWeight: "600", |
||||||
|
color: "#000", |
||||||
|
textAlign: "center", |
||||||
|
marginRight: 36, |
||||||
|
}, |
||||||
|
passwordContent: { |
||||||
|
padding: 20, |
||||||
|
paddingTop: 40, |
||||||
|
paddingBottom: Platform.OS === "ios" ? 50 : 30, |
||||||
|
}, |
||||||
|
inputContainer: { |
||||||
|
marginBottom: 20, |
||||||
|
}, |
||||||
|
input: { |
||||||
|
height: 50, |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: "#E1E1E1", |
||||||
|
borderRadius: 25, |
||||||
|
paddingHorizontal: 16, |
||||||
|
fontSize: 16, |
||||||
|
}, |
||||||
|
inputError: { |
||||||
|
borderColor: "#FF3B30", |
||||||
|
}, |
||||||
|
errorText: { |
||||||
|
color: "#FF3B30", |
||||||
|
fontSize: 14, |
||||||
|
marginTop: 5, |
||||||
|
paddingHorizontal: 5, |
||||||
|
}, |
||||||
|
submitButton: { |
||||||
|
height: 50, |
||||||
|
backgroundColor: "#0039CB", |
||||||
|
borderRadius: 25, |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
marginTop: 20, |
||||||
|
}, |
||||||
|
submitButtonText: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: "600", |
||||||
|
}, |
||||||
|
});
|
||||||
@ -0,0 +1,441 @@ |
|||||||
|
import React, { useState, useRef, useEffect } from "react"; |
||||||
|
import { |
||||||
|
View, |
||||||
|
Text, |
||||||
|
StyleSheet, |
||||||
|
TouchableOpacity, |
||||||
|
TextInput, |
||||||
|
Modal, |
||||||
|
ActivityIndicator, |
||||||
|
Platform, |
||||||
|
Keyboard, |
||||||
|
TouchableWithoutFeedback, |
||||||
|
} from "react-native"; |
||||||
|
import { useTranslation } from "react-i18next"; |
||||||
|
import { ResetPasswordModal } from "./ResetPasswordModal"; |
||||||
|
|
||||||
|
type VerificationCodeInputProps = { |
||||||
|
visible: boolean; |
||||||
|
onClose: () => void; |
||||||
|
phoneNumber?: string; |
||||||
|
onVerify: (code: string) => Promise<boolean>; |
||||||
|
onResend: () => Promise<void>; |
||||||
|
onResetPassword?: (password: string) => Promise<boolean>; |
||||||
|
}; |
||||||
|
|
||||||
|
export const VerificationCodeInput = ({ |
||||||
|
visible, |
||||||
|
onClose, |
||||||
|
phoneNumber = "", |
||||||
|
onVerify, |
||||||
|
onResend, |
||||||
|
onResetPassword = async () => true, |
||||||
|
}: VerificationCodeInputProps) => { |
||||||
|
const { t } = useTranslation(); |
||||||
|
|
||||||
|
// Single string to store the entire verification code
|
||||||
|
const [verificationCode, setVerificationCode] = useState(""); |
||||||
|
const [isCodeError, setIsCodeError] = useState(false); |
||||||
|
const [loading, setLoading] = useState(false); |
||||||
|
const [countdown, setCountdown] = useState(60); |
||||||
|
const [isResending, setIsResending] = useState(false); |
||||||
|
const [resendActive, setResendActive] = useState(false); |
||||||
|
// New state for password reset modal
|
||||||
|
const [showPasswordReset, setShowPasswordReset] = useState(false); |
||||||
|
|
||||||
|
// Reference to the hidden input that will handle all keystrokes
|
||||||
|
const hiddenInputRef = useRef<TextInput>(null); |
||||||
|
|
||||||
|
// Focus the hidden input whenever the component is visible
|
||||||
|
useEffect(() => { |
||||||
|
if (visible) { |
||||||
|
startCountdown(); |
||||||
|
setTimeout(() => { |
||||||
|
hiddenInputRef.current?.focus(); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
return () => { |
||||||
|
// Reset states when component unmounts
|
||||||
|
setVerificationCode(""); |
||||||
|
setIsCodeError(false); |
||||||
|
setCountdown(60); |
||||||
|
setResendActive(false); |
||||||
|
setShowPasswordReset(false); |
||||||
|
}; |
||||||
|
}, [visible]); |
||||||
|
|
||||||
|
// Function to focus the hidden input
|
||||||
|
const focusInput = () => { |
||||||
|
hiddenInputRef.current?.focus(); |
||||||
|
}; |
||||||
|
|
||||||
|
// Function to start countdown
|
||||||
|
const startCountdown = () => { |
||||||
|
setResendActive(false); |
||||||
|
setCountdown(60); |
||||||
|
|
||||||
|
const timer = setInterval(() => { |
||||||
|
setCountdown((prevCount) => { |
||||||
|
if (prevCount <= 1) { |
||||||
|
clearInterval(timer); |
||||||
|
setResendActive(true); |
||||||
|
return 0; |
||||||
|
} |
||||||
|
return prevCount - 1; |
||||||
|
}); |
||||||
|
}, 1000); |
||||||
|
|
||||||
|
return () => clearInterval(timer); |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle code input change
|
||||||
|
const handleCodeChange = (text: string) => { |
||||||
|
if (isCodeError) setIsCodeError(false); |
||||||
|
|
||||||
|
// Only accept digits and limit to 6 characters
|
||||||
|
const cleanedText = text.replace(/[^0-9]/g, '').substring(0, 6); |
||||||
|
setVerificationCode(cleanedText); |
||||||
|
|
||||||
|
// Auto-submit if all 6 digits are entered
|
||||||
|
if (cleanedText.length === 6) { |
||||||
|
Keyboard.dismiss(); |
||||||
|
handleVerifyCode(cleanedText); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle verify code submission
|
||||||
|
const handleVerifyCode = async (code: string) => { |
||||||
|
setLoading(true); |
||||||
|
try { |
||||||
|
const success = await onVerify(code); |
||||||
|
if (!success) { |
||||||
|
setIsCodeError(true); |
||||||
|
} else { |
||||||
|
// Instead of closing, show password reset modal
|
||||||
|
setShowPasswordReset(true); |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
setIsCodeError(true); |
||||||
|
} finally { |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle resend code
|
||||||
|
const handleResend = async () => { |
||||||
|
if (!resendActive) return; |
||||||
|
|
||||||
|
setIsResending(true); |
||||||
|
try { |
||||||
|
await onResend(); |
||||||
|
startCountdown(); |
||||||
|
} catch (error) { |
||||||
|
console.error("Failed to resend code:", error); |
||||||
|
} finally { |
||||||
|
setIsResending(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Handle password reset submission
|
||||||
|
const handlePasswordReset = async (password: string) => { |
||||||
|
try { |
||||||
|
const success = await onResetPassword(password); |
||||||
|
if (success) { |
||||||
|
// Password reset was successful
|
||||||
|
// The parent component already handles closing all modals
|
||||||
|
setShowPasswordReset(false); |
||||||
|
// Note: Don't call onClose() here as the parent already does that
|
||||||
|
} |
||||||
|
return success; |
||||||
|
} catch (error) { |
||||||
|
console.error("Failed to reset password:", error); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// Create an array representation of the code for display
|
||||||
|
const codeArray = verificationCode.split(''); |
||||||
|
while (codeArray.length < 6) { |
||||||
|
codeArray.push(''); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
visible={visible} |
||||||
|
animationType="slide" |
||||||
|
transparent={true} |
||||||
|
onRequestClose={onClose} |
||||||
|
statusBarTranslucent={true} |
||||||
|
presentationStyle="overFullScreen" |
||||||
|
> |
||||||
|
<View style={styles.modalContainer}> |
||||||
|
<View style={styles.verificationContainer}> |
||||||
|
<View style={styles.verificationHeader}> |
||||||
|
<TouchableOpacity |
||||||
|
style={styles.closeButton} |
||||||
|
onPress={onClose} |
||||||
|
activeOpacity={0.7} |
||||||
|
> |
||||||
|
<Text style={styles.closeButtonText}>✕</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
<Text style={styles.headerTitle}>{t("login.verification.title")}</Text> |
||||||
|
</View> |
||||||
|
|
||||||
|
<View style={styles.verificationContent}> |
||||||
|
<Text style={styles.description}> |
||||||
|
{t("login.verification.description")} {phoneNumber}. {t("login.verification.expiration")} |
||||||
|
</Text> |
||||||
|
|
||||||
|
{/* Hidden input that captures all key presses */} |
||||||
|
<TextInput |
||||||
|
ref={hiddenInputRef} |
||||||
|
value={verificationCode} |
||||||
|
onChangeText={handleCodeChange} |
||||||
|
keyboardType="number-pad" |
||||||
|
maxLength={6} |
||||||
|
style={styles.hiddenInput} |
||||||
|
caretHidden={true} |
||||||
|
autoFocus={visible} |
||||||
|
/> |
||||||
|
|
||||||
|
{/* Touchable area to focus input when touched */} |
||||||
|
<TouchableWithoutFeedback onPress={focusInput}> |
||||||
|
<View style={styles.codeInputContainer}> |
||||||
|
{codeArray.map((digit, index) => ( |
||||||
|
<View |
||||||
|
key={`code-box-${index}`} |
||||||
|
style={[ |
||||||
|
styles.codeInput, |
||||||
|
isCodeError && styles.codeInputError, |
||||||
|
digit ? styles.codeInputFilled : {} |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text style={styles.codeInputText}>{digit}</Text> |
||||||
|
</View> |
||||||
|
))} |
||||||
|
</View> |
||||||
|
</TouchableWithoutFeedback> |
||||||
|
|
||||||
|
{/* Error message */} |
||||||
|
{isCodeError && ( |
||||||
|
<View style={styles.errorContainer}> |
||||||
|
<View style={styles.errorIconContainer}> |
||||||
|
<Text style={styles.errorIcon}>!</Text> |
||||||
|
</View> |
||||||
|
<Text style={styles.errorText}>{t("login.verification.incorrect")}</Text> |
||||||
|
</View> |
||||||
|
)} |
||||||
|
|
||||||
|
{/* Resend button */} |
||||||
|
<View style={styles.resendContainer}> |
||||||
|
{isResending ? ( |
||||||
|
<ActivityIndicator size="small" color="#0066FF" /> |
||||||
|
) : ( |
||||||
|
<TouchableOpacity |
||||||
|
onPress={handleResend} |
||||||
|
disabled={!resendActive} |
||||||
|
style={[ |
||||||
|
styles.resendButton, |
||||||
|
!resendActive && styles.resendButtonDisabled |
||||||
|
]} |
||||||
|
> |
||||||
|
<Text style={[ |
||||||
|
styles.resendText, |
||||||
|
!resendActive && styles.resendTextDisabled |
||||||
|
]}> |
||||||
|
{resendActive |
||||||
|
? t("login.verification.resend") |
||||||
|
: `${t("login.verification.resend")} (${countdown}s)`} |
||||||
|
</Text> |
||||||
|
</TouchableOpacity> |
||||||
|
)} |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* Help section */} |
||||||
|
<View style={styles.helpContainer}> |
||||||
|
<Text style={styles.helpTitle}>{t("login.verification.didntReceive")}</Text> |
||||||
|
<View style={styles.helpItem}> |
||||||
|
<View style={styles.bulletPoint} /> |
||||||
|
<Text style={styles.helpText}> |
||||||
|
{t("login.verification.helpPoint1")} |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
<View style={styles.helpItem}> |
||||||
|
<View style={styles.bulletPoint} /> |
||||||
|
<Text style={styles.helpText}> |
||||||
|
{t("login.verification.helpPoint2")} |
||||||
|
</Text> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
|
||||||
|
{/* Password Reset Modal */} |
||||||
|
<ResetPasswordModal |
||||||
|
visible={showPasswordReset} |
||||||
|
onClose={() => setShowPasswordReset(false)} |
||||||
|
onSubmit={handlePasswordReset} |
||||||
|
/> |
||||||
|
</View> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const styles = StyleSheet.create({ |
||||||
|
modalContainer: { |
||||||
|
flex: 1, |
||||||
|
backgroundColor: "rgba(0,0,0,0.5)", |
||||||
|
justifyContent: "flex-end", |
||||||
|
zIndex: 9999, |
||||||
|
}, |
||||||
|
verificationContainer: { |
||||||
|
backgroundColor: "#fff", |
||||||
|
borderTopLeftRadius: 20, |
||||||
|
borderTopRightRadius: 20, |
||||||
|
height: "80%", |
||||||
|
shadowColor: "#000", |
||||||
|
shadowOffset: { width: 0, height: -2 }, |
||||||
|
shadowOpacity: 0.1, |
||||||
|
shadowRadius: 5, |
||||||
|
elevation: 5, |
||||||
|
}, |
||||||
|
verificationHeader: { |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
paddingTop: 20, |
||||||
|
paddingHorizontal: 16, |
||||||
|
paddingBottom: 15, |
||||||
|
borderBottomWidth: 1, |
||||||
|
borderBottomColor: "#f0f0f0", |
||||||
|
}, |
||||||
|
closeButton: { |
||||||
|
padding: 8, |
||||||
|
width: 36, |
||||||
|
height: 36, |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
}, |
||||||
|
closeButtonText: { |
||||||
|
fontSize: 18, |
||||||
|
color: "#000", |
||||||
|
}, |
||||||
|
headerTitle: { |
||||||
|
flex: 1, |
||||||
|
fontSize: 18, |
||||||
|
fontWeight: "600", |
||||||
|
color: "#000", |
||||||
|
textAlign: "center", |
||||||
|
marginRight: 36, |
||||||
|
}, |
||||||
|
verificationContent: { |
||||||
|
padding: 20, |
||||||
|
paddingBottom: Platform.OS === "ios" ? 50 : 30, |
||||||
|
}, |
||||||
|
description: { |
||||||
|
fontSize: 14, |
||||||
|
color: "#333", |
||||||
|
marginBottom: 20, |
||||||
|
lineHeight: 20, |
||||||
|
}, |
||||||
|
hiddenInput: { |
||||||
|
position: 'absolute', |
||||||
|
opacity: 0, |
||||||
|
height: 0, |
||||||
|
width: 0, |
||||||
|
}, |
||||||
|
codeInputContainer: { |
||||||
|
flexDirection: "row", |
||||||
|
justifyContent: "space-between", |
||||||
|
marginBottom: 20, |
||||||
|
width: "100%", |
||||||
|
}, |
||||||
|
codeInput: { |
||||||
|
width: '14%', |
||||||
|
height: 60, |
||||||
|
borderWidth: 1, |
||||||
|
borderColor: "#E1E1E1", |
||||||
|
borderRadius: 5, |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
}, |
||||||
|
codeInputText: { |
||||||
|
fontSize: 24, |
||||||
|
fontWeight: "500", |
||||||
|
}, |
||||||
|
codeInputError: { |
||||||
|
borderColor: "#FF3B30", |
||||||
|
}, |
||||||
|
codeInputFilled: { |
||||||
|
borderColor: "#0066FF", |
||||||
|
}, |
||||||
|
errorContainer: { |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
marginBottom: 15, |
||||||
|
}, |
||||||
|
errorIconContainer: { |
||||||
|
width: 20, |
||||||
|
height: 20, |
||||||
|
borderRadius: 10, |
||||||
|
backgroundColor: "#FF3B30", |
||||||
|
justifyContent: "center", |
||||||
|
alignItems: "center", |
||||||
|
marginRight: 8, |
||||||
|
}, |
||||||
|
errorIcon: { |
||||||
|
color: "white", |
||||||
|
fontSize: 14, |
||||||
|
fontWeight: "bold", |
||||||
|
}, |
||||||
|
errorText: { |
||||||
|
color: "#FF3B30", |
||||||
|
fontSize: 14, |
||||||
|
}, |
||||||
|
resendContainer: { |
||||||
|
alignItems: "flex-end", |
||||||
|
marginBottom: 30, |
||||||
|
}, |
||||||
|
resendButton: { |
||||||
|
padding: 5, |
||||||
|
}, |
||||||
|
resendButtonDisabled: { |
||||||
|
opacity: 0.7, |
||||||
|
}, |
||||||
|
resendText: { |
||||||
|
color: "#0066FF", |
||||||
|
fontSize: 14, |
||||||
|
fontWeight: "500", |
||||||
|
}, |
||||||
|
resendTextDisabled: { |
||||||
|
color: "#999", |
||||||
|
}, |
||||||
|
helpContainer: { |
||||||
|
backgroundColor: "#F8F8F8", |
||||||
|
padding: 15, |
||||||
|
borderRadius: 10, |
||||||
|
marginTop: 20, |
||||||
|
}, |
||||||
|
helpTitle: { |
||||||
|
fontSize: 16, |
||||||
|
fontWeight: "600", |
||||||
|
marginBottom: 10, |
||||||
|
color: "#333", |
||||||
|
}, |
||||||
|
helpItem: { |
||||||
|
flexDirection: "row", |
||||||
|
alignItems: "center", |
||||||
|
marginBottom: 8, |
||||||
|
}, |
||||||
|
bulletPoint: { |
||||||
|
width: 8, |
||||||
|
height: 8, |
||||||
|
borderRadius: 4, |
||||||
|
backgroundColor: "#FF9500", |
||||||
|
marginRight: 10, |
||||||
|
}, |
||||||
|
helpText: { |
||||||
|
fontSize: 14, |
||||||
|
color: "#333", |
||||||
|
flex: 1, |
||||||
|
}, |
||||||
|
});
|
||||||
Loading…
Reference in new issue