From f6a129d4f7c05e8f72415eade9aad62a88096ccf Mon Sep 17 00:00:00 2001
From: Swarnil Kokulwar <swarnil.sk@gmail.com>
Date: Sat, 17 May 2025 15:47:36 +0530
Subject: [PATCH] bug fixed

---
 bugDescription.md           | 23 +++++++++++++++++++
 cypress/e2e/login.cy.js     | 46 ++++++++++++++++++++++++++++++++++++-
 src/components/LoginForm.js |  7 +++++-
 3 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 bugDescription.md

diff --git a/bugDescription.md b/bugDescription.md
new file mode 100644
index 0000000..016a118
--- /dev/null
+++ b/bugDescription.md
@@ -0,0 +1,23 @@
+# Bug Fix Documentation
+
+## Problem Overview  
+The login functionality in the `LoginForm` component was not behaving as expected. When users clicked the "Login" button, the page would reload and no login logic was triggered. This was due to the absence of an `onSubmit` event handler on the form.
+
+## Root Cause  
+By default, HTML forms trigger a full page reload on submission unless prevented. In this case, the form had no `onSubmit` handler, and the login data (`formData`) wasn’t being processed or passed to the parent component via the `onLogin` prop.
+
+## Resolution Steps  
+To resolve the issue:
+1. A `handleSubmitBtn` function was introduced to manage the form submission event.
+2. The function calls `e.preventDefault()` to block the default form behavior.
+3. The form data is then passed to the `onLogin` function received via props.
+4. The form tag was updated to use this handler for the `onSubmit` event.
+
+## Code Changes  
+In `LoginForm.js`, the following function was added:
+
+```javascript
+const handleSubmitBtn = (e) => {
+  e.preventDefault();
+  onLogin(formData);
+};
diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js
index c2fbb3a..ecb519f 100644
--- a/cypress/e2e/login.cy.js
+++ b/cypress/e2e/login.cy.js
@@ -1,2 +1,46 @@
 describe('Login Component', () => {
-}) 
\ No newline at end of file
+  //created users object for testing
+    const users = {
+      main: { name: 'swarnil', password: 'password@123' },
+      secondary: { name: 'testUser', password: 'password@1234' },
+    };
+  
+    //visited the login page before each test case
+    beforeEach(() => {
+      cy.visit('/');
+    });
+
+  //checked the login form visibility and required inputs and submit button
+    it('should display the login form with required inputs and a submit button', () => {
+      cy.get('.login-form').should('be.visible');
+      cy.get('input[name="name"]').should('be.visible');
+      cy.get('input[name="password"]').should('be.visible').and('have.attr', 'type', 'password');
+      cy.get('button[type="submit"]').should('exist').and('contain', 'Login');
+    });
+  
+    //checked the login functionality
+    it('should login with valid credentials and display welcome page', () => {
+      const { name, password } = users.main;
+  
+      cy.get('input[name="name"]').type(name);
+      cy.get('input[name="password"]').type(password);
+      cy.get('button[type="submit"]').click();
+      cy.get('.welcome-container').should('be.visible');
+      cy.get('h1').should('contain.text', `Welcome, ${name}`);
+    });
+  
+    it('should display logout button after login', () => {
+      const { name, password } = users.secondary;
+  
+      cy.get('input[name="name"]').type(name);
+      cy.get('input[name="password"]').type(password);
+      cy.get('button[type="submit"]').click();
+  
+      cy.get('.logout-button').should('be.visible').and('contain.text', 'Logout');
+
+      cy.get('.logout-button').click();
+      cy.get('.login-form').should('be.visible');
+    
+    });
+  });
+  
\ No newline at end of file
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 26c8cc3..341c8b8 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -15,9 +15,14 @@ function LoginForm({ onLogin }) {
     }));
   };
 
+  const handleSubmitBtn = (e) => {
+    e.preventDefault();
+    onLogin(formData);
+  };
+
   return (
     <div className="login-form-container">
-      <form className="login-form">
+      <form className="login-form" onSubmit={handleSubmitBtn}>
         <h2>Login</h2>
         <div className="form-group">
           <label htmlFor="name">Name:</label>