I'm having trouble removing the message (with the username displayed) after logging out by pressing the logout button. Every time I try to press the logout button, it just refreshes the page without any action. I want to stay on the same page and not be redirected elsewhere. Should I consider changing the type of the logout button to submit?
Here is the HTML code snippet:
<body>
<p id="after"><%= username %></p>
<div class="login">
<h1>Login</h1>
<form action="/" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" required />
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input
type="password"
name="password"
placeholder="Password"
id="password"
required
/>
<input type="submit" value="Login" />
<button id="logout" name="logout" type="button">Logout</button>
</form>
This is the JS CODE section:
app.get("/", function (req, res) {
const username = req.flash("user");
res.render("login", { username });
});
app.post("/", function (request, response) {
// Capture the input fields
let username = request.body.username;
let password = request.body.password;
// Ensure the input fields exists and are not empty
if (username && password) {
// Execute SQL query that'll select the account from the database based on the specified username and password
connection.query(
"SELECT * FROM accounts WHERE username = ? AND password = ?",
[username, password],
function (error, results, fields, name) {
// If there is an issue with the query, output the error
if (error) throw error;
// If the account exists
if (results.length > 0) {
request.session.loggedin = true;
request.session.username = username;
request.flash("user", request.body.username);
response.redirect("/");
} else {
response.send("Incorrect Username and/or Password!");
}
response.end();
}
);
} else {
response.send("Please enter Username and Password!");
response.end();
}
//try to logout
app.get("/", async (request, response) => {
if (request.flash.username) {
delete request.flash.username;
response.json({ result: "SUCCESS" });
} else {
response.json({ result: "ERROR", message: "baba" });
}
});
});
app.listen(port);
console.log(`Server is listening on port ${port}`);