100 Unique Login & Signup Forms in React

Project Setup

npx create-react-app 100-login-forms cd 100-login-forms npm install styled-components react-icons framer-motion @mui/material @chakra-ui/react react-bootstrap

Now, here are all 100 forms with their introductions and features:

Form 1: Classic Minimalist Login

Introduction: A clean, centered login form with essential fields and a gradient background. Perfect for modern web applications.

Features: Email validation, password masking, smooth hover effects, responsive design.

import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 350px; `; const Title = styled.h2` text-align: center; color: #333; margin-bottom: 30px; `; const Input = styled.input` width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; `; const Button = styled.button` width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background 0.3s; &:hover { background: #764ba2; } `; const Form1 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); const handleSubmit = (e) => { e.preventDefault(); console.log('Login attempt:', formData); }; return ( <Container> <Form onSubmit={handleSubmit}> <Title>Welcome Back</Title> <Input type="email" placeholder="Email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} required /> <Input type="password" placeholder="Password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} required /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form1;

Form 2: Social Media Login Hub

Introduction: A comprehensive login system that integrates with major social platforms. Features one-click authentication options.

Features: Social login buttons (Google, Facebook, Twitter), remember me checkbox, forgot password link.

import React from 'react'; import styled from 'styled-components'; import { FcGoogle } from 'react-icons/fc'; import { FaFacebook, FaTwitter } from 'react-icons/fa'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f5f5f5; `; const Form = styled.form` background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); width: 400px; `; const SocialButton = styled.button` width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 25px; background: white; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: all 0.3s; &:hover { background: ${props => props.bg || '#f8f9fa'}; transform: translateY(-2px); } `; const Divider = styled.div` text-align: center; margin: 20px 0; position: relative; &::before, &::after { content: ''; position: absolute; top: 50%; width: 45%; height: 1px; background: #ddd; } &::before { left: 0; } &::after { right: 0; } `; const Form2 = () => { const handleSocialLogin = (provider) => { console.log(`Logging in with ${provider}`); }; return ( <Container> <Form> <h2 style={{ textAlign: 'center', marginBottom: 30 }}>Welcome Back</h2> <SocialButton onClick={() => handleSocialLogin('Google')} bg="#f8f9fa"> <FcGoogle size={20} /> Continue with Google </SocialButton> <SocialButton onClick={() => handleSocialLogin('Facebook')} bg="#f0f2f5"> <FaFacebook size={20} color="#1877f2" /> Continue with Facebook </SocialButton> <SocialButton onClick={() => handleSocialLogin('Twitter')} bg="#f8f9fa"> <FaTwitter size={20} color="#1da1f2" /> Continue with Twitter </SocialButton> <Divider>or</Divider> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <div style={{ display: 'flex', justifyContent: 'space-between', margin: '15px 0' }}> <label> <input type="checkbox" /> Remember me </label> <a href="#" style={{ color: '#667eea', textDecoration: 'none' }}>Forgot Password?</a> </div> <button style={loginButtonStyle}>Sign In</button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const loginButtonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '25px', fontSize: '16px', cursor: 'pointer', marginTop: '15px' }; export default Form2;

Form 3: Password Strength Signup

Introduction: A secure registration form with real-time password strength indicator and validation rules.

Features: Password strength meter, password confirmation, strength requirements checklist, visual feedback.

import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #1a1a2e; `; const Form = styled.form` background: #16213e; padding: 40px; border-radius: 10px; width: 400px; color: white; `; const Input = styled.input` width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #0f3460; border-radius: 5px; background: #0f3460; color: white; font-size: 16px; `; const StrengthMeter = styled.div` height: 5px; background: #0f3460; margin: 10px 0; border-radius: 5px; overflow: hidden; `; const StrengthBar = styled.div` height: 100%; width: ${props => props.strength}%; background: ${props => { if (props.strength < 30) return '#e74c3c'; if (props.strength < 60) return '#f39c12'; if (props.strength < 80) return '#3498db'; return '#2ecc71'; }}; transition: width 0.3s; `; const Requirement = styled.div` color: ${props => props.met ? '#2ecc71' : '#e74c3c'}; font-size: 14px; margin: 5px 0; display: flex; align-items: center; gap: 5px; `; const Form3 = () => { const [formData, setFormData] = useState({ username: '', email: '', password: '', confirmPassword: '' }); const calculateStrength = (password) => { let strength = 0; if (password.length >= 8) strength += 25; if (password.match(/[a-z]+/)) strength += 25; if (password.match(/[A-Z]+/)) strength += 25; if (password.match(/[0-9]+/)) strength += 15; if (password.match(/[$@#&!]+/)) strength += 10; return strength; }; const requirements = [ { text: 'At least 8 characters', test: (p) => p.length >= 8 }, { text: 'Contains lowercase letter', test: (p) => /[a-z]/.test(p) }, { text: 'Contains uppercase letter', test: (p) => /[A-Z]/.test(p) }, { text: 'Contains number', test: (p) => /[0-9]/.test(p) }, { text: 'Contains special character', test: (p) => /[$@#&!]/.test(p) }, { text: 'Passwords match', test: (p) => p === formData.confirmPassword } ]; return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30 }}>Create Account</h2> <Input type="text" placeholder="Username" value={formData.username} onChange={(e) => setFormData({...formData, username: e.target.value})} /> <Input type="email" placeholder="Email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> <Input type="password" placeholder="Password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> <StrengthMeter> <StrengthBar strength={calculateStrength(formData.password)} /> </StrengthMeter> <Input type="password" placeholder="Confirm Password" value={formData.confirmPassword} onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})} /> <div style={{ marginTop: 20 }}> {requirements.map((req, index) => ( <Requirement key={index} met={req.test(formData.password)}> {req.test(formData.password) ? '✓' : '✗'} {req.text} </Requirement> ))} </div> <button style={signupButtonStyle}>Sign Up</button> </Form> </Container> ); }; const signupButtonStyle = { width: '100%', padding: '12px', background: '#e94560', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: 20 }; export default Form3;

Form 4: Two-Factor Authentication

Introduction: Enhanced security form with OTP verification for two-factor authentication.

Features: OTP input fields, timer for code expiration, auto-focus between fields, resend option.

import React, { useState, useRef, useEffect } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2c3e50; `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; text-align: center; width: 400px; `; const OtpInput = styled.input` width: 50px; height: 50px; margin: 0 5px; text-align: center; font-size: 20px; border: 2px solid #3498db; border-radius: 5px; outline: none; &:focus { border-color: #2980b9; } `; const Timer = styled.div` color: #e74c3c; font-size: 18px; margin: 20px 0; `; const Form4 = () => { const [otp, setOtp] = useState(['', '', '', '', '', '']); const [timer, setTimer] = useState(60); const inputRefs = useRef([]); useEffect(() => { if (timer > 0) { const interval = setInterval(() => setTimer(timer - 1), 1000); return () => clearInterval(interval); } }, [timer]); const handleChange = (index, value) => { if (value.length <= 1 && /^\d*$/.test(value)) { const newOtp = [...otp]; newOtp[index] = value; setOtp(newOtp); if (value && index < 5) { inputRefs.current[index + 1].focus(); } } }; const handleKeyDown = (index, e) => { if (e.key === 'Backspace' && !otp[index] && index > 0) { inputRefs.current[index - 1].focus(); } }; const handleSubmit = () => { const otpCode = otp.join(''); console.log('Verifying OTP:', otpCode); }; return ( <Container> <Form> <h2>Two-Factor Authentication</h2> <p style={{ color: '#7f8c8d', marginBottom: 30 }}> Enter the 6-digit code sent to your email </p> <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}> {otp.map((digit, index) => ( <OtpInput key={index} type="text" maxLength="1" value={digit} ref={(el) => inputRefs.current[index] = el} onChange={(e) => handleChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} /> ))} </div> <Timer> {Math.floor(timer / 60)}:{(timer % 60).toString().padStart(2, '0')} </Timer> <button style={verifyButtonStyle} onClick={handleSubmit}> Verify Code </button> <p style={{ marginTop: 20 }}> Didn't receive code?{' '} <button style={resendButtonStyle} disabled={timer > 0}> Resend {timer > 0 && `(${timer}s)`} </button> </p> </Form> </Container> ); }; const verifyButtonStyle = { width: '100%', padding: '12px', background: '#3498db', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer' }; const resendButtonStyle = { background: 'none', border: 'none', color: '#3498db', cursor: 'pointer', textDecoration: 'underline', fontSize: '14px' }; export default Form4;

Form 5: Biometric Login (Fingerprint)

Introduction: Modern authentication using biometric fingerprint scanning simulation.

Features: Fingerprint animation, touch ID simulation, fallback password option.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; import { FaFingerprint } from 'react-icons/fa'; const pulse = keyframes` 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 20px; text-align: center; width: 350px; `; const FingerprintIcon = styled(FaFingerprint)` font-size: 100px; color: #667eea; animation: ${pulse} 2s infinite; cursor: pointer; margin: 20px 0; `; const Form5 = () => { const [showPassword, setShowPassword] = useState(false); const [scanning, setScanning] = useState(false); const handleFingerprint = () => { setScanning(true); setTimeout(() => { setScanning(false); console.log('Fingerprint authenticated'); }, 2000); }; return ( <Container> <Form> <h2>Biometric Login</h2> <p style={{ color: '#666', marginBottom: 20 }}> Touch the fingerprint sensor to login </p> <FingerprintIcon onClick={handleFingerprint} /> {scanning && ( <p style={{ color: '#667eea', marginTop: 10 }}> Scanning fingerprint... </p> )} <p style={{ margin: '20px 0' }}>or</p> {!showPassword ? ( <button style={passwordButtonStyle} onClick={() => setShowPassword(true)}> Use Password Instead </button> ) : ( <div> <input type="password" placeholder="Enter password" style={inputStyle} /> <button style={loginButtonStyle}>Login</button> </div> )} </Form> </Container> ); }; const passwordButtonStyle = { background: 'none', border: '1px solid #667eea', color: '#667eea', padding: '10px 20px', borderRadius: '5px', cursor: 'pointer' }; const inputStyle = { width: '100%', padding: '10px', margin: '10px 0', border: '1px solid #ddd', borderRadius: '5px' }; const loginButtonStyle = { width: '100%', padding: '10px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }; export default Form5;

Form 6: Multi-Step Registration

Introduction: A wizard-style registration form that breaks down the signup process into manageable steps.

Features: Progress indicator, step navigation, data persistence between steps, validation per step.

import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f8f9fa; `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 500px; `; const ProgressBar = styled.div` display: flex; justify-content: space-between; margin-bottom: 40px; position: relative; &::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #e9ecef; transform: translateY(-50%); z-index: 1; } `; const Step = styled.div` width: 35px; height: 35px; border-radius: 50%; background: ${props => props.active ? '#007bff' : '#e9ecef'}; color: ${props => props.active ? 'white' : '#6c757d'}; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: all 0.3s; `; const Form6 = () => { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ // Step 1 name: '', email: '', // Step 2 phone: '', address: '', // Step 3 username: '', password: '' }); const steps = ['Account', 'Personal', 'Security']; const nextStep = () => { setStep(step + 1); }; const prevStep = () => { setStep(step - 1); }; const renderStep = () => { switch(step) { case 1: return ( <div> <h3>Account Information</h3> <input type="text" placeholder="Full Name" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} style={inputStyle} /> <input type="email" placeholder="Email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} style={inputStyle} /> </div> ); case 2: return ( <div> <h3>Personal Details</h3> <input type="tel" placeholder="Phone Number" value={formData.phone} onChange={(e) => setFormData({...formData, phone: e.target.value})} style={inputStyle} /> <input type="text" placeholder="Address" value={formData.address} onChange={(e) => setFormData({...formData, address: e.target.value})} style={inputStyle} /> </div> ); case 3: return ( <div> <h3>Security Setup</h3> <input type="text" placeholder="Username" value={formData.username} onChange={(e) => setFormData({...formData, username: e.target.value})} style={inputStyle} /> <input type="password" placeholder="Password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} style={inputStyle} /> </div> ); default: return null; } }; return ( <Container> <Form> <ProgressBar> {steps.map((label, index) => ( <Step key={index} active={index + 1 === step}> {index + 1} </Step> ))} </ProgressBar> {renderStep()} <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 20 }}> {step > 1 && ( <button onClick={prevStep} style={secondaryButtonStyle}> Previous </button> )} {step < 3 ? ( <button onClick={nextStep} style={primaryButtonStyle}> Next </button> ) : ( <button onClick={() => console.log('Form submitted:', formData)} style={primaryButtonStyle}> Submit </button> )} </div> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '10px 0', border: '1px solid #ced4da', borderRadius: '5px', fontSize: '16px' }; const primaryButtonStyle = { padding: '10px 30px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }; const secondaryButtonStyle = { padding: '10px 30px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }; export default Form6;

Form 7: Magic Link Email Login

Introduction: Passwordless authentication using email magic links for secure and convenient access.

Features: Email input with validation, loading states, success feedback, error handling.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; import { FiMail, FiCheck, FiX } from 'react-icons/fi'; const spin = keyframes` 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f8f9fa; `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; text-align: center; width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); `; const IconWrapper = styled.div` font-size: 60px; color: #28a745; margin-bottom: 20px; `; const Loader = styled.div` border: 3px solid #f3f3f3; border-top: 3px solid #28a745; border-radius: 50%; width: 40px; height: 40px; animation: ${spin} 1s linear infinite; margin: 20px auto; `; const Form7 = () => { const [email, setEmail] = useState(''); const [status, setStatus] = useState('idle'); // idle, loading, success, error const handleSubmit = async (e) => { e.preventDefault(); setStatus('loading'); // Simulate API call setTimeout(() => { if (email.includes('@')) { setStatus('success'); } else { setStatus('error'); } }, 2000); }; return ( <Container> <Form> <IconWrapper> <FiMail /> </IconWrapper> <h2>Magic Link Login</h2> <p style={{ color: '#6c757d', marginBottom: 30 }}> Enter your email and we'll send you a magic link to sign in instantly. </p> {status === 'idle' && ( <form onSubmit={handleSubmit}> <input type="email" placeholder="[email protected]" value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} required /> <button type="submit" style={buttonStyle}> Send Magic Link </button> </form> )} {status === 'loading' && ( <div> <Loader /> <p>Sending magic link to {email}...</p> </div> )} {status === 'success' && ( <div> <FiCheck size={50} color="#28a745" /> <h3 style={{ color: '#28a745', margin: '10px 0' }}>Check Your Email!</h3> <p>We've sent a magic link to {email}. Click the link to sign in.</p> <button onClick={() => setStatus('idle')} style={{ ...buttonStyle, background: '#6c757d', marginTop: 20 }} > Use Different Email </button> </div> )} {status === 'error' && ( <div> <FiX size={50} color="#dc3545" /> <h3 style={{ color: '#dc3545', margin: '10px 0' }}>Invalid Email</h3> <p>Please enter a valid email address.</p> <button onClick={() => setStatus('idle')} style={{ ...buttonStyle, background: '#dc3545', marginTop: 20 }} > Try Again </button> </div> )} </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '10px 0', border: '1px solid #ced4da', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#28a745', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer' }; export default Form7;

Form 8: QR Code Login

Introduction: Innovative login method using QR code scanning for mobile authentication.

Features: Dynamic QR code generation, session tracking, mobile responsive design.

import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import QRCode from 'qrcode.react'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; text-align: center; width: 400px; `; const QrWrapper = styled.div` padding: 20px; background: #f8f9fa; border-radius: 10px; margin: 20px 0; display: inline-block; `; const SessionId = styled.div` font-family: monospace; background: #e9ecef; padding: 10px; border-radius: 5px; margin: 10px 0; font-size: 14px; `; const Form8 = () => { const [sessionId, setSessionId] = useState(''); const [scanned, setScanned] = useState(false); useEffect(() => { // Generate random session ID setSessionId(Math.random().toString(36).substring(7)); // Simulate QR scan after 10 seconds const timer = setTimeout(() => { setScanned(true); }, 10000); return () => clearTimeout(timer); }, []); return ( <Container> <Form> <h2>QR Code Login</h2> <p style={{ color: '#666', marginBottom: 20 }}> Scan this QR code with your mobile device </p> <QrWrapper> <QRCode value={`login-session:${sessionId}`} size={200} level="H" includeMargin={true} /> </QrWrapper> <SessionId> Session ID: {sessionId} </SessionId> {scanned ? ( <div style={{ color: '#28a745', marginTop: 20 }}> ✓ QR Code Scanned! Redirecting... </div> ) : ( <div style={{ marginTop: 20 }}> <p>Waiting for scan...</p> <div style={loaderStyle}></div> </div> )} <p style={{ marginTop: 20, fontSize: 14, color: '#999' }}> QR code expires in 5 minutes </p> </Form> </Container> ); }; const loaderStyle = { border: '3px solid #f3f3f3', borderTop: '3px solid #667eea', borderRadius: '50%', width: '30px', height: '30px', animation: 'spin 1s linear infinite', margin: '10px auto' }; export default Form8;

Form 9: Phone Number Verification

Introduction: Mobile-first authentication using phone numbers and SMS verification codes.

Features: Country code selector, phone formatting, SMS code input, resend timer.

import React, { useState } from 'react'; import styled from 'styled-components'; import PhoneInput from 'react-phone-input-2'; import 'react-phone-input-2/lib/style.css'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #2c3e50; `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 400px; `; const CodeInput = styled.input` width: 50px; height: 50px; text-align: center; font-size: 20px; margin: 0 5px; border: 2px solid #3498db; border-radius: 5px; `; const Form9 = () => { const [step, setStep] = useState(1); const [phone, setPhone] = useState(''); const [code, setCode] = useState(['', '', '', '']); const [timer, setTimer] = useState(60); const sendCode = () => { setStep(2); // Start countdown const interval = setInterval(() => { setTimer((t) => { if (t <= 1) { clearInterval(interval); return 0; } return t - 1; }); }, 1000); }; const verifyCode = () => { const verificationCode = code.join(''); console.log('Verifying:', verificationCode); }; return ( <Container> <Form> {step === 1 ? ( <> <h2>Phone Verification</h2> <p style={{ color: '#7f8c8d', marginBottom: 20 }}> Enter your phone number to receive a verification code </p> <PhoneInput country={'us'} value={phone} onChange={setPhone} containerStyle={{ width: '100%' }} inputStyle={{ width: '100%', height: '45px' }} /> <button onClick={sendCode} style={buttonStyle} disabled={!phone} > Send Code </button> </> ) : ( <> <h2>Enter Verification Code</h2> <p style={{ color: '#7f8c8d', marginBottom: 20 }}> We've sent a 4-digit code to {phone} </p> <div style={{ display: 'flex', justifyContent: 'center', margin: '20px 0' }}> {code.map((digit, index) => ( <CodeInput key={index} type="text" maxLength="1" value={digit} onChange={(e) => { const newCode = [...code]; newCode[index] = e.target.value; setCode(newCode); }} /> ))} </div> {timer > 0 ? ( <p style={{ color: '#e74c3c' }}> Resend code in {timer} seconds </p> ) : ( <button onClick={sendCode} style={resendStyle} > Resend Code </button> )} <button onClick={verifyCode} style={buttonStyle} disabled={code.some(d => !d)} > Verify </button> </> )} </Form> </Container> ); }; const buttonStyle = { width: '100%', padding: '12px', background: '#3498db', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: 20 }; const resendStyle = { background: 'none', border: 'none', color: '#3498db', textDecoration: 'underline', cursor: 'pointer', margin: '10px 0' }; export default Form9;

Form 10: Voice Recognition Login

Introduction: Futuristic authentication using voice biometrics for hands-free login.

Features: Microphone access, voice recording visualization, voice match feedback.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; import { FaMicrophone } from 'react-icons/fa'; const pulse = keyframes` 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } `; const wave = keyframes` 0% { height: 20px; } 50% { height: 60px; } 100% { height: 20px; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; text-align: center; width: 400px; `; const MicButton = styled.button` background: ${props => props.listening ? '#e74c3c' : '#3498db'}; border: none; border-radius: 50%; width: 80px; height: 80px; cursor: pointer; animation: ${props => props.listening ? pulse : 'none'} 1s infinite; margin: 20px auto; display: flex; align-items: center; justify-content: center; svg { color: white; font-size: 40px; } `; const WaveContainer = styled.div` display: flex; justify-content: center; align-items: center; gap: 5px; height: 60px; margin: 20px 0; `; const Wave = styled.div` width: 10px; height: ${props => props.height}px; background: #3498db; border-radius: 5px; animation: ${wave} 1s ease-in-out infinite; animation-delay: ${props => props.delay}s; `; const Form10 = () => { const [listening, setListening] = useState(false); const [matched, setMatched] = useState(false); const startListening = () => { setListening(true); // Simulate voice processing setTimeout(() => { setListening(false); setMatched(true); }, 3000); }; return ( <Container> <Form> <h2>Voice Recognition Login</h2> <p style={{ color: '#666', marginBottom: 20 }}> Say your passphrase to log in </p> <MicButton listening={listening} onClick={startListening} disabled={matched}> <FaMicrophone /> </MicButton> {listening && ( <WaveContainer> {[0, 0.1, 0.2, 0.3, 0.4, 0.5].map((delay, i) => ( <Wave key={i} delay={delay} height={20 + Math.random() * 40} /> ))} </WaveContainer> )} {matched && ( <div style={{ color: '#27ae60', marginTop: 20 }}> ✓ Voice matched! Logging you in... </div> )} {!listening && !matched && ( <p style={{ marginTop: 20, color: '#7f8c8d' }}> Click the microphone and say "My voice is my password" </p> )} </Form> </Container> ); }; export default Form10;

Form 11: Dark Mode Toggle Login

Introduction: Stylish login form with built-in dark/light mode switching for user preference.

Features: Theme toggle, localStorage persistence, smooth transitions, accessible color contrast.

import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { FiSun, FiMoon } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: ${props => props.theme === 'dark' ? '#1a1a1a' : '#f8f9fa'}; transition: background 0.3s; `; const Form = styled.form` background: ${props => props.theme === 'dark' ? '#2d2d2d' : 'white'}; padding: 40px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 350px; transition: all 0.3s; `; const Title = styled.h2` text-align: center; color: ${props => props.theme === 'dark' ? '#fff' : '#333'}; margin-bottom: 30px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 10px 0; border: 1px solid ${props => props.theme === 'dark' ? '#444' : '#ddd'}; border-radius: 5px; background: ${props => props.theme === 'dark' ? '#3d3d3d' : 'white'}; color: ${props => props.theme === 'dark' ? '#fff' : '#333'}; font-size: 16px; `; const Button = styled.button` width: 100%; padding: 12px; background: ${props => props.theme === 'dark' ? '#007bff' : '#667eea'}; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background 0.3s; &:hover { background: ${props => props.theme === 'dark' ? '#0056b3' : '#764ba2'}; } `; const ThemeToggle = styled.button` position: absolute; top: 20px; right: 20px; background: ${props => props.theme === 'dark' ? '#2d2d2d' : 'white'}; border: 1px solid ${props => props.theme === 'dark' ? '#444' : '#ddd'}; border-radius: 30px; padding: 10px 20px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: ${props => props.theme === 'dark' ? '#fff' : '#333'}; `; const Form11 = () => { const [theme, setTheme] = useState('light'); useEffect(() => { const savedTheme = localStorage.getItem('theme'); if (savedTheme) { setTheme(savedTheme); } }, []); const toggleTheme = () => { const newTheme = theme === 'light' ? 'dark' : 'light'; setTheme(newTheme); localStorage.setItem('theme', newTheme); }; return ( <Container theme={theme}> <ThemeToggle theme={theme} onClick={toggleTheme}> {theme === 'light' ? <FiMoon /> : <FiSun />} {theme === 'light' ? 'Dark Mode' : 'Light Mode'} </ThemeToggle> <Form theme={theme} onSubmit={(e) => e.preventDefault()}> <Title theme={theme}>Welcome Back</Title> <Input theme={theme} type="email" placeholder="Email" /> <Input theme={theme} type="password" placeholder="Password" /> <Button theme={theme} type="submit"> Sign In </Button> </Form> </Container> ); }; export default Form11;

Form 12: CAPTCHA Protected Login

Introduction: Enhanced security form with CAPTCHA verification to prevent automated attacks.

Features: Math CAPTCHA generation, validation, refresh option, accessibility support.

import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { FiRefreshCw } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; width: 350px; `; const CaptchaBox = styled.div` background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 15px 0; display: flex; align-items: center; justify-content: space-between; font-size: 24px; font-weight: bold; font-family: monospace; `; const RefreshButton = styled.button` background: none; border: none; color: #667eea; cursor: pointer; font-size: 20px; `; const Form12 = () => { const [formData, setFormData] = useState({ email: '', password: '', captcha: '' }); const [captcha, setCaptcha] = useState({ num1: 0, num2: 0, result: 0 }); const generateCaptcha = () => { const num1 = Math.floor(Math.random() * 10); const num2 = Math.floor(Math.random() * 10); setCaptcha({ num1, num2, result: num1 + num2 }); }; useEffect(() => { generateCaptcha(); }, []); const handleSubmit = (e) => { e.preventDefault(); if (parseInt(formData.captcha) === captcha.result) { console.log('CAPTCHA valid, logging in...'); } else { alert('Incorrect CAPTCHA'); generateCaptcha(); } }; return ( <Container> <Form onSubmit={handleSubmit}> <h2 style={{ textAlign: 'center', marginBottom: 30 }}>Secure Login</h2> <input type="email" placeholder="Email" style={inputStyle} value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} required /> <input type="password" placeholder="Password" style={inputStyle} value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} required /> <CaptchaBox> <span>{captcha.num1} + {captcha.num2} = ?</span> <RefreshButton type="button" onClick={generateCaptcha}> <FiRefreshCw /> </RefreshButton> </CaptchaBox> <input type="text" placeholder="Enter result" style={inputStyle} value={formData.captcha} onChange={(e) => setFormData({...formData, captcha: e.target.value})} required /> <button type="submit" style={buttonStyle}> Verify & Login </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '10px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: 15 }; export default Form12;

Form 13: Animated Floating Label Login

Introduction: Modern login form with smooth floating labels that animate on focus and when filled.

Features: CSS transitions, placeholder transformation, focus states, validation indicators.

import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; width: 350px; `; const InputGroup = styled.div` position: relative; margin: 30px 0; `; const Input = styled.input` width: 100%; padding: 10px 0; font-size: 16px; color: #333; border: none; border-bottom: 2px solid #ddd; outline: none; transition: 0.3s; &:focus { border-bottom-color: #667eea; } &:focus ~ label, &:valid ~ label { top: -20px; font-size: 12px; color: #667eea; } `; const Label = styled.label` position: absolute; top: 10px; left: 0; font-size: 16px; color: #999; pointer-events: none; transition: 0.3s; `; const Form13 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 40 }}>Floating Labels</h2> <InputGroup> <Input type="email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} required /> <Label>Email Address</Label> </InputGroup> <InputGroup> <Input type="password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} required /> <Label>Password</Label> </InputGroup> <button type="submit" style={buttonStyle}> Sign In </button> </Form> </Container> ); }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: 20 }; export default Form13;

Form 14: Slide-to-Login Gesture

Introduction: Interactive login form with a slider that must be dragged to submit.

Features: Drag gesture recognition, progress tracking, haptic feedback simulation, animation.

import React, { useState, useRef } from 'react'; import styled from 'styled-components'; import { FiArrowRight } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 350px; `; const SliderContainer = styled.div` position: relative; width: 100%; height: 60px; background: #f0f0f0; border-radius: 30px; margin: 30px 0; overflow: hidden; `; const SliderTrack = styled.div` position: absolute; left: 0; top: 0; height: 100%; width: ${props => props.progress}%; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.1s; `; const SliderThumb = styled.div` position: absolute; left: ${props => props.position}px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: white; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; cursor: grab; z-index: 10; `; const Form14 = () => { const [progress, setProgress] = useState(0); const [dragging, setDragging] = useState(false); const sliderRef = useRef(null); const thumbRef = useRef(null); const handleMouseDown = () => { setDragging(true); }; const handleMouseMove = (e) => { if (!dragging) return; const sliderRect = sliderRef.current.getBoundingClientRect(); const thumbRect = thumbRef.current.getBoundingClientRect(); let newX = e.clientX - sliderRect.left - thumbRect.width / 2; // Constrain within slider newX = Math.max(0, Math.min(newX, sliderRect.width - thumbRect.width)); const newProgress = (newX / (sliderRect.width - thumbRect.width)) * 100; setProgress(newProgress); if (newProgress >= 95) { console.log('Login successful!'); setDragging(false); } }; const handleMouseUp = () => { if (progress < 95) { setProgress(0); } setDragging(false); }; React.useEffect(() => { if (dragging) { window.addEventListener('mousemove', handleMouseMove); window.addEventListener('mouseup', handleMouseUp); } return () => { window.removeEventListener('mousemove', handleMouseMove); window.removeEventListener('mouseup', handleMouseUp); }; }, [dragging, progress]); return ( <Container> <Form> <h2 style={{ textAlign: 'center' }}>Slide to Login</h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <SliderContainer ref={sliderRef}> <SliderTrack progress={progress} /> <SliderThumb ref={thumbRef} position={progress * 2.9} onMouseDown={handleMouseDown} > <FiArrowRight /> </SliderThumb> <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', color: progress > 50 ? 'white' : '#999', zIndex: 5 }}> {progress >= 95 ? '✓ Logged in!' : 'Slide to login'} </div> </SliderContainer> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '10px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; export default Form14;

Form 15: Gradient Border Animation

Introduction: Visually striking login form with animated gradient borders that shift colors.

Features: CSS keyframe animations, gradient transitions, hover effects, modern design.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; const gradient = keyframes` 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0a0a0a; `; const Form = styled.form` background: #1a1a1a; padding: 40px; border-radius: 10px; width: 350px; position: relative; &::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); background-size: 400%; border-radius: 12px; animation: ${gradient} 20s linear infinite; z-index: -1; } `; const Title = styled.h2` text-align: center; color: white; margin-bottom: 30px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #333; border-radius: 5px; background: #2a2a2a; color: white; font-size: 16px; transition: border-color 0.3s; &:focus { border-color: #007bff; outline: none; } `; const Button = styled.button` width: 100%; padding: 12px; background: linear-gradient(45deg, #667eea, #764ba2); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: transform 0.3s; &:hover { transform: scale(1.05); } `; const Form15 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <Title>Animated Border</Title> <Input type="email" placeholder="Email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> <Input type="password" placeholder="Password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form15;

Form 16: Passwordless Email OTP

Introduction: Streamlined authentication using email-based one-time passwords without traditional passwords.

Features: Email validation, OTP generation, automatic code detection, clipboard support.

import React, { useState, useRef, useEffect } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #11998e, #38ef7d); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 400px; text-align: center; `; const OtpContainer = styled.div` display: flex; justify-content: center; gap: 10px; margin: 30px 0; `; const OtpInput = styled.input` width: 50px; height: 50px; text-align: center; font-size: 20px; border: 2px solid #e0e0e0; border-radius: 8px; &:focus { border-color: #11998e; outline: none; } `; const Form16 = () => { const [email, setEmail] = useState(''); const [step, setStep] = useState(1); const [otp, setOtp] = useState(['', '', '', '', '', '']); const [timer, setTimer] = useState(30); const inputRefs = useRef([]); useEffect(() => { if (step === 2 && timer > 0) { const interval = setInterval(() => setTimer(t => t - 1), 1000); return () => clearInterval(interval); } }, [step, timer]); const handleOtpChange = (index, value) => { if (value.length <= 1 && /^\d*$/.test(value)) { const newOtp = [...otp]; newOtp[index] = value; setOtp(newOtp); if (value && index < 5) { inputRefs.current[index + 1].focus(); } } }; const handleKeyDown = (index, e) => { if (e.key === 'Backspace' && !otp[index] && index > 0) { inputRefs.current[index - 1].focus(); } }; const handlePaste = (e) => { e.preventDefault(); const pastedData = e.clipboardData.getData('text/plain').slice(0, 6); if (/^\d+$/.test(pastedData)) { const newOtp = [...otp]; pastedData.split('').forEach((char, index) => { if (index < 6) newOtp[index] = char; }); setOtp(newOtp); } }; return ( <Container> <Form> {step === 1 ? ( <> <h2>Passwordless Login</h2> <p style={{ color: '#666', marginBottom: 30 }}> Enter your email to receive a one-time code </p> <input type="email" placeholder="[email protected]" value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} /> <button onClick={() => setStep(2)} style={buttonStyle} disabled={!email} > Send OTP </button> </> ) : ( <> <h2>Enter Verification Code</h2> <p style={{ color: '#666', marginBottom: 20 }}> We've sent a code to {email} </p> <OtpContainer onPaste={handlePaste}> {otp.map((digit, index) => ( <OtpInput key={index} type="text" maxLength="1" value={digit} ref={(el) => inputRefs.current[index] = el} onChange={(e) => handleOtpChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} /> ))} </OtpContainer> <div style={{ marginBottom: 20 }}> {timer > 0 ? ( <p>Resend code in {timer}s</p> ) : ( <button style={resendStyle} onClick={() => setTimer(30)}> Resend Code </button> )} </div> <button style={buttonStyle}> Verify & Login </button> </> )} </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '10px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#11998e', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: 20 }; const resendStyle = { background: 'none', border: 'none', color: '#11998e', textDecoration: 'underline', cursor: 'pointer' }; export default Form16;

Form 17: Glassmorphism Login

Introduction: Beautiful frosted glass effect login form with blur backgrounds and transparency.

Features: Backdrop blur, transparency effects, light reflections, modern aesthetic.

import React from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url('https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; `; const Form = styled.form` background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); width: 350px; `; const Title = styled.h2` text-align: center; color: white; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); `; const Input = styled.input` width: 100%; padding: 12px; margin: 10px 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; background: rgba(255, 255, 255, 0.2); color: white; font-size: 16px; &::placeholder { color: rgba(255, 255, 255, 0.8); } &:focus { outline: none; background: rgba(255, 255, 255, 0.3); } `; const Button = styled.button` width: 100%; padding: 12px; background: rgba(255, 255, 255, 0.3); color: white; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; font-size: 16px; cursor: pointer; transition: all 0.3s; &:hover { background: rgba(255, 255, 255, 0.4); transform: translateY(-2px); } `; const Form17 = () => { return ( <Container> <Form> <Title>Glassmorphism</Title> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form17;

Form 18: Neumorphism Style Login

Introduction: Soft UI design with neumorphic elements that appear to extrude from the background.

Features: Soft shadows, inset/outset effects, tactile appearance, minimal design.

import React from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #e0e0e0; `; const Form = styled.form` background: #e0e0e0; padding: 50px; border-radius: 50px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; width: 350px; `; const Title = styled.h2` text-align: center; color: #666; margin-bottom: 40px; `; const InputGroup = styled.div` margin: 30px 0; `; const Input = styled.input` width: 100%; padding: 15px; border: none; border-radius: 50px; background: #e0e0e0; box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; color: #666; font-size: 16px; &:focus { outline: none; } `; const Button = styled.button` width: 100%; padding: 15px; border: none; border-radius: 50px; background: #e0e0e0; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; color: #666; font-size: 16px; cursor: pointer; transition: all 0.3s; &:hover { box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; } `; const Form18 = () => { return ( <Container> <Form> <Title>Neumorphism</Title> <InputGroup> <Input type="email" placeholder="Email" /> </InputGroup> <InputGroup> <Input type="password" placeholder="Password" /> </InputGroup> <Button type="submit">Sign In</Button> </Form> </Container> ); }; export default Form18;

Form 19: Gaming Login with Progress

Introduction: Gamified login experience with XP bars and achievement-style feedback.

Features: Progress tracking, level indicators, gaming aesthetics, motivational messages.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; import { FaGamepad, FaTrophy, FaStar } from 'react-icons/fa'; const glow = keyframes` 0% { box-shadow: 0 0 5px #ffd700; } 50% { box-shadow: 0 0 20px #ffd700; } 100% { box-shadow: 0 0 5px #ffd700; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e, #16213e); `; const Form = styled.div` background: #0f3460; padding: 40px; border-radius: 20px; width: 400px; border: 2px solid #e94560; box-shadow: 0 0 30px rgba(233, 69, 96, 0.3); `; const Header = styled.div` display: flex; align-items: center; justify-content: space-between; color: #e94560; margin-bottom: 30px; `; const LevelBar = styled.div` background: #1a1a2e; height: 20px; border-radius: 10px; margin: 20px 0; position: relative; overflow: hidden; `; const LevelProgress = styled.div` height: 100%; width: ${props => props.progress}%; background: linear-gradient(90deg, #e94560, #ff6b6b); transition: width 0.5s; `; const XPText = styled.div` color: #ffd700; text-align: right; font-size: 14px; margin-top: 5px; `; const Input = styled.input` width: 100%; padding: 15px; margin: 10px 0; background: #1a1a2e; border: 2px solid #e94560; border-radius: 10px; color: white; font-size: 16px; &:focus { outline: none; animation: ${glow} 1s infinite; } `; const Button = styled.button` width: 100%; padding: 15px; background: #e94560; color: white; border: none; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; margin: 20px 0; position: relative; overflow: hidden; &:hover { transform: scale(1.02); } `; const Achievement = styled.div` background: #1a1a2e; padding: 10px; border-radius: 10px; margin: 10px 0; display: flex; align-items: center; gap: 10px; color: ${props => props.unlocked ? '#ffd700' : '#666'}; `; const Form19 = () => { const [formData, setFormData] = useState({ username: '', password: '' }); const [progress, setProgress] = useState(0); const [achievements, setAchievements] = useState({ emailFilled: false, passwordFilled: false, completed: false }); const handleChange = (field, value) => { setFormData({...formData, [field]: value}); if (field === 'username' && value.length > 0) { setAchievements({...achievements, emailFilled: true}); } if (field === 'password' && value.length > 0) { setAchievements({...achievements, passwordFilled: true}); } // Update progress bar let newProgress = 0; if (formData.username || value === 'username' ? value : formData.username) newProgress += 25; if (formData.password || value === 'password' ? value : formData.password) newProgress += 25; setProgress(newProgress); }; return ( <Container> <Form> <Header> <FaGamepad size={30} /> <h2>GAMER LOGIN</h2> <FaTrophy size={30} color="#ffd700" /> </Header> <div style={{ marginBottom: 20 }}> <div style={{ display: 'flex', justifyContent: 'space-between', color: 'white' }}> <span>Level {Math.floor(progress / 25) + 1}</span> <span>{progress}/100 XP</span> </div> <LevelBar> <LevelProgress progress={progress} /> </LevelBar> <XPText>+{progress} XP</XPText> </div> <Input type="text" placeholder="Username" value={formData.username} onChange={(e) => handleChange('username', e.target.value)} /> <Input type="password" placeholder="Password" value={formData.password} onChange={(e) => handleChange('password', e.target.value)} /> <Button onClick={() => console.log('Logging in...')}> START GAME </Button> <div> <h4 style={{ color: 'white', marginBottom: 10 }}>Achievements</h4> <Achievement unlocked={achievements.emailFilled}> <FaStar /> Username Entered </Achievement> <Achievement unlocked={achievements.passwordFilled}> <FaStar /> Password Entered </Achievement> <Achievement unlocked={progress === 100}> <FaStar /> Ready to Play! </Achievement> </div> </Form> </Container> ); }; export default Form19;

Form 20: Date of Birth & Age Gate

Introduction: Age-restricted signup with date picker and automatic age calculation.

Features: Date picker integration, age validation, minimum age requirement, friendly messages.

import React, { useState } from 'react'; import styled from 'styled-components'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; width: 400px; `; const Title = styled.h2` text-align: center; color: #333; margin-bottom: 30px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; `; const DatePickerWrapper = styled.div` margin: 15px 0; .react-datepicker-wrapper { width: 100%; } input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; } `; const AgeMessage = styled.div` padding: 10px; border-radius: 5px; margin: 15px 0; text-align: center; background: ${props => props.valid ? '#d4edda' : '#f8d7da'}; color: ${props => props.valid ? '#155724' : '#721c24'}; `; const Button = styled.button` width: 100%; padding: 12px; background: #667eea; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; opacity: ${props => props.disabled ? 0.5 : 1}; &:hover:not(:disabled) { background: #764ba2; } `; const Form20 = () => { const [formData, setFormData] = useState({ name: '', email: '', password: '', dob: null }); const [age, setAge] = useState(null); const [isOldEnough, setIsOldEnough] = useState(false); const calculateAge = (birthDate) => { const today = new Date(); const birth = new Date(birthDate); let age = today.getFullYear() - birth.getFullYear(); const m = today.getMonth() - birth.getMonth(); if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) { age--; } return age; }; const handleDateChange = (date) => { setFormData({...formData, dob: date}); if (date) { const calculatedAge = calculateAge(date); setAge(calculatedAge); setIsOldEnough(calculatedAge >= 13); } }; const handleSubmit = (e) => { e.preventDefault(); if (isOldEnough) { console.log('Registration successful:', formData); } }; return ( <Container> <Form onSubmit={handleSubmit}> <Title>Age Verification</Title> <Input type="text" placeholder="Full Name" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} required /> <Input type="email" placeholder="Email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} required /> <Input type="password" placeholder="Password" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} required /> <DatePickerWrapper> <DatePicker selected={formData.dob} onChange={handleDateChange} placeholderText="Select Date of Birth" maxDate={new Date()} showYearDropdown scrollableYearDropdown yearDropdownItemNumber={100} required /> </DatePickerWrapper> {age && ( <AgeMessage valid={isOldEnough}> {isOldEnough ? `✓ You are ${age} years old - eligible to sign up!` : `✗ You are ${age} years old. You must be at least 13 to sign up.` } </AgeMessage> )} <Button type="submit" disabled={!isOldEnough}> Create Account </Button> </Form> </Container> ); }; export default Form20;

Form 21: Passwordless with Magic Link

Introduction: Simplified authentication using email magic links instead of passwords.

Features: Email validation, loading states, success feedback, resend option.

import React, { useState } from 'react'; import styled, { keyframes } from 'styled-components'; import { FiMail, FiCheck, FiAlertCircle } from 'react-icons/fi'; const pulse = keyframes` 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 400px; text-align: center; `; const IconWrapper = styled.div` font-size: 60px; color: ${props => props.color || '#667eea'}; margin-bottom: 20px; `; const Input = styled.input` width: 100%; padding: 15px; margin: 20px 0; border: 2px solid ${props => props.error ? '#e74c3c' : '#e0e0e0'}; border-radius: 8px; font-size: 16px; &:focus { outline: none; border-color: #667eea; } `; const Button = styled.button` width: 100%; padding: 15px; background: ${props => props.disabled ? '#ccc' : '#667eea'}; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'}; transition: background 0.3s; &:hover:not(:disabled) { background: #764ba2; } `; const Loader = styled.div` border: 3px solid #f3f3f3; border-top: 3px solid #667eea; border-radius: 50%; width: 40px; height: 40px; animation: ${pulse} 1s linear infinite; margin: 20px auto; `; const Message = styled.div` padding: 15px; margin: 15px 0; border-radius: 5px; background: ${props => props.type === 'success' ? '#d4edda' : '#f8d7da'}; color: ${props => props.type === 'success' ? '#155724' : '#721c24'}; display: flex; align-items: center; gap: 10px; `; const Form21 = () => { const [email, setEmail] = useState(''); const [status, setStatus] = useState('idle'); // idle, loading, success, error const [error, setError] = useState(''); const validateEmail = (email) => { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); }; const handleSubmit = async () => { if (!validateEmail(email)) { setError('Please enter a valid email address'); setStatus('error'); return; } setStatus('loading'); setError(''); // Simulate API call setTimeout(() => { setStatus('success'); }, 2000); }; return ( <Container> <Form> {status === 'success' ? ( <> <IconWrapper color="#28a745"> <FiCheck /> </IconWrapper> <h2>Check Your Email</h2> <p style={{ color: '#666', margin: '20px 0' }}> We've sent a magic link to <strong>{email}</strong>. Click the link to sign in instantly. </p> <Message type="success"> <FiCheck /> Link sent! Check your spam folder if you don't see it. </Message> <Button onClick={() => setStatus('idle')} style={{ background: '#6c757d', marginTop: 20 }} > Use Different Email </Button> </> ) : ( <> <IconWrapper> <FiMail /> </IconWrapper> <h2>Passwordless Login</h2> <p style={{ color: '#666', marginBottom: 20 }}> Enter your email and we'll send you a magic link to sign in. </p> <Input type="email" placeholder="[email protected]" value={email} onChange={(e) => { setEmail(e.target.value); setStatus('idle'); setError(''); }} error={status === 'error'} disabled={status === 'loading'} /> {status === 'error' && ( <Message type="error"> <FiAlertCircle /> {error} </Message> )} {status === 'loading' ? ( <Loader /> ) : ( <Button onClick={handleSubmit} disabled={!email}> Send Magic Link </Button> )} <p style={{ marginTop: 20, fontSize: 14, color: '#999' }}> No password needed - secure and simple! </p> </> )} </Form> </Container> ); }; export default Form21;

Form 22: Social Media Integration Hub

Introduction: Comprehensive social login system with multiple platform options and profile preview.

Features: Multiple social providers, profile data preview, permission indicators, seamless switching.

import React, { useState } from 'react'; import styled from 'styled-components'; import { FcGoogle, FcFacebook, FcTwitter, FcLinkedin, FcGithub } from 'react-icons/fc'; import { FaApple } from 'react-icons/fa'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const SocialGrid = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; `; const SocialButton = styled.button` display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; background: white; cursor: pointer; transition: all 0.3s; &:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #667eea; } `; const ProviderName = styled.span` font-size: 12px; color: #666; `; const Divider = styled.div` text-align: center; margin: 20px 0; position: relative; &::before, &::after { content: ''; position: absolute; top: 50%; width: 45%; height: 1px; background: #e0e0e0; } &::before { left: 0; } &::after { right: 0; } `; const ProfilePreview = styled.div` background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0; display: flex; align-items: center; gap: 15px; `; const Avatar = styled.div` width: 50px; height: 50px; border-radius: 50%; background: #667eea; color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; `; const Form22 = () => { const [selectedProvider, setSelectedProvider] = useState(null); const [profile, setProfile] = useState(null); const providers = [ { name: 'Google', icon: <FcGoogle size={30} /> }, { name: 'Facebook', icon: <FcFacebook size={30} /> }, { name: 'Twitter', icon: <FcTwitter size={30} /> }, { name: 'LinkedIn', icon: <FcLinkedin size={30} /> }, { name: 'GitHub', icon: <FcGithub size={30} /> }, { name: 'Apple', icon: <FaApple size={30} color="#000" /> } ]; const handleSocialLogin = (provider) => { setSelectedProvider(provider); // Simulate fetching profile data setTimeout(() => { setProfile({ name: `User ${provider}`, email: `user@${provider.toLowerCase()}.com`, avatar: provider[0] }); }, 1000); }; return ( <Container> <Form> <h2 style={{ textAlign: 'center', marginBottom: 20 }}> Connect with Social </h2> <SocialGrid> {providers.map((provider, index) => ( <SocialButton key={index} onClick={() => handleSocialLogin(provider.name)} > {provider.icon} <ProviderName>{provider.name}</ProviderName> </SocialButton> ))} </SocialGrid> {selectedProvider && !profile && ( <div style={{ textAlign: 'center', padding: 20 }}> <div style={loaderStyle}></div> <p>Connecting to {selectedProvider}...</p> </div> )} {profile && ( <ProfilePreview> <Avatar>{profile.avatar}</Avatar> <div> <h4>{profile.name}</h4> <p style={{ color: '#666' }}>{profile.email}</p> </div> </ProfilePreview> )} <Divider>or continue with</Divider> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}> Sign In with Email </button> <p style={{ textAlign: 'center', marginTop: 20, fontSize: 14, color: '#999' }}> By continuing, you agree to our Terms and Privacy Policy </p> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '15px' }; const loaderStyle = { border: '3px solid #f3f3f3', borderTop: '3px solid #667eea', borderRadius: '50%', width: '30px', height: '30px', animation: 'spin 1s linear infinite', margin: '10px auto' }; export default Form22;

Form 23: Password Generator & Manager

Introduction: Smart signup form with built-in password generator and strength analysis.

Features: Random password generation, strength meter, copy to clipboard, requirements checklist.

import React, { useState } from 'react'; import styled from 'styled-components'; import { FiCopy, FiRefreshCw, FiCheck } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const PasswordField = styled.div` position: relative; margin: 20px 0; `; const GeneratedPassword = styled.div` width: 100%; padding: 15px; background: #f8f9fa; border: 2px solid #e0e0e0; border-radius: 5px; font-family: monospace; font-size: 18px; display: flex; align-items: center; justify-content: space-between; `; const ActionButton = styled.button` background: none; border: none; cursor: pointer; font-size: 20px; color: #667eea; margin-left: 10px; &:hover { color: #764ba2; } `; const StrengthBar = styled.div` height: 8px; background: #e0e0e0; border-radius: 4px; margin: 10px 0; overflow: hidden; `; const StrengthFill = styled.div` height: 100%; width: ${props => props.strength}%; background: ${props => { if (props.strength < 30) return '#e74c3c'; if (props.strength < 60) return '#f39c12'; if (props.strength < 80) return '#3498db'; return '#2ecc71'; }}; transition: width 0.3s; `; const Requirement = styled.div` display: flex; align-items: center; gap: 10px; margin: 5px 0; color: ${props => props.met ? '#2ecc71' : '#e74c3c'}; `; const Form23 = () => { const [password, setPassword] = useState(''); const [copied, setCopied] = useState(false); const generatePassword = () => { const length = 12; const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*'; let newPassword = ''; for (let i = 0; i < length; i++) { const randomIndex = Math.floor(Math.random() * charset.length); newPassword += charset[randomIndex]; } setPassword(newPassword); setCopied(false); }; const copyToClipboard = () => { navigator.clipboard.writeText(password); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const calculateStrength = () => { let strength = 0; if (password.length >= 8) strength += 20; if (password.match(/[a-z]/)) strength += 20; if (password.match(/[A-Z]/)) strength += 20; if (password.match(/[0-9]/)) strength += 20; if (password.match(/[^a-zA-Z0-9]/)) strength += 20; return strength; }; const requirements = [ { text: 'At least 8 characters', test: (p) => p.length >= 8 }, { text: 'Contains lowercase letter', test: (p) => /[a-z]/.test(p) }, { text: 'Contains uppercase letter', test: (p) => /[A-Z]/.test(p) }, { text: 'Contains number', test: (p) => /[0-9]/.test(p) }, { text: 'Contains special character', test: (p) => /[^a-zA-Z0-9]/.test(p) } ]; return ( <Container> <Form> <h2 style={{ textAlign: 'center', marginBottom: 30 }}> Password Generator </h2> <input type="text" placeholder="Username" style={inputStyle} /> <input type="email" placeholder="Email" style={inputStyle} /> <PasswordField> <GeneratedPassword> <span>{password || 'Generated password'}</span> <div> <ActionButton onClick={generatePassword}> <FiRefreshCw /> </ActionButton> {password && ( <ActionButton onClick={copyToClipboard}> {copied ? <FiCheck color="#2ecc71" /> : <FiCopy />} </ActionButton> )} </div> </GeneratedPassword> </PasswordField> {password && ( <> <StrengthBar> <StrengthFill strength={calculateStrength()} /> </StrengthBar> <div style={{ marginTop: 15 }}> {requirements.map((req, index) => ( <Requirement key={index} met={req.test(password)}> {req.test(password) ? '✓' : '✗'} {req.text} </Requirement> ))} </div> </> )} <button style={buttonStyle}> Create Account </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '20px' }; export default Form23;

Form 24: Terms & Conditions with Scroll

Introduction: Signup form with mandatory terms agreement that requires scrolling to the bottom.

Features: Scroll tracking, enabled only after reading, checkboxes, legal text display.

import React, { useState, useRef } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const TermsBox = styled.div` height: 200px; overflow-y: auto; padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin: 15px 0; background: #f8f9fa; font-size: 14px; line-height: 1.6; `; const CheckboxLabel = styled.label` display: flex; align-items: center; gap: 10px; margin: 15px 0; color: ${props => props.disabled ? '#999' : '#333'}; `; const ProgressBar = styled.div` height: 5px; background: #e0e0e0; border-radius: 5px; margin: 10px 0; overflow: hidden; `; const Progress = styled.div` height: 100%; width: ${props => props.scrolled}%; background: #667eea; transition: width 0.3s; `; const Form24 = () => { const [formData, setFormData] = useState({ name: '', email: '', password: '', agreed: false }); const [scrollProgress, setScrollProgress] = useState(0); const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false); const termsRef = useRef(null); const handleScroll = () => { const element = termsRef.current; if (element) { const { scrollTop, scrollHeight, clientHeight } = element; const progress = (scrollTop / (scrollHeight - clientHeight)) * 100; setScrollProgress(progress); if (scrollTop + clientHeight >= scrollHeight - 10) { setHasScrolledToBottom(true); } } }; return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30 }}> Create Account </h2> <input type="text" placeholder="Full Name" style={inputStyle} value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} /> <input type="email" placeholder="Email" style={inputStyle} value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> <input type="password" placeholder="Password" style={inputStyle} value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> <div style={{ margin: '20px 0' }}> <label style={{ fontWeight: 'bold' }}>Terms and Conditions</label> <ProgressBar> <Progress scrolled={scrollProgress} /> </ProgressBar> <TermsBox ref={termsRef} onScroll={handleScroll}> <h4>1. Acceptance of Terms</h4> <p>By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement...</p> <h4>2. Description of Service</h4> <p>We provide users with access to a rich collection of resources, including various communications tools, forums, shopping services, and personalized content...</p> <h4>3. Privacy Policy</h4> <p>Your use of the Service is subject to our Privacy Policy, which governs our collection and use of your personal information...</p> <h4>4. User Conduct</h4> <p>You understand that all information, data, text, software, music, sound, photographs, graphics, video, messages, or other materials...</p> <h4>5. Termination</h4> <p>We may terminate or suspend your account and bar access to the Service immediately, without prior notice or liability, under our sole discretion...</p> <h4>6. Changes to Terms</h4> <p>We reserve the right, at our sole discretion, to modify or replace these Terms at any time...</p> <p style={{ marginTop: 20, fontWeight: 'bold' }}>End of Terms</p> </TermsBox> <CheckboxLabel disabled={!hasScrolledToBottom}> <input type="checkbox" checked={formData.agreed} onChange={(e) => setFormData({...formData, agreed: e.target.checked})} disabled={!hasScrolledToBottom} /> I have read and agree to the Terms and Conditions </CheckboxLabel> {!hasScrolledToBottom && ( <p style={{ color: '#e74c3c', fontSize: 14 }}> Please scroll through all terms to enable agreement </p> )} </div> <button type="submit" style={buttonStyle} disabled={!formData.agreed} > Sign Up </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', opacity: props => props.disabled ? 0.5 : 1 }; export default Form24;

Form 25: Avatar & Profile Picture Upload

Introduction: Registration form with image upload and avatar cropping functionality.

Features: Drag-and-drop upload, image preview, cropping tool, file validation.

import React, { useState, useRef } from 'react'; import styled from 'styled-components'; import { FiUpload, FiCamera, FiX } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const AvatarSection = styled.div` display: flex; flex-direction: column; align-items: center; margin: 20px 0; `; const AvatarPreview = styled.div` width: 120px; height: 120px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer; border: 3px solid #667eea; img { width: 100%; height: 100%; object-fit: cover; } &:hover .overlay { opacity: 1; } `; const Overlay = styled.div` position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transition: opacity 0.3s; `; const UploadArea = styled.div` border: 2px dashed #667eea; border-radius: 10px; padding: 30px; text-align: center; margin: 20px 0; cursor: pointer; transition: all 0.3s; &:hover { background: #f0f4ff; } `; const HiddenInput = styled.input` display: none; `; const Form25 = () => { const [avatar, setAvatar] = useState(null); const [preview, setPreview] = useState(null); const [formData, setFormData] = useState({ name: '', email: '', password: '' }); const fileInputRef = useRef(null); const handleFileSelect = (event) => { const file = event.target.files[0]; if (file) { // Validate file type if (!file.type.match('image.*')) { alert('Please select an image file'); return; } // Validate file size (max 5MB) if (file.size > 5 * 1024 * 1024) { alert('File size must be less than 5MB'); return; } setAvatar(file); // Create preview const reader = new FileReader(); reader.onload = (e) => { setPreview(e.target.result); }; reader.readAsDataURL(file); } }; const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation(); }; const handleDrop = (e) => { e.preventDefault(); e.stopPropagation(); const file = e.dataTransfer.files[0]; if (file && file.type.match('image.*')) { setAvatar(file); const reader = new FileReader(); reader.onload = (e) => { setPreview(e.target.result); }; reader.readAsDataURL(file); } }; const removeAvatar = () => { setAvatar(null); setPreview(null); if (fileInputRef.current) { fileInputRef.current.value = ''; } }; return ( <Container> <Form onSubmit={(e) => e.preventDefault()}> <h2 style={{ textAlign: 'center', marginBottom: 30 }}> Profile Setup </h2> <AvatarSection> <AvatarPreview onClick={() => fileInputRef.current.click()}> {preview ? ( <img src={preview} alt="Avatar preview" /> ) : ( <FiCamera size={40} color="#667eea" /> )} <Overlay className="overlay"> <FiCamera size={30} /> </Overlay> </AvatarPreview> {avatar && ( <button onClick={removeAvatar} style={removeButtonStyle} type="button" > <FiX /> Remove </button> )} </AvatarSection> <HiddenInput type="file" ref={fileInputRef} onChange={handleFileSelect} accept="image/*" /> <UploadArea onDragOver={handleDragOver} onDrop={handleDrop} onClick={() => fileInputRef.current.click()} > <FiUpload size={40} color="#667eea" /> <p>Drag & drop or click to upload</p> <p style={{ fontSize: 12, color: '#999' }}> Supported: JPG, PNG, GIF (Max 5MB) </p> </UploadArea> <input type="text" placeholder="Full Name" style={inputStyle} value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} /> <input type="email" placeholder="Email" style={inputStyle} value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> <input type="password" placeholder="Password" style={inputStyle} value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> <button type="submit" style={buttonStyle}> Complete Registration </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '20px' }; const removeButtonStyle = { background: '#e74c3c', color: 'white', border: 'none', padding: '5px 10px', borderRadius: '5px', marginTop: '10px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '5px' }; export default Form25;

Form 26: Location-Based Login

Introduction: Smart login that detects and displays user's location for security verification.

Features: Geolocation detection, map preview, location verification, IP tracking.

import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { FiMapPin, FiAlertCircle } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const LocationCard = styled.div` background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; display: flex; align-items: center; gap: 15px; `; const LocationIcon = styled.div` width: 50px; height: 50px; border-radius: 50%; background: #667eea; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; `; const LocationInfo = styled.div` flex: 1; `; const Coordinates = styled.p` font-family: monospace; color: #666; font-size: 14px; `; const MapPlaceholder = styled.div` width: 100%; height: 150px; background: #e9ecef; border-radius: 10px; margin: 15px 0; display: flex; align-items: center; justify-content: center; color: #666; position: relative; overflow: hidden; &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(102, 126, 234, 0.1) 10px, rgba(102, 126, 234, 0.1) 20px ); } `; const SecurityNote = styled.div` background: ${props => props.trusted ? '#d4edda' : '#fff3cd'}; color: ${props => props.trusted ? '#155724' : '#856404'}; padding: 15px; border-radius: 5px; margin: 15px 0; display: flex; align-items: center; gap: 10px; `; const Form26 = () => { const [location, setLocation] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const [trusted, setTrusted] = useState(false); useEffect(() => { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { setLocation({ lat: position.coords.latitude, lng: position.coords.longitude, accuracy: position.coords.accuracy }); setLoading(false); // Simulate checking against trusted locations setTrusted(Math.random() > 0.5); }, (error) => { setError(error.message); setLoading(false); } ); } else { setError('Geolocation is not supported'); setLoading(false); } }, []); return ( <Container> <Form> <h2 style={{ textAlign: 'center', marginBottom: 20 }}> Location Verification </h2> {loading ? ( <div style={{ textAlign: 'center', padding: 30 }}> <div style={loaderStyle}></div> <p>Detecting your location...</p> </div> ) : error ? ( <LocationCard style={{ background: '#f8d7da', color: '#721c24' }}> <FiAlertCircle size={24} /> <p>{error}</p> </LocationCard> ) : ( <> <LocationCard> <LocationIcon> <FiMapPin /> </LocationIcon> <LocationInfo> <h4>Your Location</h4> <Coordinates> {location.lat.toFixed(6)}, {location.lng.toFixed(6)} </Coordinates> <p style={{ fontSize: 12, color: '#999' }}> Accuracy: ±{Math.round(location.accuracy)}m </p> </LocationInfo> </LocationCard> <MapPlaceholder> <div style={{ textAlign: 'center', zIndex: 1 }}> <FiMapPin size={30} color="#667eea" /> <p>Map Preview</p> </div> </MapPlaceholder> <SecurityNote trusted={trusted}> {trusted ? ( <> <span>✓</span> <span>This location matches your trusted devices</span> </> ) : ( <> <span>⚠</span> <span>New location detected - additional verification required</span> </> )} </SecurityNote> </> )} <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}> {trusted ? 'Login' : 'Verify & Login'} </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '20px' }; const loaderStyle = { border: '3px solid #f3f3f3', borderTop: '3px solid #667eea', borderRadius: '50%', width: '40px', height: '40px', animation: 'spin 1s linear infinite', margin: '0 auto 20px' }; export default Form26;

Form 27: Device Fingerprint Login

Introduction: Advanced security form that recognizes and stores device fingerprints for trusted access.

Features: Device recognition, browser fingerprinting, trusted devices list, security alerts.

import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { FiSmartphone, FiLaptop, FiTablet, FiAlertCircle, FiCheck } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const DeviceInfo = styled.div` background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; `; const DeviceRow = styled.div` display: flex; align-items: center; gap: 15px; padding: 10px; border-bottom: 1px solid #e0e0e0; &:last-child { border-bottom: none; } `; const DeviceIcon = styled.div` width: 40px; height: 40px; border-radius: 50%; background: ${props => props.trusted ? '#d4edda' : '#fff3cd'}; display: flex; align-items: center; justify-content: center; color: ${props => props.trusted ? '#155724' : '#856404'}; `; const TrustBadge = styled.span` background: ${props => props.trusted ? '#28a745' : '#ffc107'}; color: white; padding: 3px 10px; border-radius: 12px; font-size: 12px; margin-left: 10px; `; const Form27 = () => { const [currentDevice, setCurrentDevice] = useState(null); const [trustedDevices, setTrustedDevices] = useState([]); const [isTrusted, setIsTrusted] = useState(false); useEffect(() => { // Generate device fingerprint (simplified) const fingerprint = { id: Math.random().toString(36).substring(7), userAgent: navigator.userAgent, platform: navigator.platform, language: navigator.language, screenResolution: `${window.screen.width}x${window.screen.height}`, timezone: Intl.DateTimeFormat().resolvedOptions().timeZone }; setCurrentDevice(fingerprint); // Simulate checking against trusted devices const stored = localStorage.getItem('trustedDevices'); if (stored) { const devices = JSON.parse(stored); setTrustedDevices(devices); setIsTrusted(devices.some(d => d.id === fingerprint.id)); } else { // Mock some trusted devices const mockDevices = [ { id: 'dev1', name: 'MacBook Pro', type: 'laptop', lastUsed: '2 days ago', trusted: true }, { id: 'dev2', name: 'iPhone 13', type: 'phone', lastUsed: '1 week ago', trusted: true } ]; setTrustedDevices(mockDevices); localStorage.setItem('trustedDevices', JSON.stringify(mockDevices)); } }, []); const getDeviceIcon = (type) => { switch(type) { case 'laptop': return <FiLaptop />; case 'phone': return <FiSmartphone />; case 'tablet': return <FiTablet />; default: return <FiLaptop />; } }; const trustCurrentDevice = () => { if (currentDevice) { const updatedDevices = [...trustedDevices, { ...currentDevice, trusted: true, lastUsed: 'Just now' }]; setTrustedDevices(updatedDevices); setIsTrusted(true); localStorage.setItem('trustedDevices', JSON.stringify(updatedDevices)); } }; return ( <Container> <Form> <h2 style={{ textAlign: 'center', marginBottom: 20 }}> Device Recognition </h2> <DeviceInfo> <h4>Current Device</h4> <DeviceRow> <DeviceIcon trusted={isTrusted}> {getDeviceIcon('laptop')} </DeviceIcon> <div style={{ flex: 1 }}> <div style={{ display: 'flex', alignItems: 'center' }}> <strong>This Device</strong> {isTrusted ? ( <TrustBadge trusted>✓ Trusted</TrustBadge> ) : ( <TrustBadge>New Device</TrustBadge> )} </div> <p style={{ fontSize: 12, color: '#666' }}> {currentDevice?.platform} • {currentDevice?.screenResolution} </p> </div> </DeviceRow> </DeviceInfo> <DeviceInfo> <h4>Trusted Devices</h4> {trustedDevices.map((device, index) => ( <DeviceRow key={index}> <DeviceIcon trusted> {getDeviceIcon(device.type)} </DeviceIcon> <div style={{ flex: 1 }}> <div style={{ display: 'flex', alignItems: 'center' }}> <strong>{device.name}</strong> <TrustBadge trusted>✓ Trusted</TrustBadge> </div> <p style={{ fontSize: 12, color: '#666' }}> Last used: {device.lastUsed} </p> </div> </DeviceRow> ))} </DeviceInfo> {!isTrusted && ( <div style={{ margin: '20px 0' }}> <SecurityNote> <FiAlertCircle /> <span>New device detected. Verify to add to trusted devices.</span> </SecurityNote> <button onClick={trustCurrentDevice} style={{ ...buttonStyle, background: '#28a745' }} > <FiCheck /> Trust This Device </button> </div> )} <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}> {isTrusted ? 'Login' : 'Verify & Login'} </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }; const SecurityNote = styled.div` background: #fff3cd; color: #856404; padding: 15px; border-radius: 5px; margin: 15px 0; display: flex; align-items: center; gap: 10px; `; export default Form27;

Form 28: Quiz-Based Registration

Introduction: Fun registration process with a quick quiz to personalize the user experience.

Features: Multiple choice questions, progress tracking, personalized results, gamification.

import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 500px; `; const QuestionCard = styled.div` background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0; `; const Option = styled.button` width: 100%; padding: 15px; margin: 8px 0; background: ${props => props.selected ? '#667eea' : 'white'}; color: ${props => props.selected ? 'white' : '#333'}; border: 2px solid ${props => props.selected ? '#667eea' : '#e0e0e0'}; border-radius: 8px; cursor: pointer; transition: all 0.3s; text-align: left; &:hover { border-color: #667eea; transform: translateX(5px); } `; const ProgressDots = styled.div` display: flex; justify-content: center; gap: 10px; margin: 20px 0; `; const Dot = styled.div` width: 12px; height: 12px; border-radius: 50%; background: ${props => props.active ? '#667eea' : '#e0e0e0'}; transition: all 0.3s; `; const Form28 = () => { const [step, setStep] = useState(1); const [answers, setAnswers] = useState({}); const [formData, setFormData] = useState({ name: '', email: '', password: '' }); const questions = [ { id: 1, question: "What's your primary goal?", options: [ "Learn new skills", "Connect with others", "Build something", "Find opportunities" ] }, { id: 2, question: "How did you hear about us?", options: [ "Social Media", "Friend referral", "Search engine", "Advertisement" ] }, { id: 3, question: "What's your experience level?", options: [ "Beginner", "Intermediate", "Advanced", "Expert" ] } ]; const handleAnswer = (questionId, answer) => { setAnswers({...answers, [questionId]: answer}); if (step < questions.length) { setTimeout(() => setStep(step + 1), 300); } }; const getResultMessage = () => { const goals = answers[1]; const source = answers[2]; const level = answers[3]; return `Welcome, ${formData.name || 'future member'}! Based on your answers, you're a ${level?.toLowerCase()} level user interested in ${goals?.toLowerCase()}. We found you through ${source?.toLowerCase()} - great choice!`; }; return ( <Container> <Form> <h2 style={{ textAlign: 'center', marginBottom: 10 }}> Quick Registration Quiz </h2> <ProgressDots> {[1, 2, 3].map(num => ( <Dot key={num} active={step >= num} /> ))} </ProgressDots> {step <= questions.length ? ( <QuestionCard> <h3 style={{ marginBottom: 20 }}> Question {step} of {questions.length} </h3> <p style={{ marginBottom: 15, fontWeight: 'bold' }}> {questions[step-1].question} </p> {questions[step-1].options.map((option, index) => ( <Option key={index} selected={answers[questions[step-1].id] === option} onClick={() => handleAnswer(questions[step-1].id, option)} > {option} </Option> ))} </QuestionCard> ) : ( <QuestionCard> <h3 style={{ textAlign: 'center', marginBottom: 20 }}> 🎉 Quiz Complete! </h3> <p style={{ lineHeight: 1.6, color: '#666' }}> {getResultMessage()} </p> </QuestionCard> )} <input type="text" placeholder="Full Name" style={inputStyle} value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} /> <input type="email" placeholder="Email" style={inputStyle} value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} /> <input type="password" placeholder="Password" style={inputStyle} value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} /> <button style={buttonStyle}> Complete Registration </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '20px' }; export default Form28;

Form 29: Time-Based OTP with Countdown

Introduction: Secure authentication using time-based one-time passwords with visual countdown.

Features: TOTP algorithm simulation, visual timer, auto-refresh on expiry, progress ring.

import React, { useState, useEffect } from 'react'; import styled, { keyframes } from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 400px; text-align: center; `; const TimerRing = styled.svg` width: 120px; height: 120px; margin: 20px auto; transform: rotate(-90deg); `; const TimerCircle = styled.circle` stroke: ${props => props.color || '#667eea'}; stroke-width: 4; fill: none; stroke-dasharray: 314; stroke-dashoffset: ${props => props.offset}; transition: stroke-dashoffset 1s linear; `; const OtpDisplay = styled.div` font-size: 48px; font-family: monospace; letter-spacing: 10px; color: #333; margin: 20px 0; `; const OtpInput = styled.input` width: 100%; padding: 15px; font-size: 24px; text-align: center; font-family: monospace; letter-spacing: 10px; border: 2px solid #e0e0e0; border-radius: 8px; margin: 20px 0; &:focus { outline: none; border-color: #667eea; } `; const Form29 = () => { const [otp, setOtp] = useState(''); const [generatedOtp, setGeneratedOtp] = useState(''); const [timeLeft, setTimeLeft] = useState(30); const [inputOtp, setInputOtp] = useState(''); useEffect(() => { generateNewOtp(); const timer = setInterval(() => { setTimeLeft((prev) => { if (prev <= 1) { generateNewOtp(); return 30; } return prev - 1; }); }, 1000); return () => clearInterval(timer); }, []); const generateNewOtp = () => { const newOtp = Math.floor(100000 + Math.random() * 900000).toString(); setGeneratedOtp(newOtp); console.log('Generated OTP:', newOtp); // In production, this would be sent via SMS/email }; const calculateOffset = () => { const circumference = 2 * Math.PI * 50; // 314 return circumference - (timeLeft / 30) * circumference; }; const verifyOtp = () => { if (inputOtp === generatedOtp) { alert('OTP Verified Successfully!'); } else { alert('Invalid OTP'); } }; return ( <Container> <Form> <h2>Time-Based OTP</h2> <p style={{ color: '#666', marginBottom: 20 }}> Enter the 6-digit code from your authenticator app </p> <TimerRing viewBox="0 0 120 120"> <circle cx="60" cy="60" r="50" stroke="#e0e0e0" strokeWidth="4" fill="none" /> <TimerCircle cx="60" cy="60" r="50" color={timeLeft < 10 ? '#e74c3c' : '#667eea'} offset={calculateOffset()} /> </TimerRing> <div style={{ fontSize: 18, marginBottom: 10 }}> Time remaining: {timeLeft}s </div> <OtpDisplay> {generatedOtp} </OtpDisplay> <OtpInput type="text" maxLength="6" placeholder="------" value={inputOtp} onChange={(e) => setInputOtp(e.target.value.replace(/\D/g, ''))} /> <button style={buttonStyle} onClick={verifyOtp}> Verify OTP </button> <p style={{ marginTop: 20, fontSize: 14, color: '#999' }}> Code refreshes automatically every 30 seconds </p> </Form> </Container> ); }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer' }; export default Form29;

Form 30: Multi-Language Login

Introduction: Accessible login form supporting multiple languages with instant switching.

Features: Language selector, RTL support for Arabic, translated labels, cultural adaptations.

import React, { useState } from 'react'; import styled from 'styled-components'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 400px; direction: ${props => props.dir}; `; const LanguageSelector = styled.select` width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; `; const translations = { en: { title: 'Welcome Back', email: 'Email', password: 'Password', login: 'Sign In', remember: 'Remember me', forgot: 'Forgot Password?', noAccount: "Don't have an account?", signUp: 'Sign Up' }, es: { title: 'Bienvenido', email: 'Correo electrónico', password: 'Contraseña', login: 'Iniciar sesión', remember: 'Recordarme', forgot: '¿Olvidaste tu contraseña?', noAccount: '¿No tienes una cuenta?', signUp: 'Regístrate' }, fr: { title: 'Bon Retour', email: 'Email', password: 'Mot de passe', login: 'Se connecter', remember: 'Se souvenir de moi', forgot: 'Mot de passe oublié?', noAccount: 'Pas de compte?', signUp: "S'inscrire" }, de: { title: 'Willkommen zurück', email: 'E-Mail', password: 'Passwort', login: 'Anmelden', remember: 'Angemeldet bleiben', forgot: 'Passwort vergessen?', noAccount: 'Noch kein Konto?', signUp: 'Registrieren' }, ar: { title: 'مرحبًا بعودتك', email: 'البريد الإلكتروني', password: 'كلمة المرور', login: 'تسجيل الدخول', remember: 'تذكرني', forgot: 'نسيت كلمة المرور؟', noAccount: 'ليس لديك حساب؟', signUp: 'اشتراك' }, zh: { title: '欢迎回来', email: '电子邮件', password: '密码', login: '登录', remember: '记住我', forgot: '忘记密码？', noAccount: '没有账户？', signUp: '注册' }, ja: { title: 'おかえりなさい', email: 'メールアドレス', password: 'パスワード', login: 'ログイン', remember: 'ログイン状態を保持', forgot: 'パスワードをお忘れですか？', noAccount: 'アカウントをお持ちでない方', signUp: '新規登録' } }; const Form30 = () => { const [language, setLanguage] = useState('en'); const t = translations[language]; return ( <Container> <Form dir={language === 'ar' ? 'rtl' : 'ltr'}> <LanguageSelector value={language} onChange={(e) => setLanguage(e.target.value)} > <option value="en">English</option> <option value="es">Español</option> <option value="fr">Français</option> <option value="de">Deutsch</option> <option value="ar">العربية</option> <option value="zh">中文</option> <option value="ja">日本語</option> </LanguageSelector> <h2 style={{ textAlign: 'center', marginBottom: 30 }}> {t.title} </h2> <input type="email" placeholder={t.email} style={inputStyle} /> <input type="password" placeholder={t.password} style={inputStyle} /> <div style={{ display: 'flex', justifyContent: 'space-between', margin: '15px 0', flexDirection: language === 'ar' ? 'row-reverse' : 'row' }}> <label> <input type="checkbox" /> {t.remember} </label> <a href="#" style={{ color: '#667eea', textDecoration: 'none' }}> {t.forgot} </a> </div> <button style={buttonStyle}> {t.login} </button> <p style={{ textAlign: 'center', marginTop: 20 }}> {t.noAccount} <a href="#" style={{ color: '#667eea', textDecoration: 'none' }}> {t.signUp} </a> </p> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer' }; export default Form30;

Form 31: Keyboard Shortcuts Login

Introduction: Productivity-focused login form with keyboard navigation and shortcuts.

Features: Keyboard navigation, submit with Enter, Tab order management, shortcut hints.

import React, { useState, useEffect, useRef } from 'react'; import styled from 'styled-components'; import { FiKey } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.form` background: white; padding: 40px; border-radius: 10px; width: 400px; position: relative; `; const ShortcutHint = styled.div` position: absolute; top: 10px; right: 10px; background: #f8f9fa; padding: 5px 10px; border-radius: 5px; font-size: 12px; color: #666; display: flex; align-items: center; gap: 5px; `; const KeyHint = styled.kbd` background: #e9ecef; border: 1px solid #ced4da; border-radius: 3px; padding: 2px 5px; font-size: 12px; `; const Input = styled.input` width: 100%; padding: 12px; margin: 8px 0; border: 2px solid ${props => props.focused ? '#667eea' : '#e0e0e0'}; border-radius: 5px; font-size: 16px; transition: border-color 0.3s; &:focus { outline: none; border-color: #667eea; } `; const Form31 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); const [focusedField, setFocusedField] = useState(null); const emailRef = useRef(null); const passwordRef = useRef(null); const submitRef = useRef(null); useEffect(() => { const handleKeyDown = (e) => { // Ctrl/Cmd + L focuses email if ((e.ctrlKey || e.metaKey) && e.key === 'l') { e.preventDefault(); emailRef.current.focus(); } // Ctrl/Cmd + P focuses password if ((e.ctrlKey || e.metaKey) && e.key === 'p') { e.preventDefault(); passwordRef.current.focus(); } // Ctrl/Cmd + Enter submits if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); handleSubmit(e); } // Escape clears fields if (e.key === 'Escape') { setFormData({ email: '', password: '' }); } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [formData]); const handleSubmit = (e) => { e.preventDefault(); console.log('Login with:', formData); }; return ( <Container> <Form onSubmit={handleSubmit}> <ShortcutHint> <FiKey /> <KeyHint>⌘L</KeyHint> <KeyHint>⌘P</KeyHint> <KeyHint>⌘⏎</KeyHint> </ShortcutHint> <h2 style={{ textAlign: 'center', marginBottom: 30 }}> Keyboard Shortcuts </h2> <Input ref={emailRef} type="email" placeholder="Email (⌘L)" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} onFocus={() => setFocusedField('email')} onBlur={() => setFocusedField(null)} focused={focusedField === 'email'} /> <Input ref={passwordRef} type="password" placeholder="Password (⌘P)" value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} onFocus={() => setFocusedField('password')} onBlur={() => setFocusedField(null)} focused={focusedField === 'password'} /> <div style={{ display: 'flex', justifyContent: 'space-between', margin: '15px 0' }}> <label> <input type="checkbox" /> Remember me </label> <a href="#" style={{ color: '#667eea', textDecoration: 'none' }}> Forgot? </a> </div> <button ref={submitRef} type="submit" style={buttonStyle} > Sign In (⌘⏎) </button> <div style={{ marginTop: 20, fontSize: 14, color: '#999' }}> <p>Keyboard shortcuts:</p> <ul style={{ listStyle: 'none', padding: 0 }}> <li>⌘L - Focus email</li> <li>⌘P - Focus password</li> <li>⌘⏎ - Submit form</li> <li>ESC - Clear all</li> </ul> </div> </Form> </Container> ); }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer' }; export default Form31;

Form 32: Weather-Based Themed Login

Introduction: Dynamic login form that changes theme based on user's local weather.

Features: Weather API integration, dynamic backgrounds, temperature-based colors, animated weather icons.

import React, { useState, useEffect } from 'react'; import styled, { keyframes } from 'styled-components'; import { FiSun, FiCloud, FiCloudRain, FiCloudSnow, FiCloudDrizzle, FiWind, FiCloudLightning } from 'react-icons/fi'; const float = keyframes` 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } `; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: ${props => props.gradient}; transition: background 1s ease; `; const Form = styled.div` background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 40px; border-radius: 10px; width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); `; const WeatherIcon = styled.div` font-size: 60px; color: #667eea; text-align: center; margin-bottom: 20px; animation: ${float} 3s ease-in-out infinite; `; const TempDisplay = styled.div` text-align: center; font-size: 24px; color: #333; margin-bottom: 20px; `; const Form32 = () => { const [weather, setWeather] = useState({ condition: 'sunny', temp: 22, location: 'New York' }); const [gradient, setGradient] = useState('linear-gradient(135deg, #667eea 0%, #764ba2 100%)'); useEffect(() => { // Simulate weather API call const weatherConditions = [ 'sunny', 'cloudy', 'rainy', 'snowy', 'stormy', 'windy' ]; const randomCondition = weatherConditions[Math.floor(Math.random() * weatherConditions.length)]; const randomTemp = Math.floor(Math.random() * 35); setWeather({ condition: randomCondition, temp: randomTemp, location: 'Current Location' }); // Set gradient based on weather switch(randomCondition) { case 'sunny': setGradient('linear-gradient(135deg, #f6d365 0%, #fda085 100%)'); break; case 'cloudy': setGradient('linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)'); break; case 'rainy': setGradient('linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)'); break; case 'snowy': setGradient('linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%)'); break; case 'stormy': setGradient('linear-gradient(135deg, #373b44 0%, #4286f4 100%)'); break; case 'windy': setGradient('linear-gradient(135deg, #d4d3dd 0%, #6a82fb 100%)'); break; default: setGradient('linear-gradient(135deg, #667eea 0%, #764ba2 100%)'); } }, []); const getWeatherIcon = () => { switch(weather.condition) { case 'sunny': return <FiSun />; case 'cloudy': return <FiCloud />; case 'rainy': return <FiCloudRain />; case 'snowy': return <FiCloudSnow />; case 'stormy': return <FiCloudLightning />; case 'windy': return <FiWind />; default: return <FiSun />; } }; return ( <Container gradient={gradient}> <Form> <WeatherIcon> {getWeatherIcon()} </WeatherIcon> <TempDisplay> {weather.temp}°C • {weather.condition} </TempDisplay> <h2 style={{ textAlign: 'center', marginBottom: 20 }}> Welcome to {weather.location} </h2> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle}> Sign In </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '20px' }; export default Form32;

Form 33: Gamified Streak Login

Introduction: Engaging login form that tracks and rewards daily login streaks.

Features: Streak counter, calendar heatmap, achievement badges, motivational messages.

import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import { FiStar, FiAward, FiTrendingUp } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); `; const Form = styled.div` background: white; padding: 40px; border-radius: 10px; width: 450px; `; const StreakCounter = styled.div` background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); padding: 20px; border-radius: 10px; color: white; text-align: center; margin-bottom: 30px; `; const StreakNumber = styled.div` font-size: 48px; font-weight: bold; line-height: 1; `; const Calendar = styled.div` display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 20px 0; `; const Day = styled.div` aspect-ratio: 1; background: ${props => { if (props.active) return '#28a745'; if (props.streak) return '#ffc107'; return '#e9ecef'; }}; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: ${props => props.active || props.streak ? 'white' : '#666'}; `; const Badge = styled.div` display: inline-flex; align-items: center; gap: 5px; padding: 8px 15px; background: ${props => props.achieved ? '#28a745' : '#e9ecef'}; color: ${props => props.achieved ? 'white' : '#666'}; border-radius: 20px; margin: 5px; font-size: 14px; `; const Form33 = () => { const [streak, setStreak] = useState(0); const [lastLogin, setLastLogin] = useState(null); const [badges, setBadges] = useState({}); useEffect(() => { // Load streak from localStorage const saved = localStorage.getItem('loginStreak'); const last = localStorage.getItem('lastLogin'); if (saved && last) { const lastDate = new Date(last); const today = new Date(); const diffDays = Math.floor((today - lastDate) / (1000 * 60 * 60 * 24)); if (diffDays === 1) { // Consecutive day setStreak(parseInt(saved) + 1); } else if (diffDays === 0) { // Same day setStreak(parseInt(saved)); } else { // Streak broken setStreak(1); } } else { setStreak(1); } setLastLogin(new Date().toDateString()); }, []); useEffect(() => { // Update badges based on streak setBadges({ firstLogin: streak >= 1, threeDay: streak >= 3, weekly: streak >= 7, monthly: streak >= 30, veteran: streak >= 100 }); }, [streak]); const handleLogin = () => { localStorage.setItem('loginStreak', streak.toString()); localStorage.setItem('lastLogin', new Date().toISOString()); console.log('Logged in with streak:', streak); }; const generateCalendarDays = () => { const days = []; const today = new Date().getDay(); for (let i = 6; i >= 0; i--) { const dayIndex = (today - i + 7) % 7; days.push({ name: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][dayIndex], active: i === 0, streak: i < streak && i < 7 }); } return days; }; return ( <Container> <Form> <StreakCounter> <FiTrendingUp size={30} /> <StreakNumber>{streak}</StreakNumber> <div>Day Streak</div> <div style={{ fontSize: 14, opacity: 0.9 }}> Last login: {lastLogin || 'Today'} </div> </StreakCounter> <h3 style={{ marginBottom: 10 }}>This Week</h3> <Calendar> {generateCalendarDays().map((day, index) => ( <Day key={index} active={day.active} streak={day.streak}> {day.name[0]} </Day> ))} </Calendar> <h3 style={{ margin: '20px 0 10px' }}>Achievements</h3> <div> <Badge achieved={badges.firstLogin}> <FiStar /> First Login </Badge> <Badge achieved={badges.threeDay}> <FiAward /> 3-Day Streak </Badge> <Badge achieved={badges.weekly}> <FiAward /> Weekly Warrior </Badge> <Badge achieved={badges.monthly}> <FiAward /> Monthly Master </Badge> <Badge achieved={badges.veteran}> <FiAward /> Century Club </Badge> </div> <input type="email" placeholder="Email" style={inputStyle} /> <input type="password" placeholder="Password" style={inputStyle} /> <button style={buttonStyle} onClick={handleLogin}> Login & Continue Streak </button> </Form> </Container> ); }; const inputStyle = { width: '100%', padding: '12px', margin: '8px 0', border: '1px solid #ddd', borderRadius: '5px', fontSize: '16px' }; const buttonStyle = { width: '100%', padding: '12px', background: '#667eea', color: 'white', border: 'none', borderRadius: '5px', fontSize: '16px', cursor: 'pointer', marginTop: '20px' }; export default Form33;

Form 34: Accessibility-Focused Login

Introduction: Highly accessible login form with WCAG compliance and assistive features.

Features: Screen reader support, high contrast mode, adjustable font size, keyboard navigation.

import React, { useState } from 'react'; import styled from 'styled-components'; import { FiEye, FiEyeOff, FiVolume2, FiType } from 'react-icons/fi'; const Container = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background: ${props => props.highContrast ? '#000' : '#f8f9fa'}; transition: background 0.3s; `; const Form = styled.form` background: ${props => props.highContrast ? '#000' : 'white'}; padding: 40px; border-radius: 10px; width: 450px; border: ${props => props.highContrast ? '2px solid #fff' : 'none'}; `; const Title = styled.h2` text-align: center; color: ${props => props.highContrast ? '#fff' : '#333'}; font-size: ${props => props.fontSize}px; margin-bottom: 30px; `; const Label = styled.label` display: block; color: ${props => props.highContrast ? '#fff' : '#333'}; font-size: ${props => props.fontSize}px; margin: 10px 0 5px; font-weight: bold; `; const Input = styled.input` width: 100%; padding: ${props => props.fontSize * 0.75}px; margin: 5px 0; border: 2px solid ${props => props.highContrast ? '#fff' : '#ddd'}; border-radius: 5px; background: ${props => props.highContrast ? '#000' : 'white'}; color: ${props => props.highContrast ? '#fff' : '#333'}; font-size: ${props => props.fontSize}px; &:focus { outline: 3px solid ${props => props.highContrast ? '#fff' : '#667eea'}; outline-offset: 2px; } `; const Button = styled.button` width: 100%; padding: ${props => props.fontSize * 0.75}px; background: ${props => props.highContrast ? '#fff' : '#667eea'}; color: ${props => props.highContrast ? '#000' : 'white'}; border: 2px solid ${props => props.highContrast ? '#fff' : 'transparent'}; border-radius: 5px; font-size: ${props => props.fontSize}px; cursor: pointer; margin-top: 20px; &:focus { outline: 3px solid ${props => props.highContrast ? '#fff' : '#764ba2'}; outline-offset: 2px; } `; const Controls = styled.div` display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; `; const ControlButton = styled.button` padding: 10px; background: ${props => props.active ? '#667eea' : '#f0f0f0'}; color: ${props => props.active ? 'white' : '#333'}; border: 2px solid ${props => props.active ? '#667eea' : '#ddd'}; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 5px; &:focus { outline: 3px solid #667eea; } `; const ErrorMessage = styled.div` color: #e74c3c; font-size: ${props => props.fontSize * 0.875}px; margin: 5px 0; role: alert; `; const Form34 = () => { const [formData, setFormData] = useState({ email: '', password: '' }); const [errors, setErrors] = useState({}); const [showPassword, setShowPassword] = useState(false); const [highContrast, setHighContrast] = useState(false); const [fontSize, setFontSize] = useState(16); const [announcement, setAnnouncement] = useState(''); const validateForm = () => { const newErrors = {}; if (!formData.email.includes('@')) { newErrors.email = 'Please enter a valid email address'; } if (formData.password.length < 8) { newErrors.password = 'Password must be at least 8 characters'; } setErrors(newErrors); // Screen reader announcement if (Object.keys(newErrors).length === 0) { setAnnouncement('Form is valid. Ready to submit.'); } else { setAnnouncement('Please fix the errors in the form.'); } return Object.keys(newErrors).length === 0; }; const handleSubmit = (e) => { e.preventDefault(); if (validateForm()) { setAnnouncement('Logging in successfully'); console.log('Login:', formData); } }; return ( <Container highContrast={highContrast}> <Form highContrast={highContrast} onSubmit={handleSubmit}> {/* Accessibility announcement for screen readers */} <div role="status" aria-live="polite" style={{ position: 'absolute', left: '-9999px' }}> {announcement} </div> <Controls> <ControlButton onClick={() => setFontSize(prev => Math.min(24, prev + 2))} aria-label="Increase font size" > <FiType /> A+ </ControlButton> <ControlButton onClick={() => setFontSize(prev => Math.max(12, prev - 2))} aria-label="Decrease font size" > <FiType /> A- </ControlButton> <ControlButton active={highContrast} onClick={() => setHighContrast(!highContrast)} aria-label="Toggle high contrast" > <FiEye /> Contrast </ControlButton> </Controls> <Title highContrast={highContrast} fontSize={fontSize * 1.5}> Accessible Login </Title> <Label htmlFor="email" highContrast={highContrast} fontSize={fontSize}> Email Address </Label> <Input id="email" type="email" highContrast={highContrast} fontSize={fontSize} value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} aria-required="true" aria-invalid={!!errors.email} aria-describedby="email-error" /> {errors.email && ( <ErrorMessage id="email-error" fontSize={fontSize} role="alert"> {errors.email} </ErrorMessage> )} <Label htmlFor="password" highContrast={highContrast} fontSize={fontSize}> Password </Label> <div style={{ position: 'relative' }}> <Input id="password" type={showPassword ? 'text' : 'password'} highContrast={highContrast} fontSize={fontSize} value={formData.password} onChange={(e) => setFormData({...formData, password: e.target.value})} aria-required="true" aria-invalid={!!errors.password} aria-describedby="password-error" /> <button type="button" onClick={() => setShowPassword(!showPassword)} style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer' }} aria-label={showPassword ? 'Hide password' : 'Show password'} > {showPassword ? <FiEyeOff /> : <FiEye />} </button> </div> {errors.password && ( <ErrorMessage id="password-error" fontSize={fontSize} role="alert"> {errors.password} </ErrorMessage> )} <div style={{ margin: '15px 0' }}> <Label highContrast={highContrast} fontSize={fontSize}> <input type="checkbox" aria-label="Remember me" /> Remember me </Label> </div> <Button type="submit" highContrast={highContrast} fontSize={fontSize} aria-label="Sign in to your account" > Sign In </Button> <div style={{ marginTop: 20, textAlign: 'center' }}> <a href="#" style={{ color: highContrast ? '#fff' : '#667eea', fontSize: fontSize }} aria-label="Forgot password? Click to reset" > Forgot Password? </a> </div> </Form> </Container> ); }; export default Form34;

Form 35: Blockchain Wallet Login

Introduction: Cryptocurrency-themed login with wallet connection and Web3 integration.

Features: Wallet connect, Ethereum address display, balance check, transaction signing simulation.

```jsx
import React, { useState } from 'react';
import styled from 'styled-components';
import { FiLink, FiCopy, FiCheck } from 'react-icons/fi';

const Container = styled.div display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);;

const Form = styled.div background: white; padding: 40px; border-radius: 10px; width: 450px;;

const WalletCard = styled.div background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 20px 0;;

const Address = styled.div font-family: monospace; background: #e9ecef; padding: 10px; border-radius: 5px; font-size: 14px; display: flex; align-items: center; justify-content: space-between;;

const Balance = styled.div font-size: 24px; font-weight: bold; color: #28a745; margin: 10px 0;;

const Form35 = () => {
const [connected, setConnected] = useState(false);
const [wallet, setWallet] = useState({
address: '',
balance: '0',
network: 'mainnet'
});
const [copied, setCopied] = useState(false);

const connectWallet = () => {
// Simulate wallet connection
setTimeout(() => {
setConnected(true);
setWallet({
address: '0x742d35Cc6634C0532925a3b844Bc