diff --git a/src/App.jsx b/src/App.jsx index e69de29..bc569b1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -0,0 +1,27 @@ +import React, { useState } from 'react'; +import FarmerLogin from './components/farmerLogin'; +import CreateFarmer from './components/createFarmer'; + +function App() { + const [currentView, setCurrentView] = useState('login'); // 'login' or 'register' + + const showLogin = () => { + setCurrentView('login'); + }; + + const showRegister = () => { + setCurrentView('register'); + }; + + return ( +
+ {currentView === 'login' ? ( + + ) : ( + + )} +
+ ); +} + +export default App; \ No newline at end of file diff --git a/src/components/createFarmer.jsx b/src/components/createFarmer.jsx new file mode 100644 index 0000000..d173da5 --- /dev/null +++ b/src/components/createFarmer.jsx @@ -0,0 +1,680 @@ +import React, { useState } from 'react'; +import { User, Lock, Eye, EyeOff, Leaf, MapPin, Smartphone, Mail, Home, IdCard, Calendar, ArrowLeft } from 'lucide-react'; + +const CreateFarmer = ({ onBackToLogin }) => { + const [formData, setFormData] = useState({ + fullName: '', + phoneNumber: '', + email: '', + password: '', + confirmPassword: '', + farmAddress: '', + district: '', + state: '', + pincode: '', + aadhaarNumber: '', + dateOfBirth: '', + farmSize: '', + cropTypes: '', + experience: '', + agreeToTerms: false + }); + + const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const [isLoading, setIsLoading] = useState(false); + const [errors, setErrors] = useState({}); + const [currentStep, setCurrentStep] = useState(1); + + const handleInputChange = (e) => { + const { name, value, type, checked } = e.target; + setFormData(prev => ({ + ...prev, + [name]: type === 'checkbox' ? checked : value + })); + + // Clear error when user starts typing + if (errors[name]) { + setErrors(prev => ({ + ...prev, + [name]: '' + })); + } + }; + + const validateStep1 = () => { + const newErrors = {}; + + if (!formData.fullName.trim()) { + newErrors.fullName = 'Full name is required'; + } else if (formData.fullName.trim().length < 2) { + newErrors.fullName = 'Name must be at least 2 characters'; + } + + if (!formData.phoneNumber.trim()) { + newErrors.phoneNumber = 'Phone number is required'; + } else if (!/^[6-9]\d{9}$/.test(formData.phoneNumber)) { + newErrors.phoneNumber = 'Please enter a valid 10-digit Indian mobile number'; + } + + if (!formData.email.trim()) { + newErrors.email = 'Email is required'; + } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { + newErrors.email = 'Please enter a valid email address'; + } + + if (!formData.password.trim()) { + newErrors.password = 'Password is required'; + } else if (formData.password.length < 6) { + newErrors.password = 'Password must be at least 6 characters'; + } + + if (!formData.confirmPassword.trim()) { + newErrors.confirmPassword = 'Please confirm your password'; + } else if (formData.password !== formData.confirmPassword) { + newErrors.confirmPassword = 'Passwords do not match'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const validateStep2 = () => { + const newErrors = {}; + + if (!formData.farmAddress.trim()) { + newErrors.farmAddress = 'Farm address is required'; + } + + if (!formData.district.trim()) { + newErrors.district = 'District is required'; + } + + if (!formData.state.trim()) { + newErrors.state = 'State is required'; + } + + if (!formData.pincode.trim()) { + newErrors.pincode = 'Pincode is required'; + } else if (!/^\d{6}$/.test(formData.pincode)) { + newErrors.pincode = 'Please enter a valid 6-digit pincode'; + } + + if (!formData.aadhaarNumber.trim()) { + newErrors.aadhaarNumber = 'Aadhaar number is required'; + } else if (!/^\d{12}$/.test(formData.aadhaarNumber.replace(/\s/g, ''))) { + newErrors.aadhaarNumber = 'Please enter a valid 12-digit Aadhaar number'; + } + + if (!formData.dateOfBirth.trim()) { + newErrors.dateOfBirth = 'Date of birth is required'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const validateStep3 = () => { + const newErrors = {}; + + if (!formData.farmSize.trim()) { + newErrors.farmSize = 'Farm size is required'; + } + + if (!formData.cropTypes.trim()) { + newErrors.cropTypes = 'Crop types are required'; + } + + if (!formData.experience.trim()) { + newErrors.experience = 'Experience is required'; + } + + if (!formData.agreeToTerms) { + newErrors.agreeToTerms = 'You must agree to the terms and conditions'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleNext = () => { + let isValid = false; + + if (currentStep === 1) { + isValid = validateStep1(); + } else if (currentStep === 2) { + isValid = validateStep2(); + } + + if (isValid && currentStep < 3) { + setCurrentStep(currentStep + 1); + } + }; + + const handlePrevious = () => { + if (currentStep > 1) { + setCurrentStep(currentStep - 1); + } + }; + + const handleSubmit = async () => { + if (!validateStep3()) return; + + setIsLoading(true); + + try { + // Simulate API call + await new Promise(resolve => setTimeout(resolve, 3000)); + + // In real implementation, you would call your registration API here + console.log('Registration data:', formData); + alert('Registration successful! Please login with your credentials.'); + + // Redirect to login + onBackToLogin(); + + } catch (error) { + console.error('Registration error:', error); + alert('Registration failed. Please try again.'); + } finally { + setIsLoading(false); + } + }; + + const formatAadhaar = (value) => { + // Remove all spaces and limit to 12 digits + const cleaned = value.replace(/\s/g, '').slice(0, 12); + // Add spaces every 4 digits + return cleaned.replace(/(\d{4})(?=\d)/g, '$1 '); + }; + + const handleAadhaarChange = (e) => { + const formatted = formatAadhaar(e.target.value); + handleInputChange({ + target: { + name: 'aadhaarNumber', + value: formatted + } + }); + }; + + const renderStep1 = () => ( + <> +

Personal Information

+ + {/* Full Name */} +
+ +
+
+ +
+ +
+ {errors.fullName &&

{errors.fullName}

} +
+ + {/* Phone Number */} +
+ +
+
+ +
+ +
+ {errors.phoneNumber &&

{errors.phoneNumber}

} +
+ + {/* Email */} +
+ +
+
+ +
+ +
+ {errors.email &&

{errors.email}

} +
+ + {/* Password */} +
+ +
+
+ +
+ + +
+ {errors.password &&

{errors.password}

} +
+ + {/* Confirm Password */} +
+ +
+
+ +
+ + +
+ {errors.confirmPassword &&

{errors.confirmPassword}

} +
+ + ); + + const renderStep2 = () => ( + <> +

Address & Identity

+ + {/* Farm Address */} +
+ +
+
+ +
+