-2

So I am using this file as a login page for a web application. But it doesn't seem like it does anything, the URL is changed but no console message is printed out and it does not show the proper resource in the web browser. The only thing that I can see in the browser when testing it is a "200" code is returned with an "OK" message.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Start Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Welcome to the Travel Tracker</h1>

    <form id="login-form">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
      
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
      
      <button type="submit">Login</button>
    </form>

    <p>Don't have an account? <a href="register.html">Register here</a>.</p>
  </div>
  <script>
    // Handle form submission
    document.getElementById('login-form').addEventListener('submit', async (event) => {
      event.preventDefault();
  
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
  
      try {
        const response = await axios.post('/api/login', { username, password });
        if (response.data.response === "Login successful") {
          console.log(`Successful login for user: ${username}`);
          // Redirect to the main app page on successful login
          //Send user to map.html with username as a query parameter

          window.location.replace(`https://localhost/map.html?username=${encodeURIComponent(username)}&t=${Date.now()}`);
        } else {
          console.log(`Failed login attempt for user: ${username}`);
          alert('Invalid login credentials. Please try again.');
        }
      } catch (error) {
        console.error(error);
        alert('An error occurred while logging in. Please try again.');
      }
    });
  </script>
</body>
</html>

I tried logging in on this page as a user which exists in the applications database. I have tried writing a lot of console logs to be able to find the error but none of them are printed.

Unsung
  • 1
  • 1
  • 1
    There's a lot of code you've provided here that I would expect to not be related to the specific issue you describe, can you update your snippet such that it conforms more to the guidance on creating a [mre]? – esqew May 09 '23 at 12:55
  • What do you mean "doesn't redirect". Does the page change or not? And for which URL do you see 200? "/api/login" or "/map.html"? – gre_gor May 09 '23 at 14:32

1 Answers1

0

Well once you redirect to a new URL, that new page will have a brand new console/devtools instance. Basically going to a new URL will clear the console.

So your message is probably being logged properly, but then you are immediately sent to a new URL and you can no longer see it.

Try adding a breakpoint on that console.log line in your devtools so you can see the code execution happening.

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • Since the URL is changed I am quite certain that the line itself is being executed. Perhaps the issue is the html file that is being returned? – Unsung May 09 '23 at 13:33