form.html

<!DOCTYPE html>
<html>
    <head>
        <title>Login And Title Page</title>
        <link rel="stylesheet" href="form.css">
    </head>
<body>

<h2>Sign-Up</h2>

<input id="sign-username" placeholder="Username">
<br><br>
<input id="sign-password" type="password" placeholder="Password">
<br><br>

<button onclick="signup()">Sign Up</button>

<h2>Login</h2>

<input id="login-username" placeholder="Username">
<br><br>
<input id="login-password" type="password" placeholder="Password">
<br><br>

<button onclick="login()">Submit</button>

<p id="result"></p>

<script>
function login() {
    fetch("http://127.0.0.1:8000/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            username: document.getElementById("login-username").value,
            password: document.getElementById("login-password").value
        })
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("result").innerText = data.message;
    })
    .catch(err => console.error(err));
}

function signup() {
    fetch("http://127.0.0.1:8000/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            username: document.getElementById("sign-username").value,
            password: document.getElementById("sign-password").value
        })
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("result").innerText = data.message;
    })
    .catch(err => console.error(err));
}
</script>

</body>
</html>