✨ log in features working and new script for tables rows deletion if needed

db_clean.sql

@@ -0,0 +1,3 @@
+USE maettleship;
+
+DELETE FROM users;

index.js

@@ -39,6 +39,31 @@ app.get('/game', (req, res) => {
   res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
 })
 
+app.post('/logIn', (req, res) => {
+  const { pseudo, password } = req.body;
+
+  if (!pseudo || !password) {
+    return res.status(400).send('Email and password are required.');
+  }
+
+  const query = 'SELECT * FROM users WHERE pseudo = ? AND password = ?';
+  db.query(query, [pseudo, password], (err, results) => {
+    if (err) {
+      console.error('Error inserting user into the database:', err);
+      return res.status(500).send({message: 'Internal server error.'});
+    }
+
+    if (results.length === 1) {
+      const token = jwt.sign({ pseudo }, secretKey, { expiresIn: '1h' });
+      res.cookie('authToken', token, { httpOnly: true, secure: false });
+
+      res.status(201).send({message: 'User logged in successfully.', redirectUrl: '/game' });
+    } else {
+      res.status(401).send({message: "Username or password is incorrect"})
+    }
+  })
+})
+
 app.post('/register', (req, res) => {
   const { pseudo, password } = req.body;
 

public/pages/connectionView.html

@@ -20,6 +20,20 @@
         <div id="message"></div>
     </div>
 
+    <div class="container">
+        <h1>Log in</h1>
+        <form id="logInForm">
+            <label for="email">Pseudo :</label>
+            <input type="text" id="pseudoLogIn" name="pseudo" required>
+            
+            <label for="password">Password:</label>
+            <input type="password" id="passwordLogIn" name="password" required>
+            
+            <button type="submit">Log in</button>
+        </form>
+        <div id="messageLogIn"></div>
+    </div>
+    
     <script src="../scripts/connection.js"></script>
 </body>
 </html>

public/scripts/connection.js

@@ -1,5 +1,5 @@
 document.getElementById('registerForm').addEventListener('submit', async function (event) {
-    event.preventDefault(); // Prevent the default form submission
+    event.preventDefault();
 
     const pseudo = document.getElementById('pseudo').value;
     const password = document.getElementById('password').value;
@@ -32,3 +32,36 @@ document.getElementById('registerForm').addEventListener('submit', async functio
         messageDiv.style.color = 'red';
     }
 });
+
+document.getElementById('logInForm').addEventListener('submit', async function (event) {
+    event.preventDefault();
+
+    const pseudo = document.getElementById('pseudoLogIn').value;
+    const password = document.getElementById('passwordLogIn').value;
+    const messageDiv = document.getElementById('messageLogIn');
+
+    try {
+        const response = await fetch('/logIn', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ pseudo, password }),
+        });
+
+        const result = await response.json();
+        
+        if (response.ok) {
+            messageDiv.textContent = 'User logged in successfully!';
+            messageDiv.style.color = 'green';
+            window.location.href = result.redirectUrl;
+        } else {
+            messageDiv.textContent = `Error: ${result.message || 'Unknown error'}`;
+            messageDiv.style.color = 'red';
+        }
+    } catch (error) {
+        console.log("testEL")
+        messageDiv.textContent = `Error: ${error.message}`;
+        messageDiv.style.color = 'red';
+    }
+});