Merge pull request #82 from agiledev-students-spring2024/LoginMock

added login validation functionality

back-end/App.js

@@ -2,6 +2,10 @@ const express = require("express");
 const cors = require('cors'); // middleware for enabling CORS (Cross-Origin Resource Sharing) requests.
 
 const app = express();
+
+// Import user data
+const userData = require('./mockDatabase.json');
+
 app.use(cors()); // allow cross-origin resource sharing
 
 app.use(express.json()); // decode JSON-formatted incoming POST data
@@ -307,6 +311,28 @@ app.post('/editprofile', (req, res) => {
   }
 });
 
+app.post('/login', (req, res) => {
+  const { username, password } = req.body;
+  console.log('Received login attempt:', username, password); // Debug
+
+  let foundUser = false;
+  for (const key in userData) {
+    if (userData[key].login.username === username && userData[key].login.password === password) {
+      foundUser = true;
+      break; // Stop the loop once the user is found
+    }
+  }
+
+  if (foundUser) {
+    console.log('Login successful for:', username); // Debug
+    res.json({ message: "Login successful" });
+  } else {
+    console.log('Login failed for:', username); // Debug
+    res.status(401).json({ message: "Invalid username or password" });
+  }
+});
+
+
 
 
 

back-end/mockDatabase.json

@@ -52,7 +52,7 @@
     "TaylorSwift": {
         "login": {
             "username": "john123",
-            "password": "qwerasdf"
+            "password": "qwerasdff"
         },
 
         "profile": {

front-end/src/LoginForm.js

@@ -5,18 +5,42 @@ import './landingPages.css';
 function LoginForm() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
   const navigate = useNavigate();
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     console.log('Login with:', username, password);
-    navigate('/matches');
+
+    try {
+      const response = await fetch('http://localhost:3001/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        console.log('Login successful:', data);
+        navigate('/matches');
+      } else {
+        console.error('Login failed:', data.message);
+        setLoginError(data.message);
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+      setLoginError('Failed to connect to the server.');
+    }
   };
 
   return (
     <div className="landingPage-container">
       <div className="landingPage-form-container">
         <h2 className="landingPage-title">Welcome Back!</h2>
+        {loginError && <div className="login-error-message">{loginError}</div>}
         <form className="landingPage-form" onSubmit={handleSubmit}>
           <input
             type="text"

front-end/src/landingPages.css

@@ -71,6 +71,14 @@
   text-decoration: underline;
 }
 
+
+.login-error-message {
+  color: red;
+  font-size: 1.2em;
+  margin-bottom: 15px;
+}
+
+
 /* iPhone 14 Pro Max specific styles */
 @media only screen and (max-width: 428px) {
   .landingPage-form-container {