Habeeb4shittu test

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+    env: {
+        browser: true,
+        node: true,
+        'cypress/globals': true,
+    },
+    plugins: ['cypress'],
+    rules: {
+        'cypress/no-assigning-return-values': 'error', // Prevents assigning return values from Cypress commands
+        'cypress/no-unnecessary-waiting': 'warn', // Warns against using cy.wait() unnecessarily
+        'cypress/assertion-before-screenshot': 'error', // Ensures assertions are made before taking screenshots
+        'cypress/no-async-tests': 'error', // Prevents using async/await in Cypress tests
+    },
+    extends: [
+        'plugin:cypress/recommended'
+    ],
+};

cypress/e2e/login.cy.js

@@ -1,2 +1,27 @@
+/// <reference types="cypress" />
 describe('Login Component', () => {
-}) 
+    beforeEach(() => {
+        cy.visit('/'); // Adjust if needed (e.g. localhost:3000 or specific route)
+    });
+
+    it('displays login form elements', () => {
+        cy.get('h2').should('contain', 'Login');
+        cy.get('input[name="name"]').should('exist');
+        cy.get('input[name="password"]').should('exist');
+        cy.get('button[type="submit"]').should('contain', 'Login');
+    });
+
+    it('shows error message if fields are empty', () => {
+        cy.get('button[type="submit"]').click();
+        cy.get('.error-message').should('contain', 'Name and Password cannot be empty');
+    });
+
+    it('logs in successfully and shows welcome message', () => {
+        cy.get('input[name="name"]').type('Habeeb');
+        cy.get('input[name="password"]').type('supersecret');
+        cy.get('button[type="submit"]').click();
+
+        cy.contains('Welcome, Habeeb!'); // Assuming Welcome component renders this
+        cy.get('button').contains('Logout').should('exist'); // Logout button from Welcome
+    });
+});

src/components/LoginForm.css

@@ -28,6 +28,7 @@
 .form-group label {
   display: block;
   margin-bottom: 0.5rem;
+  text-align: start;
   color: #555;
 }
 
@@ -64,4 +65,25 @@
 .login-button:focus {
   outline: none;
   box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
-} 
+}
+
+.error-container {
+  color: white;
+  background: #f00;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  padding: .8rem;
+  padding-block: .5rem;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  align-items: center;
+}
+
+.error-container button {
+  background: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  color: white;
+}

src/components/LoginForm.js

@@ -6,6 +6,19 @@ function LoginForm({ onLogin }) {
     name: '',
     password: ''
   });
+  const [error, setError] = useState(null);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (formData.name.trim() === "" || formData.password.trim() === "") {
+      setError("Name and Password cannot be empty");
+      return;
+    }
+
+
+    onLogin(formData);
+  }
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -17,8 +30,14 @@ function LoginForm({ onLogin }) {
 
   return (
     <div className="login-form-container">
-      <form className="login-form">
+      <form className="login-form" onSubmit={handleSubmit}>
         <h2>Login</h2>
+        {error && (
+          <div className='error-container'>
+            <p className='error-message'>{error}</p>
+            <button className='error-button' onClick={() => setError(null)}>X</button>
+          </div>
+        )}
         <div className="form-group">
           <label htmlFor="name">Name:</label>
           <input
@@ -27,7 +46,6 @@ function LoginForm({ onLogin }) {
             name="name"
             value={formData.name}
             onChange={handleChange}
-            required
           />
         </div>
         <div className="form-group">
@@ -38,7 +56,6 @@ function LoginForm({ onLogin }) {
             name="password"
             value={formData.password}
             onChange={handleChange}
-            required
           />
         </div>
         <button type="submit" className="login-button">

src/index.css

@@ -1,3 +1,9 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -10,4 +16,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}