create a simple login form with login server logic in javascript

<!DOCTYPE html>
<html>
<head>
    <title>Login Form</title>
</head>
<body>
    <h2>Login Form</h2>
    <form id="loginForm">
        <label for="username">Username:</label><br>
        <input type="text" id="username" name="username"><br>
        <label for="password">Password:</label><br>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit">Login</button>
    </form>

    <p id="message"></p>

    <script>
        document.getElementById("loginForm").addEventListener("submit", function(event) {
            event.preventDefault();
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;
            fetch("/login", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                if(data.success) {
                    document.getElementById("message").innerText = "Login successful";
                } else {
                    document.getElementById("message").innerText = "Login failed. Please try again.";
                }
            });
        });
    </script>
</body>
</html>

1367 chars
42 lines
index.tsx
const express = require("express");
const bodyParser = require("body-parser");

const app = express();
const PORT = 3000;

let users = [
    { username: "admin", password: "password123" }
];

app.use(bodyParser.json());

app.post("/login", (req, res) => {
    const { username, password } = req.body;
    
    const user = users.find(user => user.username === username && user.password === password);
    
    if(user) {
        res.json({ success: true });
    } else {
        res.json({ success: false });
    }
});

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

615 chars
28 lines

similar javascript code snippets

create a html templating engine in javascript
return a html response from a http server in javascript
how to read a file in javascript
read a text file in javascript
how to change the border of an element in javascript
how to connect to mongodb in javascript
create a popup dialogue in javascript
how to get an element by tag name in javascript
create a carousel in html in javascript
render a react calculator in javascript

related categories

javascript
html
node.js

gistlibby LogSnag