From cd9dbbde84f2965875d81540cc5555776f75f1d6 Mon Sep 17 00:00:00 2001 From: Sridhar <52505654+sridhar852002@users.noreply.github.com> Date: Fri, 30 May 2025 02:24:46 +0530 Subject: [PATCH] Create auth.tsx sign in and sign up page --- src/components/Auth/auth.tsx | 409 +++++++++++++++++++++++++++++++++++ 1 file changed, 409 insertions(+) create mode 100644 src/components/Auth/auth.tsx diff --git a/src/components/Auth/auth.tsx b/src/components/Auth/auth.tsx new file mode 100644 index 0000000..ad4df91 --- /dev/null +++ b/src/components/Auth/auth.tsx @@ -0,0 +1,409 @@ +import React, { useState } from 'react'; +import { Eye, EyeOff, Mail, Lock, User } from 'lucide-react'; + +const AuthApp = () => { + const [currentView, setCurrentView] = useState('signin'); // 'signin' or 'signup' + + return ( +
+ {currentView === 'signin' ? ( + setCurrentView('signup')} /> + ) : ( + setCurrentView('signin')} /> + )} +
+ ); +}; + +const SignIn = ({ onSwitchToSignUp }) => { + const [formData, setFormData] = useState({ + email: '', + password: '' + }); + const [showPassword, setShowPassword] = useState(false); + const [errors, setErrors] = useState({}); + const [isLoading, setIsLoading] = useState(false); + + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + + // Clear error when user starts typing + if (errors[name]) { + setErrors(prev => ({ ...prev, [name]: '' })); + } + }; + + const handleSubmit = async () => { + const newErrors = {}; + + // Basic validation + if (!formData.email) { + newErrors.email = 'Email is required'; + } else if (!formData.email.includes('@')) { + newErrors.email = 'Please enter a valid email'; + } + + if (!formData.password) { + newErrors.password = 'Password is required'; + } + + setErrors(newErrors); + + if (Object.keys(newErrors).length === 0) { + setIsLoading(true); + // Simulate API call + setTimeout(() => { + setIsLoading(false); + alert('Sign in successful!'); + // Here you would handle successful login + }, 1500); + } + }; + + return ( +
+
+
+

Welcome Back

+

Sign in to your account

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

{errors.email}

+ )} +
+ + {/* Password Field */} +
+ +
+ + + +
+ {errors.password && ( +

{errors.password}

+ )} + {formData.password && ( +
+

Password must contain:

+
+
= 10 ? 'text-green-600' : 'text-red-500'}`}> + {formData.password.length >= 10 ? '✓' : '×'} + At least 10 characters +
+
+ {/[A-Z]/.test(formData.password) ? '✓' : '×'} + One uppercase letter +
+
+ {/\d/.test(formData.password) ? '✓' : '×'} + One number +
+
\/?]/.test(formData.password) ? 'text-green-600' : 'text-red-500'}`}> + {/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(formData.password) ? '✓' : '×'} + One symbol (!@#$%^&* etc.) +
+
+
+ )} +
+ + {/* Remember Me & Forgot Password */} +
+ + + Forgot password? + +
+ + {/* Sign In Button */} + +
+ + {/* Switch to Sign Up */} +
+

+ Don't have an account?{' '} + +

+
+
+
+ ); +}; + +const SignUp = ({ onSwitchToSignIn }) => { + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '', + confirmPassword: '' + }); + const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const [errors, setErrors] = useState({}); + const [isLoading, setIsLoading] = useState(false); + + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ ...prev, [name]: value })); + + // Clear error when user starts typing + if (errors[name]) { + setErrors(prev => ({ ...prev, [name]: '' })); + } + }; + + const handleSubmit = async () => { + const newErrors = {}; + + // Basic validation + if (!formData.name.trim()) { + newErrors.name = 'Full name is required'; + } + + if (!formData.email) { + newErrors.email = 'Email is required'; + } else if (!formData.email.includes('@')) { + newErrors.email = 'Please enter a valid email'; + } + + if (!formData.password) { + newErrors.password = 'Password is required'; + } else { + const passwordErrors = []; + if (formData.password.length < 10) passwordErrors.push('at least 10 characters'); + if (!/[A-Z]/.test(formData.password)) passwordErrors.push('one uppercase letter'); + if (!/\d/.test(formData.password)) passwordErrors.push('one number'); + if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(formData.password)) passwordErrors.push('one symbol'); + + if (passwordErrors.length > 0) { + newErrors.password = `Password must contain: ${passwordErrors.join(', ')}`; + } + } + + if (!formData.confirmPassword) { + newErrors.confirmPassword = 'Please confirm your password'; + } else if (formData.password !== formData.confirmPassword) { + newErrors.confirmPassword = 'Passwords do not match'; + } + + setErrors(newErrors); + + if (Object.keys(newErrors).length === 0) { + setIsLoading(true); + // Simulate API call + setTimeout(() => { + setIsLoading(false); + alert('Account created successfully!'); + // Here you would handle successful registration + }, 1500); + } + }; + + return ( +
+
+
+

Create Account

+

Sign up for a new account

+
+ +
+ {/* Name Field */} +
+ +
+ + +
+ {errors.name && ( +

{errors.name}

+ )} +
+ + {/* Email Field */} +
+ +
+ + +
+ {errors.email && ( +

{errors.email}

+ )} +
+ + {/* Password Field */} +
+ +
+ + + +
+ {errors.password && ( +

{errors.password}

+ )} +
+ + {/* Confirm Password Field */} +
+ +
+ + + +
+ {errors.confirmPassword && ( +

{errors.confirmPassword}

+ )} +
+ + {/* Terms Agreement */} +
+ + + I agree to the{' '} + Terms of Service + {' '}and{' '} + Privacy Policy + +
+ + {/* Sign Up Button */} + +
+ + {/* Switch to Sign In */} +
+

+ Already have an account?{' '} + +

+
+
+
+ ); +}; + +export default AuthApp;