added crypress test logic and improved login page

cypress/e2e/login.cy.js

@@ -1,2 +1,29 @@
+// cypress/e2e/login.cy.js
+
 describe('Login Component', () => {
-}) 
+  const username = 'Jane Doe';
+  const password = 'supersecret';
+
+  beforeEach(() => {
+    // assumes your dev server is at localhost:3000
+    cy.visit('/');
+  });
+
+  it('renders the login form', () => {
+    cy.contains('h2', 'Login');
+    cy.get('input[name="name"]').should('be.visible');
+    cy.get('input[name="password"]').should('be.visible');
+    cy.get('button[type="submit"]').contains('Login');
+  });
+
+  it('allows a user to log in and shows the welcome screen', () => {
+    // fill out and submit
+    cy.get('input[name="name"]').type(username);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    // should render Welcome component
+    cy.contains(`Welcome, ${username}!`).should('be.visible');
+    cy.get('button').contains('Logout').should('be.visible');
+  });
+});

src/components/LoginForm.js

@@ -2,51 +2,43 @@ import React, { useState } from 'react';
 import './LoginForm.css';
 
 function LoginForm({ onLogin }) {
-  const [formData, setFormData] = useState({
-    name: '',
-    password: ''
-  });
+  const [formData, setFormData] = useState({ name: '', password: '' });
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setFormData(prevState => ({
-      ...prevState,
-      [name]: value
-    }));
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onLogin(formData);
   };
 
   return (
-    <div className="login-form-container">
-      <form className="login-form">
-        <h2>Login</h2>
-        <div className="form-group">
-          <label htmlFor="name">Name:</label>
-          <input
-            type="text"
-            id="name"
-            name="name"
-            value={formData.name}
-            onChange={handleChange}
-            required
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="password">Password:</label>
-          <input
-            type="password"
-            id="password"
-            name="password"
-            value={formData.password}
-            onChange={handleChange}
-            required
-          />
-        </div>
-        <button type="submit" className="login-button">
-          Login
-        </button>
-      </form>
-    </div>
+    <form className="login-form" onSubmit={handleSubmit}>
+      <h2>Login</h2>
+      <label>
+        Name:
+        <input
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+          placeholder="Name"
+        />
+      </label>
+      <label>
+        Password:
+        <input
+          name="password"
+          type="password"
+          value={formData.password}
+          onChange={handleChange}
+          placeholder="Password"
+        />
+      </label>
+      <button type="submit">Login</button>
+    </form>
   );
 }
 
-export default LoginForm; 
+export default LoginForm;