Question 297060 in Html Question posted in
Some basic documentation can be found here.

Opening a new HTML file upon logging in

I can not get to the file success.html upon successfully logging in.

Here’s my client side code

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <style>
     //CSS Styles
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm" action="/login" method="POST">
            <div>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>

    <script>
        document.getElementById('loginForm').addEventListener('submit', async (event) => {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            const response = await fetch('/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `username=${username}&password=${password}`
            });

            const result = await response.text();
           //window.location.href = result.filename;
           //alert(result);
        });
    </script>
</body>
</html>

and here’s my server side code

const express = require('express');
const sql = require('mssql');
const app = express();
const port = 3000;

const config = {
    user: 'sa',
    password: 'Imbatman',
    server: 'localhost',
    database: 'KitchenWardrobes',
    options: {
        encrypt: true,
        trustServerCertificate: true
    }
};

app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/login.html');
});

app.post('/login', (req, res) => {
    const { username, password } = req.body;

    sql.connect(config, (err) => {
        if (err) {
            console.log('Failed to connect to SQL Server.', err);
            res.status(500).send('Failed to connect to the database');
        } else {
            const request = new sql.Request();
            request.query(`SELECT * FROM dbo.Users WHERE userName = '${username}' AND passwordd = '${password}'`, (err, result) => {
                if (err) {
                    console.log('Failed to execute SQL query.');
                    res.status(500).send('Failed to execute SQL query');
                } else {
                    if (result.recordset.length > 0) {
                        // Redirect to /success on successful login
                        res.redirect('/success');
                    } else {
                        // Invalid credentials
                        res.send('Invalid username or password');
                    }
                }
            });
        }
    });
});

// Define route for success.html
app.get('/success', (req, res) => {
    res.sendFile(__dirname + '/success.html');
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

I am very much new to using Node.js and I have been trying to fix this for quite some days now. I also tried sending a response to the client side and redirecting from there but that did not work too.

Tags:

2

Answers


  1. 0

    Here is the updated code:

    server.js

    app.post('/login', (req, res) => {
    const { username, password } = req.body;
    // ...
                if (result.recordset.length > 0) {
                    res.send('/success'); // res.redirect('/success');
                } else {
                    res.send('Invalid username or password');
                }
    // ...
});

    login.html

        const response = await fetch('/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `username=${username}&password=${password}`
    });
    const result = await response.text();
    window.location.href = result;

    I tested this code and it worked.

    Login or Signup to reply.
  2. 0

    I noticed that res.send doesn’t usually work and in nodejs. So I just send a confirmatory message in the backend, then I’ll use window.location.href in the login.html file to redirect.

    Here’s an example here;

    app.post('/login', (req, res) => {
    const { username, password } = req.body;
    // your code here
  if (result.recordset.length > 0) {
    res.json({ status: 'ok' });
} else {
    res.json({ status: 'error', error: 'Invalid credentials' });
}
    //Your remaining code...
});

    Then your Login form code.

        const response = await fetch('/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `username=${username}&password=${password}`
                });
    
    if (result.status === 'ok') {
            alert('Success');
window.location.href = 'http://"Your server location"/success'.
         } else {
         alert(result.error)
        }

    You can try it like this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search