Assignment submission

cypress/e2e/login.cy.js

@@ -1,2 +1,36 @@
-describe('Login Component', () => {
-}) 
+describe('Login Functionality', () => {
+    beforeEach(() => {
+        cy.visit('/');
+    });
+
+    it('should validate login form inputs and submission', () => {
+        // Test form validation
+        cy.get('button[type="submit"]').click();
+        cy.get('input[name="name"]').should('have.attr', 'required');
+        cy.get('input[name="password"]').should('have.attr', 'required');
+
+        // Test form inputs
+        cy.get('input[name="name"]').type('testuser');
+        cy.get('input[name="password"]').type('password123');
+
+        // Verify input values
+        cy.get('input[name="name"]').should('have.value', 'testuser');
+        cy.get('input[name="password"]').should('have.value', 'password123');
+    });
+
+    it('should successfully login and redirect to welcome page', () => {
+        // Fill in login form
+        cy.get('input[name="name"]').type('testuser');
+        cy.get('input[name="password"]').type('password123');
+
+        // Submit form
+        cy.get('button[type="submit"]').click();
+
+        // Verify redirect to welcome page
+        cy.get('.welcome-card').should('be.visible');
+        cy.get('.welcome-card h1').should('contain', 'Welcome, testuser!');
+
+        // Verify logout button is present
+        cy.get('.logout-button').should('be.visible');
+    });
+});

src/components/LoginForm.js

@@ -2,51 +2,56 @@ 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
-    }));
-  };
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setFormData((prevState) => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
 
-  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
-          />
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onLogin(formData);
+    };
+
+    return (
+        <div className='login-form-container'>
+            <form className='login-form' onSubmit={handleSubmit}>
+                <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>
-        <button type="submit" className="login-button">
-          Login
-        </button>
-      </form>
-    </div>
-  );
+    );
 }
 
-export default LoginForm; 
+export default LoginForm;