Login

{ "name": "react-login-form", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", "styled-components": "^6.1.11", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } import React, { useState } from 'react'; import styled from 'styled-components'; // Styled Components const FormContainer = styled.div` display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f2f5; padding: 20px; `; const Form = styled.form` background-color: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; box-sizing: border-box; `; const Title = styled.h2` color: #333; margin-bottom: 30px; text-align: center; font-size: 1.8rem; `; const FormGroup = styled.div` margin-bottom: 20px; position: relative; /* For password toggle positioning */ `; const Label = styled.label` display: block; margin-bottom: 8px; color: #555; font-weight: bold; font-size: 0.9rem; `; const Input = styled.input` width: 100%; padding: 12px; border: 1px solid ${props => (props['aria-invalid'] ? '#dc3545' : '#ccc')}; border-radius: 4px; font-size: 1rem; box-sizing: border-box; transition: border-color 0.2s ease-in-out; &:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } `; const PasswordWrapper = styled.div` position: relative; display: flex; align-items: center; `; const PasswordInput = styled(Input)` padding-right: 45px; /* Space for the toggle button */ `; const ToggleButton = styled.button` position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #666; font-size: 0.9rem; padding: 5px; &:focus { outline: none; color: #007bff; } `; const ErrorMessage = styled.p` color: #dc3545; font-size: 0.8rem; margin-top: 5px; min-height: 1.2em; /* Reserve space to prevent layout shifts */ `; const SubmitButton = styled.button` width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; gap: 8px; &:hover { background-color: #0056b3; } &:disabled { background-color: #6c757d; cursor: not-allowed; opacity: 0.7; } `; const Spinner = styled.div` border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top: 3px solid #fff; width: 16px; height: 16px; animation: spin 1s linear infinite; @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; const ForgotPasswordLink = styled.a` display: block; margin-top: 15px; text-align: center; color: #007bff; text-decoration: none; font-size: 0.9rem; &:hover { text-decoration: underline; } `; // Email validation regex const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const LoginForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [showPassword, setShowPassword] = useState(false); const [emailError, setEmailError] = useState(''); const [passwordError, setPasswordError] = useState(''); const [isLoading, setIsLoading] = useState(false); const validateEmail = (value) => { if (!value) { return 'Email is required'; } if (!EMAIL_REGEX.test(value)) { return 'Please enter a valid email address'; } return ''; }; const validatePassword = (value) => { if (!value) { return 'Password is required'; } // Add more complex password rules if needed // if (value.length < 8) { // return 'Password must be at least 8 characters long'; // } return ''; }; const handleEmailChange = (e) => { const value = e.target.value; setEmail(value); if (emailError) { setEmailError(validateEmail(value)); } }; const handlePasswordChange = (e) => { const value = e.target.value; setPassword(value); if (passwordError) { setPasswordError(validatePassword(value)); } }; const handleEmailBlur = () => { setEmailError(validateEmail(email)); }; const handlePasswordBlur = () => { setPasswordError(validatePassword(password)); }; const togglePasswordVisibility = () => { setShowPassword(prevShow => !prevShow); }; const handleSubmit = (e) => { e.preventDefault(); // Trigger validation on submit const currentEmailError = validateEmail(email); const currentPasswordError = validatePassword(password); setEmailError(currentEmailError); setPasswordError(currentPasswordError); if (currentEmailError || currentPasswordError) { return; // Don't submit if there are errors } setIsLoading(true); // Simulate API call console.log('Submitting:', { email, password }); setTimeout(() => { setIsLoading(false); console.log('Login successful (simulated)'); // Handle successful login (e.g., redirect, update auth state) alert('Login successful! (Simulated)'); // Reset form potentially // setEmail(''); // setPassword(''); }, 2000); // Simulate 2 seconds loading time }; return ( ); }; export default LoginForm; import React from 'react'; import LoginForm from './components/LoginForm'; import './App.css'; // Optional: for any global app styles if needed function App() { return (

); } export default App; /* Add any global App styles here if needed, */ /* but most styling is handled by styled-components in LoginForm.jsx */ .App { /* Example: Ensure full height if needed */ /* min-height: 100vh; */ } import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; // Basic resets and global styles import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f0f2f5; /* Match form container background */ } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } /* Basic reset */ * { box-sizing: border-box; margin: 0; padding: 0; } React Login Form