From a20e03457fa073b312d2c441ccf4bfc3389f3e62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Mon, 15 Jan 2024 10:30:00 +0100 Subject: [PATCH 1/9] fix: resolve ScrollView contentContainerStyle and span element errors - Move alignItems and justifyContent from ScrollView className to contentContainerStyle - Replace HTML span element with React Native Text component in GalaxyForm - Fixes React Native invariant violation warnings --- test/App.tsx | 6 +++++- test/components/Form/GalaxyForm.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/test/App.tsx b/test/App.tsx index 3d05ad1..5ad538a 100644 --- a/test/App.tsx +++ b/test/App.tsx @@ -7,8 +7,12 @@ export default function App() { return ( diff --git a/test/components/Form/GalaxyForm.tsx b/test/components/Form/GalaxyForm.tsx index aea02ed..8e9eaf0 100644 --- a/test/components/Form/GalaxyForm.tsx +++ b/test/components/Form/GalaxyForm.tsx @@ -69,7 +69,7 @@ const Signup = () => { {/* Footer */} Already have an account?{" "} - Login + Login From 384a0fa6ce6c1661cc01f955bb828b8fbb96ce77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Tue, 16 Jan 2024 09:00:00 +0100 Subject: [PATCH 2/9] feat: create basic EarthForm component structure - Add initial EarthForm component with ScrollView wrapper - Set up basic layout with green theme background - Add placeholder title and container structure --- test/components/Form/EarthForm.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 test/components/Form/EarthForm.tsx diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx new file mode 100644 index 0000000..25d023a --- /dev/null +++ b/test/components/Form/EarthForm.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { + View, + Text, + TextInput, + TouchableOpacity, + ScrollView, +} from 'react-native'; + +const EarthForm = () => { + return ( + + + + + Earth Form + + + + + ); +}; + +export default EarthForm; From 3a6d8c1621c6a1baa61d5ca7f8fe243a65e5b760 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Wed, 17 Apr 2024 09:15:00 +0100 Subject: [PATCH 3/9] feat: add form fields and state management - Add useState hook for form data management - Implement handleInputChange function for controlled inputs - Add four form fields: name, email, password, confirmPassword - Add proper TextInput components with placeholders and secure text entry --- test/components/Form/EarthForm.tsx | 69 +++++++++++++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index 25d023a..6f87b62 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { View, Text, @@ -8,6 +8,20 @@ import { } from 'react-native'; const EarthForm = () => { + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '', + confirmPassword: '', + }); + + const handleInputChange = (field: string, value: string) => { + setFormData(prev => ({ + ...prev, + [field]: value, + })); + }; + return ( @@ -15,6 +29,59 @@ const EarthForm = () => { Earth Form + + + + + Full Name + + handleInputChange('name', value)} + className="w-full px-3 py-2 border border-gray-300 rounded-md" + /> + + + + + Email Address + + handleInputChange('email', value)} + keyboardType="email-address" + className="w-full px-3 py-2 border border-gray-300 rounded-md" + /> + + + + + Password + + handleInputChange('password', value)} + secureTextEntry + className="w-full px-3 py-2 border border-gray-300 rounded-md" + /> + + + + + Confirm Password + + handleInputChange('confirmPassword', value)} + secureTextEntry + className="w-full px-3 py-2 border border-gray-300 rounded-md" + /> + + From f56aad826e6a40fec998170716df7f34ad827604 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Sun, 12 May 2024 09:30:00 +0100 Subject: [PATCH 4/9] style: enhance EarthForm with nature-themed styling - Add gradient background from green-50 to emerald-100 - Add Earth emoji icon in circular green container - Update form container with rounded corners and green border - Style input fields with green theme and light green background - Add subtitle text for better user experience --- test/components/Form/EarthForm.tsx | 38 ++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index 6f87b62..4037e8b 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -24,27 +24,36 @@ const EarthForm = () => { return ( - - - - Earth Form - + + + + + 🌍 + + + Earth Form + + + Connect with nature through our form + + - + Full Name handleInputChange('name', value)} - className="w-full px-3 py-2 border border-gray-300 rounded-md" + className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" + style={{ backgroundColor: '#f0fdf4' }} /> - + Email Address { value={formData.email} onChangeText={(value) => handleInputChange('email', value)} keyboardType="email-address" - className="w-full px-3 py-2 border border-gray-300 rounded-md" + className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" + style={{ backgroundColor: '#f0fdf4' }} /> - + Password { value={formData.password} onChangeText={(value) => handleInputChange('password', value)} secureTextEntry - className="w-full px-3 py-2 border border-gray-300 rounded-md" + className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" + style={{ backgroundColor: '#f0fdf4' }} /> - + Confirm Password { value={formData.confirmPassword} onChangeText={(value) => handleInputChange('confirmPassword', value)} secureTextEntry - className="w-full px-3 py-2 border border-gray-300 rounded-md" + className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" + style={{ backgroundColor: '#f0fdf4' }} /> From d6a2509c110745b28220820acec839e0bf9abc48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Tue, 14 May 2024 09:45:00 +0100 Subject: [PATCH 5/9] feat: add form submission handling and loading states - Add isSubmitting state to track form submission status - Implement handleSubmit function with async API simulation - Add submit button with loading state and disabled functionality - Style submit button with green theme and active states --- test/components/Form/EarthForm.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index 4037e8b..83e66b2 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -15,6 +15,8 @@ const EarthForm = () => { confirmPassword: '', }); + const [isSubmitting, setIsSubmitting] = useState(false); + const handleInputChange = (field: string, value: string) => { setFormData(prev => ({ ...prev, @@ -22,6 +24,16 @@ const EarthForm = () => { })); }; + const handleSubmit = async () => { + setIsSubmitting(true); + + // Simulate API call + await new Promise(resolve => setTimeout(resolve, 2000)); + + console.log('Form submitted:', formData); + setIsSubmitting(false); + }; + return ( @@ -93,6 +105,20 @@ const EarthForm = () => { style={{ backgroundColor: '#f0fdf4' }} /> + + + + {isSubmitting ? 'Submitting...' : 'Submit Form'} + + From fe9b3c2472c5f48f49e00f539b20c5ec42ed6dec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Thu, 18 Jul 2024 10:00:00 +0100 Subject: [PATCH 6/9] feat: add comprehensive form validation and error handling - Add errors state to track validation errors for each field - Implement validateForm function with email regex and password matching - Add real-time error clearing when user starts typing - Style input fields with red borders and backgrounds for errors - Add success message display with auto-reset functionality - Include form auto-reset after successful submission --- test/components/Form/EarthForm.tsx | 117 +++++++++++++++++++++++++---- 1 file changed, 104 insertions(+), 13 deletions(-) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index 83e66b2..d66d6a3 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -16,22 +16,81 @@ const EarthForm = () => { }); const [isSubmitting, setIsSubmitting] = useState(false); + const [errors, setErrors] = useState<{[key: string]: string}>({}); + const [showSuccess, setShowSuccess] = useState(false); const handleInputChange = (field: string, value: string) => { setFormData(prev => ({ ...prev, [field]: value, })); + + // Clear error when user starts typing + if (errors[field]) { + setErrors(prev => ({ + ...prev, + [field]: '', + })); + } + }; + + const validateForm = () => { + const newErrors: {[key: string]: string} = {}; + + if (!formData.name.trim()) { + newErrors.name = 'Name is required'; + } + + if (!formData.email.trim()) { + newErrors.email = 'Email is required'; + } else if (!/\S+@\S+\.\S+/.test(formData.email)) { + newErrors.email = 'Email is invalid'; + } + + if (!formData.password) { + newErrors.password = 'Password is required'; + } else if (formData.password.length < 6) { + newErrors.password = 'Password must be at least 6 characters'; + } + + if (formData.password !== formData.confirmPassword) { + newErrors.confirmPassword = 'Passwords do not match'; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; }; const handleSubmit = async () => { - setIsSubmitting(true); + if (!validateForm()) { + return; + } - // Simulate API call - await new Promise(resolve => setTimeout(resolve, 2000)); + setIsSubmitting(true); + setShowSuccess(false); - console.log('Form submitted:', formData); - setIsSubmitting(false); + try { + // Simulate API call + await new Promise(resolve => setTimeout(resolve, 2000)); + + console.log('Form submitted:', formData); + setShowSuccess(true); + + // Reset form after success + setTimeout(() => { + setFormData({ + name: '', + email: '', + password: '', + confirmPassword: '', + }); + setShowSuccess(false); + }, 3000); + } catch (error) { + console.error('Submission error:', error); + } finally { + setIsSubmitting(false); + } }; return ( @@ -59,9 +118,15 @@ const EarthForm = () => { placeholder="Enter your full name" value={formData.name} onChangeText={(value) => handleInputChange('name', value)} - className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" - style={{ backgroundColor: '#f0fdf4' }} + className={`w-full px-4 py-3 border rounded-lg ${ + errors.name + ? 'border-red-500 bg-red-50' + : 'border-green-300 bg-green-50' + }`} /> + {errors.name && ( + {errors.name} + )} @@ -73,9 +138,15 @@ const EarthForm = () => { value={formData.email} onChangeText={(value) => handleInputChange('email', value)} keyboardType="email-address" - className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" - style={{ backgroundColor: '#f0fdf4' }} + className={`w-full px-4 py-3 border rounded-lg ${ + errors.email + ? 'border-red-500 bg-red-50' + : 'border-green-300 bg-green-50' + }`} /> + {errors.email && ( + {errors.email} + )} @@ -87,9 +158,15 @@ const EarthForm = () => { value={formData.password} onChangeText={(value) => handleInputChange('password', value)} secureTextEntry - className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" - style={{ backgroundColor: '#f0fdf4' }} + className={`w-full px-4 py-3 border rounded-lg ${ + errors.password + ? 'border-red-500 bg-red-50' + : 'border-green-300 bg-green-50' + }`} /> + {errors.password && ( + {errors.password} + )} @@ -101,11 +178,25 @@ const EarthForm = () => { value={formData.confirmPassword} onChangeText={(value) => handleInputChange('confirmPassword', value)} secureTextEntry - className="w-full px-4 py-3 border border-green-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200" - style={{ backgroundColor: '#f0fdf4' }} + className={`w-full px-4 py-3 border rounded-lg ${ + errors.confirmPassword + ? 'border-red-500 bg-red-50' + : 'border-green-300 bg-green-50' + }`} /> + {errors.confirmPassword && ( + {errors.confirmPassword} + )} + {showSuccess && ( + + + ✅ Form submitted successfully! Thank you for connecting with nature. + + + )} + Date: Tue, 18 Mar 2025 10:15:00 +0100 Subject: [PATCH 7/9] feat: add comprehensive accessibility features - Add accessibilityLabel and accessibilityHint for all form inputs - Set proper accessibilityRole for text inputs and button - Add accessibilityState for submit button disabled state - Configure autoCapitalize and autoCorrect for better UX - Ensure screen reader compatibility for all interactive elements --- test/components/Form/EarthForm.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index d66d6a3..087217b 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -123,6 +123,9 @@ const EarthForm = () => { ? 'border-red-500 bg-red-50' : 'border-green-300 bg-green-50' }`} + accessibilityLabel="Full Name" + accessibilityHint="Enter your complete name" + accessibilityRole="text" /> {errors.name && ( {errors.name} @@ -143,6 +146,11 @@ const EarthForm = () => { ? 'border-red-500 bg-red-50' : 'border-green-300 bg-green-50' }`} + accessibilityLabel="Email Address" + accessibilityHint="Enter your email address" + accessibilityRole="text" + autoCapitalize="none" + autoCorrect={false} /> {errors.email && ( {errors.email} @@ -163,6 +171,11 @@ const EarthForm = () => { ? 'border-red-500 bg-red-50' : 'border-green-300 bg-green-50' }`} + accessibilityLabel="Password" + accessibilityHint="Enter your password (minimum 6 characters)" + accessibilityRole="text" + autoCapitalize="none" + autoCorrect={false} /> {errors.password && ( {errors.password} @@ -183,6 +196,11 @@ const EarthForm = () => { ? 'border-red-500 bg-red-50' : 'border-green-300 bg-green-50' }`} + accessibilityLabel="Confirm Password" + accessibilityHint="Re-enter your password to confirm" + accessibilityRole="text" + autoCapitalize="none" + autoCorrect={false} /> {errors.confirmPassword && ( {errors.confirmPassword} @@ -205,6 +223,10 @@ const EarthForm = () => { ? 'bg-gray-400' : 'bg-green-600 active:bg-green-700' }`} + accessibilityLabel="Submit Form" + accessibilityHint="Submit the form to create your account" + accessibilityRole="button" + accessibilityState={{ disabled: isSubmitting }} > {isSubmitting ? 'Submitting...' : 'Submit Form'} From e81597244a8cf579ac1b90bc748e9193a179db01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Wed, 19 Mar 2025 10:30:00 +0100 Subject: [PATCH 8/9] feat: add smooth animations and transitions - Add Animated import and useRef for animation values - Implement entrance animation with fade, slide, and scale effects - Add success message animation with spring and scale transforms - Wrap form container in Animated.View for smooth transitions - Create engaging user experience with 800ms entrance animation - Add spring animation for success feedback with tension and friction --- test/components/Form/EarthForm.tsx | 74 ++++++++++++++++++++++++++++-- 1 file changed, 69 insertions(+), 5 deletions(-) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index 087217b..adeb162 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -1,10 +1,11 @@ -import React, { useState } from 'react'; +import React, { useState, useRef } from 'react'; import { View, Text, TextInput, TouchableOpacity, ScrollView, + Animated, } from 'react-native'; const EarthForm = () => { @@ -19,6 +20,46 @@ const EarthForm = () => { const [errors, setErrors] = useState<{[key: string]: string}>({}); const [showSuccess, setShowSuccess] = useState(false); + // Animation values + const fadeAnim = useRef(new Animated.Value(0)).current; + const slideAnim = useRef(new Animated.Value(50)).current; + const scaleAnim = useRef(new Animated.Value(0.9)).current; + const successAnim = useRef(new Animated.Value(0)).current; + + React.useEffect(() => { + // Initial entrance animation + Animated.parallel([ + Animated.timing(fadeAnim, { + toValue: 1, + duration: 800, + useNativeDriver: true, + }), + Animated.timing(slideAnim, { + toValue: 0, + duration: 800, + useNativeDriver: true, + }), + Animated.timing(scaleAnim, { + toValue: 1, + duration: 800, + useNativeDriver: true, + }), + ]).start(); + }, []); + + React.useEffect(() => { + if (showSuccess) { + Animated.spring(successAnim, { + toValue: 1, + tension: 100, + friction: 8, + useNativeDriver: true, + }).start(); + } else { + successAnim.setValue(0); + } + }, [showSuccess]); + const handleInputChange = (field: string, value: string) => { setFormData(prev => ({ ...prev, @@ -96,7 +137,16 @@ const EarthForm = () => { return ( - + 🌍 @@ -208,11 +258,25 @@ const EarthForm = () => { {showSuccess && ( - + ✅ Form submitted successfully! Thank you for connecting with nature. - + )} { - + ); From 2ff9fb5a4a6290a7a261897112f393adaa0149ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?tommy-skywalker=C2=A0?= Date: Wed, 19 Mar 2025 10:45:00 +0100 Subject: [PATCH 9/9] refactor: simplify EarthForm to match GalaxyForm style #31 - Remove complex animations and state management - Remove Earth emoji and subtitle text - Simplify to basic form structure like GalaxyForm - Use green-600 for submit button instead of black - Maintain same layout and styling as GalaxyForm but with green theme --- test/components/Form/EarthForm.tsx | 298 ++++------------------------- 1 file changed, 39 insertions(+), 259 deletions(-) diff --git a/test/components/Form/EarthForm.tsx b/test/components/Form/EarthForm.tsx index adeb162..b330df7 100644 --- a/test/components/Form/EarthForm.tsx +++ b/test/components/Form/EarthForm.tsx @@ -1,306 +1,86 @@ -import React, { useState, useRef } from 'react'; import { View, Text, TextInput, TouchableOpacity, ScrollView, - Animated, -} from 'react-native'; +} from "react-native"; const EarthForm = () => { - const [formData, setFormData] = useState({ - name: '', - email: '', - password: '', - confirmPassword: '', - }); - - const [isSubmitting, setIsSubmitting] = useState(false); - const [errors, setErrors] = useState<{[key: string]: string}>({}); - const [showSuccess, setShowSuccess] = useState(false); - - // Animation values - const fadeAnim = useRef(new Animated.Value(0)).current; - const slideAnim = useRef(new Animated.Value(50)).current; - const scaleAnim = useRef(new Animated.Value(0.9)).current; - const successAnim = useRef(new Animated.Value(0)).current; - - React.useEffect(() => { - // Initial entrance animation - Animated.parallel([ - Animated.timing(fadeAnim, { - toValue: 1, - duration: 800, - useNativeDriver: true, - }), - Animated.timing(slideAnim, { - toValue: 0, - duration: 800, - useNativeDriver: true, - }), - Animated.timing(scaleAnim, { - toValue: 1, - duration: 800, - useNativeDriver: true, - }), - ]).start(); - }, []); - - React.useEffect(() => { - if (showSuccess) { - Animated.spring(successAnim, { - toValue: 1, - tension: 100, - friction: 8, - useNativeDriver: true, - }).start(); - } else { - successAnim.setValue(0); - } - }, [showSuccess]); - - const handleInputChange = (field: string, value: string) => { - setFormData(prev => ({ - ...prev, - [field]: value, - })); - - // Clear error when user starts typing - if (errors[field]) { - setErrors(prev => ({ - ...prev, - [field]: '', - })); - } - }; - - const validateForm = () => { - const newErrors: {[key: string]: string} = {}; - - if (!formData.name.trim()) { - newErrors.name = 'Name is required'; - } - - if (!formData.email.trim()) { - newErrors.email = 'Email is required'; - } else if (!/\S+@\S+\.\S+/.test(formData.email)) { - newErrors.email = 'Email is invalid'; - } - - if (!formData.password) { - newErrors.password = 'Password is required'; - } else if (formData.password.length < 6) { - newErrors.password = 'Password must be at least 6 characters'; - } - - if (formData.password !== formData.confirmPassword) { - newErrors.confirmPassword = 'Passwords do not match'; - } - - setErrors(newErrors); - return Object.keys(newErrors).length === 0; - }; - - const handleSubmit = async () => { - if (!validateForm()) { - return; - } - - setIsSubmitting(true); - setShowSuccess(false); - - try { - // Simulate API call - await new Promise(resolve => setTimeout(resolve, 2000)); - - console.log('Form submitted:', formData); - setShowSuccess(true); - - // Reset form after success - setTimeout(() => { - setFormData({ - name: '', - email: '', - password: '', - confirmPassword: '', - }); - setShowSuccess(false); - }, 3000); - } catch (error) { - console.error('Submission error:', error); - } finally { - setIsSubmitting(false); - } - }; - return ( - - - - - 🌍 - - - Earth Form - - - Connect with nature through our form - - + + + + Earth Form + - - Full Name + + FullName * handleInputChange('name', value)} - className={`w-full px-4 py-3 border rounded-lg ${ - errors.name - ? 'border-red-500 bg-red-50' - : 'border-green-300 bg-green-50' - }`} - accessibilityLabel="Full Name" - accessibilityHint="Enter your complete name" - accessibilityRole="text" + placeholder="Enter FullName" + className="w-full px-3 py-2 border border-green-300 rounded mt-1" /> - {errors.name && ( - {errors.name} - )} - - Email Address + + Your Email * handleInputChange('email', value)} + placeholder="name@example.com" keyboardType="email-address" - className={`w-full px-4 py-3 border rounded-lg ${ - errors.email - ? 'border-red-500 bg-red-50' - : 'border-green-300 bg-green-50' - }`} - accessibilityLabel="Email Address" - accessibilityHint="Enter your email address" - accessibilityRole="text" - autoCapitalize="none" - autoCorrect={false} + className="w-full px-3 py-2 border border-green-300 rounded mt-1" /> - {errors.email && ( - {errors.email} - )} - - Password + + Password * handleInputChange('password', value)} + placeholder="Enter Password" secureTextEntry - className={`w-full px-4 py-3 border rounded-lg ${ - errors.password - ? 'border-red-500 bg-red-50' - : 'border-green-300 bg-green-50' - }`} - accessibilityLabel="Password" - accessibilityHint="Enter your password (minimum 6 characters)" - accessibilityRole="text" - autoCapitalize="none" - autoCorrect={false} + className="w-full px-3 py-2 border border-green-300 rounded mt-1" /> - {errors.password && ( - {errors.password} - )} - - Confirm Password + + Confirm Password * handleInputChange('confirmPassword', value)} + placeholder="Confirm Password" secureTextEntry - className={`w-full px-4 py-3 border rounded-lg ${ - errors.confirmPassword - ? 'border-red-500 bg-red-50' - : 'border-green-300 bg-green-50' - }`} - accessibilityLabel="Confirm Password" - accessibilityHint="Re-enter your password to confirm" - accessibilityRole="text" - autoCapitalize="none" - autoCorrect={false} + className="w-full px-3 py-2 border border-green-300 rounded mt-1" /> - {errors.confirmPassword && ( - {errors.confirmPassword} - )} - {showSuccess && ( - - - ✅ Form submitted successfully! Thank you for connecting with nature. - - - )} - - - - {isSubmitting ? 'Submitting...' : 'Submit Form'} + + + Create Account - + + {/* Footer */} + + Already have an account?{" "} + Login + + + + © Copyright 2025{" "} + AlienUI Org.{" "} + All Rights Reserved. + + ); }; -export default EarthForm; +export default EarthForm; \ No newline at end of file