From afc45196d8ef8ad695b0368747f3048015fc25ed Mon Sep 17 00:00:00 2001
From: Aman_S <100036754+Frenzy117@users.noreply.github.com>
Date: Mon, 19 May 2025 16:40:16 -0400
Subject: [PATCH 1/5] Initial Thoughts
---
cypress/e2e/login.cy.js | 13 +++++++++++++
src/components/LoginForm.js | 11 ++++++++++-
2 files changed, 23 insertions(+), 1 deletion(-)
diff --git a/cypress/e2e/login.cy.js b/cypress/e2e/login.cy.js
index c2fbb3a..fed8732 100644
--- a/cypress/e2e/login.cy.js
+++ b/cypress/e2e/login.cy.js
@@ -1,2 +1,15 @@
describe('Login Component', () => {
+ it('logs in successfully',() => {
+ cy.visit('http://localhost:3000/login')
+ cy.get('input[name="name"]')//get the name input field
+ cy.get('input[name="password"]')//get the password input field
+ cy.get('input[name="name"]').type('testuser')
+ cy.get('input[name="password"]').type('testpassword')// fill both up with user and pass
+ cy.get('button[type="submit"]').click()//click the login button
+ cy.get('.welcome-container').should('exist')//welcome page should be rendered, since this is the class of the main container
+ //didn't really go for getting the url since after doing heavy editting, I figured the URL doesn't change
+ //and that there's no explicit paths set for each of the pages
+
+ //this should be enough for the entire flow.
+ })
})
\ No newline at end of file
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 26c8cc3..001c529 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -2,6 +2,12 @@ import React, { useState } from 'react';
import './LoginForm.css';
function LoginForm({ onLogin }) {
+
+ //Cypress put the inputs in correctly and clicjed the button. but nothing happened, even through the user information was passed correctly
+ //So far, onLogin is not being used or called.
+ //therefore, no connection between the main App, the Login Form, and the Welcome screens.
+ // doesn't know we have logged in. So state/ page doesn't change
+
const [formData, setFormData] = useState({
name: '',
password: ''
@@ -17,10 +23,13 @@ function LoginForm({ onLogin }) {
return (
+
+ {/* Got the approach from chatGPT on how basic form submissions are handled*/}
From 8f029afa324ad734d74cfea3e662f2d1a322da8e Mon Sep 17 00:00:00 2001
From: Aman_S <100036754+Frenzy117@users.noreply.github.com>
Date: Mon, 19 May 2025 16:45:26 -0400
Subject: [PATCH 2/5] Connecting the components to each other possibly (no
result)
---
src/App.js | 4 ++--
src/components/LoginForm.js | 8 +++++++-
2 files changed, 9 insertions(+), 3 deletions(-)
diff --git a/src/App.js b/src/App.js
index c383c91..1ae8214 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,12 +10,12 @@ function App() {
const handleLogin = (formData) => {
// In a real app, you would validate credentials here
setIsLoggedIn(true);
- setUserName(formData.name);
+ setUserName(formData.name);//this wont be called since onLogin is never called in the first place
};
const handleLogout = () => {
setIsLoggedIn(false);
- setUserName('');
+ setUserName(''); //nothing to change or worry about here
};
return (
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js
index 001c529..4f082fe 100644
--- a/src/components/LoginForm.js
+++ b/src/components/LoginForm.js
@@ -20,6 +20,12 @@ function LoginForm({ onLogin }) {
[name]: value
}));
};
+ //finally caling onLogin through the button. This SHOULD make the Login page talk to the App page. The button also has a function now.
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ onLogin(formData);
+ };
+
return (